-
map()
原数组被“映射”成对应新数组,返回一个新数组。map可以改变当前循环的值,返回一个新的被改变过值之后的数组(map需return),一般用来处理需要修改某一个数组的值。
注:map方法不会改变原始值,它会返回一个新的数组let oldArr = [1, 2, 3, 4];
let newArr = oldArr.map(((value, index, array) => {
console.log(index + ':' + value);
return value * value;
}));
console.log(oldArr);
console.log(newArr);
结果为:0:1
1:2
2:3
3:4
[ 1, 2, 3, 4 ]
[ 1, 4, 9, 16 ]
-
filter()
遍历数组中每个元素返回一个满足返回条件的新数组,起到一个过滤作用。
注:filter方法也不会改变原始数组,会返回一个筛选成功匹配的元素组成的新数组let oldArr = [1, 2, 3, 4, 5, 6, 7, 8];
let newArr = oldArr.filter(((value, index, array) => {
console.log(index + ':' + value);
return value % 2 !== 0;
}));
console.log(oldArr);
console.log(newArr);
结果为:0:1
1:2
2:3
3:4
4:5
5:6
6:7
7:8
[ 1, 2, 3, 4, 5, 6, 7, 8 ]
[ 1, 3, 5, 7 ]
-
forEach()
遍历数组全部元素,利用回调函数对数组进行操作
注:forEach方法自动遍历数组.length次,且无法break中途跳出循环,不可控不支持return操作输出,return只用于控制循环是否跳出当前循环let oldArr = [1, 2, 3, 4, 5, 6, 7, 8];
let newArr = oldArr.forEach((value, index, array) => {
if( value === 5 ){
return;
}
console.log(index + ':' + value);
});
结果为:0:1
1:2
2:3
3:4
5:6
6:7
7:8
[ 1, 2, 3, 4, 5, 6, 7, 8 ]
undefined
-
find()
该方法主要应用于查找第一个符合条件的数组元素。它的参数是一个回调函数。在回调函数中可以写你要查找元素的条件,当条件成立为true时,返回该元素。如果没有符合条件的元素,返回值为undefined。let oldArr = [1, 2, 3, 4, 5, 6, 7, 8];
let result = oldArr.find(((value, index, array) => {
return value > 5;
}));
console.log(oldArr);
console.log(result);
结果为:[ 1, 2, 3, 4, 5, 6, 7, 8 ]
6
-
findIndex()
findIndex()与find()的使用方法相同,只是当条件为true时findIndex()返回的是索引值,而find()返回的是元素。如果没有符合条件元素时findIndex()返回的是-1,而find()返回的是undefined。let oldArr = [1, 2, 3, 4, 5, 6, 7, 8];
let result = oldArr.findIndex(((value, index, arr) => {
return value > 8;
}));
console.log(oldArr);
console.log(result);
结果为:[ 1, 2, 3, 4, 5, 6, 7, 8 ]
-1
-
every()
判断数组中的所有元素是否都符合某种条件。let oldArr = [1, 2, 3, 4, 5];
let result = oldArr.every(((value, index, arr) => {
return value < 5;
}));
console.log(oldArr);
console.log(result);
结果为:[ 1, 2, 3, 4, 5 ]
false
-
some()
判断数组中是否含有符合条件的元素。let oldArr = [1, 2, 3, 4, 5];
let result = oldArr.some(((value, index, arr) => {
return value < 2;
}));
console.log(oldArr);
console.log(result);
结果为:[ 1, 2, 3, 4, 5 ]
true
-
reduce()
reduce方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。reduce() 方法接受四个参数:初始值(或者上一次回调函数的返回值),当前元素值,当前索引,调用 reduce() 的数组。
注:下面两个常用例子,第一个为数组求和,第二个为数组去重let array = [1, 2, 3, 4, 4, 5, 5, 6, 7, 8];
let result = array.reduce(((previousValue, currentValue, currentIndex, array) => {
console.log(`${previousValue} : ${currentValue} : ${currentIndex}`);
return previousValue + currentValue;
}), 0);
console.log(result);
结果为:0 : 1 : 0
1 : 2 : 1
3 : 3 : 2
6 : 4 : 3
10 : 4 : 4
14 : 5 : 5
19 : 5 : 6
24 : 6 : 7
30 : 7 : 8
37 : 8 : 9
45
let person = [
{id: 0, name: "张三"},
{id: 1, name: "李四"},
{id: 2, name: "王五"},
{id: 3, name: "赵六"},
{id: 1, name: "田七"},
{id: 2, name: "孙八"},
];
let obj = {};
person = person.reduce((cur,next) => {
obj[next.id] ? "" : obj[next.id] = true && cur.push(next);
return cur;
},[]);
console.log(person);
结果为:[
{ id: 0, name: '张三' },
{ id: 1, name: '李四' },
{ id: 2, name: '王五' },
{ id: 3, name: '赵六' }
]