【原】javascript筆記之Array方法forEach&map&filter&some&every&reduce&reduceRight

作前端有多年了，看過很多技術文章，學了新的技術，但更新迭代快的大前端，龐大的知識庫，不少學過就忘記了，特別在項目緊急的條件下，哪怕心中隱隱約約有學過一個方法，但會下意識的使用舊的方法去解決，多年前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<arr1.length;i++){
    console.info(arr1[i])
}
//1
//2
//3
//4

相比for循環，forEach簡潔了不少，forEach方法中的回調函數支持3個參數，第1個是遍歷的數組內容；第2個是對應的數組索引，第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除了接受一個回調函數做爲參數，還接受一個可選的上下文參數（改變回調函數裏面的this指向）。

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的知識，能夠查看這篇文章《javascript筆記之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]);

callback的參數跟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爲「過濾」、「篩選」之意。指數組經過filter後，返回過濾後的新數組。

array.filter(callback,[thisObject]);

filter的callback函數須要返回布爾值true或false(返回值只要是弱等於== true/false就能夠了)，callback須要有return值

好比，下面數組中array4的前2個組返回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個值讓callback返回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功能是同樣的，不一樣的是遍歷的順序相反，它是從數組的最後一項開始，向前遍歷到第一項