배열은 JavaScript의 가장 기본적인 데이터 구조 중 하나입니다. 배열을 사용하면 단일 변수에 여러 값을 저장할 수 있습니다. JavaScript는 배열을 조작할 수 있는 다양한 내장 메소드를 제공하므로 배열을 놀라울 정도로 다재다능하게 만듭니다. 이 게시물에서는 모든 내장 배열 메서드와 이를 JavaScript 프로젝트에서 효과적으로 사용하는 방법을 살펴보겠습니다.

핵심 방법

각()

forEach() 메서드를 사용하면 배열을 반복하고 배열의 각 요소에 대해 제공된 함수를 한 번씩 실행할 수 있습니다. 이는 배열을 반복하는 간단한 방법입니다.

const array = [1, 2, 3, 4, 5];

array.forEach((element) => {
  console.log(element);
});

지도()

map() 메서드는 배열의 모든 요소에 대해 제공된 함수를 호출한 결과로 채워진 새 배열을 만듭니다. 일반적으로 데이터 변환에 사용됩니다.

const array = [1, 2, 3, 4, 5];

const doubled = array.map((element) => element * 2);

console.log(doubled); // [2, 4, 6, 8, 10]

필터()

filter() 메서드는 제공된 함수에 의해 구현된 테스트를 통과한 모든 요소로 새 배열을 만듭니다. 조건에 따라 배열에서 특정 요소를 필터링해야 할 때 유용합니다.

const array = [1, 2, 3, 4, 5];

const evenNumbers = array.filter((element) => element % 2 === 0);

console.log(evenNumbers); // [2, 4]

줄이다()

reduce() 메서드는 배열의 각 요소에 대해 감속기 함수를 실행하여 단일 출력 값을 생성합니다. 값을 합산하거나, 총계를 누적하거나, 배열을 단일 값으로 병합하는 데 자주 사용됩니다.

const array = [1, 2, 3, 4, 5];

const sum = array.reduce((accumulator, currentValue) => accumulator   currentValue, 0);

console.log(sum); // 15

찾다()

find() 메서드는 제공된 테스트 함수를 만족하는 배열의 첫 번째 요소 값을 반환합니다. 첫 번째 일치 항목을 찾은 후 중지됩니다.

const array = [1, 2, 3, 4, 5];

const found = array.find((element) => element > 3);

console.log(found); // 4

찾기인덱스()

findIndex() 메소드는 제공된 테스트 함수를 만족하는 배열의 첫 번째 요소의 인덱스를 반환합니다. 테스트 기능을 만족하는 요소가 없으면 -1을 반환합니다.

const array = [1, 2, 3, 4, 5];

const index = array.findIndex((element) => element > 3);

console.log(index); // 3

종류()

sort() 메서드는 배열의 요소를 제자리에 정렬하고 정렬된 배열을 반환합니다. 일반적으로 문자열과 숫자를 정렬하는 데 사용되지만 숫자를 올바르게 정렬하려면 비교 기능이 필요할 수 있습니다.

const array = [5, 3, 8, 1, 2];

const sortedArray = array.sort((a, b) => a - b);

console.log(sortedArray); // [1, 2, 3, 5, 8]

뒤집다()

reverse() 메서드는 배열의 요소를 제자리에 반대로 바꿉니다. 첫 번째 배열 요소가 마지막 요소가 되고, 마지막 요소가 첫 번째 요소가 됩니다.

const array = [1, 2, 3, 4, 5];

const reversedArray = array.reverse();

console.log(reversedArray); // [5, 4, 3, 2, 1]

연결()

concat() 메소드는 둘 이상의 배열을 병합하는 데 사용됩니다. 원래 배열은 변경되지 않은 채로 새 배열을 반환합니다.

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];

const concatenatedArray = array1.concat(array2);

console.log(concatenatedArray); // [1, 2, 3, 4, 5, 6]

일부분()

slice() 메서드는 배열 일부의 얕은 복사본을 처음부터 끝까지(끝은 포함되지 않음) 선택된 새 배열 객체로 반환합니다.

const array = [1, 2, 3, 4, 5];

const slicedArray = array.slice(1, 4);

console.log(slicedArray); // [2, 3, 4]

접착()

splice() 메서드는 요소를 제거, 교체 또는 추가하여 배열의 내용을 변경합니다.

const array = [1, 2, 3, 4, 5];

array.splice(2, 1, 6, 7);

console.log(array); // [1, 2, 6, 7, 4, 5]

푸시()

push() 메서드는 배열 끝에 하나 이상의 요소를 추가하고 배열의 새 길이를 반환합니다.

const array = [1, 2, 3];

array.push(4, 5);

console.log(array); // [1, 2, 3, 4, 5]

팝()

pop() 메서드는 배열에서 마지막 요소를 제거하고 해당 요소를 반환합니다.

const array = [1, 2, 3, 4, 5];

const lastElement = array.pop();

console.log(lastElement); // 5
console.log(array); // [1, 2, 3, 4]

옮기다()

