[원]javascript 필기의 Array 방법 for Each &map &filter &some &every &reduce &reduce Right

전단을 한 지 여러 해가 되었지만 많은 기술 문장을 보고 새로운 기술을 배웠지만 갱신이 빠른 전단, 방대한 지식 라이브러리는 많은 것을 배우면 잊어버린다. 특히 프로젝트가 긴급한 조건에서 마음속에 은근히 한 가지 방법을 배웠지만 의식적으로 낡은 방법을 사용해서 해결한다. 몇 년 전에 ES5에 새로 추가된 몇 가지 수조 방법은쓰기 좋으나 자주 잊어버리므로 이번 주가 비교적 한가한 틈을 타서 다시 한 번 복습하고 필기를 하여 필기를 하는 좋은 습관을 기르세요.

forEach

map

filter

some

every

reduce

reduceRight

forEach
forEach는 ES5의 Array 방법 중 가장 자주 사용되는 것으로, 반복, 순환 출력이며, 반드시 필요한 리셋 함수를 매개 변수로 받아들인다.

let arr1 = [1,2,3,4]
arr1.forEach((item)=>{
    console.info(item);
})
//1
//2
//3
//4

전통적인 for 순환과 같다.

let arr1 = [1,2,3,4]
for(let i = 1;i){
    console.info(arr1[i])
}
//1
//2
//3
//4

for 순환에 비해forEach는 매우 간결하다.forEach 방법의 리셋 함수는 3개의 매개 변수를 지원하고 첫 번째는 옮겨다니는 그룹 내용이다.두 번째는 대응하는 그룹 인덱스, 세 번째는 그룹 자체다.

[].forEach((value, index, array)=> {
});

예를 들면 다음과 같습니다.

let array1 = [1, 2, 3, 4]
let array2 =[];

array1.forEach( (item, index, array) => {
   console.info(array1 === array);//(4)true
   array2[index] = item * item;
});

console.info(array2);// [1, 4, 9, 16]

forEach는 리셋 함수를 매개 변수로 받아들이는 것 외에 선택할 수 있는 상하문 매개 변수를 받아들인다. (리셋 함수 안의 4this 지향 변경)

array.forEach(callback,[thisObject])

예,obj.consoleFn이 호출된 후,this는 obj를 가리켰습니다.

let obj = {
  nameArr: [" ", " ", " "," "],
  isCat: function (name) {
    return /^ /.test(name);
  },
  consoleFn: function (name) {
    if (this.isCat(name)) {
      console.info(`  ${name}`);
    } else {
      console.info(`   ${name}`);    
    }
  }
}

obj.nameArr.forEach(obj.consoleFn,obj);
//    
//     
//     
//     

다음 예obj.consoleFn은forEach의 매개 변수로 호출되었습니다. 이때forEach의 상하문 매개 변수를 지정하지 않으면 obj입니다.consoleFn에서this가 window를 가리키면 페이지가 잘못됩니다.여기서this에 대한 지식을 얻으려면 이 글인 을 보십시오.
다음 코드는 window 아래에 isCat 함수가 없기 때문에 오류가 발생할 수 있습니다.

let obj = {
  nameArr: [" ", " ", " "," "],
  isCat: function (name) {
    return /^ /.test(name);
  },
  consoleFn: function (name) {
    if (this.isCat(name)) {
      console.info(`  ${name}`);
    } else {
      console.info(`   ${name}`);    
    }
  }
}

obj.nameArr.forEach(obj.consoleFn);// Uncaught TypeError: this.isCat is not a function

forEach는 빈 요소를 반복하지 않습니다.

let array3 = [1,,3]
console.info(array3.length); //3
array3.forEach((item)=>{
    console.info(item);
}); 
//1
//3

map
map은 ES5의 Array 방법 중 가장 기본적인 것으로 그 기본적인 용법은forEach와 유사하고 반복적이며 서로 다른 최종 출력의 새로운 그룹입니다

array.map(callback,[thisObject]);

콜백의 매개 변수는 forEach와 같습니다.

array.map(function(value, index, array) {
//callback   return 
});

map 함수는 원수 그룹을 새로운 수로 비추는 것입니다

let array1 = [1, 2, 3, 4]
let array2 = array1.map( (item, index, array) => {
   return item * item
});

console.info(array2); // [1,4,9,16]

filter
필터는 필터, 필터를 의미합니다.지수 그룹이 Filter를 통과한 후 필터된 새 그룹을 되돌려줍니다.

array.filter(callback,[thisObject]);

filter의callback 함수는 브리 값true나false를 되돌려야 합니다. (되돌림 값이 약하면 ==true/false와 같습니다.) 콜백은return 값이 필요합니다.
예를 들어 다음 그룹에서array4의 두 그룹이 0과false로 되돌아오면 필터가 됩니다.

const array4 = [0, false, 2, 3];
const array5 = array4.filter(function(item) {
    return item;
});
console.info(array5); // [2, 3]

다시 한 번 예를 들면, 수조 중의 돼지를 여과해라.

const array6 = [" ", " ", " ", " "];
const array7 = array6.filter(function(item) {
    if(item == ' ') return false
    else return item
});
console.info(array7); // [" ", " ", " "]

some
some는'일부'를 가리키며,'일부'가 조건에 맞는지 여부를 가리킨다.사용법은 다음과 같습니다.

array.some(callback,[thisObject]);

some는 최소한 1개의 값을 요구하여 콜백이true로 되돌아오게 하면 된다. 다음과 같은 예:

const arrFraction = [60, 80, 95, 70];
const passFraction = 90;//      90        

const result = arrFraction.some((item)=>{return item > passFraction
})
if(result){
    console.info("      ");
}

every
every는 '모든 항목' 을 가리키며, 모든 것이 조건에 부합되어야 하며, 한 항목이 부합되지 않으면false로 되돌아오는 것을 가리킨다.사용법은 다음과 같습니다.

const arrFraction = [91, 93, 95, 89];
const passFraction = 90;//     90        

const result = arrFraction.every((item)=>{
    return item > passFraction
})
if(result){
    console.info("      ");
}else{
    console.info("       ");
}

reduce
reduce는 '축소' 를 의미하며, 하나의 함수를 누적기로 받아들여, 그룹의 모든 값을 왼쪽에서 오른쪽으로 옮겨다니며, 최종적으로 하나의 값으로 계산한다.사용법은 다음과 같습니다.

array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
//total   。   ,            
//currentValue   。    
//currentIndex   。       
//arr   。           。
//initialValue   。         ，   total    

예를 들어, 수조 항목의 합을 구하면, 초기값은 0이고, 아래 코드는 0부터 6까지 추가됩니다.

const arr = [1,2,3,4,5,6];

let sum = arr.reduce(function (total, currentValue) {
    return total + currentValue;
},0);
console.info(sum)

예를 들어 수조의 최소값을 구하다

const arr = [20,20,35,4,15,6];

let min= arr.reduce(function (prev, cur) {
    return Math.min(prev,cur);
});
console.info(min)

reduceRight
reduceRight () 방법의 기능은 Reduce 기능과 같습니다. 다른 것은 옮겨다니는 순서와 반대로, 그룹의 마지막 항목부터 시작하여 첫 번째 항목까지 옮겨다니는 것입니다.