우리 모두 알고 있듯이 백엔드에 데이터를 요청하고 데이터를 처리하는 것은 프런트엔드 엔지니어에게 필수적인 기술입니다. 백엔드에서 요청한 데이터는 배열 형태로 프런트엔드로 반환되는 경우가 많기 때문에 배열 처리 방법의 중요성은 매우 큽니다. 상상된 배열 처리 방법 MDN 문서가 많이 있습니다. 많은 친구들이 학습할 때 핵심을 파악하지 못하는 경우가 많아 결과가 절반이고 결과가 두 배가 됩니다. 하지만 걱정하지 마십시오. 일반적으로 사용되는 배열 처리 방법 18개를 요약했습니다.
forEach() 메소드는 원래 배열을 변경하지 않습니다.
는 함수입니다. 내부적으로 전달된 함수의 첫 번째 형식 매개변수는 항목 배열의 각 항목 값입니다. 두 번째는 인덱스 번호 인덱스입니다. 반환 값은 정의되지 않습니다.
실행 예시는 다음과 같습니다. 
콘솔 출력 
filter() 메소드는 배열을 필터링하는 메소드로, 전달된 매개변수는 forEach 메소드와 동일하지만, 반환값은 배열입니다. 획득한 데이터;
실행 예시는 다음과 같습니다. 
콘솔 출력은 다음과 같습니다. 
map() 메서드에 의해 전달된 매개변수도 위와 동일하며 반환 값도 새로운 배열입니다. map() 메서드는 배열의 각 항목에 대해 동일한 처리를 수행할 수 있습니다. 예는 다음과 같습니다: 
콘솔 출력: 
findIndex() 메소드는 이름에서 알 수 있듯이 배열에서 조건을 충족하는 첫 번째 항목의 인덱스 번호를 반환합니다. 항목을 찾을 수 없으면 -1을 반환합니다. 전달된 매개변수는 위와 동일하며 실행 예제는 다음과 같습니다:
let arr = [1, 3, 3, 4, 5, 6, 7] //findIndex 메소드는 조건을 충족하는 첫 번째 항목의 인덱스 번호를 반환하고, 찾지 못한 경우 -1을 반환합니다. const res = arr.findIndex((item) => 항목 > 5) console.log(res)
콘솔 출력 결과: 
find() 메소드는 조건에 맞는 첫 번째 항목을 반환합니다. 전달된 매개변수는 위와 동일합니다. 실행 예제는 다음과 같습니다:
let arr = [1, 3, 3, 4, 5, 6, 7]
//find()는 항목을 검색하고 조건을 충족하는 첫 번째 항목을 반환합니다. 발견되면 정의되지 않은 항목을 반환합니다.
const res2 = arr.find((item) => {
반품 항목 > 5
})
console.log(res2) 콘솔 작업의 결과는 다음과 같습니다. 
some() 메소드에 전달된 매개변수는 위와 동일하며, 반환 값은 조건에 맞는 항목이 발견되면 true를 반환합니다. :
arr = [1, 3, 3, 4, 5, 6, 7]로 설정
//일부 메소드는 부울 값을 반환합니다. const bl = arr.some((item) => {
반품 항목 > 5
})
console.log(bl) 
Every() 메소드에 전달된 매개변수는 위와 동일하며, 반환 값은 Boolean 값이지만, true를 반환하려면 각 항목이 조건을 충족해야 합니다. 예는 다음과 같습니다.
let arr = [1;
, 3, 3, 4, 5, 6, 7]
//every()는 true를 반환하기 전에 필터링 조건을 통과해야 하는 부울 값을 반환합니다.
const bl2 = arr.every((currentValue) => {
currentValue < 10을 반환합니다.
})
console.log(bl2) 
Reduce() 함수의 첫 번째 매개변수는 함수, 두 번째 매개변수는 임시변수 sum의 형태, 첫 번째 매개변수 함수는 4개의 매개변수를 가지나 일반적으로 사용되는 첫 번째 매개변수는 Accumulate 임시변수(return)이다. 이 값), 두 번째 매개변수 항목입니다. 세 번째는 인덱스이고 네 번째는 배열 자체입니다. 코드 예는 다음과 같습니다.
let arr = [1, 3, 3, 4, 5, 6, 7]
//reduce() 유도 함수 const PreviousValue = 0
const arrSum = arr.reduce((previousValue, currentValue) => {
이전값 + 현재값 반환
}, 0)
console.log(arrSum) 콘솔 출력 결과는 다음과 같습니다. 
concat()은 두 개의 배열을 접합하고 접합된 새 배열을 반환합니다. 다차원 배열(배열 내의 배열)은 접합할 수 없습니다.
코드 예시는 다음과 같습니다:
let arr = [1, 3, 3, 4, 5, 6, 7]
//concat은 두 배열을 연결하고 새 배열을 반환합니다.
const newArr3 = [2, 5, 5, 6, 6, 8]
const concatArr = arr.concat(newArr3)
console.log(concatArr)
push()/unshift() 메서드는 배열의 끝과 앞에 각각 요소를 추가하는 것이며 반환 값은 새 배열의 길이입니다
. 배열 처리 방법이 변경됩니다. 원래 배열 const Arr = [1, 3, 5, 6, 7, 8, 9] 도착.푸시(1) console.log(도착) console.log(도착) const a = Arr.unshift(1) console.log(a)
콘솔 출력 결과는 다음과 같습니다. 
이 두 메소드 pop()은 배열의 마지막 값을 삭제하고, Shift()는 배열의 첫 번째 항목 값을 삭제합니다. 반환 값은 삭제된 항목입니다
. console.log(arr) arr.shift(1) console.log(arr)
콘솔 출력 결과는 다음과 같습니다. 
sort() 메서드는 정렬 함수입니다. function(a, b){ return a - b }. 이 함수를 통해 정렬 순서를 내림차순으로 제어할 수 있습니다. 함수는 오름차순입니다. 매개변수 내부 return a - b가 내림차순이면 return a + b는 오름차순입니다.
reverse()는 배열 뒤집기입니다. 즉, 배열 요소를 역순으로 정렬합니다. 코드 예제는 다음과 같습니다.
let arr = [1, 3, 3, 4, 5, 6, 7]arr.sort( (a, b) => {
반환 a - b})console.log(arr)arr.reverse()console.log(arr) 
splice() 메서드는 원래 배열을 수정하고 삭제된 요소가 포함된 새 배열을 반환합니다. 음수는 뒤에서 앞으로의 인덱스 번호이고, 전달된 첫 번째 매개 변수는 삭제된 시작 요소의 인덱스 번호입니다. 두 번째 매개변수는 삭제된 요소의 수입니다.
let arr = [1, 3, 3, 4, 5, 6, 7]arr.splice(1, 3)console.log(arr)
flat()은 다차원 배열을 평면화하는 데 사용됩니다. 전달된 매개 변수는 배열의 깊이이며 무한할 수도 있습니다. 이는 배열의 깊이가 무한하다는 것을 의미합니다. :
const Arr2 = [ [1, 2], [스물셋], [4, 5], [5, 6],]console.log(Arr2.plat(Infinity))
콘솔 출력 결과: 
배열을 채울 수 있습니다: 작성 방법: Array.fill(1, 2, 4)는 인덱스 값이 2인 요소부터 시작하여 4부터 시작하는 요소의 인덱스 번호부터 시작하여 1로 배열을 채웁니다. 인덱스 값은 4개 요소입니다. 채워진 요소는 인덱스 번호에 해당하는 원래 요소를 덮어씁니다.
코드 예시는 다음과 같습니다:
const Arr2 = [ [1, 2], [스물셋], [4, 5], [5, 6],]console.log(Arr2.fill(1, 0, 4))
콘솔 출력 결과: 