5가지 배열 배열 방법: indexOf, filter, forEach, map, 줄이기 사용 사례_javascript 기술

ECMAScript5 표준은 2009년 12월 3일에 출시되었습니다. 이는 기존 배열 배열 작업을 개선하는 몇 가지 새로운 방법을 제공합니다. 그러나 당시 시장에는 ES5 지원 브라우저가 부족했기 때문에 이러한 새로운 배열 방법은 실제로 인기를 끌지 못했습니다.

배열 "추가"

아무도 이러한 방법의 실용성을 의심하지 않지만 폴리필(PS: 이전 브라우저와 호환되는 플러그인)을 작성하는 것은 그럴 가치가 없습니다. "반드시 달성해야 한다"를 "최상 달성"으로 바꿉니다. 어떤 사람들은 실제로 이러한 배열 메소드를 Array "Extras"라고 부릅니다. 왜!

하지만 시대가 변하고 있습니다. Github에서 인기 있는 오픈 소스 JS 프로젝트를 살펴보면 흐름이 바뀌고 있음을 알 수 있습니다. 모든 사람은 (타사 라이브러리에 대한) 많은 종속성을 줄이고 이를 달성하기 위해 로컬 코드만 사용하기를 원합니다.

자, 시작해 보겠습니다.

나의 어레이 5개

ES5에는 총 9가지 Array 메소드가 있습니다 http://kangax.github.io/compat-table/es5/

참고* 9가지 방법

Array.prototype.indexOf
Array.prototype.lastIndexOf
Array.prototype.every
Array.prototype.some
Array.prototype.forEach
배열.프로토타입.맵
배열.프로토타입.필터
배열.프로토타입.리듀스
Array.prototype.reduceRight

개인적으로 가장 유용하고 많은 개발자들이 접하게 될 방법 5가지를 꼽아보겠습니다.

1) indexOf

indexOf() 메서드는 배열에서 발견된 첫 번째 요소의 위치를 ​​반환하거나, 존재하지 않는 경우 -1을 반환합니다.

indexOf를 사용하지 않는 경우

var arr = ['apple','orange','pear'],
found = false;

for(var i= 0, l = arr.length; i< l; i++){
if(arr[i] === 'orange'){
found = true;
}
}

console.log("found:",found);

사용 후

var arr = ['apple','orange','pear'];

console.log("found:", arr.indexOf("orange") != -1);

2) 필터

filter() 메서드는 필터 조건과 일치하는 새 배열을 생성합니다.

filter()를 사용하지 않는 경우

var arr = [
  {"name":"apple", "count": 2},
  {"name":"orange", "count": 5},
  {"name":"pear", "count": 3},
  {"name":"orange", "count": 16},
];
  
var newArr = [];

for(var i= 0, l = arr.length; i< l; i++){
  if(arr[i].name === "orange" ){
newArr.push(arr[i]);
}
}

console.log("Filter results:",newArr);

사용된 필터():

var arr = [
  {"name":"apple", "count": 2},
  {"name":"orange", "count": 5},
  {"name":"pear", "count": 3},
  {"name":"orange", "count": 16},
];
  
var newArr = arr.filter(function(item){
  return item.name === "orange";
});


console.log("Filter results:",newArr);

3) forEach()

forEach는 각 요소에 해당하는 메소드를 실행합니다

var arr = [1,2,3,4,5,6,7,8];

// Uses the usual "for" loop to iterate
for(var i= 0, l = arr.length; i< l; i++){
console.log(arr[i]);
}

console.log("========================");

//Uses forEach to iterate
arr.forEach(function(item,index){
console.log(item);
});

forEach는 for 루프를 대체하는 데 사용됩니다

4) 지도()

map()은 배열의 각 요소에 대해 특정 작업(매핑)을 수행한 후 새 배열을 반환합니다.

지도 사용 금지

var oldArr = [{first_name:"Colin",last_name:"Toh"},{first_name:"Addy",last_name:"Osmani"},{first_name:"Yehuda",last_name:"Katz"}];

function getNewArr(){
  
  var newArr = [];
  
  for(var i= 0, l = oldArr.length; i< l; i++){
    var item = oldArr[i];
    item.full_name = [item.first_name,item.last_name].join(" ");
    newArr[i] = item;
  }
  
  return newArr;
}

console.log(getNewArr());

지도 이용 후

var oldArr = [{first_name:"Colin",last_name:"Toh"},{first_name:"Addy",last_name:"Osmani"},{first_name:"Yehuda",last_name:"Katz"}];

function getNewArr(){
    
  return oldArr.map(function(item,index){
    item.full_name = [item.first_name,item.last_name].join(" ");
    return item;
  });
  
}

console.log(getNewArr());

map()은 서버에서 반환된 데이터를 처리할 때 매우 실용적인 함수입니다.

5) 축소()

reduce()는 배열의 각 값(왼쪽에서 오른쪽으로)을 값으로 줄이는 누산기 기능을 구현할 수 있습니다.

솔직히 이 문장은 너무 추상적이어서 처음에는 이해하기 조금 어려웠습니다.

시나리오: 배열에 고유한 단어가 몇 개 있는지 세어보세요

리듀스를 사용하지 않는 경우

var arr = ["apple","orange","apple","orange","pear","orange"];

function getWordCnt(){
  var obj = {};
  
  for(var i= 0, l = arr.length; i< l; i++){
    var item = arr[i];
    obj[item] = (obj[item] +1 ) || 1;
  }
  
  return obj;
}

console.log(getWordCnt());

reduce() 사용 후

var arr = ["apple","orange","apple","orange","pear","orange"];

function getWordCnt(){
  return arr.reduce(function(prev,next){
    prev[next] = (prev[next] + 1) || 1;
    return prev;
  },{});
}

console.log(getWordCnt());

먼저 제가 Reduce에 대해 어떻게 이해하고 있는지부터 설명하겠습니다. Reduce(callback,initialValue)는 두 개의 변수를 전달합니다. 콜백 함수(callback)와 초기값(initialValue)입니다. 함수에 들어오는 매개변수인 prev와 next, index와 array가 있다고 가정합니다. 이전과 다음을 이해해야 합니다.

일반적으로 prev는 배열의 첫 번째 요소부터 시작하고 next는 두 번째 요소입니다. 그러나 초기 값(initialValue)을 전달하면 첫 번째 prev는initialValue가 되고 next는 배열의 첫 번째 요소가 됩니다.

예:

/*
* 二者的区别，在console中运行一下即可知晓
*/

var arr = ["apple","orange"];

function noPassValue(){
  return arr.reduce(function(prev,next){
    console.log("prev:",prev);
    console.log("next:",next);
    
    return prev + " " +next;
  });
}
function passValue(){
  return arr.reduce(function(prev,next){
    console.log("prev:",prev);
    console.log("next:",next);
    
    prev[next] = 1;
    return prev;
  },{});
}

console.log("No Additional parameter:",noPassValue());
console.log("----------------");
console.log("With {} as an additional parameter:",passValue());