本文主要和大家分享JavaScript 中數(shù)組操作注意點(diǎn)基礎(chǔ)，不要用 for_in 遍歷數(shù)組這是 JavaScript 初學(xué)者常見(jiàn)的誤區(qū)。for_in 用于遍歷對(duì)象中包括原型鏈上的所有可枚舉的（enumerable）的 key，本來(lái)不是為遍歷數(shù)組而存在。

使用 for_in 遍歷數(shù)組有三點(diǎn)問(wèn)題：

1. 遍歷順序不固定

JavaScript 引擎不保證對(duì)象的遍歷順序。當(dāng)把數(shù)組作為普通對(duì)象遍歷時(shí)同樣不保證遍歷出的索引順序。

1. 會(huì)遍歷出對(duì)象原型鏈上的值。

如果你改變了數(shù)組的原型對(duì)象（比如 polyfill）而沒(méi)有將其設(shè)為 enumerable: false，for_in 會(huì)把這些東西遍歷出來(lái)。

1. 運(yùn)行效率低下。

盡管理論上 JavaScript 使用對(duì)象的形式儲(chǔ)存數(shù)組，JavaScript 引擎還是會(huì)對(duì)數(shù)組這一非常常用的內(nèi)置對(duì)象特別優(yōu)化。 https://jsperf.com/for-in-vs-...
可以看到使用 for_in 遍歷數(shù)組要比使用下標(biāo)遍歷數(shù)組慢 50 倍以上

PS：你可能是想找 for_of

不要用 JSON.parse(JSON.stringify()) 深拷貝數(shù)組

有人使用 JSON 中深拷貝對(duì)象或數(shù)組。這雖然在多數(shù)情況是個(gè)簡(jiǎn)單方便的手段，但也可能引發(fā)未知 bug，因?yàn)椋?/p>

1. 會(huì)使某些特定值轉(zhuǎn)換為 null

NaN, undefined, Infinity 對(duì)于 JSON 中不支持的這些值，會(huì)在序列化 JSON 時(shí)被轉(zhuǎn)換為 null，反序列化回來(lái)后自然也就是 null

1. 會(huì)丟失值為 undefined 的鍵值對(duì)

JSON 序列化時(shí)會(huì)忽略值為 undefined 的 key，反序列化回來(lái)后自然也就丟失了

1. 會(huì)將 Date 對(duì)象轉(zhuǎn)換為字符串

JSON 不支持對(duì)象類型，對(duì)于 JS 中 Date 對(duì)象的處理方式為轉(zhuǎn)換為 ISO8601 格式的字符串。然而反序列化并不會(huì)把時(shí)間格式的字符串轉(zhuǎn)化為 Date 對(duì)象

1. 運(yùn)行效率低下。

作為原生函數(shù)，JSON.stringify 和 JSON.parse 自身操作 JSON 字符串的速度是很快的。然而為了深拷貝數(shù)組把對(duì)象序列化成 JSON 再反序列化回來(lái)完全沒(méi)有必要。

我花了一些時(shí)間寫(xiě)了一個(gè)簡(jiǎn)單的深拷貝數(shù)組或?qū)ο蟮暮瘮?shù)，測(cè)試發(fā)現(xiàn)運(yùn)行速度差不多是使用 JSON 中轉(zhuǎn)的 6 倍左右，順便還支持了 TypedArray、RegExp 的對(duì)象的復(fù)制

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

不要用 arr.find 代替 arr.some

Array.prototype.find 是 ES2015 中新增的數(shù)組查找函數(shù)，與 Array.prototype.some 有相似之處，但不能替代后者。

Array.prototype.find 返回第一個(gè)符合條件的值，直接拿這個(gè)值做 if 判斷是否存在，如果這個(gè)符合條件的值恰好是 0 怎么辦？

arr.find 是找到數(shù)組中的值后對(duì)其進(jìn)一步處理，一般用于對(duì)象數(shù)組的情況；arr.some 才是檢查存在性；兩者不可混用。

不要用 arr.map 代替 arr.forEach

也是一個(gè) JavaScript 初學(xué)者常常犯的錯(cuò)誤，他們往往并沒(méi)有分清 Array.prototype.map 和 Array.prototype.forEach 的實(shí)際含義。

