Basics of array operations in JavaScript-JS Tutorial-php.cn

This article mainly shares with you the basics of array operations in JavaScript. Do not use for_in to traverse arrays. This is a common misunderstanding among JavaScript beginners. for_in is used to traverse all enumerable (enumerable) keys in the object including the prototype chain. It does not originally exist for traversing arrays.

There are three problems with using for_in to traverse an array:

The traversal order is not fixed

The JavaScript engine does not guarantee the traversal order of objects. When traversing an array as a normal object, the index order of the traversal is also not guaranteed.

# will traverse the values on the object prototype chain.

If you change the prototype object of the array (such as a polyfill) without setting it to enumerable: false, for_in will traverse these things.

The operation efficiency is low.

#Although theoretically JavaScript uses the form of objects to store arrays, the JavaScript engine will be particularly optimized for arrays, a very commonly used built-in object. https://jsperf.com/for-in-vs-...
You can see that using for_in to traverse an array is more than 50 times slower than using subscripts to traverse an array

PS: You may be looking for for_of

##Don’t use JSON.parse(JSON.stringify()) deep copy array

Someone uses JSON Medium-deep copy of an object or array. Although this is a simple and convenient method in most cases, it may also cause unknown bugs because:

will convert some specific values into null

NaN, undefined, Infinity For these values that are not supported in JSON, they will be converted to null. After deserialization, it will naturally be null

, and key-value pairs with undefined values will be lost

Keys with undefined values will be ignored during JSON serialization, and will be lost after deserialization.

The Date object will be Convert to string

JSON does not support object types. The processing method for Date objects in JS is to convert them into strings in ISO8601 format. However, deserialization does not convert the time format string into a Date object

which is inefficient.

As native functions, JSON.stringify and JSON.parse The speed of operating JSON strings by itself is very fast. However, it is completely unnecessary to serialize the object to JSON and deserialize it back in order to deep copy the array.

I spent some time writing a simple function for deep copying arrays or objects. The test found that the running speed is almost 6 times that of using JSON transfer. By the way, it also supports TypedArray, Copying RegExp objects

https://jsperf.com/deep-clone...

Do not use arr.find instead of arr .some

##Array.prototype.find is a new array search function in ES2015, which is the same as Array.prototype.some has similarities, but is not a replacement for the latter.

Array.prototype.find Returns the first value that meets the conditions and directly uses this value to do if Determine whether it exists. What if the qualified value happens to be 0?

arr.find is to find the value in the array and then further process it. It is generally used in the case of object array; arr.some is used to check existence; the two cannot be mixed.

Don’t use arr.map instead of arr.forEach

is also a mistake that JavaScript beginners often make. They often don’t distinguish between ## The actual meaning of #Array.prototype.map and Array.prototype.forEach.

##map Chinese is called MAP, which is done by A sequence executes a function in sequence to derive another new sequence. This function usually has no side effects and does not modify the original array (so-called pure function).

forEach There are not so many explanations. It simply processes all the items in the array with a certain function. Since forEach has no return value (returns undefined), its callback function usually contains side effects, otherwise this forEach is meaningless.

Indeed

map is better than forEach More powerful, but map will create a new array and occupy memory. If you don't use the return value of map, then you should use forEach

Supplement: forEach and break

Before ES6, there were two main methods for traversing arrays: handwritten loops using subscripts to iterate, and using

Array.prototype.forEach. The former is versatile and the most efficient, but it is more cumbersome to write - it cannot directly obtain the values in the array.

The author personally likes the latter: you can directly obtain the subscript and value of the iteration, and the functional style (note that FP focuses on immutable data structures, and forEach is inherently a side effect exists, so there is only the form of FP but no God) It is very refreshing to write. but! I wonder if any of you students have noticed: once you start forEach, you can't stop. . .

forEach accepts a callback function, you can

#return in advance, which is equivalent to in a handwritten loop continue. But you can't #break - because there is no loop in the callback function for you to break:

<span style="font-size: 14px;">[1, 2, 3, 4, 5].forEach(x => {<br>  console.log(x);<br>  if (x === 3) {<br>    break;  // SyntaxError: Illegal break statement<br>  }<br>});<br></span>

Copy after login

There are still solutions. Other functional programming languages such as

scala have encountered similar problems. It provides a function break, which is used to throw An exception occurs.

Basics of array operations in JavaScript ##We can follow this approach to achieve

arr.forEach'sbreak：

<span style="font-size: 14px;">try {<br>  [1, 2, 3, 4, 5].forEach(x => {<br>    console.log(x);<br>    if (x === 3) {<br>      throw 'break';<br>    }<br>  });<br>} catch (e) {<br>  if (e !== 'break') throw e; // 不要勿吞异常。。。<br>}<br></span>

Copy after login

Disgusting B, right? There are other ways, such as using

Array.prototype.some instead of Array.prototype.forEach. Consider the characteristics of Array.prototype.some, when

some finds a qualified value (callback function When returning true), the loop will immediately be terminated. This feature can be used to simulate break：

<span style="font-size: 14px;">[1, 2, 3, 4, 5].some(x => {<br>  console.log(x);<br>  if (x === 3) {<br>    return true; // break<br>  }<br>  // return undefined; 相当于 false<br>});<br></span>

Copy after login

some 的返回值被忽略掉了，它已经脱离了判断数组中是否有元素符合给出的条件这一原始的含义。

在 ES6 前，笔者主要使用该法（其实因为 Babel 代码膨胀的缘故，现在也偶尔使用），ES6 不一样了，我们有了 for...of。for...of 是真正的循环，可以 break：

<span style="font-size: 14px;">for (const x of [1, 2, 3, 4, 5]) {<br>  console.log(x);<br>  if (x === 3) {<br>    break;<br>  }<br>}<br></span>

Copy after login

但是有个问题，for...of 似乎拿不到循环的下标。其实 JavaScript 语言制定者想到了这个问题，可以如下解决：

<span style="font-size: 14px;">for (const [index, value] of [1, 2, 3, 4, 5].entries()) {<br>  console.log(`arr[${index}] = ${value}`);<br>}<br></span>

Copy after login

Array.prototype.entries

for...of 和 forEach 的性能测试：https://jsperf.com/array-fore... Chrome 中 for...of 要快一些哦

The above is the detailed content of Basics of array operations in JavaScript. For more information, please follow other related articles on the PHP Chinese website!