Analysis of JavaScript array operation difficulties

The following is to summarize the experience of learning the JavaScript array and points that need attention.

Do not use for_in traversal

This is a common misunderstanding of JavaScript beginners. For_in is used to traverse all enumerable (Enumerable) of the prototype chain, it is not existed to traverse an array.

Use the for_in traversing array with three points:

The JavaScript engine does not guarantee the traversal order of the object. The index order traversed in the traverses is also not guaranteed when the array is used throughout the array.

2, the value of the object protocol will be passed through.

If you change the prototype object (such as polyfill) without setting it to

ENUMERABLE: FALSE

, for_in will traverse these things. 3, the operating efficiency is low.

Although the theoretically store array in theory of JavaScript uses, the JavaScript engine will also be specially optimized to the very common built-in objects of arrays. https://jsperf.com/for-in-vs -… You can see that the use of for_in traverses array is more than 50 times slower than the use subscript,

PS: You may want to think Looking for for_of


Do not use json.parse (json.stringify ()) deep copy array

Someone uses deep copy objects or arrays in JSON. This is a simple and convenient means in most cases, but it may also cause unknown bugs because: convert certain specific values ​​to

null

nan, undefined, InfinitY For these values ​​that are not supported in JSON, it will be converted to NULL in serialization JSON. Naturally, NULL will lose the value of undefined

When JSON serialization, the value of undefined is ignored. After the reverse sequence is returned,

will be lost

will convert the DATE object to a string

JSON does not support the object type, for The processing of the Date object in JS is a string that converts to the ISO8601 format. However, the deserialization does not convert the string of the time format to the DATE object

is low.

As the native function,

JSON.STRINGY

and

JSON.PARSE The speed of the JSON string is very fast. However, it is not necessary to make the object serialization into JSON and re-serialization from the deep copy array. I spent some time writing a simple deep copy array or object's function. The test found that the running speed is almost about 6 times that of JSON transfer, and it also supports TypedArray, regexp's replication https: //jsperf.com/deep-clone …

Do not use Arr.Find instead of Arr.Some

Array.Prototype.Find

Is the new array lookup function in the ES2015, similar to

array.prototype.some, but cannot replace the latter.

Array.Prototype.Find Returns the first value of the eligible value, directly with this value if determines if there is, if this eligible value is exactly 0 What should I do?

Arr.find is the case where the value in the array is further processed, generally used for the object array; Arr.some is to check the existence; the two cannot be mixed .

Do not use Arr.map instead of Arr.Foreach

is also a mistake for JavaScript beginners, they often do not distinguish Array.Prototype.map and ARRAY.PROTOTYPE.FOREACH

.

Map

Map , which exports another new sequence by sequentially executing some sequence. This function is usually no side effects, and it will not modify the original array (so-called pure function). Foreach There is not so much statement, it is simple to handle all items in the array to handle it again. Since

foreach

did not return a value (returned Undefined), its callback function is usually contained, otherwise this Foreach wrote meaningless. Map

is more powerful than

Foreach , but MAP creates a new array that occupies memory. If you don't have to return to the return value of map , you should use foreach

to make up: Adding ES6, traversing arrays mainly two Method: Handwriting cycle uses the subscript, use Array.Prototype.Foreach . The former excellent energy, the highest efficiency, but it is more cumbersome - it cannot directly get the value in the array. The author is like the latter: I can directly get the iterative subscript and value, and the letterStype Style (Note that FP pays attention to the non-variable data structure, and FOREACH is naturally used, so only FP is not very fast, and there is no god). but! I don't know if you haven't taken it: Foreach can't stop. . . Foreach accepts a callback function, you can advance Return , equivalent to

Continue

in the handwritten loop. But you can’t

BREAK

– because there is no loop in the callback function to let you go Break :

[1, 2, 3 , 4, 5]. Formach (x => {console.log (x); if (x === 3) {Break; // syntaxerror: illegal break statement}}; The solution is still there. Other functional programming languages, for example, Scala has encountered a similar problem, which provides a function BREAK, and the role is to throw an exception.

We can imitate such a practice to achieve
 Arr.Foreach :  Break 
:

Try {[1, 2, 3, 4, 5] .foreach (x => {Console.log (x); if (x === 3) {throw 'Break';}} );} catch (e) {if (e! == 'BREAK') throw E; / / Do not swallow often. . . }

There are other methods, such as

ARRay.Prototype.some 分析JavaScript数组操作难点 instead

Array.Prototype.Foreach

. Considering the characteristics of Array.Prototype.SOME, when Some finds a qualified value (the callback function returns

true
), the loop is immediately terminated, and this is Characteristics can simulate Break
:   
[1, 2, 3, 4, 5] .SOME (x => {Console.log (x) ; if (x === 3) {RETURN true; // Break} // Return Undefined; equivalent to false});

The return value of Some

is ignored, it has been separated from the original meaning of the condition that the elements are met in the array. In front of ES6, the author mainly uses the law (in fact, because of the Babel code expansion, it is occasionally used, and the ES6 is different, we have for ... of. for … of is a true cycle, can be Break :

for (Const X of [1, 2, 3, 4, 5]) {Console.log (x); if (x === 3) {Break;}}
   

There is a problem,

for … of

does not seem to have a loop. In fact, JavaScript language makers think about this problem, can be solved as follows:

for (Const [Index, Value] of [1, 2, 3, 4, 5] .Entries ()) {Console.log (`Arr [$ {INDEX}] = $ {value}`); } Array.Prototype.Entries

for … of
 and  Foreach  performance test: Https: //jsperf.com/Array-fore ... chrome in 
for … of To be some of the “, if there are more suggestions welcome message to point out

© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment