給初學者：JavaScript 中數組操作注意點

tianyu 發布于2019-08-22 11:20 / 1728人閱讀

摘要：使用遍歷數組有三點問題遍歷順序不固定引擎不保證對象的遍歷順序。作為原生函數，和自身操作字符串的速度是很快的。由于沒有返回值返回，所以它的回調函數通常是包含副作用的，否則這個寫了毫無意義。接受一個回調函數，你可以提前，相當于手寫循環中的。

不要用 for_in 遍歷數組

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

使用 for_in 遍歷數組有三點問題：

遍歷順序不固定

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

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

如果你改變了數組的原型對象（比如 polyfill）而沒有將其設為 enumerable: false，for_in 會把這些東西遍歷出來。

運行效率低下。

盡管理論上 JavaScript 使用對象的形式儲存數組，JavaScript 引擎還是會對數組這一非常常用的內置對象特別優化。 https://jsperf.com/for-in-vs-...
可以看到使用 for_in 遍歷數組要比使用下標遍歷數組慢 50 倍以上

PS：你可能是想找 for_of

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

有人使用 JSON 中深拷貝對象或數組。這雖然在多數情況是個簡單方便的手段，但也可能引發未知 bug，因為：

會使某些特定值轉換為 null

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

會丟失值為 undefined 的鍵值對

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

會將 Date 對象轉換為字符串

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

運行效率低下。

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

我花了一些時間寫了一個簡單的深拷貝數組或對象的函數，測試發現運行速度差不多是使用 JSON 中轉的 6 倍左右，順便還支持了 TypedArray、RegExp 的對象的復制

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

不要用 arr.find 代替 arr.some

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

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

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

不要用 arr.map 代替 arr.forEach

也是一個 JavaScript 初學者常常犯的錯誤，他們往往并沒有分清 Array.prototype.map 和 Array.prototype.forEach 的實際含義。

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

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

確實 map 比 forEach 更加強大，但是 map 會創建一個新的數組，占用內存。如果你不用 map 的返回值，那你就應當使用 forEach

補：對數組排序時，永遠記得傳入比較函數

arr.sort 默認會將數組中所有元素轉換成字符串后以字典序排序。例如：

[1,2,3,4,5,6,7,8,9,10].sort() // => [1,10,2,3,4,5,6,7,8,9]

除非你是給字符串數組排序，否則請給它傳入一個比較函數。

PS：不要手寫排序算法了

補：forEach 與 break

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

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

forEach 接受一個回調函數，你可以提前 return，相當于手寫循環中的 continue。但是你不能 break——因為回調函數中沒有循環讓你去 break：

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

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

我們可以仿照這樣的做法，來實現 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 的特性，當 some 找到一個符合條件的值（回調函數返回 true）時會立即終止循環，利用這樣的特性可以模擬 break：

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

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

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

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

但是有個問題，for...of 似乎拿不到循環的下標。其實 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 要快一些哦?

如果有更多建議歡迎留言指出

完

GPU云服務器云服務器注意點給c語言初學者的建議購買云計算服務器需要注意點希望給點提示

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/92217.html

給初學者：JavaScript 的常見注意點

摘要：上篇說了一些中數組操作的常見誤區，這次來總結一下初學者常見的其他易錯點。小心它的精度問題。這就是存在的唯一意義。而包括在內所有瀏覽器所以對于日期字符串，請注意字符串中是使用橫杠還是斜杠。考慮到負數時區的問題，不推薦將小時數清零的做法。上篇說了一些 JS 中數組操作的常見誤區，這次來總結一下初學者常見的其他易錯點。寫立即執行函數時前置 void 立即執行函數（IIFE）在 JS 非常...

blair 2019-08-21 18:41 評論0 收藏0
JavaScript展開操作符(Spread operator)介紹

摘要：本文介紹的展開操作符。你可以通過展開操作符擴展一個數組對象和字符串。展開運算符是三個點可以將可迭代對象轉為用逗號分隔的參數序列。也就是說，展開運算符不會遞歸地深度拷貝所有屬性。在計算機圖形學前端可視化方面有深入研究。本文介紹JavaScript的展開操作符(Spread operator)...。本文適合ES6初學者。你可以通過展開操作符(Spread operator)...擴展...

ningwang 2019-08-02 15:20 評論0 收藏0
JavaScript展開操作符(Spread operator)介紹

摘要：本文介紹的展開操作符。你可以通過展開操作符擴展一個數組對象和字符串。展開運算符是三個點可以將可迭代對象轉為用逗號分隔的參數序列。也就是說，展開運算符不會遞歸地深度拷貝所有屬性。在計算機圖形學前端可視化方面有深入研究。本文介紹JavaScript的展開操作符(Spread operator)...。本文適合ES6初學者。你可以通過展開操作符(Spread operator)...擴展...

codergarden 2019-08-23 18:13 評論0 收藏0
如何正確學習JavaScript

摘要：然而，雖然先生對無所不知，被譽為世界的愛因斯坦，但他的語言精粹并不適合初學者學習。即便如此，在后面我還是會建議把當做補充的學習資源。但目前為止，依然是學習編程的好幫手。周正則表達式，對象，事件，閱讀權威指南第，，，章。既然你找到這篇文章來，說明你是真心想學好JavaScript的。你沒有想錯，當今如果要開發現代網站或web應用（包括互聯網創業），都要學會JavaScript。而面對泛...

canger 2019-08-21 10:23 評論0 收藏0