展平一个数组？[].concat(...[数组])？

Question

我知道这[].concat(...array)会展平一组数组，但我一直在学习 webpack 课程，并且在加载预设的代码中它使用了语法[].concat(...[array])

我对它的理解是：

const array = [[1,2,3], [4,5,6], [7,8,9]];
const result = [].concat(...array);       // [1,2,3,4,5,6,7,8,9]
const result2 = [].concat(...[array]);    // [[1,2,3], [4,5,6], [7,8,9]]

这绝对让我感到困惑，因为课程代码（下面）确实有效，但我看不到[].concat(...[array])实现了什么？

const webpackMerge = require("webpack-merge");

const applyPresets = (env = {presets: []}) => {
  const presets = env.presets || [];
  /** @type {string[]} */
  const mergedPresets = [].concat(...[presets]);
  const mergedConfigs = mergedPresets.map(presetName =>
    require(`./presets/webpack.${presetName}`)(env)
  );

  return webpackMerge({}, ...mergedConfigs);
};

module.exports = applyPresets;

任何人都可以给我一个模糊的想法吗？

Answer 1

这有点奇怪。

该concat()方法从多个数组中获取每个元素并将它们添加到一个新数组中。所以

[].concat([1],[2],[3]) = [1, 2, 3]

现在的[somevariable]语法是将 放入somevariable数组中。

let arr1 = [1, 2, 3, 4]
let arr2 = [arr1]
console.log(arr2) // prints [[1, 2, 3]]

最后，该...语法（称为扩展语法）本质上是反汇编数组，因此可以直接访问其元素

function myFunc(...[x, y, z]) {
  return x * y* z; // without the dots, we'd have to say arr[0] * arr[1] * arr[2]
}

因此，[].concat(...[array])你所困惑的表达确实没有任何作用；它array使用该语法将其放入另一个数组中[]，然后立即将其反汇编回使用该...语法的方式。一个等效的表达式是[].concat(array)，它没有完成太多任务，因为它只有一个参数并且该contact()方法是在空数组上调用的。