JS 合并数组（ 5种方法 ）

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

文章目录

• • 一、五种合并方法
  • • 1. `concat()` 方法
    • 2. 扩展运算符 (`...`)
    • 3. `push()` 方法配合循环
    • 4. 使用 `Array.from()` 结合 `Spread` 操作符
    • 5. `reduce()` 方法
    • 二、应用总结

      ---

      在JavaScript中，合并数组有多种方法，下面是这些方法的语法、注意事项及代码示例：

      一、五种合并方法

      1. concat() 方法

      语法:

      array1.concat(array2, array3, ..., value1, value2, ...)

      注意事项:

      • concat() 方法不会改变原始数组，而是返回一个新的数组。
      • 可以接收任意数量的数组和/或单个元素作为参数。

        代码示例:

        let array1 = [1, 2, 3];let array2 = [4, 5, 6];let mergedArray = array1.concat(array2);console.log(mergedArray); // 输出: [1, 2, 3, 4, 5, 6]console.log(array1); // 输出: [1, 2, 3] （原数组不变）

        2. 扩展运算符 (...)

        语法:

        let mergedArray = [...array1, ...array2, value1, value2, ...];

        注意事项:

        • 扩展运算符是在ES6中引入的新特性，它可以将数组或其他可迭代对象转换为用逗号分隔的列表。
        • 此方法会创建一个新的数组，因此也不会改变原始数组。

          代码示例:

          let array1 = [1, 2, 3];let array2 = [4, 5, 6];let mergedArray = [...array1, ...array2];console.log(mergedArray); // 输出: [1, 2, 3, 4, 5, 6]console.log(array1); // 输出: [1, 2, 3] （原数组不变）

          3. push() 方法配合循环

          语法:

          for(let item of array2) {  array1.push(item);}

          注意事项:

          • 使用 push() 方法可以将一个数组中的元素逐个添加到另一个数组中。
          • 这种方法会直接修改原始数组 array1。

            代码示例:

            let array1 = [1, 2, 3];let array2 = [4, 5, 6];for(let item of array2) {  array1.push(item);}console.log(array1); // 输出: [1, 2, 3, 4, 5, 6]

            4. 使用 Array.from() 结合 Spread 操作符

            语法:

            let mergedArray = Array.from([...array1, ...array2]);

            注意事项:

            • Array.from() 方法用于将类数组对象或可迭代对象转换为一个新的数组实例。
            • 当与扩展运算符结合使用时，可以方便地合并多个数组。

              代码示例:

              let array1 = [1, 2, 3];let array2 = [4, 5, 6];let mergedArray = Array.from([...array1, ...array2]);console.log(mergedArray); // 输出: [1, 2, 3, 4, 5, 6]

              5. reduce() 方法

              语法:

              array1.reduce((accumulator, currentValue) => [...accumulator, currentValue], array2);

              注意事项:

              • reduce() 方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行)，结果是一个单一输出值。
              • 此方法在处理多个数组合并时需要初始化值为第二个数组，然后通过累积器返回每次合并的结果。

                代码示例:

                let array1 = [1, 2, 3];let array2 = [4, 5, 6];let mergedArray = array1.reduce((acc, curr) => [...acc, curr], array2);console.log(mergedArray); // 输出: [4, 5, 6, 1, 2, 3]

                二、应用总结

                根据需求选择合适的方法，如需不改变原数组则推荐使用 concat() 或扩展运算符；如果希望合并的同时修改原始数组，可以采用 push() 方法。另外，Array.from() 和 reduce() 方法提供了更灵活的合并场景解决方案。