shift() 메서드는 배열에서 첫 번째 요소를 제거하고 해당 요소를 반환합니다.

const array = [1, 2, 3, 4, 5];

const firstElement = array.shift();

console.log(firstElement); // 1
console.log(array); // [2, 3, 4, 5]

쉬프트 해제()

unshift() 메서드는 배열의 시작 부분에 하나 이상의 요소를 추가하고 배열의 새 길이를 반환합니다.

const array = [2, 3, 4, 5];

array.unshift(1);

console.log(array); // [1, 2, 3, 4, 5]

가입하다()

join() 메서드는 쉼표나 지정된 구분 문자열로 구분된 배열의 모든 요소를 ​​연결하여 새 문자열을 만들고 반환합니다.

const array = [1, 2, 3, 4, 5];

const joinedString = array.join('-');

console.log(joinedString); // "1-2-3-4-5"

추가 방법

모든()

every() 메서드는 배열의 모든 요소가 제공된 테스트 함수를 통과하는지 여부를 테스트합니다.

const array = [2, 4, 6, 8];

const allEven = array.every((element) => element % 2 === 0);

console.log(allEven); // true

일부()

some() 메서드는 배열의 요소 중 하나 이상이 제공된 테스트 함수를 통과하는지 테스트합니다.

const array = [1, 2, 3, 4, 5];

const hasEven = array.some((element) => element % 2 === 0);

console.log(hasEven); // true

평평한()

flat() 메서드는 모든 하위 배열 요소가 지정된 깊이까지 재귀적으로 연결된 새 배열을 만듭니다.

const array = [1, [2, [3, [4]]]];

const flattenedArray = array.flat(2);

console.log(flattenedArray); // [1, 2, 3, [4]]

플랫맵()

flatMap() 메서드는 먼저 매핑 함수를 사용하여 각 요소를 매핑한 다음 결과를 새 배열로 평면화합니다. map()과 flat()의 조합입니다.

const array = [1, 2, 3, 4];

const flattened = array.flatMap((num) => [num, num * 2]);

console.log(flattened); // [1, 2, 2, 4, 3, 6, 4, 8]

채우다()

fill() 메서드는 시작 인덱스부터 끝 인덱스까지 배열의 모든 요소를 ​​정적 값으로 채웁니다.

const array = [1, 2, 3, 4, 5];

array.fill(0, 2, 4);

console.log(array); // [1, 2, 0, 0, 5]

복사 내부()

copyWithin() 메서드는 길이를 수정하지 않고 배열의 일부를 동일한 배열의 다른 위치에 얕은 복사합니다.

const array = [1, 2, 3, 4, 5];

array.copyWithin(0, 3, 5);

console.log(array); // [4, 5, 3, 4, 5]

포함()

includes() 메소드는 배열에 특정 값이 포함되어 있는지 확인합니다.

const array = [1, 2, 3, 4, 5];

const hasThree =

 array.includes(3);

console.log(hasThree); // true

toString()

toString() 메서드는 배열을 쉼표로 구분된 문자열로 변환합니다.

const array = [1, 2, 3, 4, 5];

const arrayString = array.toString();

console.log(arrayString); // "1,2,3,4,5"

인덱스()

indexOf() 메서드는 배열에서 특정 요소를 찾을 수 있는 첫 번째 인덱스를 반환하거나 해당 요소가 없으면 -1을 반환합니다.

const array = [1, 2, 3, 4, 5];

const index = array.indexOf(3);

console.log(index); // 2

마지막 인덱스Of()

lastIndexOf() 메서드는 배열에서 특정 요소를 찾을 수 있는 마지막 인덱스를 반환하거나 해당 요소가 없으면 -1을 반환합니다.

const array = [1, 2, 3, 4, 3, 5];

const lastIndex = array.lastIndexOf(3);

console.log(lastIndex); // 4

에서()

Array.from() 메서드는 유사 배열 또는 반복 가능한 객체에서 새 배열 인스턴스를 생성합니다.

const array = Array.from('hello');

console.log(array); // ['h', 'e', 'l', 'l', 'o']

isArray()

Array.isArray() 메서드는 전달된 값이 배열인지 확인합니다.

const array = [1, 2, 3, 4, 5];
const notArray = { a: 1, b: 2 };

console.log(Array.isArray(array)); // true
console.log(Array.isArray(notArray)); // false

의()

Array.of() 메서드는 가변 개수의 요소를 사용하여 새 배열 인스턴스를 생성합니다.

const array1 = Array.of(1, 2, 3);
const array2 = Array.of('a', 'b', 'c');

console.log(array1); // [1, 2, 3]
console.log(array2); // ['a', 'b', 'c']

결론

JavaScript 배열에는 강력한 데이터 조작을 가능하게 하는 다양한 내장 메서드가 함께 제공됩니다. 이러한 방법을 이해하면 깔끔하고 간결한 코드를 보다 효율적으로 작성할 수 있습니다. 시간을 내어 이러한 방법을 실험해보고 코드를 어떻게 개선할 수 있는지 알아보세요.
원본 게시: JavaScript 배열 메서드 가이드