ES新增数组⽅法--filtermapreduceforEachsomeevery
前⾔
本⽂对ES5新加的⼀些数组⽅法的使⽤做个简单演⽰
1.forEach()：
arr.forEach(function(vlaue, index, [array])) 分别对应数组的value（值）、index（索引号）、数组本⾝
遍历数组的全部元素，即使return true也不会终⽌迭代，因为forEach本质是⼀个函数，参数是⼀个回调函数，回调函数的return只是终⽌了回调函数⽽已，不是终⽌forEach，⽽forEach内部应该是多次调⽤了那个函数
var arr =[1,2,3];
var s =0;
arr.forEach(function(value, index, arr){
s += value;
})
console.log(s);
2.filter():
filter() ⽅法创建⼀个新数组，新数组中的元素是通过检查指定数组中符合条件的所有元素，主要⽤于筛选数组（注意它直接返回⼀个新数组）
array.filter(function(currentValue, index, [arr])) 分别对应currentValue（数组当前项的值），index（索引号），arr（数组本⾝），它的回调函数返回的必须是⼀个Boolean值，返回true⾃动将value加⼊新数组中，false则过滤掉，最后整体返回⼀个新数组
var newArr = arr.filter(function(value, index){
return value >=20;
})
3.some()：
some()⽅法⽤于检测数组中的元素是否 存在 满⾜指定条件，通俗点就是查数组中是否有满⾜条件的元素，到第⼀个满⾜条件的元素则停⽌
（注意它返回的是布尔值）在some⾥设置return true 以终⽌遍历
array.some(function(currentValue, index, [arr])) 分别对应currentValue（数组当前项的值），index（索引号），arr（数组本⾝）
var arr =['pink','red','green'];
var flag=arr.some(function(value, index, arr){
return value =='pink';
})
console.log(flag);
4.map()
⽅法返回⼀个新数组，数组中的元素为原始数组元素调⽤函数处理后的值。和forEach相似，不同在于：
如果更改数组内的值，forEach 不能确保数组的不变性。这个⽅法只有在你不接触⾥⾯的任何值时，才能保证不变性。由于它们之间的主要区别在于是否有返回值
map会制作⼀个新的数组，⽽forEach只会映射到原数组，所以可能改变原数组的值。
let newarr = arr.map(function(value, index){
return value *2;
})
map的不变性：当数组为基础类型时原数组不变
let array=[1,2,3,4,5]
let newArray=array.map((item)=> item*2)
console.log(array);// [1,2,3,4,5]
console.log(newArray);//[2, 4, 6, 8, 10]
当数组为引⽤类型时原数组发⽣改变： map是浅拷贝
let array =[{ name:'Anna', age:16},{ name:'James', age:18}]
let newArray=array.map((item)=>{
item.like='eat';
return item;
})
console.log(array);// [{ name: 'Anna', age: 16,like: "eat"},{ name: 'James', age: 18,like: "eat"}] console.log(newArray);//[{ name: 'Anna', age: 16,like: "eat"},{ name: 'James', age: 18,like: "eat"}]
5.every()
⽅法⽤于检测数组所有元素是否都符合指定条件
参数分别对应回调函数(callback)和初始值(initialValue)对数组中所有内容进⾏汇总，有点像递归
let total = a.reduce(function(preValue, currValue){
return preValue + currValue;
},0);
//第⼆个参数0，是作为初始化，为第⼀次回调函数的prevalue
// 遍历到第⼀次时，preValue为初始值，currValue为数组⾥的第⼀个值
// 遍历到第⼆次时，preValue为第⼀次返回的值，currValue为数组⾥第⼆个数
以上ES5数组⽅法有助于链式编程（函数式编程），⽐如：
//this.$store.state.cartList 是⼀个数组
this.$store.state.cartList
.filter((item)=> item.checked ===true)
.
reduce((preValue, item)=>{
return preValue + unt * item.price;
},0)
.toFixed(2);
forEach、some和filter区别
var arr =['pink','red','green'];
arr.forEach(element =>{
if(element =='pink'){
return true;//不会终⽌迭代
}
});
arr.some(e =>{
if(e =='pink'){
return true;//终⽌迭代，效率更⾼，适合查唯⼀性元素。
}
});
arr.filter(e =>{
if(e =='pink'){
return true;//也不会停⽌迭代
}
filter过滤对象数组});
⼩案例
需求
过滤掉数组中⼩于100的数
将过滤后的数组中所有元素*2
乘2后数组中元素的和
三种函数链式使⽤
const app =new Vue({
el:"#app",
data:{
nums:[10,20,111,222,333,444,40,50]
},
methods:{
/
/规范版
useOnceCount(){
let total =this.nums.filter(function(n){
return n <100
}).map(function(n){
return n *2
}).reduce(function(preValue,n){
return preValue + n
},0)
return total
},
/
/箭头函数版
useOnceRowCount(){
let total =this.nums.filter(n => n <100).map(n => n *2).reduce((preValue,n)=> preValue+n) return total
}
}
})

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。