JavaScript数组遍历和过滤常用方法

一、基本迭代方法

1.for语句

    var itemList = [
        {key: 1, label: 'Java', content: 'Java编程语言'},
        {key: 2, label: 'C++', content: 'C++编程语言'},
        {key: 3, label: 'C#', content: 'C#编程语言'}
    ];

  for(var i = 0;i<itemList.length;i++){
        console.info(itemList[i]);
        if(itemList[i].key === 2){
            console.info(itemList[i].content);
        }
    }
    输出结果为：{key: 1, label: "Java", content: "Java编程语言"}
              {key: 2, label: "C++", content: "C++编程语言"}
              C++编程语言
              {key: 3, label: "C#", content: "C#编程语言"}

二、ECMASCript5定义中的方法

1、ES5版本里面定义了5个方法迭代数组。每个方法都接收2个参数：要在每一项上运行的函数 和 运行该函数的作用域对象(可选)。函数会接收3个参数：每次迭代数组项的值、该项在数组中的位置以及数组对象本身。

• every()：对数组中的每一项运行给定函数，如果该函数对每一项都返回true,则返回true，否则返回false。
• some()：对数组中的每一项运行给定函数，如果该函数对任一项返回true，则返回true。
• filter()：对数组中的每一项运行给定函数，返回该函数会返回true的项组成的数组。
• forEach()：对数组中的每一项运行给定函数，这个没有返回值。
• map()：对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组。

   var result = itemList.every((item, index, array) => {
        return item.key === 2;
    })
    // =>是ES6新增的箭头函数 ，使用箭头定义函数
    console.info(result); //结果为：false
    
   var somResult = itemList.some((item, index, array) => {
        return item.key === 2;
    })
    console.info(somResult);//结果为：true

    var filterArr = itemList.filter((item, index, array) => {
        return item.key > 1;
    });
    console.info(filterArr);//结果为 包含key为2、3对象的数组 [{…}, {…}]
    // 对查询符合某些条件的所有数组项非常有用。

   let mapArray = itemList.map((item, index, array) => {
        return item.key * 2;
    });
    console.info(mapArray);//结果为：数组： [2, 4, 6]
    
    itemList.forEach((item, index, array) => {
        //纯粹遍历
        console.info(item);
    });
   //运行结果为：
   {key: 1, label: "Java", content: "Java编程语言"}
   {key: 2, label: "C++", content: "C++编程语言"}
   {key: 3, label: "C#", content: "C#编程语言"}

2.reduce()和reduceright()方法
这2个方法都会遍历数组的所有项，然后构建一个最终返回的值。
reduce方法从数组的第一项开始，而reduceRight则从数组的最后一项开始，向前遍历到第一项。
这2个方法都接受2个参数：要在每一项上运行的函数 和初始值。函数接收4个参数：前一个值、当前值、项的索引和数组对象。
这个函数返回的任何值都会作为第一个参数自动传给下一项。

    var result = [1, 2, 3, 4, 5, 6].reduce((pre, curr, index, arr) => {
        return pre + curr;
    });
    console.info("结果是："+result); // 结果是：21

三、ECMAScript 6.0（ ES6、ES2015+）定义中的方法

1.find和findIndex
数组实例的find方法，用于找出第一个符合条件的数组成员。它的参数是一个回调函数，所有数组成员依次执行该回调函数，直到找出第一个返回值为true的成员，然后返回该成员。如果没有符合条件的成员，则返回undefined。
find方法的回调函数包含3个参数：每次迭代数组项的值、该项在数组中的位置以及数组对象本身。

   var findRe = itemList.find((item, index, array) => {
        return item.key === 2;
    });
    console.info(findRe);//结果为:{key: 2, label: "C++", content: "C++编程语言"}

数组实例的findIndex方法的用法与find方法非常类似，返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1。

   var index= itemList.findIndex((item, index, array) => {
        return item.key === 2;
    });
   console.info(index); //结果为：1

这两个方法都可以接受第二个参数，用来绑定回调函数的this对象。

2.for…of循环
数组原生具备iterator接口,for…of循环本质上就是调用这个接口产生的遍历器。

    for (var item of itemList) {
        console.info(item.label);
    }
    //结果为：
    Java
    C++
    C#

3.entries()、keys()和values()
这个3个数组实例方法用来遍历数组，它们都返回一个遍历器对象。其中keys()是对键名的遍历、values()是对键值的遍历，entries()是对键值对的遍历。

    for (var index of  itemList.keys()) {
        console.info(index);
    }
    //结果为：
                0
                1
                2
      
    for (var item of itemList.values()) {
        console.info(item.label);
    }
    //结果为：
               Java
               C++
               C#
               
   for (var [index, item] of itemList.entries()) {
        console.info(index, item.label);
    }
    //结果为：
    0 "Java"
    1 "C++"
    2 "C#"

ES6参考的是阮一峰: ECMAScript 6 入门.