Fantastic JS Code series (three) an interesting question (create an array of length x)

Description of the original title:

不使用loop循环，创建一个长度为100的数组，并且每个元素的值等于它的下标

Some variants of this problem include, for example, length and value, return an array of length values that are all value, and so on.

Misunderstanding

Most likely to fall into a trap:

var arr = new Array(100);arr = arr.map(function(item, index) {return index;});

If your answer is this, congratulations on your successful fall into the hole of the person who made the quiz.

Explain

Pit in Array (100), you can look at the specification of MDN,

The new Array (100) returns a "sparse array" with nothing, but I think the answer can be seen as a bug in the browser display.

Under version 47 of Chrome (or earlier versions of Chrome), new Array (10) returns [Undefined,undefined,undefined,....... (100)], but this undefined again directly with you [undefined,undefined,undefined,....... (100)] Different (all 47 versions of Chrome), test:

Look out, this is the previous browser display bug, and later fixed is now displayed empty, used to distinguish undefined, indicating that this and undefined is not the same.

The array () mentioned above creates a sparse array (Sparse array), which is said in some of the data, but the random creation in JS can be "sparse" (because it is actually an Object?). ）

a = new Array(2); a[1] = 1; a;  // (2) [undefined × 1, 1]

b = []; b[4] = 5; b[9] = 10;b;  // (10) [undefined × 4, 5, undefined × 4, 10]而 JS 对于这类数组，由于上述规范的定义，遍历的时候会跳过空的地方

a.map(e => 2*e)  //(2) [undefined × 1, 2]

JS engine for the sloppy array is saved in a dictionary, can save some space, but in terms of index is definitely worse than the full array. So JavaScript doesn't have to fill the new Array with undefined, not just a bit counter-intuitive.

The above is an explanation, the other one does not use sparse arrays to explain:

For the new Array (2), it actually returns an array with a length of 2 and nothing inside. That corresponds to the meaning of empty literal expression.

According to ECMA-262 6th edition, the ES6 specification 22.1.1.2 subsection Array (len), array (len) simply sets a length property for the new array, and nothing else ... And for the index of the JS array, even if the array is out of bounds, it is also returned undefined:

new Array(2)[999] === undefined // true

The reason for the impact of Array.prototype.map () is that, according to the specification 22.1.3.15 subsection Array.prototype.map (CALLBACKFN [, Thisarg]), the map function first checks Haspropert Y. To map, this element/attribute must first exist. But:

new Array(2).hasOwnProperty(0) // false[undefined, undefined].hasOwnProperty(0) // true

So, the callback passed to map is not actually executed, can be tested

new Array(2).map(e => console.log('done'))  

Will find nothing to log out.

This "bug" was also found in Edge and Safari.

The right solution

Pull so much, then this problem should be how to do it.

In fact, the interviewer of this question was said that the solution without loop, with the array method is actually belong to loop, the purpose is to investigate recursion:

1. Recursive + self-executing functions

var arr = [];(function dfs(i) {  if (i < 100) {    arr.push(i);    dfs(++i);  }}(0));

2. Convert to String

Array(100).join(",").split(",").map(function(key,index){return index;})

3. Apply conversion, you can see that most of JS's pit settlement has apply the figure ...

Array.apply(null,Array(100)).map((item,index)=>index)

Apply in ES5 can add Class array object, when passed, because the value of each item is nonexistent, equivalent to go in is undefined (here undefined is true undefined ... ）

4. Int8array

new Int8Array(100).map((item,index)=>index);

Int8array specifications to see the relevant documents

5. At the time of the discussion, the two most popular solutions to the big b ...

The second kind of can understand, the first novice or not understand, here to explain:

1, JS in the + number in different expressions have different meanings
2, here, is the plus sign
3, the plus sign followed by an array, triggering an implicit conversion
4, the implicit conversion of the array contains two, toString and valueOf, according to the implicit conversion rules of the array, called here ValueOf
5, but Ary ValueOf was rewritten, changed to see the function, that function each time will give ary a new and subscript the same element
6, if the subscript has not reached 100, then +ary once again, equivalent to another call valueOf
7, then the formation of recursion

Escalation of the problem

The problem is changed to 100w, millions array, how to generate fast?
Keywords: Get a getter setter, lazy evaluation

Seeking Truth

The above problems can be seen V8 source code, do not look at the source, can only determine the behavior, who explained a set.
V8 Source Link: Link
StackOverflow's Discussion: Links

Fantastic JS Code series (three) an interesting question (create an array of length x)