JavaScript: 배열 메서드에 대한 TL;DR

어레이
배열은 정렬된 목록과 같습니다. 이들은 숫자, 문자열, 부울, 함수 및 심지어 배열 자체 항목을 보유할 수 있는 관계형 데이터 유형 클래스에 속합니다.

배열은 대괄호를 사용하여 생성되며 여기에는 쉼표로 구분된 개별 요소가 포함됩니다.

// An array containing numbers
const numberArray = [1, 2, 3, 4, 5];

// An array containing strings
const stringArray = ['one', 'two', 'three', 'four', 'five'];

색인
배열의 요소는 0에서 시작하는 첫 번째 요소 인덱스가 있는 인덱스 값으로 정렬됩니다. 배열 요소에 액세스하려면 대괄호 표기법을 사용하거나 구체적으로 대괄호로 묶인 배열 이름과 인덱스를 사용하십시오.

numberArray의 요소에 액세스:

console.log(numberArray[0]); //=> 1
console.log(numberArray[1]); //=> 2
console.log(numberArray[2]); //=> 3

stringArray의 요소에 액세스:

console.log(stringArray[0]); //=> "one"
console.log(stringArray[1]); //=> "two"
console.log(stringArray[2]); //=> "three"

행동 양식
메서드는 함수입니다. 배열 메서드는 배열에 적용할 수 있는 함수입니다. 메서드는 변경 또는 계산을 수행하는 데 사용되며 일반적인 기능을 반복해서 작성하지 않도록 내장되어 있습니다. 방법을 사용하면 DRY(Don't Repeat Yourself) 상태를 유지할 수 있습니다.

알아야 할 세 가지 배열 방법:

지도

필터

각각을 위한

메소드.맵()
맵은 배열의 모든 요소를 ​​다른 값으로 변환합니다. 그런 다음 원래 배열과 길이가 같은 수정된 요소가 있는 새 배열을 반환합니다.

예를 들어, 숫자 배열의 모든 값을 두 배로 늘리는 데 map을 사용할 수 있습니다.

const numbers = [1, 2, 3, 4, 5] 
numbers.map(num => num * 2); //=> [2, 4, 6, 8, 10]

메서드.필터()
필터는 컬렉션을 검색하고 배열의 각 요소에 대해 콜백 함수를 실행합니다. 각 요소에 대한 콜백 함수는 true 또는 false를 반환해야 합니다(엄격한 연산자 사용). 조건이 참이면 콜백 함수는 요소로 구성된 완전히 새로운 배열을 반환합니다.

예를 들어, 필터를 사용하여 영화 배열의 영화 제목만 필터링할 수 있습니다.

const movies = [
   {
      title: 'Golden Eye',
      category: 'Thriller',
      rating: 95,
      year: 2010
   },
   {
      title: 'The Avengers',
      category: 'Action',
      rating: 98,
      year: 2020
   },
   {
      title: 'Love Actually',
      category: 'Romantic comedy',
      rating: 85,
      year: 1998
   },

]


movies.filter(movie => movie.title); 
//=> [{title: 'Golden Eye'

메서드.forEach()
For-each는 배열의 각 요소에 대해 순서대로 콜백 함수를 실행합니다. 이 메서드는 필터 및 맵 메서드와 같은 새 배열을 반환하지 않습니다.

예를 들어 숫자 배열로 돌아가서 forEach를 사용하여 이 배열의 각 요소를 반복할 수 있습니다.

const numbers = [1, 2, 3, 4, 5];
numbers.forEach(number => console.log(number); //=> [1, 2, 3, 4, 5];

다음은 다른 유용한 배열 메서드의 정렬된 목록입니다.

연결

모든

찾기

포함하다

indexOf

조인

푸시

팝

줄이기

리버스

시프트

분할

일부

정렬

스플라이스

언시프트

변하기 쉬운
마지막으로 배열은 변경되거나 변경될 수 있습니다. JavaScript에서 배열은 배열의 요소에 새 값을 할당할 수 있습니다. const를 사용하여 배열을 선언하더라도 내부 값을 재할당하거나 메서드를 사용하여 내용을 조작할 수 있습니다.

자세한 내용은 MDN Web Docs을 참조하십시오.