使用扩展运算符创建数组

Question

这是我在 React 书中找到的 javascript 箭头 function：

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

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

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

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

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

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

Answer 1

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

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

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

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

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

Answer 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'); });

Answer 3

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

更多信息 = > https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax

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))