es6中數組新增常用的4個方法是:1、forEach(),用於遍歷數組,無返回值;2、filter(),過濾掉數組中不滿足條件的值;3 、map(),遍歷數組,傳回一個新數組;4、reduce(),讓數組的前後兩項進行某種計算,然後傳回其值。
本教學操作環境:windows7系統、ECMAScript 6版、Dell G3電腦。
ES6中新增4個很實用的陣列方法,分別有:forEach,filter,map ,reduce。
1.forEach
遍歷數組,無回傳值,不改變原始數組,僅只是遍歷--相當於for迴圈
let arr=[23,44,56,22,11,99] let res=arr.forEach(item=>{ console.log(item); //23,44,56,22,11,99 }) let res2=arr.forEach((item,index)=>{ console.log(item,index); //23 0 //44 1 //.... })
2.filter:
filter()函數過濾掉陣列中不滿足條件的值,如果回呼函數回傳true就留下,回傳一個新數組,不改變原數組,! ! !可以用來做陣列去重
let arr = [1,5,2,16,4,6] //1.找出数组中的偶数 let newArr=arr.filter((v,i)=> v%2==0) console.log(newArr,'newArr');//2,16,4,6 //2.过滤器 保留为TRUE的结果 let arrTue=[13,14,9,33] let newArr2=arrTue.filter(item=>(item%3===0)?true:false) console.log(newArr2,'newArr2');//9,33 //3.利用filter去重‘ // 第一种 let arr3=[2,3,5,1,2,3,4,5,6,8],newArr3 function unique(arr){ const res = new Map() return arr.filter((item)=> !res.has(item) && res.set(item,1) ) } console.log(newArr3=unique(arr3),'newArr3');//2,3,5,1,4,6,8 //第二种 let testArray = [ {key:"01",name:'张三'}, {key:"02",name:'小李'}, {key:"03",name:'小罗'}, {key:"04",name:'张三'}, {key:"03",name:'小李'}, ]; let deduplicationAfter = testArray.filter((value,index,array)=>{ //findIndex符合条件的数组第一个元素位置。 return array.findIndex(item=>item.key === value.key && item.name === value.name) === index }) console.log(deduplicationAfter)
#3.map :
##map遍歷數組,返回一個新數組,不改變原始數組, 映射一個對一個,映射到一個新數組let arr = [6,10,12,5,8] let result = arr.map(function (item) { return item*2 }) let result2 = arr.map(item=>item*2) // es6的箭头函数简写,若想了解,后面的文章有介绍 console.log(result) console.log(result2) let score = [18, 86, 88, 24] let result3 = score.map(item => item >= 60 ? '及格' : '不及格') console.log(result3)
4.reduce:
reduce()匯總一堆出來一個(用於比如,算個總數,算個平均),reduce讓數組的前後兩項進行某種計算,然後返回其值,並繼續計算,不改變原數組,返回計算的最終結果,如果不給定初始值,則從數組的第二項開始遍歷arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue]) ,第一個參數回呼函數,第二個參數初始值
4.1求和
//第一种给定初始值 var arr = [1, 3, 5, 7]; // 原理: 利用reduce特性 prev初始值设置0 并把函数的返回值再次带入函数中 var sum = arr.reduce(function (tmp, item,index) { // prev 初始为0 以后则为函数返回的值 console.log(tmp,item,index); // 0 1 0 // 1 3 1 // 4 5 2 // 9 7 3 return tmp + item; // 数组各项之间的和 }, 0); console.log(sum); //16 //第二种不给初始值 var arr2 = [1, 3, 5, 7] var result = arr2.reduce(function (tmp, item, index) { //tmp 上次结果,item当前数,index次数1开始 console.log(tmp, item, index) //1 3 1 // 4 5 2 // 9 7 3 return tmp + item; }) console.log(result,) //16
#4.2 求平均數
var arr = [1, 3, 5, 7] var result = arr.reduce(function (tmp, item, index) { console.log(tmp,item,index); // 1 3 1 // 4 5 2 // 9 7 3 if (index != arr.length - 1) { // 不是最后一次 return tmp + item } else { return (tmp + item)/arr.length } }) console.log(result,'[[[u99') // 平均值 4【相關推薦:
以上是es6中陣列新增常用的4個方法是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章!