for in，Object.keys，for of 的區別

幽涯發表於2018-06-17
Object

1、for in

  • 遍歷物件及其原型鏈上可列舉的屬性；
  • 如果用於遍歷陣列，處理遍歷其元素外，還會遍歷開發者對陣列物件自定義的可列舉屬性及其原型鏈上的可列舉屬性；
  • 遍歷物件返回的屬性名和遍歷陣列返回的索引都是 string 型別；
  • 某些情況下，可能按隨機順序遍歷陣列元素；

舉個栗子：

Array.prototype.getLength = function() {
    return this.length;
};
var arr = ['a', 'b', 'c'];
arr.name = 'June';
Object.defineProperty(arr, 'age', {
    enumerable: true,
    value: 17,
    writable: true,
    configurable: true
});
for(var i in arr) {
    console.log(i); // 0,1,2,name,age,getLength
}
複製程式碼

綜上考慮，不推薦在陣列中使用 for in 遍歷

2、Object.keys

  • 返回物件自身可列舉屬性組成的陣列
  • 不會遍歷物件原型鏈上的屬性以及 Symbol 屬性
  • 對陣列的遍歷順序和 for in 一致

再來個栗子：

function Person() {
    this.name = 'June';
}
Person.prototype.getName = function() {
    return this.name;
}
var person = new Person();
Object.defineProperty(person, 'age', {
    enumerable: true,
    value: 17,
    writable: true,
    configurable: true
});
console.log(Object.keys(person));   // ['name', 'age']
複製程式碼

3、for of

  • es6 中新增的迴圈遍歷語法；
  • 支援遍歷陣列，類陣列物件（DOM NodeList），字串，Map 物件，Set 物件；
  • 不支援遍歷普通物件；
  • 遍歷後輸出的結果為陣列元素的值；
  • 可搭配例項方法 entries()，同時輸出陣列的內容和索引；

多舉幾個栗子：

// 1. 不會遍歷到物件屬性及其原型屬性
Array.prototype.getLength = function() {
    return this.length;
};
var arr = ['a', 'b', 'c'];
arr.name = 'June';
Object.defineProperty(arr, 'age', {
    enumerable: true,
    value: 17,
    writable: true,
    configurable: true
});
for(let i of arr) {
    console.log(i); // a,b,c
}

// 2. 如果要遍歷物件，可與 Object.keys 配合
var person = {
    name: 'June',
    age: 17,
    city: 'guangzhou'
}
for(var key of Object.keys(person)) {
    console.log(person[key]); // June, 17, guangzhou
}

// 3. 配合 entries 輸出陣列索引和值/物件的鍵值
var arr = ['a', 'b', 'c'];
for(let [index, value] of Object.entries(arr)) {
    console.log(index, ':', value);
    // 0:a, 1:b, 2:c
}
var obj = {name: 'June', age: 17, city: 'guangzhou'};
for(let [key, value] of Object.entries(obj)) {
    console.log(key, ':', value);
    // name:June,age:17,city:guangzhou
}

複製程式碼

注 Object.entries(obj)： 如果引數的資料結構具有鍵和值，則返回一個二元陣列，陣列的每個元素為引數的[key,value]陣列； 此方法簽名如下：

Object.entries(value: any) : Array<[string: any]>
複製程式碼

栗子：

// Symbol 屬性會被忽略
Object.entries({ [Symbol()]: 123, name: 'June', age: 17});
// [['name','June'], ['age', 17]]
複製程式碼

相關文章