이 게시물에서는 반복 및 콜백 기능을 사용하여 기능을 유지하는 일반적으로 사용되는 Javascript 배열 메서드에 대해 알아봅니다.

반복은 일련의 명령문이나 코드 블록을 반복적으로 실행하는 것을 말하며, 이를 통해 동일한 작업을 여러 번 수행할 수 있습니다.

간단히 말하면 콜백은 다른 함수에 인수로 전달되는 함수 정의입니다.

간단한 설명을 위해 다음 세 가지 사항에 중점을 두겠습니다.

1. 특정 배열 방법을 사용해야 하는 경우.
2. 배열 메서드가 반환하는 내용.
3. 배열 메소드의 코드 예입니다. **

계속하기 전에 이러한 배열 메서드가 어떻게 구성되어 있는지 이해해 보겠습니다.

// 배열 메서드(콜백(배열의 각 항목에 대해 실행하려는 조건))

이러한 각 배열 메서드는 콜백을 인수로 받는 함수입니다. 이 콜백에서 각 배열 항목에 대해 실행하려는 조건을 지정합니다.

예제에서는 이 객체 배열을 사용합니다.

`상수 데이터 = [
{
"사용자 ID": 1,
"사용자 이름": "프란시스",
"message": "안녕하세요?",
"타임스탬프": "2024-02-18T12:30:00Z",
"상태": "온라인",
"메시지 전송됨": 28,
"역할": "사용자",
"passCode": "293087O7764"

},
{
"userId": 2,
"사용자 이름": "모세",
"message": "나쁘진 않아요. 그냥 프로젝트 작업 중이에요.",
"타임스탬프": "2024-02-18T12:35:00Z",
"status": "자리 비움",
"메시지 전송됨": 74,
"역할": "사용자",
"비밀번호": "675147O2234"
},
{
"userId": 3,
"사용자 이름": "비키",
"message": "안녕하세요 여러분! 최근 가십은 무엇인가요?",
"타임스탬프": "2024-02-18T12:40:00Z",
"상태": "온라인",
"메시지 전송됨": 271,
"role": "조정자",
"비밀번호": "76352O8069"

},
{
"userId": 4,
"사용자 이름": "주니어",
"message": "별로, 그냥 쉬고 있어요. 당신은 어때요?",
"타임스탬프": "2024-02-18T12:45:00Z",
"상태": "오프라인",
"메시지 전송됨": 125,
"역할": "관리자",
"passCode": "21876O3483"
}
]`

forEach: forEach는 모든 배열 항목에 대해 조건을 실행하려고 할 때 사용됩니다. forEach는 정의되지 않은 값을 반환합니다.

함수 getMessageSent(사용자){
sumMessageSent = 0;
users.forEach(함수(사용자){
sumMessageSent = user.messageSent;
})
sumMessageSent;
반환 }
getMessageSent(data) // 출력: 498

reduce: 감소는 배열을 단일 값으로 줄이는 데 사용됩니다. 예를 들어 이 배열 [8, 7, 3]은 숫자 18로 줄일 수 있습니다. 감속기는 단일 값을 반환합니다.

리듀서 함수는 두 개의 매개변수를 취합니다. 첫 번째는 리듀서(전체와 현재로 구성됨)이고 두 번째는 초기 값입니다.

전체: 이것은 일반적으로 누산기(accumulator)라고 불립니다. 내가 부르는 총계는 감속기 함수의 마지막으로 계산된 값입니다.

현재는 단일 배열 항목을 나타냅니다. 우리의 경우에는 4개의 항목(현재)이 있습니다.

initialValue는 첫 번째 호출 시 합계에 할당하는 값입니다. 간단히 말해서 initalValue가 total

const getMessageSent = (사용자) => {
return users.reduce((total, current) => total = current.messageSent, 0)
}

getMessageSent(data) // 출력: 498

filter: Array.filter는 배열에서 특정 조건을 충족하는 항목만 수집하려는 경우에 사용됩니다. array.filter는 배열을 반환합니다.

const onlineUsers = (사용자) => {
users.filter(user => user.status === "online")
반환 }

onlineUsers(data) // 출력: [객체 객체]

find Array.find는 콜백 내부에 정의된 조건을 충족하는 첫 번째 배열 항목만 가져오려는 경우에 사용됩니다. array.find는 배열이 아닌 항목의 형식으로 첫 번째 항목을 반환합니다. 우리의 경우 일치하는 항목이 없으면 객체이거나 정의되지 않습니다.

const getUserRole = (사용자) => {
users.find(user => user.role === "user")
반환 }

getUserRole(data) // 출력: {userId: 1, 사용자 이름: 'Francis', 메시지: "안녕하세요?", 타임스탬프: '2024-02-18T12:30:00Z', 상태: ' 온라인', …}

조건을 충족하는 첫 번째 사용자만 어떻게 반환되었는지 확인하세요.

map Array.map은 배열의 항목을 변환하려고 할 때 사용됩니다. array.map은 콜백의 조건을 충족하는 변환된 항목의 배열을 반환합니다.

const getUserNameAndPass = (사용자) => {
return users.map((사용자) => {
const userPassCode = user.passCode.slice(-4);
return${user.username} ${userPassCode.padStart(
user.passCode.length,
"★"
)};
});
};

getUserNameAndPass(data)// 출력:['프란시스 ★★★★★★★7764', '모세 ★★★★★★★2234', '비키 ★★★★★★8069', '주니어 ★ ★★★★★3483']

every array.every는 모든 배열 항목이 정의된 조건을 통과했는지 확인하려는 경우에 사용됩니다. array.every는 부울을 반환합니다. 모든 항목이 조건을 통과하면 true이고, 항목 중 하나라도 조건을 실패하면 false입니다.

const isOnline = data.every(user => dataItem.status === 'online')

console.log(isOnline) // 출력:false

Some array.some은 배열 항목 중 일부가 주어진 조건을 통과하는지 확인하려고 할 때 사용됩니다. array.some은 부울을 반환합니다. 일부 항목이 조건을 통과하면 true이고, 모든 항목이 통과하거나 실패하면 false입니다.

const isOnline = data.every(user => dataItem.status === 'online')

console.log(isOnline) // 출력: true

다음은 널리 사용되는 배열 방법 중 일부입니다.