javascript - Creating array with spread syntax - Stack Overflow

admin管理员组

文章数量:1377698

Here is a JavaScript arrow function I found in a React book:

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

Why not simply return a new array?

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

If I log the result of createArray(7) with either of the definitions, I get the same result:

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

What does the first definition achieve as pared to the second one?

Here is a JavaScript arrow function I found in a React book:

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

Why not simply return a new array?

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

If I log the result of createArray(7) with either of the definitions, I get the same result:

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

What does the first definition achieve as pared to the second one?

• javascript
• arrays
• spread-syntax

Share Improve this question Follow edited Apr 6, 2023 at 17:15 VLAZ 29.1k99 gold badges6363 silver badges8484 bronze badges asked Feb 6, 2021 at 14:23 SeekerSeeker 57299 silver badges2323 bronze badges 3

• 4 Array(5) => [empty x 5] vs. [...Array(5)] => [undefined, undefined, undefined, undefined, undefined]. The difference is initialisation. – Niet the Dark Absol Commented Feb 6, 2021 at 14:26
• In which environment you're getting the same result? – Teemu Commented Feb 6, 2021 at 14:29
• Using code sandbox – Seeker Commented Feb 6, 2021 at 15:14

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

Array(length); will create a sparse array - one with no own-properties (except length), which cannot be iterated over with the array iteration methods:

const arr = new Array(7);

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

In contrast, utilizing spread syntax will populate the new array properly:

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

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

Both ways of creating an array are different. They do not produce the same result.

Second way of creating an array will create a sparse array with only length own property and no index properties. You can see this using Object.getOwnPropertyNames()

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

Using the spread syntax will create an array will index properties as shown in the following code example:

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

i hope if you want its example here.

More Information = > https://developer.mozilla/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))

本文标签： javascriptCreating array with spread syntaxStack Overflow