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

Question

刚刚浏览了Laravel Mix(webpack设置)的源代码,以便在我遇到这个时设置我自己的webpack获得一些灵感.

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

我无法弄清楚这是什么意思,但我相信泰勒不会为了它而包含任何多余的东西.

当然这些都同样好吗？

rules.concat(newRules)

要么

rules.push(...newRules)

甚至是一个好老的for-loop!但为什么在传播元素之前连接到空数组呢？

非常感谢,如果有人能够启发我这一点.

Answer 1

我只能推测,因为我没有编写代码,但我想是意图添加newRules到rules哪里newRules可以是任何类型(不只是一个数组).concat我们希望原始数组发生变异时会创建一个新数组.push改变数组,但是你如何处理newRules数组的情况呢？你不能只是newRules进入,rules因为它将是一个数组内的数组,你不能传播,newRules因为并非所有东西都是可迭代的.[].concat(newRules)将所有数据添加newRules到一个数组中,该数组基本上将非数组转换为数组,并将该数组传播到pu​​sh中,将这些项添加到rules.

查看下面的测试用例,然后单击Run snippet以查看其中的操作:

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>