正文
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
*/
});