對於 JavaScript 中循環之間的技術差別概述

做者：Gbolahan Olagunju
譯者：前端小智
來源：blog
手機端閱讀： 點擊這裏

點贊再看，微信搜索 【大遷世界】 關注這個沒有大廠背景，但有着一股向上積極心態人。本文 GitHub https://github.com/qq44924588... 上已經收錄，文章的已分類，也整理了不少個人文檔，和教程資料。

你們都說簡歷沒項目寫，我就幫你們找了一個項目，還附贈【搭建教程】。

在 JavaScript 中使用循環時，須要理解兩個關鍵點：可枚舉的屬性和可迭代的對象。

可枚舉的屬性

可枚舉對象的一個定義特徵是，當經過賦值操做符向對象分配屬性時，咱們將內部 enumerable 標誌設置爲true，這是默認值。

固然，咱們能夠經過將其設置爲false來更改此行爲。

要點：可枚舉的屬性均可以用 for...in 遍歷出來。

舉個例子看看:

// 會出如今 for ... in 循環中
const gbols = {};
gbols.platform = "LogRocket";

Object.getOwnPropertyDescriptor(gbols, "platform");

// {value: "LogRocket", writable: true, enumerable: true, configurable: true}

for (const item in gbols) {
   console.log(item)
}
// platform


// 不會出如今 for ... in 循環中
// 將 enumerable 設置爲 false
Object.defineProperty(gbols, 'role', {value: 'Admin', writable: true, enumerable: false})

for (const item in gbols) {
  console.log(item)
}
// platform

可迭代的對象

若是一個對象定義了它的迭代行爲，那麼它就是可迭代的。在這種狀況下，將在for …of構造中循環的值將定義其迭代行爲。可迭代的內置類型包括Arrays、Strings、Sets和Maps 。object 是不可迭代的，由於它沒有指定@iterator method。

在Javascript中，全部可迭代都是可枚舉的，但不是全部的可枚舉都是可迭代的。

for …in在數據中查找對象，而for ..of查找重複序列。來個例子看看：

const authors = ['小智', '小王', '小明', '小紅'];

// 與 for in 循環一塊兒使用
fro (const author in authors) {
  console.log(author)
}

// 打印: 0,1,2,3

for (const author of authors) {
  console.log(author)
}

// 打印：小智  小王  小明   小紅

使用此構造時，須要牢記的是，若是調用了 typeof 獲得的類型是 object，則能夠使用for…in循環。

咱們來看一下對authors變量的操做：

typeof authors

// 打印的是 「object」，所以咱們能夠使用`for ..in`

乍一看感受有點奇怪，但必須注意，數組是一種特殊的對象，它以索引爲鍵。for ...in循環找到對象時，它將循環遍歷每一個鍵。

for …in 遍歷 authors 數組的方式能夠用下面顯式化的方式來理解：

const authors = {
  0: 'Jade',
  1: 'Dafe',
  2: 'Gbols',
  3: 'Daniel'
}

重要說明：若是能夠追溯到對象（或從對象原型鏈繼承它），由於for …in將以不特定的順序遍歷鍵。

同時，若是實現 for.. of 構造的迭代器，則它將在每次迭代中循環遍歷該值。

ForEach 和 map 方法

儘管能夠使用forEach和map方法來實現相同的目標，可是它們的行爲和性能方面存在差別。

基礎層面上，當函數被調用時，它們都接收一個回調函數做爲參數。

考慮下面的代碼片斷：

const scoresEach = [2,4 ,8, 16, 32];
const scoresMap = [2,4 ,8, 16, 32];
const square = (num) => num * num;

咱們逐一列出其操做上的一些差別。

forEach返回undefined，而map返回一個新數組：

let newScores = []
const resultWithEach = scoresEach.forEach((score) => {
const newScore = square(score);
newScores.push(newScore);
});
const resultWithMap = scoresMap.map(square);

console.log(resultWithEach) // undefined
console.log(resultWithMap) // [4, 16, 64, 256, 1024]

map是一個純函數，而forEach則執行一些更改：

console.log(newScores) // [4, 16, 64, 256, 1024]

在我看來，map傾向於函數式編程範例。與forEach不一樣的是，咱們並不老是須要執行一次更改來得到想要的結果，在forEach中，咱們須要對newscore變量進行更改。在每次運行時，當提供相同的輸入時，map函數將產生相同的結果。同時，forEach對應項將從最後一次更改的前一個值中獲取數據。

鏈式

map能夠使用鏈式操做，由於map返回的結果是一個數組。所以，能夠當即對結果調用任何其餘數組方法。換句話說，咱們能夠調用filter, reduce, some等等。對於forEach，這是不可能的，由於返回的值是undefined。

性能

map 方法的性能每每優於forEach方法。

檢查用map和forEach實現的等效代碼塊的性能。平均而言，map函數的執行速度至少要快50%。

注意：此基準測試取決於你使用的計算機以及瀏覽器的實現。

總結

在上面討論的全部循環結構中，爲咱們提供最多控制的是for..of的循環。咱們能夠將它與關鍵字return、continue和break一塊兒使用。這意味着咱們能夠指定咱們但願對數組中的每一個元素髮生什麼，以及咱們是想早點離開仍是跳過。

---

原文：https://medium.com/better-pro...

代碼部署後可能存在的BUG無法實時知道，過後爲了解決這些BUG，花了大量的時間進行log 調試，這邊順便給你們推薦一個好用的BUG監控工具 Fundebug。

---

交流

文章每週持續更新，能夠微信搜索 【大遷世界 】 第一時間閱讀，回覆 【福利】 有多份前端視頻等着你，本文 GitHub https://github.com/qq449245884/xiaozhi 已經收錄，歡迎Star。