JavaScript에서 인기 있는 일부 배열 메서드 살펴보기

오늘은 자바스크립트에서 좀 더 많이 사용되는 배열 메서드에 대해 간단히 살펴보겠습니다.

각 예제는 동일한 데이터 세트, 동물 유형, 품종 및 이름이 다른 애완 동물 개체 배열을 사용합니다.

그러니 뛰어들자.

Array.prototype.map()

.map() 호출 배열의 모든 요소에서 제공된 함수를 호출한 결과로 채워지는 새 배열을 만듭니다.

이것은 여러 가지 이유로 도움이 되지만 아래 예제에서는 .map()를 사용하여 모든 애완 동물 이름을 저장할 새 배열을 만들고 새 변수names에 저장했습니다.

const pets = [
  {type: 'dog', name: 'Bruno', breed: 'Border Collie'},
  {type: 'cat', name: 'Bruce', breed: 'Maine Coon'},
  {type: 'dog', name: 'Tyson', breed: 'Bulldog'},
  {type: 'dog', name: 'Bobby', breed: 'English Bull Terrier'},
  {type: 'parrot', name: 'Paulie', breed: 'Macaw'}
];

const names = pets.map((pet) => pet.name);

console.log(names); // ['Bruno', 'Bruce', 'Tyson', 'Bobby', 'Paulie']

Array.prototype.filter()

.filter() 주어진 배열의 일부 중 shallow copy을 생성하고 제공된 함수로 구현된 테스트를 통과하는 주어진 배열의 요소만 필터링합니다.

데이터베이스에서 모든 애완 동물을 방금 가져 왔다고 상상해보십시오. .filter()는 우리의 예에서와 같이 강아지의 데이터만 읽으려는 시나리오에서 정확히 그렇게 할 수 있도록 하기 때문에 유용합니다. 아래와 같이 dogs와 같은 새 변수에 해당 데이터를 저장할 수도 있습니다.

const pets = [
  {type: 'dog', name: 'Bruno', breed: 'Border Collie'},
  {type: 'cat', name: 'Bruce', breed: 'Maine Coon'},
  {type: 'dog', name: 'Tyson', breed: 'Bulldog'},
  {type: 'dog', name: 'Bobby', breed: 'English Bull Terrier'},
  {type: 'parrot', name: 'Paulie', breed: 'Macaw'}
];

const dogs = pets.filter((pet) => pet.type === 'dog');

console.log(dogs); // [{type: 'dog', name: 'Bruno', breed: 'Border Collie'}, {type: 'dog', name: 'Tyson', breed: 'Bulldog'}, {type: 'dog', name: 'Bobby', breed: 'English Bull Terrier'}]

Array.prototype.forEach()

.forEach 각 배열 요소에 대해 제공된 함수를 한 번씩 실행합니다.

아래 예제에서 제공된 함수는 단순히 문자열을 콘솔에 로그아웃하는 다소 사소한 함수입니다. 그러나 더 실제적인 상황(여전히 애완 동물을 사용하는 경우)에서 우리 함수는 애완 동물이 마지막으로 검진을 받았을 때(현재 데이터에 없음)를 반환할 수 있습니다.

const pets = [
  {type: 'dog', name: 'Bruno', breed: 'Border Collie'},
  {type: 'cat', name: 'Bruce', breed: 'Maine Coon'},
  {type: 'dog', name: 'Tyson', breed: 'Bulldog'},
  {type: 'dog', name: 'Bobby', breed: 'English Bull Terrier'},
  {type: 'parrot', name: 'Paulie', breed: 'Macaw'}
];

function introducePet(pet) {
  console.log(`${pet.name} is a ${pet.breed} (${pet.type})`)
}

pets.forEach((pet) => introducePet(pet)); // Bruno is a Border Collie (dog)...

Array.prototype.slice()

.slice() 또한 배열 부분의 shallow copy을 처음부터 끝까지 선택한 새 배열 객체로 반환합니다(끝은 포함되지 않음). 여기서 시작과 끝은 해당 배열에 있는 항목의 인덱스를 나타냅니다. 원래 배열은 수정되지 않습니다.

이 예제에서는 .slice()를 사용하여 단순히 배열의 첫 번째 요소를 반환하고 새 변수firstPet에 저장합니다. 또한 처음 3개 또는 마지막 3개를 반환하는 데 사용할 수도 있습니다. 여기서 세상은 굴입니다.

const pets = [
  {type: 'dog', name: 'Bruno', breed: 'Border Collie'},
  {type: 'cat', name: 'Bruce', breed: 'Maine Coon'},
  {type: 'dog', name: 'Tyson', breed: 'Bulldog'},
  {type: 'dog', name: 'Bobby', breed: 'English Bull Terrier'},
  {type: 'parrot', name: 'Paulie', breed: 'Macaw'}
];

const firstPet = pets.slice(0, 1);

console.log(tyson); // [{type: 'dog', name: 'Bruno', breed: 'Border Collie'}]

Array.prototype.sort()

.sort() 이름에서 알 수 있듯이 배열의 요소를 제자리에 정렬하고 이제 정렬된 동일한 배열에 대한 참조를 반환합니다. 기본 정렬 순서는 오름차순이며 요소를 문자열로 변환한 다음 UTF-16 코드 단위 값의 시퀀스를 비교합니다.

다양한 이유로 데이터를 정렬하고 싶을 수 있습니다. 이 예에서는 애완 동물 데이터를 이름의 알파벳순으로 정렬하기를 원합니다.

새 배열 또는 얕은 복사본을 만드는 대부분의 배열 메서드.sort()는 실제로 배열의 순서(변형)를 변경하므로 이러한 일이 발생하지 않도록 하려면 다음을 수행하는 것이 좋습니다. 미리 슬라이스를 사용하여 원래 배열 순서의 복사본을 만듭니다.

const pets = [
  {type: 'dog', name: 'Bruno', breed: 'Border Collie'},
  {type: 'cat', name: 'Bruce', breed: 'Maine Coon'},
  {type: 'dog', name: 'Tyson', breed: 'Bulldog'},
  {type: 'dog', name: 'Bobby', breed: 'English Bull Terrier'},
  {type: 'parrot', name: 'Paulie', breed: 'Macaw'}
];

pets.sort((a, b) => a.name.localeCompare(b.name)) // mutated array
pets.slice().sort((a, b) => a.name.localeCompare(b.name)) // copied array

console.log(pets); // [{ type: 'dog', name: 'Bobby', breed: 'English Bull Terrier' }, { type: 'cat', name: 'Bruce', breed: 'Maine Coon' }, { type: 'dog', name: 'Bruno', breed: 'Border Collie' }, { type: 'parrot', name: 'Paulie', breed: 'Macaw' }, { type: 'dog', name: 'Tyson', breed: 'Bulldog' }]

이것이 이 기사와 JavaScript 배열 방법에 대한 것입니다. MDN에는 소화되기를 기다리는 산더미 같은 지식이 있으므로 살펴보는 것이 좋습니다. 또한 배열 메서드 설명을 가져온 곳이기도 합니다.