【原】javascript筆記之Array方法forEach&map&filter&some&every
做前端有多年了,看過不少技術文章,學了新的技術,但更新迭代快的大前端,龐大的知識庫,很多學過就忘記了,特別在專案緊急的條件下,哪怕心中隱隱約約有學過一個方法,但會下意識的使用舊的方法去解決,多年前ES5幾個新增的陣列方法,好用但是常忘記用,趁著這周比較清閒,重溫下並做下筆記,養成記筆記的好習慣。
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分就通過入學考試 function higherThanCurrent(score) { return score > current; } 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分就通過入學考試 function higherThanCurrent(score) { return score > current; } const result = arrFraction.every((item)=>{ return item > passFraction }) if(result){ console.info("通過入學考試"); }else{ console.info("不通過入學考試"); }