文章案例有的内容是采用的是ES6中的箭头函数进行编写,不懂箭头函数怎么使用的可以跳到文章末尾有对箭头函数的使用做说明
1.map 映射
对数组中的内容进行操作,操作之后数组的数量不变,一个参数item
,当前索引所在的值
let arr = [5,8];
let arr1 =arr.map(function(item){
//item 为当前数组的参数
return item*3
})
let arr2 = arr.map(item=>{item*3})
//返回的值为arr2为[15,24]
----------------------------------------------------------------
let arr = [55,70];
let res = arr.map(item={
if(item>=60) return '及格'
else return '不及格'
})
//res的值为['不及格','及格']
2. reduce 汇总
对数组中的数据进行操作,返回最终的结果,三个参数,
temp
: 上一次操作之后的结果
item
: 当前操作的时候数组中的值
index
: 下标,console.log打印的时候是从1开始的
当第一次计算结果的时候temp是从0开始的,所以当temp有值的时候index为1,所以又可以说reduce是从1开始的
let arr = [11,1515,2151,155]
//求总数
let arr1 = arr.reduce(function(temp,item,index){
return temp+item;
})
------------------------------------------
//简写求总数
let arr2 = arr.reduce((temp,item,index)=>temp+item)
//简写求平均数
let arr3 = arr.reduce((temp,item,index)=>{
if(index!=itemarr.length-1){
return temp+item;
}else{
return (temp+item)/arr.length
}
})
3. filter 过滤
对数组中的内容进行筛选过滤,通过return true或者false来决定值的去留
let arr = [1,3,5,22,41]
let arr2 = arr.filter(item=>{
return item%2==0
});
console.log(arr2)
4. forEach 循环/迭代
循环迭代,有两个参数
item
:每次循环中数组的内容
index
:每次循环的下标,当不需要index的时候可以不省略
let arr = [1,2,3,4,5]
arr.forEach((item,index)=>{
console.log("第"+index+'是:'+item)
})
forEach在使用过程中不能直接在代码中进行break终止本次循环,当在forEach要终止本次循环需要使用try…catch…进行抛出异常进行终止
try{
let arr = [1,2,3,4,5];
arr.forEach(item=>{
if(item==5) throw new Error()
})
}catch(e){
}
console.log(1314)//当前的代码不影响执行
//另外如果循环需要进行跳出不建议使用forEach,我们可以采用some或者every
5. some 检查
对数组中的没一个元素进行检查,直接返回true或者false,当函数中有内容为true的时候整个some的返回值为true,当检查有值为true的是则函数不在进行下一步检查,有三个参数
item
: 当前执行数组中的值
index
: 当前执行的下标,从0开始
array
:进行判断的数组
let arr = [1,2,34,1];
let a = arr.some((item,index,array)=>{
return item>10
});
console.log(a);
6.find查找
查找数组中第一个符合条件的数组元素,它的参数是一个回调函数,在回调函数中可以写需要进行查找元素的条件,当条件为true的时候,返回该元素,当没有符合条件的元素,则返回为undefined
const arr = [1,2,3,4]
let v = arr.find(item=>item>2);//返回第一个符合条件的,v的值为3
总结
ES6虽然新增了许多对数组操作的方法,但是也需要根据我们的需求择优的选取方法进行使用
1.有的时候我们需要对数组中的内容进行操作,这种情况下我们采用map
2.对数组中的内容进行计算,这种情况下采用reduce
3.对数组中的内容进行筛选,选取我们需要的值,这种情况下使用filter
4.对数组中的内容进行查找,当有符合我们需要的值时,终止掉数组,这种情况下使用some或者every
5.对数组中内容进行查找,我们可以采用find
补充
简要的讲一下箭头函数,箭头函数的使用可以理解为省略掉普通函数中的function
function(){
//代码块
}
()=>{}
let arr = [1,55,13,515];
//非箭头函数写法
arr.sort(function (n1,n2) {
return n1-n2
});
//箭头函数写法
arr.sort((n1,n2)=>n1-n2)
注意:
- 如果有且仅有一个参数的情况下()可以不写
- 如果有且仅有一个语句,并且是return的情况下{}可以不写
let a = function(n){
return n+5
}
//简写
let a = n=>n+5 - 在普通函数中this的指向为当前 被调用的对象,在箭头函数中this的指向为当前调用的环境