JavaScript基础学习-数组中的常用遍历方法

数组常用的遍历方法

这几个方法都不会改变原数组。这些方法只有在实际应用中才能体会到它们的强大作用，这里只是罗列它们的一些知识点。

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，只是返回的都是索引。