JavaScript 배열 메서드: `forEach`, `map`, `filter` 및 `reduce`

JavaScript 배열 메서드: forEach, 매핑, 필터링 및 축소

JavaScript는 배열 작업을 위한 여러 가지 강력한 방법을 제공합니다. forEach, map, filter, Reduce 등의 메서드를 사용하면 코드를 더욱 효율적이고 읽기 쉽게 만들 수 있습니다. 간단한 비유와 예를 사용하여 이러한 방법을 살펴보겠습니다.

forEach

비유: 상자에 있는 장난감을 하나씩 가지고 노는 것

장난감 상자가 있고 각 장난감을 하나씩 가지고 놀고 싶다고 상상해 보세요. 각 장난감을 상자에서 꺼내 가지고 놀다가 다시 제자리에 놓으시면 됩니다.

예:

let toys = ['car', 'doll', 'ball'];

toys.forEach(toy => {
  console.log('Playing with', toy);
});

설명:
상자에 있는 장난감을 하나하나 살펴보며 가지고 놀아보세요.

지도

비유: 각 장난감을 새로운 것으로 바꾸는 것

장난감 상자가 있고 각 장난감을 다른 것으로 바꾸고 싶다고 가정해 보겠습니다. 예를 들어 자동차를 경주용 자동차로, 인형을 슈퍼 히어로로, 공을 농구공으로 변신시킬 수 있습니다.

예:

let toys = ['car', 'doll', 'ball'];

let newToys = toys.map(toy => {
  return toy + ' (new version)';
});

console.log(newToys);

설명:
각 장난감을 새 버전으로 변형하고 새 장난감을 새 상자에 넣습니다.

필터

비유: 가지고 놀 특정 장난감만 선택

장난감 상자가 있는데 오늘은 빨간색 장난감만 가지고 놀고 싶습니다. 그래서 상자 안을 들여다보며 빨간 장난감들만 꺼냅니다.

예:

let toys = ['red car', 'blue doll', 'red ball'];

let redToys = toys.filter(toy => toy.includes('red'));

console.log(redToys);

설명:
특정 조건(이 경우 빨간색)에 맞는 장난감만 선택합니다.

줄이다

비유: 모든 장난감을 하나의 대형 장난감으로 결합

모든 장난감을 결합하여 하나의 큰 장난감을 만들고 싶다고 상상해 보세요. 각 장난감을 가져다가 메가 장난감에 하나씩 추가하면 됩니다.

예:

let toys = ['car', 'doll', 'ball'];

let megaToy = toys.reduce((combinedToys, toy) => {
  return combinedToys + ' ' + toy;
}, '');

console.log(megaToy);

설명:
빈 대형 장난감으로 시작하여 하나의 큰 장난감이 될 때까지 계속해서 각 장난감을 추가합니다.

모든 것을 종합하면

다른 장난감 상자가 있고 다음을 원한다고 가정해 보겠습니다.

1. 각 장난감을 살펴보고 그것이 무엇인지 알아보세요(forEach).
2. 각 장난감을 새로운 버전(지도)으로 바꿔보세요.
3. 파란색(필터)인 장난감만 선택하세요.
4. 선택한 모든 장난감을 하나의 메가 장난감으로 결합합니다(줄이기).

let toys = ['blue car', 'red doll', 'blue ball'];

toys.forEach(toy => {
  console.log('Toy:', toy);
});

let newToys = toys.map(toy => {
  return toy + ' (new version)';
});

let blueToys = newToys.filter(toy => toy.includes('blue'));

let megaToy = blueToys.reduce((combinedToys, toy) => {
  return combinedToys + ' ' + toy;
}, '');

console.log(megaToy);

설명:

1. 각 장난감을 살펴보세요.
2. 각 장난감을 새로운 버전으로 바꿔보세요.
3. 파란색 장난감만 골라보세요.
4. 하나의 큰 장난감으로 결합하세요.

---

고급 옵션 및 기술

forEach

• forEach 중단: forEach 루프에서 벗어날 수 없습니다. 이 기능이 필요한 경우 for 루프나 for...of를 사용하는 것이 좋습니다.
• thisArg 사용: 콜백 내에서 thisArg를 사용하여 thisArg를 제공할 수 있습니다.

  toys.forEach(function(toy) {
    console.log(this.prefix + toy);
  }, { prefix: 'Toy: ' });

지도

• thisArg 사용: forEach와 마찬가지로 thisArg를 제공하여 콜백 내에서 사용할 수 있습니다.

  let newToys = toys.map(function(toy) {
    return this.prefix + toy;
  }, { prefix: 'New: ' });

• 다른 유형 반환: map은 다른 유형의 배열을 반환할 수 있습니다.

  let toyLengths = toys.map(toy => toy.length);

필터

• 복잡한 조건: 필터링에는 복잡한 조건을 사용합니다.

  let complexFilter = toys.filter(toy => toy.includes('blue') && toy.length > 4);

줄이다

• 초기값: 예상치 못한 결과를 방지하려면 항상 초기값을 제공하세요.

  let sum = [1, 2, 3].reduce((total, num) => total + num, 0);

• 객체로 축소: 객체를 생성하기 위해 축소를 사용할 수 있습니다.

  let toyCounts = toys.reduce((counts, toy) => {
    counts[toy] = (counts[toy] || 0) + 1;
    return counts;
  }, {});

---

이러한 방법과 고급 옵션을 이해하면 더욱 효율적이고 읽기 쉬운 JavaScript 코드를 작성할 수 있습니다. 즐거운 코딩하세요!

위 내용은 JavaScript 배열 메서드: `forEach`, `map`, `filter` 및 `reduce`의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!