数组常用的遍历方法
这几个方法都不会改变原数组。这些方法只有在实际应用中才能体会到它们的强大作用，这里只是罗列它们的一些知识点。
forEach() IE6-8不兼容
- 用来遍历数组中的每一项；
- 参数
- 1.回调函数 forEach(function(item,index,list))
- 2.上下文（改变回调函数中的this指向）
- 返回值：没有
- 原有数组不会改变
理论上是没有返回值的，仅仅是对数组进行遍历，不会改变数组。但是可以通过索引来改变原有的值
无法直接退出循环，只能使用return来达到for循环中continue的效果。
回掉函数中的作用
会传递三个参数
- item 数组中的当前项
- index 当前项的索引index
- 原始数组 input
执行次数
- 数组中有几项，那么传递进去的匿名回调函数就会执行几次
map() IE6-8不兼容
和forEach非常类似，但是map的回调函数中支持返回值：return的是啥，相当于把数组中的这一项变为啥
- 该方法就支持返回值了。可以理解为map是映射的关系，将一个数组中的每一项做一个转换，结果生成一个新数组，并且新数组的长度和原数组一样
- 该方法可以应用于改变原数组中的某一项，通过条件判断替换掉原有项
- 被替换的那一项，不一定是原来的数据类型。可以随意替换已有的数据类型。
- 例如：将后台传递过来的数据，生成HTML结构，这时就可以舍弃字符串拼接。可以直接运用该方法，就每一项数据映射成一条HTML语句。
- 在回调函数中，如果没有返回值，则得到的是undefined
- 用法
var num = 3;
var obj = {name:100};
var arr = [{name:1},{name:3},{name:2},{name:3}];
var newArr = arr.map(function (item,index) {//返回成一个新的数组
if(item.name == num){ //如果当前项找到了，将最新的对象返回替换掉原有的
return obj;
}
return item;
});
filter() 过滤 ES5
该方法可以看作是过滤，按照某规则提取出一些特定的项来，生成一个新数组，但新数组的长度小于或等于原数组
- callback将数组元素当参数传入，并返回一个布尔值。当返回值为真时，该元素被假如到新的数组中，否则就被过滤掉，不会出现在新数组中。常用来当作删除使用。
- ，根据已知的条件，把与已知条件相关的数据进行处理。在遍历过程中，如果找到与已知条件相符合的数据，返回true 就是保留该数据；返回false就是删除数据。执行完该方法后，会返回一个新的数组，不改变原数组。
- 用法
var num = 3;
var arr = [{name:1},{name:3},{name:2},{name:3}];
//filter 过滤 如果在filter函数中返回true表示保留，返回false删除，
var newArr = arr.filter(function (item,index) {
return item.name != num;
});
//会返回一个新的数组
find() 查找 ES6
find方法对数组中的每一项元素执行一次callback函数，直到有一个callback返回true，就会停止执行。意味着，只要找到符合条件的那一项，返回true。并把这一项的值返回。就不再查找了
- 该方法可以用来对一组数据中具有某个属性值，进行判断。如果整个数组有这个属性值，将要做什么。只要有一个不是，又要做什么。例如，购物车中的全选和非全选，只要有一个没有被选中，全选的checkbox就不能打√，如果全都选中，就打上√
- 用法
//查询(find) findOne 查到一项后返回当前项 不继续查找
var num = 3;
var arr = [{name:1},{name:3,age:100},{name:2},{name:3}];
//返回找到的那一项
var obj = arr.find(function (item,index) {
//找到后返回true即可
if(item.name ==num){
return true;//返回true则会将当前item返回
}
});
findIndex()es6
和find方法一样，只是返回不一样，find返回的当前符合条件的元素，而findIndex返回的是符合条件的元素的索引。
every()方法
方法使用传入的函数测试所有的元素，只要其中有一个函数返回值为false，那么该方法的结果为false;如果全部返回true，那么该方法的结果才为true.
some()方法
与every()方法正好相反，some测试数组元素时，只要有一个函数返回值为true，则该方法返回true，若全部返回false,则该方法返回false。
reduce(）方法
reduce()方法接受一个方法作为累加器，数组中的每一值（从左到右）开始合并，最终为一个值
语法：arr.reduce(fn, initialValue)
fn 表示在数组每一项上执行的函数，接受四个参数：
- previousValue上一次调用回调返回的值，或者提供的初始值；
- value数组中当前被处理元素的值
- index当前元素在数组中的索引
- array原数组
initialValue指定第一次调用fn的第一个参数。
当fn第一次执行时：
- 如果initialValue在调用reduce时被提供，那么第一个previousValue将等于initalValue,此时item等于数组中的第一值；
- 如果initailValue未提供，那么previousValue等于数组中的第一个值，item等于数组中的第二个值。此时如果数组为空，那么将抛出TypeError
- 如果数组仅一个元素，并且没有提供viitalValue，或提供了initialValue但数组为空，那么fn不会被执行，数组的唯一值将被返回
var ary = [3,4,5,6];
var res = ary.reduce(function (pre,value,index,array) {
return pre+value
},1);
console.log(res);// 19
const data = ['car', 'car', 'truck', 'truck', 'bike', 'walk', 'car', 'van', 'bike', 'walk', 'car', 'van', 'car', 'truck', 'pogostick'];
const transportation = data.reduce(function(obj, item) {
if (!obj[item]) {
obj[item] = 0;
}
obj[item]++;
return obj;
}, {});
console.log(transportation);
reduceRight
与reduce一致，只是累加的方向该为从右往左累加
entries(ES6)
返回一个数组迭代器对象，该对象包含数组中每个索引的键值对；
语法：arr.entries()
var ary = [1,2,3,4,5];
var res = ary.entries();
console.log(res.next()); // { value: [ 0, 1 ], done: false }
console.log(res.next().value);// [ 1, 2 ]
keys(ES6)
返回一个数组索引的迭代器，类似于entries，只是返回的都是索引。
网友评论