使用扩展运算符创建数组

Question

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

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

为什么不直接 return 一个新数组？

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

使用扩展运算符创建数组

Creating array with spread operator

javascript

arrays

syntax