Sparse arrays and dense arrays in JavaScript [Translation]_javascript skills

1. Sparse array
Creating a sparse array of specified length is very simple:

Copy code Code As follows:

> var a = new Array(3);
> a
[ , , ]
> a.length
3
> a[0]
undefined

When you iterate through it, you will find that it has no elements. JavaScript will skip these gaps.

Copy code The code is as follows:

> a.forEach(function (x, i) { console.log(i ". " x) });
> a.map(function (x, i) { return i })
[ , , ]

Translator’s Note: There are some other situations A sparse array will be generated, such as

Copy code The code is as follows:

>var arr = [ ];
>arr[0] = 0;
>arr[100] = 100>a.forEach(function (x, i) { console.log(i ". " x) }); 0. 0100. 100

2. Dense array

Brandon Benvie recently mentioned a tip for creating dense arrays in the es-discuss email discussion group:

Copy code The code is as follows:

> var a = Array.apply(null, Array(3));
> ; a
[ undefined, undefined, undefined ]

The above statement is actually equivalent to:

Array(undefined, undefined, undefined)

But on the surface, it seems that there is not much difference between this array and the previous sparse array:

Copy code The code is as follows :

> a.length
3
> a[0]
undefined

However, you can now iterate over these arrays elements, you can also reassign a value to each element:

Copy code The code is as follows:

> a.forEach(function (x, i) { console.log(i ". " x) });
0. undefined
1. undefined
2. undefined

> a.map(function (x, i) { return i })
[ 0, 1, 2 ]

Translator’s Note: In fact, JavaScript does not have a conventional array. All arrays are actually objects, but they automatically manage some "number" attributes and length attributes. To put it more directly, arrays in JavaScript have no index at all, because the index should be a number, and the index of an array in JavaScript is actually It is a string. arr[1] is actually arr["1"]. If arr["1000"] = 1, arr.length will automatically become 1001. The fundamental reason for these performances is that objects in JavaScript are characters Key-value pairs string to any value. Note that the key can only be a string. This is similar to AWK. If you don't believe it, try awk 'BEGIN{a[1]=1;print(a["1"])}'. Maybe This is because Brendan Eich when inventing JavaScript referred to a lot of awk designs . However, currently, ES6 already has a Map type similar to Java and other languages, and the keys can It is a value of any type. Please refer to the MDN document I translated Map

3. Another trick
Another trick was also mentioned in the email:

Copy code The code is as follows:

> Array.apply(null, Array(3)).map(Function.prototype .call.bind(Number))
[ 0, 1, 2 ]

This is roughly equivalent to the following writing

Copy Code The code is as follows:

Array.apply(null, Array(3)).map(
function (x,i,...) { return Number.call(x,i,...) })

Note that x is the first parameter of the call method, which is used as the this value in the Number function. This value has no meaning and is equivalent to being ignored. I prefer the following writing method that can be understood at a glance :

Copy code The code is as follows:

Array.apply(null, Array(3)) .map(function (x,i) { return i })

Translator’s Note:

Copy code The code is as follows:

Array.apply(null, Array(3)).map(Function.prototype.call.bind(Number))
//Equivalent to Array.apply (null, Array(3)).map(Function.prototype.call,Number)

Although it is clearer to use a custom function, the custom function is definitely not as fast as the native method. For example Example:

Copy code The code is as follows:

var a = ["aaa " , " bbb", " ccc "]
a.map(function(x) { return x.trim(); }); // ['aaa', 'bbb', 'ccc']
a .map(Function.prototype.call, String.prototype.trim); // ['aaa', 'bbb', 'ccc']

Use the map method above to trim each array Although it is difficult to understand the spaces of elements using the native method, it is very efficient. If you don’t understand, you can check the MDN document I translated Array.prototype.map()

4. Actual Purpose?

In actual production, using the method of creating dense arrays mentioned above will make it impossible for others to read your code. Therefore, it would be better to encapsulate it into a tool function, such as _.range :

Copy code The code is as follows:

> _.range(3)
[ 0, 1, 2 ]

Used in conjunction with map, you can fill the entire array with a specified value.

Copy the code The code is as follows:

> _.range(3).map(function () { return "a" })
[ 'a ', 'a', 'a' ]

Translator's Note: In other languages, there are convenient ways to generate increasing lists of numbers, such as using 1..100 in perl and ruby, and python Using range(100), another common requirement is to generate a string that repeats a certain field. In ruby ​​and python, you can use "a"*100, in perl, use "a"x100, in JavaScript , you can use Array(100).join("a")

5. Related articles

1. Iterating over arrays and objects in JavaScript(walled)
2. Trying out Underscore on Node.js(walled)