js for of 無法改變數組變量

hover_lew 發布于2019-08-23 10:28 / 3414人閱讀

摘要：今天寫個函數時想遍歷數組，想想沒怎么用過這類的語法，于是做了個嘗試，竟發現無法改變數組元素。這里我們可以看到的本質是返回一個迭代器第三，迭代器是如何獲得值的迭代器通過方法返回值，而不是指向地址，所以在迭代中無法改變數組元素參考材料

今天寫個函數時想遍歷數組，想想沒怎么用過for...of...這類的語法，于是做了個嘗試，竟發現for...of...無法改變數組元素。

貼代碼，上例子

let array = [1,2,3];
for(let num of array){
    num++;
    console.log(num);
}
console.log(array);
//輸出如下
//2
//3
//4
//[1,2,3]

這是為什么呢，暫時找不到答案
那么for...in...會不會呢?

于是又試試for...in...語法
代碼如下

let obj = {
std1 : "Bob",
std2 : "Mike"
}
for(let name in obj){
    obj[name] = "Lily";
    console.log(obj[name]);
}
console.log(obj);
//顯示如下
//"Lily"
//"Lily"
//{std1:"Lily", std2:"Lily"}

。。。。。
留個坑，以后看能不能找到為什么。
后來找出解釋，不知是否正確，如下：
以下是個人推斷，有錯誤請指出

第一，先看看MDN的可迭代協議

以下是MDN的可迭代協議：
“可迭代協議允許 JavaScript 對象去定義或定制它們的迭代行為, 例如（定義）在一個 for..of 結構中什么值可以被循環（得到）。一些內置類型都是內置的可迭代對象并且有默認的迭代行為, 比如 Array or Map, 另一些類型則不是 (比如Object) 。”
這里我們注意到Array和Map與Object的迭代行為是不一樣的

第二，看看對象被迭代的本質

另一段材料：
“當一個對象需要被迭代的時候（比如開始用于一個for..of循環中），它的@@iterator方法被調用并且無參數，然后返回一個用于在迭代中獲得值的迭代器。”
重點在于“返回一個用于在迭代中獲得值的迭代器。”
這里我們可以看到for of 的本質是返回一個迭代器

第三，迭代器是如何獲得值的？

迭代器通過next()方法返回值，而不是指向地址，所以在for of 迭代中無法改變數組元素

參考材料：https://developer.mozilla.org...

GPU云服務器云服務器 for...of js 監聽數組改變 js 數組 for js全局變量無法使用

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

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

【面試篇】寒冬求職季之你必須要懂的原生JS(上)

摘要：循環可以使用的范圍包括數組和結構某些類似數組的對象對象，以及字符串。只能遍歷數組，不能中斷，返回值是修改后的數組。除了之外，等，也有同樣的問題。聲明一個只讀的常量。這在語法上，稱為暫時性死區。暫時性死區也意味著不再是一個百分百安全的操作。互聯網寒冬之際，各大公司都縮減了HC，甚至是采取了裁員措施，在這樣的大環境之下，想要獲得一份更好的工作，必然需要付出更多的努力。一年前，也許你搞清楚閉包...

AlphaWatch 2019-05-23 16:25 評論0 收藏0
【面試篇】寒冬求職季之你必須要懂的原生JS(上)

摘要：只能遍歷數組，不能中斷，返回值是修改后的數組。這在語法上，稱為暫時性死區。作用域鏈無論是還是查詢，都會在當前的作用域開始查找，如果沒有找到，就會向上級作用域繼續查找目標標識符，每次上升一個作用域，一直到全局作用域為止。互聯網寒冬之際，各大公司都縮減了HC，甚至是采取了裁員措施，在這樣的大環境之下，想要獲得一份更好的工作，必然需要付出更多的努力。一年前，也許你搞清楚閉包，this，原...

寵來也 2019-08-23 16:49 評論0 收藏0
JavaScript 語言核心筆記（持續更新）

摘要：在同一個塊內，不允許用重復聲明變量。中為新增了塊級作用域。自帶遍歷器的對象有數組字符串類數組對象對象的對象等和結構對象。返回一個遍歷器，使遍歷數組的鍵值對鍵名鍵值。目錄 1.語法 2.類型、值和變量 3.表達式和運算符 4.語句 5.數組 6.對象 7.函數 8.全局屬性和方法 9.詞法作用域、作用域鏈、閉包 10.原型鏈、繼承機制 11.this的理解 12.ES5新特性 13.E...

suosuopuo 2019-08-20 18:20 評論0 收藏0
前端面經整理之JS和CSS

摘要：作為對象原型鏈的終點。調用函數時，應該提供的參數沒有提供，該參數等于。它可以用于引用該函數的函數體內當前正在執行的函數。一 JS 二 CSS 一 JS ==和===的區別 ===叫做嚴格運算符 ==叫做相等運算符嚴格運算符比較時不僅僅比較數值還要比較數據類型是否一樣相等運算符在比較相同類型的數據時，與嚴格相等運算符完全一樣。在比較不同類型的數據時，相等運算符會先將數據進行類型轉換，...

stonezhu 2019-08-21 17:34 評論0 收藏0
前端面經整理之JS和CSS

摘要：作為對象原型鏈的終點。調用函數時，應該提供的參數沒有提供，該參數等于。它可以用于引用該函數的函數體內當前正在執行的函數。一 JS 二 CSS 一 JS ==和===的區別 ===叫做嚴格運算符 ==叫做相等運算符嚴格運算符比較時不僅僅比較數值還要比較數據類型是否一樣相等運算符在比較相同類型的數據時，與嚴格相等運算符完全一樣。在比較不同類型的數據時，相等運算符會先將數據進行類型轉換，...

lvzishen 2019-08-29 13:48 評論0 收藏0