자 바스 크 립 트 에서 널리 사 용 될 만 한 5 가지 배열 방법

원본 주소:http://colintoh.com/blog/5-array-methods-that-you-should-use-today?utm_source=javascriptweekly&utm_medium=email
2009 년 10 월 ECMAScript 에서 5. 정식 규범 으로 정 의 된 이래 업무 효율 을 높 일 수 있 는 배열 방법 이 제시 되 었 다.그러나 ES5 의 형 편 없 는 브 라 우 저 지원 율 때문에 개발 자 들 에 게 널리 사용 되 지 않 았 다.
'여분의' 배열 방법
 아무 도 이러한 방법의 가용성 을 의심 하지 않 습 니 다. 그러나 이 를 겨냥 하여 poly fill 을 작성 한다 면 (poly fill 에 대해 개인 적 으로 는 새로운 방법 이 각 브 라 우 저 를 호 환 하기 위해 작 성 된 브 라 우 저 '플러그 인' 이나 확장 입 니 다. 이 글 을 참고 할 수 있 습 니 다) 가치 가 없습니다.그래서 이런 새로운 방법 들 은 'good - to - have' 가 아니 라 'must - have' 로 여 겨 지 거나 아예 '불필요 한' 방법 이 라 고 불 린 다.Ouch！
그러나 전단 기술 이 지금까지 발전 했다. 만약 에 Github 에서 유행 하 는 오픈 소스 JS 프로젝트 에 관심 을 가지 면 개발 자 들 은 제3자 라 이브 러 리 에 의존 하지 않 고 네 이 티 브 코드 를 사용 하 는 경향 이 점점 커지 는 것 을 발견 할 수 있 을 것 이다.
그래서 원생 문법의 광범 위 한 사용 도 를 추진 하 는 것 이 필요 하 다.
5 가지 주목 할 만 한 배열 방법
다음은 ES 5 에서 매우 유용 한 5 개의 배열 방법 을 소개 하 겠 습 니 다. 이 5 가지 방법 은 개발 자의 업무 효율 을 향상 시 킬 수 있 습 니 다.
1. indexOF
index Of 방법 은 배열 에 있 는 요소 의 색인 값 을 되 돌려 줍 니 다. 배열 에 이 요소 가 존재 하지 않 으 면 되 돌려 줍 니 다 - 1
밤 들 기: "오렌지" 가 배열 에 있 는 위 치 를 확인 합 니 다.
(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);

(2) indexOf () 사용

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

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

코드 가 많이 깔끔 해 졌 죠?
지금 나 는 새로운 수요 가 생 겼 다. 나 는 배열 의 모든 주어진 조건 에 부합 되 는 요 소 를 알 고 싶다.어 떡 하지?
2. filter
filter () 방법 은 지정 한 배열 에서 주어진 조건 에 맞 는 모든 요소 로 구 성 된 새 배열 을 만 듭 니 다.
 밤 들 기: 배열 의 name 이 "orange" 인 모든 요 소 를 찾 아 라.
(1) 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);

 
(2) filter 사용 ()

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 () 방법 은 배열 의 모든 요소 에 주어진 방법 을 한 번 씩 수행 합 니 다.
밤 들 기: for 순환 과 foreach () 방법 비교
 

