JS Iterator 객체

객체를 통해 반복하고 싶을 때 우리는 일반적으로 for 또는 .map() 와 같이 항상 동일한 반복자를 사용하는 함정에 빠지거나 그렇지 않습니다. 그러나 JS에는 각각의 기능을 가진 반복자의 전 세계가 있습니다. 그리고 서로의 차이점.

이 게시물에서는 .map() , .filter() , .find() , .reduce() 및 .forEach() 의 실제 사용 및 차이점에 대해 설명합니다.

1. .map()으로 시작하기

.map() 반복자는 배열의 요소를 통과하여 내부에 제공한 함수의 결과로 새 배열을 채웁니다.

const array = ["name1", "name2", "name3"];

// pass a function to map
const map = array.map((x, i) => {
  return x.concat(` surname${i+1}`);
});

console.log(map);
// expected output: Array ["name1 surname1", "name2 surname2", "name3 surname3"]

보시다시피 .map() 반복자는 내부에 전달한 내용으로 채워진 새 배열을 생성합니다.

2. .필터()

.filter()는 배열을 반복하고 내부에 제공된 조건을 통과하는 요소로 채워진 새 배열을 반환합니다.

const array = ["name1", "name2", "name3"];

// pass a function to filter
const filter = array.filter(x => !x.includes(2));

console.log(map);
// expected output: Array ["name1", "name3"]

3. .찾기()

.find() 메서드는 배열 내에서 조건을 전달하는 첫 번째 요소를 반환합니다.

const array = ["name1", "name2", "name3"];

// pass a function to filter
const find = array.find(x => x.includes(2));

console.log(map);
// expected output: Array "name2"

4. .reduce()

.reduce() 메서드는 내부에 제공할 감속기 기능을 실행하며, 이로 인해 배열 내부의 여러 요소에서 단일 출력 값이 생성됩니다.

reducer 함수는 네 가지 인수를 사용할 수 있습니다.

어큐뮬레이터

현재 가치

현재 지수

소스 어레이

const reducer = (sum, val) => sum + val;
const initialValue = 0;
const arr = [1, 3, 5, 7];

const sumReduce = arr.reduce(reducer, initialValue);
console.log(sumReduce);
// 16

5. .forEach()

.forEach() 메서드는 반복되는 배열의 각 요소에 대해 함수를 실행합니다.

다른 것 대신 foreach를 사용하는 이유가 궁금하다면 forEach는 Js에서 제공하는 일반적인 도구에 가깝습니다. 우리가 본 것처럼 더 좋고 구체적인 도구가 없을 때 사용하라고 말씀드리겠습니다. 이전 방법에서.

예를 들어, .map()와 더 혼동할 수 있는 것은 맵이 배열을 수정하고 수정된 반환을 위한 반면 .forEach()는 console.log와 같이 필요한 수정으로 배열을 반복할 수 있다는 것입니다. 어레이.



이 기사가 귀하에게 도움이 되고 일상적인 코딩에 대해 조금 더 많은 지식을 제공하기를 바랍니다. 의견 섹션에서 제안이나 의견을 환영합니다.