浅谈数组处理的方法
浅谈数组处理的方法
数组处理的方法有很多,如果我们想对里面的任何一项数据进行操作,那我们最常用的方法就是 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