减少代码量,可阅读性更强,有利于性能优化
一、Map
map():对数组中每一项运行给定函数。返回每次函数调用的结果组成的数组。
1.1 给数组每一项都乘以2
let arr = [1, 2, 3, 4, 5];
// for方式
for(let i =0, len = arr.length; i < len; i++) {
arr[i] = arr[i] * 2;
}
console.log(arr); // [2, 4, 6, 8, 10]
// map方式
result = arr.map(function (item) {
return item * 2;
});
console.log(result); // [2, 4, 6, 8, 10]
// ES6方式
result = arr.map(item => item * 2);
console.log(result); // [2, 4, 6, 8, 10]
1.2.对象数组
// 数组包含一些运动员的信息,记录着运动员的姓名和是否签到的信息,如果哪个球员的签到信息isHell为空,就把isHell的值设置为'--'
var sports = [{
name: 'lisi',
isHell: null
}, {
name: 'zhangsan',
isHell: null
}, {
name: 'wangwu',
isHell: true
}];
// for方式
for(var i = 0, len = sports.length; i < len; i++) {
if(!sports[i].isHell) {
sports[i].isHell = '---';
}
}
console.log(sports);
// map方式
sports.map(function (item) {
if(!item.isHell) {
item.isHell = '---'
}
});
console.log(sports);
// ES6方式
sports.map(item => {
if(!item.isHell) {item.isHell = '---'};
});
console.log(sports);
二、filter
filter():对数组中的每一项运行给定函数。返回该函数会返回true的项组成的数组。
var sports = [{
name: 'lisi',
isHell: null
}, {
name: 'zhangsan',
isHell: null
}, {
name: 'wangwu',
isHell: true
}];
// 拿到已经签到了的球员,不要没签到的球员
// for方式
var arr = [];
for(var i = 0, len = sports.length; i < len; i++){
if(sports[i].isHell) {
arr.push(sports[i])
}
}
console.log(arr);
// filter写法
var arr = sports.filter(function (item) { return item.isHell;})
console.log(arr);
// ES6写法
var arr = sports.filter(item => {return item.isHell});
var arr = sports.filter(item => item.isHell);
console.log(arr);
数组去重
var arr = ['A', 'B', 'C', 'D', 'C', 'B', 'A', 'A'];
var newArr = [];
// for方式
for(var i = 0, len = arr.length; i < len; i++){
if(newArr.indexOf(arr[i]) === -1) {
newArr.push(arr[i]);
}
}
console.log(newArr);
// filter写法
var newArr = arr.filter(function (item, index, arr) {
return arr.indexOf(item) === index;
})
console.log(newArr);
// ES6写法
var newArr = arr.filter((item, index, arr) => {
return arr.indexOf(item) === index;
})
console.log(newArr);
三、Every
every()
对数组中的每一项运行给定函数,如果该函数对每一项都返回true,则返回true ;
some()
对数组中的每一项运行给定函数,如果该函数对任一项返回true,则返回true;
every方法
// 运动员进场如果需要每一个球员都必须签到,球队才能进场
var sports = [{
name: 'lisi',
isHell: null
}, {
name: 'zhangsan',
isHell: null
}, {
name: 'wangwu',
isHell: true
}];
// for方式
var isIn;
for(var i = 0, len = sports.length; i < len; i++){
if(!sports[i].isHell) {
isIn = false;
break;
}
}
console.log(isIn);
// every写法
var arr = sports.every(function (item) {
return item.isHell;
})
console.log(arr);
// ES6写法
var arr = sports.every((item) => {
return item.isHell;
});
// 或
var arr = sports.every((item) => item.isHell);
console.log(arr);
some方法
// for方式
var isIn;
for(var i = 0, len = sports.length; i < len; i++){
if(!sports[i].isHell) {
isIn = true;
break;
}
}
console.log(isIn);
// some写法
var arr = sports.some(function (item) {
return item.isHell;
});
console.log(arr);
// ES6写法
var arr = sports.some((item) => {
return item.isHell;
});
// 或
var arr = sports.some((item) => item.isHell);
console.log(arr);
四、forEach
forEach()对数组中的每一项运行给定函数,这个方法没有返回值 ;简单点来说,本质上跟for没有区别,只是写法不一样。
// 只是给每一个数字都加上一个属性sex,值都为‘男’
var sports = [{
name: 'lisi',
isHell: null
}, {
name: 'zhangsan',
isHell: null
}, {
name: 'wangwu',
isHell: true
}];
// for方式
for(var i = 0, len = sports.length; i < len; i++){
sports[i].sex = '男';
}
console.log(sports);
// forEach写法
sports.forEach(function (item) {
item.sex = '男';
})
console.log(sports);
// ES6写法
sports.forEach(item => item.sex = '男')
console.log(sports);
五、reduce方法
reduce()每次只能接受两个参数,我对着两个参数的理解就是,当前结果,和当前序列的下一项。
作用效果和原理就是[x1, x2, x3, x4].reduce(f) = f(f(f(x1, x2), x3), x4)。
5.1 数字数组求和
// 数字数组求和
// for方式
var arr = [1, 2, 3, 4, 5], sum = 0;
for(var i = 0, len = arr.length; i < len; i++) {
sum += arr[i];
}
console.log(sum);
// reduce写法
sum = arr.reduce(function (prev, cur, index, arr) {
return prev + cur;
});
console.log(sum);
// ES6写法
sum = arr.reduce((prev, cur, index, arr) => prev + cur);
console.log(sum);
5.2 字符串数组连接
// 字符串数组连接
var arr1=['字','符','串','数','组','连','接'], sum1 = '';
sum1= arr1.reduce((prev, cur, index, arr) => prev + cur);
console.log(sum1); // 字符串数组连接
六、find和findIndex
find:方法返回传入一个测试条件(函数)符合条件的数组第一个元素。
findIndex:方法返回传入一个测试条件(函数)符合条件的数组第一个元素位置。
当数组中的元素在测试条件时返回true时, find和findIndex返回符合条件的元素或者元素的索引位置,之后的值不会再调用执行函数。如果没有符合条件的元素返回 -1。
// 从[11,22,33,44,55,66]这个数组里面,找出第一个大于30的元素
// for方式
var arr = [11,22,33,44,55,66], str;
for(var i = 0, len = arr.length; i < len; i++) {
if(arr[i] > 30) {
str = arr[i];
break;
}
}
console.log(str);
// find写法
str = arr.find(function (item, index, arr) {
return item > 30;
});
console.log(str);
// ES6写法
str = arr.find((item, index, arr) => item > 30);
// 或
str = arr.find(item => item > 30);
console.log(str);
从[11,22,33,44,55,66]这个数组里面,找出第一个大于30的元素的位置
// for方式
var arr = [11,22,33,44,55,66], getIndex;
for(var i = 0, len = arr.length; i < len; i++) {
if(arr[i] > 30) {
getIndex = i;
break;
}
}
console.log(getIndex);
// findIndex写法
getIndex = arr.findIndex(function (item, index, arr) {
return item > 30;
});
console.log(getIndex);
// ES6写法
getIndex = arr.findIndex((item, index, arr) => item > 30);
// 或
getIndex = arr.findIndex(item => item > 30);
console.log(getIndex);