How to quickly initialize an array with js

Tags (separated by spaces): call apply

---

Note version

When writing code, there is usually a need to quickly initialize an array. For example, we need a ## similar to matlab. #zeros function, if here we need to generate an array of 0-23 to represent 24 hours a day. The most basic approach is as follows:

function(){
    let hours = [];    
    for(let k = 0; k < 24; k++ )
    hours.push(k);    
    return hours;
}

Let’s think about how to implement it in a more elegant way.

Consider using the
new Array(24)+ map method to achieve this. The code is as follows:

Array(24).map((_, h) => h);

Note that the second parameter of

map here is the index, which is rarely used. Here, the index is used as a numerical value. The result is not in line with expectations, why?
After a brief search, I found that it was caused by the logic of sparse arrays in js.
Let’s take a look at the following code first:

let a = [];
a[1000] = 2;
console.log(a.length);// 1000a.forEach(x => console.log("hello"));// only one "hello"

The processing logic of js is to process "vacancies" for positions that are not actively assigned values. For these "vacancies" that are unknown, the iterator will not care. , the main purpose of doing this is to avoid bugs caused by unreasonable assignment operations.

Suppose there is no such logic, we write
new Array(Date.now()), which will cause the system to create a very large array, but actually store nothing. We can
new Array(len)What we do is simply understood as the following process:

function(len){
    let r = [];
    r.length = len;    
    return r;

This is why

new Array(len) is called map or forEach are inconsistent with expectations. How to solve this problem? In addition to using the form
new Array(len), we can also use new Array(1,2,3) to initialize Array, but writing it this way will not achieve our purpose of writing an initialized array. At this time we thought of
apply. The second parameter of this function happens to be an array, so we wrote the following code.

// 借用apply
Array.apply(null, Array(24)).map((_, h) => h);
// [0, 1, ..., 24]

We got the results we hoped for. This means that

Array(24) is treated as 24 values ​​when used as a parameter in apply, because this ensures that the final array length is 24. In this case, of course we can also use the sister function
call of apply.

// 借用call
Array.call(null, ...Array(24)).map((_, h) => h);
// [0, 1... 23]

This also confirms one thing,

Array(len)Destructuring will get len parameters instead of one parameter, of coursecall must be used in an environment that supports destructuring operators.

After becoming familiar with the principles of

call and apply, we can further write the following code:

// Array本身
Array(...Array(24)).map((_, h) => h);
// [0, 1, ..., 24]

This form is elegant enough .

In addition, in
ES6, Array provides a new method fill, which can be used to fill those "vacant" bits to ensure that subsequent operations can Goes smoothly. The specific code is as follows:

// 推荐
Array(24).fill(null).map((_, h) => h);

Now the last writing method is also recommended, this method is also the most intuitive.

However, you need to pay attention to the use of the
fill method. You should try to avoid blind filling, because this will cause the bugs mentioned above that the "vacant" logic of js is designed to avoid. If you are interested, you can try the following code:

// no-fillconsole.time("no-fill");let t = Array(5e7);console.timeEnd("no-fill");// fillconsole.time("fill");let q = Array(5e7).fill(null);console.timeEnd("fill");// => no-fill: 0.240ms// => fill: 3247.921ms

If you try it in the browser, the browser will basically not respond. No larger value is set to avoid getting no results. Assuming that an int occupies 4 bytes of memory, this fill will occupy 200M of memory and need to be looped 50 million times. This will inevitably occupy a large amount of CPU and memory, which is absolutely not allowed in single-threaded js.

The above is the detailed content of How to quickly initialize an array with js. For more information, please follow other related articles on the PHP Chinese website!