ES10 的全新特性：数组拼接-JavaScript中文网-JavaScript教程资源分享门户

在前端开发过程中，数组是我们经常操作的一种数据结构。ES10带来了一项全新的特性——数组拼接（Array.prototype.flat），它能够快速地将嵌套数组“拉平”，使嵌套的子数组变成一个单一的数组。本文将深入介绍该特性，解释其背后的原理和使用方式，并提供一些实用的示例代码和技巧。

什么是数组拼接？

数组拼接（Array.prototype.flat）是一个全新的数组方法，它能够将任意嵌套的数组“拉平”，变成一个单一的数组。在使用该方法之前，我们通常需要借助多个循环或递归函数来遍历多维数组中的每一个元素。这样的操作非常繁琐且容易出错，而且耗费大量的时间和精力。

在使用数组拼接方法之前，我们需要对其进行一些配置。该方法有一个可选的参数 depth，用于指定拼接的深度。如果深度参数为1，那么只会拉平一层嵌套的数组，如果参数为2，那么会拉平两层嵌套的数组，以此类推。

示例代码如下：

 let arr1 = [1, 2, [3, 4]];
 let arr2 = arr1.flat(); // [1, 2, 3, 4]
 let arr3 = arr1.flat(2); // [1, 2, 3, 4]

在上面的代码中，arr1为一个嵌套了一层的数组，它内部包含一个长度为2的子数组。我们可以通过调用数组的flat方法，将其拉平成一个单一的数组arr2。如果我们传入一个深度参数2，那么将把arr1内部的子数组也拼接起来，得到一个长度为4的数组arr3。

数组拼接方法不仅能够快速地将嵌套的数组拉平，还能用于多种实用的场景，例如：

在传递可变数量的参数时，我们可以使用数组拼接方法将它们“塞”到一个数组中。

function myFunc(...args){
  let arr = [].concat(...args); // 将可变参数拼接到arr数组中
  console.log(arr);
}

myFunc([1,2,3],[4,5,6]); // [1,2,3,4,5,6]

在网页开发过程中，我们有时需要获取网页上所有图片的路径。为了实现这个功能，我们可以遍历DOM树，然后在每一个img标签上获取src属性。在使用数组拼接方法之后，代码看起来会更加简洁易懂。

let images = Array.from(document.getElementsByTagName('img'))
          .map(img => img.src)
          .flat();
console.log(images);

我们可以将二维数组转换成一维对象数组，而无需使用多层的循环或递归。

let arr = [[1,2],[3,4],[5,6]];
let objArr = arr.map(([a,b]) => ({a,b}));
console.log(objArr);

以上只是数组拼接的一些实用技巧，你还可以在开发过程中根据自己的需求去发挥它的特性。

在本文中，我们深入介绍了ES10的全新特性数组拼接，包括它的基本用法、传递可变参数、获取网页上所有图片的路径以及将二维数组转换成一维对象数组等实用技巧。希望通过本文的介绍，读者能够对该特性有一个更加深入的理解，并能在实际开发中更加高效地使用它。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/648ec04e48841e9894d267d3