處理for-in用在數組上時候出現的詭異現象的問題

huangjinnan 發布于2019-08-20 19:06 / 2690人閱讀

摘要：在第一次循環的時候的值為，此后依次為。所以就出現了上面的問題。此外，在下打印的時候可能與在中打印出現不同的結果。尤其是是這種牽扯到數組下標的盡量不要使用來處理，如果非要使用可以做如下處理以避免如上的問題。

問題復現

var arr = ["a", "b", "c"];
var sid = ["Go"];
for (var key in arr) {
    sid[key + 1] = arr[key];
}
console.log(sid)

很簡單的問題，最后的輸出結果卻是：

[ "Go", , , , , , , , , , , "b", , , , , , , , , , "c" ]

問題分析

通過上面的輸入結果我們可以發現這么幾個問題：

sid里面多了很多空項，length明顯的增多了

arr[0]的值在sid中沒有出現

問題1：sid里面多了很多空項，length明顯的增多了

略過痛苦的分析步驟直接來重點內容：
通過打印key + 1我們可以找到問題的關鍵。通過打印我們可以得到如下信息。
在第一次循環的時候key + 1的值為01，此后依次為：11,21。
通過這個我們可以判斷: 這個key其實是一個String類型的。
所以上面的步驟相當于：

sid["01"] = arr[0];
sid["11"] = arr[1];
sid["21"] = arr[2];

究其原因，我只能在淺層面作出解釋：
這可能是因為for-in一般是用于對象的（狹義的對象），而對象的屬性是一個String類型，所以for-in的參數key被定義為一個String類型。這并沒有考慮過數組的屬性名（下標）不是String類型，而是一個Number類型的情況。所以就出現了上面的問題。此外在MDN的js語法關于for-in這塊出現過這樣的提示：

Note: for..in 不應該被用來迭代一個下標順序很重要的 Array .

可能就包含這種情況吧。

問題2：arr[0]的值在sid中沒有出現

arr[0]的值其實通過sid["01"]可以取到。
此外，在node下打印sid的時候可能與在console中打印出現不同的結果。

問題解決

對于數組的遍歷，最好使用：forEach,map,some,filter,find等方法。尤其是是這種牽扯到數組下標的盡量不要使用for-in來處理，如果非要使用可以做如下處理：

var arr = ["a", "b", "c"];
var sid = ["Go"];
for (var key in arr) {
    sid[parseInt(key) + 1] = arr[key];
}
console.log(sid)

以避免如上的問題。

云服務器 GPU云服務器加皮膚后的詭異問題 cdn的出現問題云主機可能出現的問題數組中未出現的數字

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

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

javascript 代碼規范

目錄 1.為什要遵守代碼規范 2.編寫代碼需遵守的幾個原則 3.編碼規范(Coding Conventions) 4.命名規范(Naming Conventions) 5.css基礎class類 1.為什要遵守代碼規范軟件bug的修復是昂貴的，并且隨著時間的推移，這些bug的成本也會增加，尤其當這些bug潛伏并慢慢出現在已經發布的軟件中時。當你發現bug 的時候就立即修復它是最好的，此時你代...

cnsworder 2019-08-22 16:02 評論0 收藏0
深入理解JavaScript系列1:編寫高質量JavaScript代碼的基本要點

摘要：訪問全局對象在瀏覽器中，全局對象可以通過屬性在代碼的任何位置訪問除非你做了些比較出格的事情，像是聲明了一個名為的局部變量。前言才華橫溢的Stoyan Stefanov，在他寫的由O’Reilly初版的新書《JavaScript Patterns》(JavaScript模式)中，我想要是為我們的讀者貢獻其摘要，那會是件很美妙的事情。具體一點就是編寫高質量JavaScript的一些要素...

Enlightenment 2019-08-19 17:18 評論0 收藏0
js遍歷之for forEach in of

摘要：語法參數當前遍歷項。遍歷的范圍在第一次調用前就會確定。已刪除的項不會被遍歷到。的是由提出的，目的是作為遍歷所有數據結構的統一方法。不僅可以遍歷數組，還可以遍歷結構，某些類似數組的對象如對象對象，對象，以及字符串。即使是最簡單的循環，其中也深藏學問 ECMAScript5(es5)有三種for循環簡單for for in forEach ECMAScript6(es6)新增 fo...

yeyan1996 2019-08-20 17:38 評論0 收藏0
Javascript中的的對象——原型模式(Prototype)

摘要：使用原型模式添加方法和屬性在前面的章節中，已經學習過了如何定義一個構建新對象時使用的構造函數。向構造函數的中添加方法和屬性是在對象被創建的時候為對象添加功能的另一種方式。讓我們繼續使用對象作為構造函數的原型屬性。本文原文來源：《Object-Oriented JavaScript》By Stoyan Stefanov本文翻譯來源：赤石俊哉原創翻譯版權申明：如果您是原文的原作者并且...

岳光 2019-08-20 14:44 評論0 收藏0
從 V8 源碼看 JS 數組排序的詭異問題

摘要：前幾天一個朋友在微信里面問我一個關于數組排序的問題。對數組的進行排序，然后把排完序的數組進行處理。翻譯成編程術語就是排序算法是不穩定排序。因此第二個排序算法會把移動到最后，然后對剩余的數據進行排序。前幾天一個朋友在微信里面問我一個關于 JS 數組排序的問題。原始數組如下： var data = [ {value: 4}, {value: 2}, {value: un...

MkkHou 2019-08-21 11:53 評論0 收藏0