ES6 —— entries()，keys()和values()

ES6 提供三個新的方法 —— entries()，keys()和values() —— 用於遍歷數組。它們都返回一個遍歷器對象，可以用for...of循環進行遍歷，唯一的區別是keys()是對鍵名的遍歷、values()是對鍵值的遍歷，entries()是對鍵值對的遍歷。

 一、一般數組用法

for of支持遍歷數組、類對象（例如DOM NodeList對象，也稱偽數組）、字符串、Map對象、Set對象；

for of不支持遍歷普通對象，可通過參考下面的Object.keys()搭配使用遍歷

for (let index of ['a', 'b'].keys()) {
console.log(index);
}
// 0
// 1
for (let elem of ['a', 'b'].values()) {
console.log(elem);
}
// 'a'
// 'b'
for (let [index, elem] of ['a', 'b'].entries()) {
console.log(index, elem);
}
// 0 "a"
// 1 "b"

 

如果不使用for...of循環，可以手動調用遍歷器對象的next方法，進行遍歷。

 

let letter = ['a', 'b', 'c'];
let entries = letter.entries();
console.log(entries.next().value); // [0, 'a']
console.log(entries.next().value); // [1, 'b']
console.log(entries.next().value); // [2, 'c']

 

 

二、object對象keys(), values() entries()

1.Object.keys()

ES5 引入了Object.keys方法，返回一個數組，成員是參數對象自身的（不含繼承的）所有可遍歷（enumerable）屬性的鍵名。

for of不支持遍歷普通對象，可通過與Object.keys()搭配使用遍歷

錯誤的寫法:for(let key of obj.keys()) {.....}

返回值：數組

let obj = { a: 1, b: 2, c: 3 };

for (let key of Object.keys(obj)) {
  console.log(key); // 'a', 'b', 'c'
}

　var obj1 = {"name":"lucas","age":22};
  console.log(Object.keys(obj1)) //["name", "age"]

 

2.Object.values()

ES2017 引入了跟Object.keys配套的Object.values和Object.entries，作為遍歷一個對象的補充手段，供for...of循環使用。

因為其他遍歷方法比如for in只能通過obj[key]的方式拿到對象的鍵值，ES7可通過 Object.values(obj) 拿到對象的鍵值。

返回值：數組

let obj = { a: 1, b: 2, c: 3 };

for (let value of Object.values(obj)) {
  console.log(value); // 1, 2, 3
}

  var obj1 = {"name":"lucas",age:22};
　console.log(Object.values(obj1)) //["lucas", 22]

 

3.Object.entries()

Object.entries()和 Object.keys 相關，不過 entries()函數會將 key 和 value 以數組的形式都返回。這樣，使用循環或則將對象轉為 Map 就很方便了。

返回值：數組

let obj = { a: 1, b: 2, c: 3 };

for (let [key, value] of Object.entries(obj)) {
  console.log([key, value]); // ['a', 1], ['b', 2], ['c', 3]
}

　var obj1 = {"name":"lucas",age:22};
　console.log(Object.entries(obj1)) //["name","lucas"] ["age",22]

 

Object.entries方法的一個用處是，將對象轉為真正的Map結構。

    var obj2 = {foo:'bar',baz:42};
    var map2 = new Map(Object.entries(obj2));
    console.log(map2);   //map{"foo" => "bar", "baz" => 42}

    var data={a:1,b:2,c:9,d:4,e:5};
            console.log(data);    //{a: 1, b: 2, c: 9, d: 4, e: 5}
            console.log(Object.keys(data));    //["a", "b", "c", "d", "e"]
            Object.keys(data).map((key,item)=>{
                console.log(key,data[key]);    //key=>屬性名    data[key]=>屬性值
                
                /* 輸出:
                            a 1
                            b 2
                            c 9
                            d 4
                            e 5
                */
            });