分析JavaScript數(shù)組操作難點-創(chuàng)新互聯(lián)

以下內(nèi)容是學習JavaScript數(shù)組的時候總結的經(jīng)驗以及需要注意的點。

10年積累的網(wǎng)站設計制作、網(wǎng)站建設經(jīng)驗，可以快速應對客戶對網(wǎng)站的新想法和需求。提供各種問題對應的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡服務。我雖然不認識你，你也不認識我。但先建設網(wǎng)站后付款的網(wǎng)站建設流程，更有延平免費網(wǎng)站建設讓你可以放心的選擇與我們合作。

不要用 for_in 遍歷數(shù)組

這是 JavaScript 初學者常見的誤區(qū)。for_in 用于遍歷對象中包括原型鏈上的所有可枚舉的（enumerable）的 key，本來不是為遍歷數(shù)組而存在。

使用 for_in 遍歷數(shù)組有三點問題：

1、遍歷順序不固定

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

2、會遍歷出對象原型鏈上的值。

如果你改變了數(shù)組的原型對象（比如 polyfill）而沒有將其設為 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，因為：會使某些特定值轉換為 null

NaN, undefined, Infinity 對于 JSON 中不支持的這些值，會在序列化 JSON 時被轉換為 null，反序列化回來后自然也就是 null

會丟失值為 undefined 的鍵值對

JSON 序列化時會忽略值為 undefined 的 key，反序列化回來后自然也就丟失了

會將 Date 對象轉換為字符串

JSON 不支持對象類型，對于 JS 中 Date 對象的處理方式為轉換為 ISO8601 格式的字符串。然而反序列化并不會把時間格式的字符串轉化為 Date 對象

運行效率低下。

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

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

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 初學者常常犯的錯誤，他們往往并沒有分清 Array.prototype.map 和 Array.prototype.forEach 的實際含義。

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

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

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

補：心得補充

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

筆者個人是喜歡后者的：可以直接獲取到迭代的下標和值，而且函數(shù)式風格（注意 FP 注重的是不可變數(shù)據(jù)結構，forEach 天生為副作用存在，所以只有 FP 的形而沒有神）寫起來爽快無比。但是！不知各位同學注意過沒有：forEach 一旦開始就停不下來了。。。

forEach 接受一個回調(diào)函數(shù)，你可以提前 return，相當于手寫循環(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
 }
});

另外有需要云服務器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

新聞標題：分析JavaScript數(shù)組操作難點-創(chuàng)新互聯(lián)
文章URL：http://bm7419.com/article8/dgcoip.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站導航、定制開發(fā)、品牌網(wǎng)站建設、App設計、用戶體驗、全網(wǎng)營銷推廣

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載，或轉載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容