Sparse arrays and dense arrays in JavaScript [translation]_javascript techniques

1. Sparse arrays
Creating a sparse array of specified lengths is simple:

Copy Code code as follows:

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

When you traverse it, you will find that it does not have elements. JavaScript will skip these gaps.

Copy Code code as follows:

> A.foreach (function (x, i) {Console.log (i+). "+x)});
> A.map (function (x, i) {return i})
[ , , ]

There are other situations where sparse arrays are generated, such as

Copy Code code 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 technique for creating dense arrays in the Es-discuss Mail discussion group:

Copy Code code as follows:

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

The above statement is actually equivalent to:

Array (undefined, undefined, undefined)

On the surface, however, there seems to be no much difference between this array and the sparse array that preceded it:

Copy Code code as follows:

> A.length
3
> A[0]
Undefined

However, you can now iterate over these array elements, and you can also reassign each element:

Copy Code code 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]

In fact, JavaScript does not have a regular array, and all arrays are objects, but they automatically manage some "number" attributes and length attributes. More directly, the array in JavaScript has no index at all, because the index should be a number, The index of an array in JavaScript is actually a string. Arr[1] is actually arr["1"], give arr["1000"] = 1,arr.length will automatically become 1001. The root cause of these manifestations is that Objects in JavaScript are key-value pairs of strings to any value. Note that the key can only be a string. This is similar to awk. You can try Awk ' Begin{a[1]=1;print (a["1"])} '. Maybe that's because Brendan Eich a lot of the reasons for Awk's design when inventing JavaScript. But for now, ES6 has a map type similar to the Java language, and the key can be any type of value. Refer to my translated MDN Document Map

3. Another technique
Another tip was mentioned in the Mail:

Copy Code code as follows:

> array.apply (NULL, Array (3)). Map (Function.prototype.call.bind (number))
[0, 1, 2]

This is probably equivalent to the following wording

Copy Code code 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 acts as the this value in the number function. This value has no meaning, and is ignored. I prefer the following writing that can be seen at one glance:

Copy Code code as follows:

Array.apply (NULL, Array (3)). Map (function (x,i) {return i})

Translator Note:

Copy Code code 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 using custom functions is clearer, custom functions certainly do not have native methods fast. For example:

Copy Code code 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 ']

Using the map method to trim out the spaces of each array element, using the native method is difficult to understand. But the efficiency is high. You can see the MDN document I translated Array.prototype.map ()

4. Practical use?

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

Copy Code code as follows:

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

With the map, you can populate the entire array with a specified value.

Copy Code code as follows:

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

Translator Note: In other languages, there are convenient ways to generate an incremental list of numbers, such as Perl and Ruby using 1. A common requirement for using range (100) in 100,python is to generate a string that repeats a field, in Ruby and Python, with "a" *100 in Perl, "a" x100, in JavaScript, You can use array. Join ("a")

5. Related articles

1. iterating over arrays and objects in JavaScript (wall)
2. trying out underscore on node.js (Already wall)