map 中文叫做 映射，它通過(guò)將某個(gè)序列依次執(zhí)行某個(gè)函數(shù)導(dǎo)出另一個(gè)新的序列。這個(gè)函數(shù)通常是不含副作用的，更不會(huì)修改原始的數(shù)組（所謂純函數(shù)）。

forEach 就沒(méi)有那么多說(shuō)法，它就是簡(jiǎn)單的把數(shù)組中所有項(xiàng)都用某個(gè)函數(shù)處理一遍。由于 forEach 沒(méi)有返回值（返回 undefined），所以它的回調(diào)函數(shù)通常是包含副作用的，否則這個(gè) forEach 寫(xiě)了毫無(wú)意義。

確實(shí) map 比 forEach 更加強(qiáng)大，但是 map 會(huì)創(chuàng)建一個(gè)新的數(shù)組，占用內(nèi)存。如果你不用 map 的返回值，那你就應(yīng)當(dāng)使用 forEach

補(bǔ)：forEach 與 break

ES6 以前，遍歷數(shù)組主要就是兩種方法：手寫(xiě)循環(huán)用下標(biāo)迭代，使用 Array.prototype.forEach。前者萬(wàn)能，效率最高，可就是寫(xiě)起來(lái)比較繁瑣——它不能直接獲取到數(shù)組中的值。

筆者個(gè)人是喜歡后者的：可以直接獲取到迭代的下標(biāo)和值，而且函數(shù)式風(fēng)格（注意 FP 注重的是不可變數(shù)據(jù)結(jié)構(gòu)，forEach 天生為副作用存在，所以只有 FP 的形而沒(méi)有神）寫(xiě)起來(lái)爽快無(wú)比。但是！不知各位同學(xué)注意過(guò)沒(méi)有：forEach 一旦開(kāi)始就停不下來(lái)了。。

forEach 接受一個(gè)回調(diào)函數(shù)，你可以提前 return，相當(dāng)于手寫(xiě)循環(huán)中的 continue。但是你不能 break——因?yàn)榛卣{(diào)函數(shù)中沒(méi)有循環(huán)讓你去 break：

[1, 2, 3, 4, 5].forEach(x => {
 console.log(x);
 if (x === 3) {
 break; // SyntaxError: Illegal break statement
 }
});

解決方案還是有的。其他函數(shù)式編程語(yǔ)言例如 scala 就遇到了類似問(wèn)題，它提供了一個(gè)函數(shù)
break，作用是拋出一個(gè)異常。

我們可以仿照這樣的做法，來(lái)實(shí)現(xiàn) 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; // 不要勿吞異常。。
}

惡心的一Ｂ對(duì)不對(duì)。還有其他方法，比如用 Array.prototype.some 代替 Array.prototype.forEach。

考慮 Array.prototype.some 的特性，當(dāng) some 找到一個(gè)符合條件的值（回調(diào)函數(shù)返回 true）時(shí)會(huì)立即終止循環(huán)，利用這樣的特性可以模擬 break：

[1, 2, 3, 4, 5].some(x => {
 console.log(x);
 if (x === 3) {
 return true; // break
 }
 // return undefined; 相當(dāng)于 false
});

some 的返回值被忽略掉了，它已經(jīng)脫離了判斷數(shù)組中是否有元素符合給出的條件這一原始的含義。

在 ES6 前，筆者主要使用該法（其實(shí)因?yàn)?Babel 代碼膨脹的緣故，現(xiàn)在也偶爾使用），ES6 不一樣了，我們有了 for...of。for...of 是真正的循環(huán)，可以 break：

for (const x of [1, 2, 3, 4, 5]) {
 console.log(x);
 if (x === 3) {
 break;
 }
}

但是有個(gè)問(wèn)題，for...of 似乎拿不到循環(huán)的下標(biāo)。其實(shí) JavaScript 語(yǔ)言制定者想到了這個(gè)問(wèn)題，可以如下解決：

for (const [index, value] of [1, 2, 3, 4, 5].entries()) {
 console.log(`arr[${index}] = ${value}`);
}

Array.prototype.entries

for...of 和 forEach 的性能測(cè)試：https://jsperf.com/array-fore... Chrome 中 for...of 要快一些哦

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com