@[TOC](es6 數(shù)組處理 filter、 find达布、map团甲、some、every躺苦、reduce 之間的區(qū)別)
一身腻、 filter
數(shù)組的過濾或篩選功能匹厘，根據(jù)篩選條件返回一個包含符合條件元素的新數(shù)組嘀趟，不影響原數(shù)組，篩選條件寫在一個函數(shù)中
示例：
1.創(chuàng)建一個數(shù)組愈诚，判斷數(shù)組中是否存在某個值
const array=[ {id:1,name:'javascript',date:'2021-06-01'}, {id:2,name:'css',date:'2021-06-01'}, {id:3,name:'vuejs',date:'2021-06-01'} ] const newArray=array.filter(item=>item.id==3); console.log(newArray); // [{id:3,name:"vuejs",date:"2021-06-01"}]示例1 輸出結(jié)果圖2. 也可通過上面的方法過濾掉id!=3的項
const array=[ {id:1,name:'javascript',date:'2021-06-01'}, {id:2,name:'css',date:'2021-06-01'}, {id:3,name:'vuejs',date:'2021-06-01'} ] const newArray=array.filter(item=>item.id!=3); console.log(newArray); // 輸出結(jié)果為： // [ // {id:3,name:"vuejs",date:"2021-06-01"}, // {id:3,name:"vuejs",date:"2021-06-01"} // ]示例2的輸出結(jié)果圖3.去掉空數(shù)組空字符串、undefined炕柔、null
去空字符串*
const array=['A','B','','D','','F'] const newArray=array.filter(item=>item); console.log(newArray); //["A","B","D","F"]去 undefined*
const array=['a','b','c','d',undefined,'f','g',undefined,'i'] const newArray=array.filter(item=>item); console.log(newArray); //["a","b","c","d","f","g","i"]去 null*
const array=[1,2,3,4,null,6,7,null,9] const newArray=array.filter(item=>item); console.log(newArray); //[1,2,3,4,6,7,9]4.去掉數(shù)組中不符合項
var array = [20,80,50,96,40] var newArray = array.filter(item => item>40) console.log(newArray); //[80,50,96]5.過濾不符合項
var array = ['20','60','33','77','42'] var newArray = array.filter(item => item.indexOf('2')<0) console.log(newArray); //["60","33","77"]6.數(shù)組去重
var arr = [1, 2, 2, 3, 4, 5, 5, 6, 7, 7,8,8,0,8,6,3,4,56,2]; var arr2 = arr.filter((x, index,self)=>self.indexOf(x)===index) console.log(arr2); //[1, 2, 3, 4, 5, 6, 7, 8, 0, 56]7.數(shù)組去重es6
var arr=[1,2,1,'1',null,null,undefined,undefined,NaN,NaN] let res=Array.from(new Set(arr));//{1,2,"1",null,undefined,NaN} //or let newarr=[...new Set(arr)]
二匕累、 find 和 findIndex
find
數(shù)組實例的find方法陵刹，用于找出第一個符合條件的數(shù)組成員欢嘿。它的參數(shù)是一個回調(diào)函數(shù)，所有數(shù)組成員依次執(zhí)行該回調(diào)函數(shù)炼蹦，直到找出第一個返回值為true的成員，然后返回該成員掐隐。如果沒有符合條件的成員，則返回undefined斗搞。
var array = ['60','33','77','20','42'] var newArray = array.find(item => item<40) console.log(newArray); //33find方法的回調(diào)函數(shù)可以接受三個參數(shù)慷妙，依次為當(dāng)前的值、當(dāng)前的位置和原數(shù)組膝擂。
[1, 5, 10, 15].find(function(value, index, arr) { return value > 9; }) // 10
findIndex
數(shù)組實例的findIndex方法的用法與find方法非常類似，返回第一個符合條件的數(shù)組成員的位置架馋，如果所有成員都不符合條件，則返回-1萍启。
[1, 5, 10, 15].findIndex(function(value, index, arr) { return value > 9; }) // 2這兩個方法都可以接受第二個參數(shù)，用來綁定回調(diào)函數(shù)的this對象勘纯。
find函數(shù)接收了第二個參數(shù)person對象，回調(diào)函數(shù)中的this對象指向person對象驳遵。function f(v){ return v > this.age; } let person = {name: 'John', age: 20}; [10, 12, 26, 15].find(f, person); // 26另外淫奔，這兩個方法都可以發(fā)現(xiàn)NaN堤结，彌補了數(shù)組的indexOf方法的不足。
indexOf方法無法識別數(shù)組的NaN成員竞穷，但是findIndex方法可以借助Object.is方法做到。[NaN].indexOf(NaN) // -1 [NaN].findIndex(y => Object.is(NaN, y)) // 0
三妒蔚、 map
map方法：可以簡單的理解為映射
var arr=[1,2,3,4]; console.log( arr.map((n)=>n*n) );//[1, 4, 9,16] console.log( arr.map((n)=>n-1) );//[0, 1, 2, 3]數(shù)組的映射月弛，返回一個新數(shù)組，其值是通過函數(shù)處理過的值
let arr = [2,3,5,6] let arr1 = arr.map(function(item){ return item +1; }) console.log(arr1)//[3,4,6,7] let arr = [2,3,5,6,7,8] let arr1 = arr.map(function(item){ return item >5; }) console.log(arr1)//[false,false,false,true,true,true]
四帽衙、 some
some() 方法會依次執(zhí)行數(shù)組的每個元素：
如果有一個元素滿足條件贞绵，則表達式返回true , 剩余的元素不會再執(zhí)行檢測。
如果沒有滿足條件的元素榨崩，則返回falselet arr = [2, 4, 6, 8]; let flag = arr.some(function(item) { return item > 5 }); console.log(flag); //true
五、 every
every（）檢測數(shù)組中的所有元素是否都滿足函數(shù)的中的篩選條件
都滿足返回true
否則返回falselet arr = [2, 4, 6, 8]; let flag = arr.every(function(item) { return item > 6 }); console.log(flag); //false ```
六翩剪、 reduce
從左到右累加數(shù)組中的值彩郊，最后得到的仍是一個值
let arr = [2,3,5,6,7,8,'a'] let arr1 = arr.reduce(function(val,item,index,origin){ //val是累加值，item是當(dāng)前值秫逝，index下標(biāo)從1開始，arr[0]默認(rèn)為第一次的累加值违帆，origin是數(shù)組本身 console.log(val,item,index,origin) return val+item }) console.log(arr1)// '31a'
