分析JavaScript數(shù)組操作難點
以下內(nèi)容是學(xué)習(xí)JavaScript數(shù)組的時候總結(jié)的經(jīng)驗以及需要注意的點。
不要用 for_in 遍歷數(shù)組
這是 JavaScript 初學(xué)者常見的誤區(qū)。for_in 用于遍歷對象中包括原型鏈上的所有可枚舉的(enumerable)的 key,本來不是為遍歷數(shù)組而存在。
使用 for_in 遍歷數(shù)組有三點問題:
1、遍歷順序不固定
JavaScript 引擎不保證對象的遍歷順序。當(dāng)把數(shù)組作為普通對象遍歷時同樣不保證遍歷出的索引順序。
2、會遍歷出對象原型鏈上的值。
如果你改變了數(shù)組的原型對象(比如 polyfill)而沒有將其設(shè)為 enumerable: false
,for_in 會把這些東西遍歷出來。
3、運行效率低下。
盡管理論上 JavaScript 使用對象的形式儲存數(shù)組,JavaScript 引擎還是會對數(shù)組這一非常常用的內(nèi)置對象特別優(yōu)化。 https://jsperf.com/for-in-vs-...
可以看到使用 for_in 遍歷數(shù)組要比使用下標遍歷數(shù)組慢 50 倍以上
PS:你可能是想找 for_of
不要用 JSON.parse(JSON.stringify()) 深拷貝數(shù)組
有人使用 JSON 中深拷貝對象或數(shù)組。這雖然在多數(shù)情況是個簡單方便的手段,但也可能引發(fā)未知 bug,因為:會使某些特定值轉(zhuǎn)換為 null
NaN, undefined, Infinity 對于 JSON 中不支持的這些值,會在序列化 JSON 時被轉(zhuǎn)換為 null,反序列化回來后自然也就是 null
會丟失值為 undefined 的鍵值對
JSON 序列化時會忽略值為 undefined 的 key,反序列化回來后自然也就丟失了
會將 Date 對象轉(zhuǎn)換為字符串
JSON 不支持對象類型,對于 JS 中 Date 對象的處理方式為轉(zhuǎn)換為 ISO8601 格式的字符串。然而反序列化并不會把時間格式的字符串轉(zhuǎn)化為 Date 對象
運行效率低下。
作為原生函數(shù),JSON.stringify
和 JSON.parse
自身操作 JSON 字符串的速度是很快的。然而為了深拷貝數(shù)組把對象序列化成 JSON 再反序列化回來完全沒有必要。
我花了一些時間寫了一個簡單的深拷貝數(shù)組或?qū)ο蟮暮瘮?shù),測試發(fā)現(xiàn)運行速度差不多是使用 JSON 中轉(zhuǎn)的 6 倍左右,順便還支持了 TypedArray、RegExp 的對象的復(fù)制
https://jsperf.com/deep-clone...
不要用 arr.find 代替 arr.some
Array.prototype.find
是 ES2015 中新增的數(shù)組查找函數(shù),與 Array.prototype.some
有相似之處,但不能替代后者。
Array.prototype.find
返回第一個符合條件的值,直接拿這個值做 if
判斷是否存在,如果這個符合條件的值恰好是 0 怎么辦?
arr.find
是找到數(shù)組中的值后對其進一步處理,一般用于對象數(shù)組的情況;arr.some
才是檢查存在性;兩者不可混用。
不要用 arr.map 代替 arr.forEach
也是一個 JavaScript 初學(xué)者常常犯的錯誤,他們往往并沒有分清 Array.prototype.map
和 Array.prototype.forEach
的實際含義。
map
中文叫做 映射
,它通過將某個序列依次執(zhí)行某個函數(shù)導(dǎo)出另一個新的序列。這個函數(shù)通常是不含副作用的,更不會修改原始的數(shù)組(所謂純函數(shù))。
forEach
就沒有那么多說法,它就是簡單的把數(shù)組中所有項都用某個函數(shù)處理一遍。由于 forEach
沒有返回值(返回 undefined),所以它的回調(diào)函數(shù)通常是包含副作用的,否則這個 forEach
寫了毫無意義。
確實 map
比 forEach
更加強大,但是 map
會創(chuàng)建一個新的數(shù)組,占用內(nèi)存。如果你不用 map
的返回值,那你就應(yīng)當(dāng)使用 forEach
補:心得補充
ES6 以前,遍歷數(shù)組主要就是兩種方法:手寫循環(huán)用下標迭代,使用 Array.prototype.forEach
。前者萬能,效率最高,可就是寫起來比較繁瑣——它不能直接獲取到數(shù)組中的值。
筆者個人是喜歡后者的:可以直接獲取到迭代的下標和值,而且函數(shù)式風(fēng)格(注意 FP 注重的是不可變數(shù)據(jù)結(jié)構(gòu),forEach 天生為副作用存在,所以只有 FP 的形而沒有神)寫起來爽快無比。但是!不知各位同學(xué)注意過沒有:forEach 一旦開始就停不下來了。。。
forEach 接受一個回調(diào)函數(shù),你可以提前 return
,相當(dāng)于手寫循環(huán)中的 continue
。但是你不能 break
——因為回調(diào)函數(shù)中沒有循環(huán)讓你去 break
:
[1, 2, 3, 4, 5].forEach(x => { console.log(x); if (x === 3) { break; // SyntaxError: Illegal break statement } });
解決方案還是有的。其他函數(shù)式編程語言例如 scala
就遇到了類似問題,它提供了一個函數(shù)
break,作用是拋出一個異常。
我們可以仿照這樣的做法,來實現(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; // 不要勿吞異常。。。 }
還有其他方法,比如用 Array.prototype.some
代替 Array.prototype.forEach
。
考慮 Array.prototype.some 的特性,當(dāng) some
找到一個符合條件的值(回調(diào)函數(shù)返回 true
)時會立即終止循環(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 前,筆者主要使用該法(其實因為 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; } }
但是有個問題,for...of
似乎拿不到循環(huán)的下標。其實 JavaScript 語言制定者想到了這個問題,可以如下解決:
for (const [index, value] of [1, 2, 3, 4, 5].entries()) { console.log(`arr[${index}] = ${value}`); }
Array.prototype.entries
for...of
和 forEach
的性能測試:https://jsperf.com/array-fore... Chrome 中 for...of
要快一些哦😯
如果有更多建議歡迎留言指出
- JavaScript 數(shù)組去重并統(tǒng)計重復(fù)元素出現(xiàn)的次數(shù)實例
- Jackson將json string轉(zhuǎn)為Object,org.json讀取json數(shù)組的實例
- js 兩數(shù)組去除重復(fù)數(shù)值的實例
- 最實用的JS數(shù)組函數(shù)整理
- JS笛卡爾積算法與多重數(shù)組笛卡爾積實現(xiàn)方法示例
- js判斷數(shù)組是否包含某個字符串變量的實例
- Vue.js在數(shù)組中插入重復(fù)數(shù)據(jù)的實現(xiàn)代碼
- JS基于對象的特性實現(xiàn)去除數(shù)組中重復(fù)項功能詳解
相關(guān)文章
如何根據(jù)百度地圖計算出兩地之間的駕駛距離(兩種語言js和C#)
本文給大家介紹分別使用js和c#兩種語言實現(xiàn)根據(jù)百度地圖計算出兩地之間的駕駛距離,需要用戶指定出發(fā)城市和到達城市。對百度地圖計算兩地距離感興趣的朋友可以參考下本篇文章2015-10-10javascript Three.js創(chuàng)建文字初體驗
這篇文章主要為大家介紹了Three.js創(chuàng)建文字初體驗,具有一定的參考價值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助2021-11-11javascript如何實現(xiàn)360度全景照片問題匯總
這篇文章主要為大家詳細匯總了javascript如何實現(xiàn)360度全景照片問題,感興趣的朋友可以參考一下2016-04-04