function test(){
    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 순환 의 업그레이드 쓰기 입 니 다.본인 은 만약 선택 할 수 있다 면 가능 한 한 foreach () 방법 을 사용 해 야 한다 고 건의 합 니 다.
for 순환 을 사용 할 때 무시 하기 쉬 운 문제 가 존재 합 니 다. for 순환 에서 설명 하 는 변수 (예 를 들 어 상례 에서 var i = 0) 는 for 순환 중의 국부 변수 가 아니 라 for 순환 이 있 는 역할 영역 내의 국부 변수 입 니 다.위의 예 에서 for 순환 에서 설명 한 변수 var i = 0 실제 적 으로 방법 test () 작용 역 내의 국부 변수 로 i 는 test () 작용 역 내의 다른 논리 적 접근 과 재 작성 에 의 해 문제 가 발생 하기 쉽다.
실제로 jsperf 테스트 를 통 해 for 순환 의 성능 이 foreach () 보다 훨씬 좋 은 것 으로 나 타 났 다.
그러나 저 는 개인 적 으로 백만 급 이상 의 빅 데 이 터 를 처리 하지 않 으 면 foreach () 방법 을 계속 사용 할 것 이 라 고 생각 합 니 다.밀리초 단위 의 시간 을 절약 하 는 것 은 제품 의 성능 을 향상 시 키 는 주요 한 고려 요소 가 아니다.
4. map()
 배열 의 모든 요소 에 대해 정 의 된 반전 함 수 를 호출 하고 결 과 를 포함 하 는 배열 을 되 돌려 줍 니 다.
밤 들 기: 배열 을 분석 하여 배열 의 모든 요소 에 fullname 속성 을 추가 하고 새 배열 로 돌아 갑 니 다.
(1) 맵 을 사용 하지 않 음 ()

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());

 
(2) map 사용 ()

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()
 배열 의 모든 요소 에 지정 한 반전 함 수 를 호출 합 니 다. 이 반전 함수 의 반환 값 은 누적 결과 이 며, 이 반환 값 은 다음 에 이 반전 함 수 를 호출 할 때 매개 변수 로 제공 합 니 다.
 솔직히 reduce () 를 사용 하기 전에 나 는 오랫동안 고려 했다.reduce () 의 개념 은 나 에 게 매우 추상 적 이 고 특히 '누적' 이라는 단어 이다.nodeschool 에서 일련의 JavaScript 방법 을 배우 기 시작 한 후에 야 reduce () 의 개념 을 점차적으로 파악 하 게 되 었 다.그러나 나 는 그것 이 얼마나 큰 역할 을 하 는 지 아직 발견 하지 못 했다. 어느 날 내 가 자신의 코드 를 재 구성 할 때, reduce () 는 정말 하늘 을 찌 를 듯 하 다 는 것 을 알 게 되 었 다.
밤 들 기: 하나의 배열 을 분석 하고 모든 요소 가 배열 에 나타 나 는 횟수 를 포함 하 는 대상 을 되 돌려 줍 니 다.
(1) 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());

 
(2) 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) 콜백 함수 와 initialValue 두 개의 인자 가 있 습 니 다.그 중에서 callback 함 수 는 4 개의 인 자 를 포함 합 니 다: prev, next, index 와 array.우 리 는 일반적으로 prev 와 next 두 개의 인자 만 사용 해 야 한다.
prev 매개 변 수 는 배열 의 첫 번 째 요 소 를 대표 하고 next 는 배열 의 두 번 째 요 소 를 대표 합 니 다.메모: initialValue 인자 가 설정 되면 prev 는 initialValue 를 대표 하고 next 는 배열 의 첫 번 째 요 소 를 대표 합 니 다.예 를 들 면 상례 에서initialValue 는 공백 대상 {} 으로 설정 되 어 있 으 며, prev 는 {} 입 니 다.

/*
* Difference between not passing any parameters
* and passing in a additional parameter into `reduce()`
*/

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());

 
위의 코드 에서 매번 교체 할 때마다 하나의 값 을 되 돌려 줍 니 다. 이 값 은 다음 교체 의 prev 매개 변수 로 전 달 됩 니 다.
다음 코드 는 reduce () 의 기능 을 더욱 뚜렷하게 표시 합 니 다.

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

function getWordCnt(){
    return arr.reduce(function(prev,next,index){
        console.log("Iteration "+index+"");
        console.log("prev:",prev);
        console.log("next:",next);
        
        prev[next] = ++prev[next] || 1;
        console.log("Passing this to the 'prev' of the next iteration if any:",prev);
        console.log("---------------");
        return prev;
    },{});
}

console.log("Final Object:",getWordCnt());

 
Demethodizing
 위 에서 언급 한 이 방법 들 은 배열 만 을 대상 으로 하지만 노드 목록, Jquery 대상, 심지어 문자열 에 의 해 사용 할 수 있 습 니 다.우 리 는 'demethodizing' 기술 을 통 해 이 배열 방법 을 확장 할 수 있다.

// Demethodizing the Array method, forEach(),  into a generic "each"
var each = Function.prototype.call.bind([].forEach);

var nodeList = document.querySelectorAll("p");

each(nodeList,bold);

function bold(node){
   node.style.fontWeight ="bold";
}

 
우리 통과 Function.prototype.call.bind foreach 방법 을 function 류 의 each 방법 으로 확장 합 니 다. 현재 each 방법 은 배열 이외 의 대상 에 의 해 사용 할 수 있 습 니 다.
브 라 우 저 지원 도
 ECMAScript 5 compatibility table 에 따 르 면 위의 5 가지 방법 은 모든 모 바 일 브 라 우 저 와 거의 모든 데스크 톱 브 라 우 저 에서 사용 할 수 있 습 니 다 ("모든" 이 라 고 말 할 때 IE9 이하 의 브 라 우 저 는 스스로 떠 나 십시오).