Object.keys() 與 for in 區別

標題中的方法和語句都可以實現遍歷功能，兩者有一定的共同之處，區別也很大。

下面通過程式碼例項介紹一下兩者遍歷的異同點，需要的朋友可以做一下參考。

在開始正文之前，首先做一下知識準備：

（1）.根據上下文環境的不同，屬性可以分為例項屬性與原型屬性。

（2）.另一方面，屬性又可以分為可列舉屬性與不可列舉屬性。

關於標題中方法和語句的基本用法可以參閱如下兩篇文章：

（1）.JavaScript Object.keys()一章節。

（2）.JavaScript for in 語句一章節。

一.Object.keys方法：

從此方法的名稱也大致可以猜測到它的功能，用來獲取物件的鍵。

物件中的鍵就是物件的屬性名稱，陣列也是物件，陣列的鍵就是陣列的索引。

程式碼例項如下：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let obj={
    webName:"螞蟻部落",
    5:"age",
    address:"青島市南區"
}
console.log(Object.keys(obj));

程式碼執行效果截圖如下：

程式碼分析如下：

（1）.方法的返回值是一個陣列，元素是物件的屬性名稱。

（2）.屬性名稱即便是數字，最終也都會被轉換為字串。

（3）.陣列中屬性名稱的順序與其定義順序可能不同。

此方法遍歷出來的屬性順序與for in相同，規律總結如下：

（1）.數字或者數字字串屬性最靠前，它們之間的排序按照時間先後。

（2）.string或Symbol屬性的排序是按照時間先後。

Object.keys方法是ES5新增，所以IE8和IE8以下瀏覽器不支援。

還有一個重要特點，此方法不能遍歷原型鏈上的屬性，程式碼例項如下：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
Object.prototype.target="分享互助";
let obj={
    webName:"螞蟻部落",
    5:"age",
    address:"青島市南區"
}
console.log(Object.keys(obj));

程式碼執行效果截圖如下：

可以看到原型鏈上的屬性並沒有被遍歷到。

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let arr=["螞蟻部落","青島市南區",4];
console.log(Object.keys(arr));

程式碼執行效果截圖如下：

上述程式碼通過Object.keys方法對陣列進行遍歷操作，可以看到獲取的是陣列的索引。

陣列的索引都是數字，但是通過此方法獲取的都會被轉換為字串。

二. for in語句：

此語句可以遍歷普通物件，也可以遍歷陣列，但是不建議使用它遍歷陣列。

因為遍歷陣列的目的通常是獲取陣列中的元素，但是for in獲取的是陣列索引，並且也會遍歷到陣列自定義的屬性和原型鏈上的屬性，這一點有點畫蛇添足的感覺，程式碼例項如下：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
Object.prototype.target="分享互助";
let obj={
    webName:"螞蟻部落",
    5:"age",
    address:"青島市南區"
}
for(prop in obj){
    console.log(prop);
}

程式碼執行效果截圖如下：

可以看到原型鏈上的屬性也會被此語句遍歷到。

其實瞭解了方法與語句的用法，它們之間的區別也就自然呈現出來了。

三.異同總結如下：

（1）.都可以遍歷物件與陣列。

（2）.獲取的都是物件或者陣列的鍵（陣列的鍵就是元素索引），獲取的值都會被轉換為字串。

（3）.獲取鍵的順序兩者是完全相同的。

（4）.瀏覽器支援有所差異，Object.keys方法低版本IE瀏覽器不支援。

（5）.Object.keys方法不會獲取原型鏈上的鍵，但是for in是可以的。