Introduction to methods of creating and filling arrays of arbitrary length in JavaScript (with code)-JS Tutorial-php.cn

This article brings you an introduction to the method of creating and filling arrays of any length in JavaScript (with code). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

The best way to create an array is through literal means:

const arr = [0,0,0];

Copy after login

But this is not a long-term solution, such as when we need to create a large array. This blog post explores what to do in this situation.

Arrays without holes tend to perform better

In most programming languages, an array is a continuous sequence of values. In JavaScript, an Array is a dictionary that maps indices to elements. It can have holes - indexes between zero and the length of the array that are not mapped to elements ("missing indexes"). For example, the following Array has a hole at index 1:

> Object.keys(['a',, 'c'])
[ '0', '2' ]

Copy after login

An array without holes is also called dense or packed. Dense arrays tend to perform better because they can be stored contiguously (internally). Once a hole occurs, the internal representation must change. We have two options:

Dictionary. The search will take more time and the storage overhead will be greater.
Continuous data structure to mark holes. Then check whether the corresponding value is a hole, which also requires additional time.

In either case, if the engine encounters a hole, it can't just return undefined, it must traverse the prototype chain and search for a hole index named ” properties, which takes more time.

In some engines, such as V8, if you switch to a less performant data structure, the change will be permanent. Even if all the holes are filled, they won't switch back again.

For more information on how V8 represents arrays, see Mathias Bynens' article "Element Types in V8".

Create Array

`Array` Constructor

If you want to create an Array with a given length, the common method is to use ArrayConstructor:

const LEN = 3;
const arr = new Array(LEN);
assert.equal(arr.length, LEN);
// arr only has holes in it
assert.deepEqual(Object.keys(arr), []);

Copy after login

This method is very convenient, but it has two disadvantages:

Even if you completely fill the array with values later, this method Holes will also make this Array slightly slower.
The default value of a hole is generally not the initial "value" of the element. A common default value is zero.

Add `.fill()` method

.fill()# after the

Array constructor ##Method will change the current Array and fill it with the specified value. This helps in initializing an array after creating it with new Array():

const LEN = 3;
const arr = new Array(LEN).fill(0);
assert.deepEqual(arr, [0, 0, 0]);

Copy after login

Warning: If you use an object as a parameter to . fill() An array, all elements will refer to the same instance (that is, this object has not been cloned multiple times):

const LEN = 3;
const obj = {};

const arr = new Array(LEN).fill(obj);
assert.deepEqual(arr, [{}, {}, {}]);

obj.prop = true;
assert.deepEqual(arr,
  [ {prop:true}, {prop:true}, {prop:true} ]);

Copy after login

A filling method we will encounter later (

Array.from()) does not have this problem.

.push() Method

const LEN = 3;
const arr = [];
for (let i=0; i < LEN; i++) {
  arr.push(0);
}
assert.deepEqual(arr, [0, 0, 0]);

Copy after login

This time, we created and filled an array without any holes in it. So manipulating this array should be faster than creating it using the constructor. However

Creating arrays is slower because the engine may need to reallocate contiguous memory multiple times as the array grows.

Fill an array with

undefined

Array.from() Convert iterables and array-like values to Arrays, which treats holes as undefined element. In this way, you can use it to convert each hole into undefined:

> Array.from({length: 3})
[ undefined, undefined, undefined ]

Copy after login

Parameter

{length: 3} is an Array-like object with a length of 3, where Contains nothing but holes. You can also use new Array(3), but this will generally create a larger object. The following method only applies to iterable values, and has a similar effect to
Array.from():

> [...new Array(3)]
[ undefined, undefined, undefined ]

Copy after login

But

Array.from()Create its result via new Array() so what you get is still a sparse array.

Use

Array.from() `for mapping`

If you provide a mapping function as its second parameter, you can use

Array.from() Perform mapping.

Fill the array with values

Create an array using small integers:

> Array.from({length: 3}, () => 0)
[ 0, 0, 0 ]

Copy after login

Create using a unique (non-shared) object Array:
```
> Array.from({length: 3}, () => ({}))
[ {}, {}, {} ]
```
Copy after login

Create according to the numerical range

Create an array using an ascending integer sequence:
```
> Array.from({length: 3}, (x, i) => i)
[ 0, 1, 2 ]
```
Copy after login

Create with any range of integers:

> const START=2, END=5;
> Array.from({length: END-START}, (x, i) => i+START)
[ 2, 3, 4 ]

Copy after login

Another way to create an ascending array of integers is to use

.keys(), which will also look empty The operation is undefined Elements:

> [...new Array(3).keys()]
[ 0, 1, 2 ]

Copy after login

.keys()Returns an iterable sequence. We expand it and convert it to an array.

Quick Memo: Create an Array

Fill it with holes or

undefined:

new Array(3 )→
[ , , ,]
Array.from({length: 2})
→ [undefined, undefined]
[...new Array(2)]
→ [undefined, undefined]

填充任意值：

const a=[]; for (let i=0; i<3; i++) a.push(0);
→ [0, 0, 0]
new Array(3).fill(0)
→ [0, 0, 0]
Array.from({length: 3}, () => ({}))
→ [{}, {}, {}] （唯一对象）

用整数范围填充：

Array.from({length: 3}, (x, i) => i)
→ [0, 1, 2]
const START=2, END=5; Array.from({length: END-START}, (x, i) => i+START)
→ [2, 3, 4]
[...new Array(3).keys()]
→ [0, 1, 2]