使用扩展运算符创建数组答案

【问题标题】：Creating array with spread operator使用扩展运算符创建数组
【发布时间】：2021-05-10 15:49:45
【问题描述】：

这是我在 React 书中找到的一个 javascript 箭头函数：

const createArray = (length) => [...Array(length)];

为什么不简单地返回一个新数组？

const createArray = (length) => Array(length);

如果我使用任一定义记录 createArray(7) 的结果，我会得到相同的结果：

(7) [undefined, undefined, undefined, undefined, undefined, undefined, undefined]

与第二个定义相比，第一个定义实现了什么？

【问题讨论】：

Array(5) => [empty x 5] 与 [...Array(5)] => [undefined, undefined, undefined, undefined, undefined]。区别在于初始化。
在哪个环境下得到相同的结果？
使用代码沙箱

标签： javascript arrays syntax

【解决方案1】：

两种创建数组的方式不同。它们不会产生相同的结果。

第二种创建数组的方法将创建一个只有length自己的属性而没有索引属性的稀疏数组。您可以使用Object.getOwnPropertyNames() 看到这一点

const arr = new Array(5);
console.log(Object.getOwnPropertyNames(arr));

使用展开语法将创建一个数组并将索引属性，如以下代码示例所示：

const arr = [...new Array(5)];
console.log(Object.getOwnPropertyNames(arr));

【讨论】：

谢谢。这有帮助。我可以快速将日志语句更改为转储 getOwnPropertyNames()，它显示第一个方法提供所有索引属性以及长度属性，而第二个方法只转储长度属性

【解决方案2】：

Array(length); 将创建一个稀疏数组 - 一个没有自身属性的数组（length 除外），它不能通过数组迭代方法进行迭代：

const arr = new Array(7);

console.log(arr.hasOwnProperty('4'));
arr.forEach(() => {
  console.log('iteration');
});

相比之下，使用扩展语法将正确地填充新数组：

const arr = [...new Array(7)];

console.log(arr.hasOwnProperty('4'));
arr.forEach(() => {
  console.log('iteration');
});

【讨论】：

【解决方案3】：

如果你想要它的例子，我希望在这里。

const testArr = [
        { name: false, expected: false },
        { name: null, expected: false },
        { name: undefined, expected: false },
        { name: "", expected: false },
        { name: "  \t\n", expected: false },
    ];
    
    const createArray = (arr) => { return [...arr]}
    
    console.log(createArray(testArr))

【讨论】：