Question

刚浏览Laravel Mix的源代码（webpack设置）时，我会遇到一些启发，以建立自己的webpack。

rules.push(...[].concat(newRules))

我不知道这是什么意思，但是我相信泰勒不会为了这个目的而包含任何多余的东西。

这些东西肯定都一样吗？

rules.concat(newRules)

或

rules.push(...newRules)

甚至是旧的for循环！但是，为什么在散布元素之前先连接到空数组？

非常感谢有人能启发我。

Answer 1

我只能推测是因为我没有编写代码，但我想打算将newRules添加到rules，其中newRules可以是任何类型（而不仅仅是数组）。 concat将在我们希望原始数组发生变化的同时创建一个新数组。 push使数组变异，但是如何处理newRules是数组的情况？您不能只将newRules推入rules，因为它会成为数组中的一个数组，而不能散布newRules，因为并非所有事物都是可迭代的。 [].concat(newRules)会将newRules的所有内容添加到一个数组，该数组实际上将非数组“转换”为一个数组，并在push中散布该数组会将这些项添加到rules。

查看下面的测试用例，然后单击运行代码段进行查看：

const PASSED = '✅ PASSED';
const FAILED = '❌ FAILED';

(() => {
  console.log('`rules.concat(newRules)`');
  (() => {
    const expectation = [1, 2, 3, 4, 5, 6];
    const rules = [1, 2, 3];
    const newRules = [4, 5, 6];
    rules.concat(newRules);
    console.log('where `newRules` is an array:', _.isEqual(expectation, rules) ? PASSED : FAILED);
  })();

  (() => {
    const expectation = [1, 2, 3, 4];
    const rules = [1, 2, 3];
    const newRules = 4;
    rules.concat(newRules);
    console.log('where `newRules` is not an array:', _.isEqual(expectation, rules) ? PASSED : FAILED);
  })();
  console.log('');
})();

(() => {
  console.log('');
  console.log('`rules.push(newRules)`');
  (() => {
    const expectation = [1, 2, 3, 4, 5, 6];
    const rules = [1, 2, 3];
    const newRules = [4, 5, 6];
    rules.push(newRules);
    console.log('where `newRules` is an array:', _.isEqual(expectation, rules) ? PASSED : FAILED);
  })();

  (() => {
    const expectation = [1, 2, 3, 4];
    const rules = [1, 2, 3];
    const newRules = 4;
    rules.push(newRules);
    console.log('where `newRules` is not an array:', _.isEqual(expectation, rules) ? PASSED : FAILED);
  })();
  console.log('');
})();

(() => {
  console.log('');
  console.log('`rules.push(...[].concat(newRules))`');
  (() => {
    const expectation = [1, 2, 3, 4, 5, 6];
    const rules = [1, 2, 3];
    const newRules = [4, 5, 6];
    rules.push(...[].concat(newRules));
    console.log('where `newRules` is an array:', _.isEqual(expectation, rules) ? PASSED : FAILED);
  })();

  (() => {
    const expectation = [1, 2, 3, 4];
    const rules = [1, 2, 3];
    const newRules = 4;
    rules.push(...[].concat(newRules));
    console.log('where `newRules` is not an array:', _.isEqual(expectation, rules) ? PASSED : FAILED);
  })();
})();

<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.11/lodash.min.js"></script>

什么为什么！？棘手的JS代码传播...和[] .concat

1 个答案: