浅谈数组处理的方法

数组处理的方法有很多,如果我们想对里面的任何一项数据进行操作,那我们最常用的方法就是 for 循环, 有的时候for循环也特别麻烦,其实数组有很多操作数据的方法

一, map方法

如果你在用reat,这个方法一定是经常用到的,我们在渲染list列表的时候通常就会用这个方法

map(); 是对数组里面每一项数据进行操作,返回每次调用的结果组成的数组, 假如要给数组里面的每一个数乘以2

for方式

let arr = [1, 2, 3, 4, 5];
for (let i = 0; i < arr.lrngth; i ++) {
arr[i] = arr[i] * 2;
}

map方式

let arr = [1, 2, 3, 4, 5];
arr.map(function(item) {
return item * 2
});

es6写法

let arr = [1, 2, 3, 4, 5];
arr.map(item => item * 2);

二, filter

filter(); 顾名思义就是过去的意思,可以更加返回的条件进行筛选,加入有一个数组,里面是一个个对象,要筛选出符合条件的对象,就可以用这个方法,这个方法返回一个新的数组

let list = [
{name: 'aa', age: 22},
{name: 'bb', age: 21},
{name: 'cc', age: 20},
{name: 'dd', age: 22}
]
list.filter(function(item) {
return item.age > 21;
});

三, every和some

every();和some为什么要写到一起呢,就是因为这两个方法长得太像了,every();对数组中每一项都给定行数,如果函数对每一项都返回true,则返回true; 而some,是对数组中每一项给定函数,只要有一项返回true, 则返回true, 有点类似于&& 与 || ,假如一个签到,要每个人到了才能开始,就可以用every

let list = [
{name: 'aa', age: 22, isHell: true},
{name: 'bb', age: 21, isHell: true},
{name: 'cc', age: 20, isHell: true},
{name: 'dd', age: 22, isHell: true}
]
list.every(item => item.isHell)

可以看到要每一个都满足条件,才会返回true,只要有一个不满足则返回false;

再来看看some();



some()只有所有的条件不满足才会返回false;

四, forEach

forEach();是对数组中每一项运行给定函数,但是没有返回值,这个方法和for循环差不多,只是写法上不一样而已,假如要给每一个对象都加一个属性,就可以用这个方法



五, reduce

reduce(); 每次只能接受两个参数,这两个参数就是当前的结果,和当前序列的下一项,这个方法常用在累加器上,其他的技巧暂时没有发现



如果数组里面是字符串,返回出来的数据就是每一项字符串拼接之后的新字符串



六, find 和 findIndex

find();传入一个测试条件,或者函数, 返回数组中符合条件的第一个元素.

findIndex(), 传入一个测试条件或者函数,返回素组中符合条件的第一个元素的索引值

当数组中的元素满足测试条件时,find和fandIndex返回符合条件的第一个元素或者索引,之后就不会再调用执行函数,如果都没有符合条件的元素,返回 -1;

比如要从一个数组中找出第一个大于 30 的元素和索引值



参考: https://juejin.im/post/5a0c16d16fb9a0450b65edad