JS 遍历数组 （ 11 种方法 ）

还是大剑师兰特：曾是美国某知名大学计算机专业研究生，现为航空航海领域高级前端工程师；CSDN知名博主，GIS领域优质创作者，深耕openlayers、leaflet、mapbox、cesium，canvas，webgl，echarts等技术开发，欢迎加底部微信（gis-dajianshi），一起交流。

文章目录

• • • 1. `for` 循环
    • 2. `for...of` 循环 (ES6+)
    • 3. `forEach()` 方法
    • 4. `map()` 方法
    • 5. `filter()` 方法
    • 6. `reduce()` 方法
    • 7. `entries()`, `keys()`, `values()` 结合 `for...of` (ES6+)
    • 8. `find()` 方法
    • 9. `findIndex()` 方法
    • 10. `some()` 方法
    • 11. `every()` 方法

      ---

      

      JavaScript中遍历数组的有哪些方法呢？ 下面列出11种方法，包括语法、注意事项、示例代码等。

      1. for 循环

      语法:

      for (let i = 0; i  
      注意事项:
       
      

      • 通常配合数组的 .length 属性使用。
      • 索引从0开始，需要注意边界问题。

        代码示例:

        let fruits = ['apple', 'banana', 'cherry'];
        for (let i = 0; i  
        2. for...of 循环 (ES6+)
         
        语法:
         
        for (let item of array) {
          console.log(item);
        }
         
        注意事项:

        • 用于遍历可迭代对象（如数组）的值，不提供索引。
        • 不适用于需要索引的操作。

          代码示例:

          let colors = ['red', 'green', 'blue'];
          for (let color of colors) {
            console.log(color);
          }
          

          3. forEach() 方法

          语法:

          array.forEach(function(currentValue, index, array) {
            // 你的代码
          }, thisArg);
          

          注意事项:

          • 不返回值，主要用于无返回值的遍历操作。
          • 提供了元素值、索引和数组本身的引用，但无法中断循环。

            代码示例:

            let numbers = [1, 2, 3, 4, 5];
            numbers.forEach((num, idx) => {
              console.log(`${idx}: ${num}`);
            });
            

            4. map() 方法

            语法:

            let newArray = array.map(function(currentValue, index, array) {
              return /* 新值 */;
            }, thisArg);
            

            注意事项:

            • 创建并返回一个新数组，其中的元素是原数组元素经过回调函数处理后的结果。
            • 不会改变原数组。

              代码示例:

              let squares = [1, 2, 3].map(n => n * n);
              console.log(squares); // 输出: [1, 4, 9]
              

              5. filter() 方法

              语法:

              let filteredArray = array.filter(function(currentValue, index, array) {
                return /* 返回布尔值决定当前元素是否应保留在新数组中 */;
              }, thisArg);
              

              注意事项:

              • 创建并返回一个新数组，其中包含了原数组中满足条件的元素。
              • 不会改变原数组。

                代码示例:

                let evenNumbers = [1, 2, 3, 4, 5].filter(num => num % 2 === 0);
                console.log(evenNumbers); // 输出: [2, 4]
                

                6. reduce() 方法

                语法:

                let result = array.reduce(function(accumulator, currentValue, index, array) {
                  return /* 更新 accumulator 的值 */;
                }, initialValue);
                

                注意事项:

                • 将数组元素累积计算成一个单一的返回值。
                • 需要一个初始值，如果不提供，则默认取数组的第一项和第二项开始计算。

                  代码示例:

                  let sum = [1, 2, 3, 4, 5].reduce((total, num) => total + num, 0);
                  console.log(sum); // 输出: 15
                  

                  7. entries(), keys(), values() 结合 for...of (ES6+)

                  语法:

                  for (let [index, value] of array.entries()) { /*...*/ }
                  for (let key of array.keys()) { /*...*/ }
                  for (let value of array.values()) { /*...*/ }
                  

                  注意事项:

                  • entries() 遍历索引和值。
                  • keys() 遍历索引。
                  • values() 遍历值。

                    代码示例:

                    let array = ['a', 'b', 'c'];
                    for (let [index, value] of array.entries()) {
                      console.log(`Index: ${index}, Value: ${value}`);
                    }
                    

                    8. find() 方法

                    语法:

                    let foundValue = array.find(function(currentValue, index, array) {
                      return /* 条件判断 */;
                    }, thisArg);
                    

                    注意事项:

                    • 查找数组中第一个满足条件的元素，并返回该元素的值，如果没有找到符合条件的元素，则返回 undefined。
                    • 不改变原数组。

                      代码示例:

                      let array = [1, 2, 3, 4, 5];
                      let foundNum = array.find(n => n > 3);
                      console.log(foundNum); // 输出: 4
                      

                      9. findIndex() 方法

                      语法:

                      let foundIndex = array.findIndex(function(currentValue, index, array) {
                        return /* 条件判断 */;
                      }, thisArg);
                      

                      注意事项:

                      • 查找数组中第一个满足条件的元素的索引，如果没有找到符合条件的元素，则返回 -1。
                      • 不改变原数组。

                        代码示例:

                        let array = [1, 2, 3, 4, 5];
                        let index = array.findIndex(n => n === 3);
                        console.log(index); // 输出: 2
                        

                        10. some() 方法

                        语法:

                        let isSomeTrue = array.some(function(currentValue, index, array) {
                          return /* 条件判断 */;
                        }, thisArg);
                        

                        注意事项:

                        • 检查数组中是否存在至少一个满足条件的元素，存在则返回 true，否则返回 false。
                        • 不改变原数组。

                          代码示例:

                          let array = [1, 2, 3, 4, 5];
                          let hasEven = array.some(n => n % 2 === 0);
                          console.log(hasEven); // 输出: true
                          

                          11. every() 方法

                          语法:

                          let isAllTrue = array.every(function(currentValue, index, array) {
                            return /* 条件判断 */;
                          }, thisArg);
                          

                          注意事项:

                          • 检查数组中所有元素是否都满足条件，全部满足则返回 true，否则返回 false。
                          • 不改变原数组。

                            代码示例:

                            let array = [1, 2, 3, 4, 5];
                            let allLessThan6 = array.every(n => n  
                            综上所述，JavaScript提供了多种遍历数组的方式，可以根据具体需求选择合适的方法。