ES8中如何优雅的遍历对象

简介

之前我写了一篇关于ES6是如何遍历对象的，如果有兴趣的同学可以去看下，链接在这里
ES6遍历数据的方法

在ES8里面，代码变得更加的优雅，简洁。那么在ES8里面，是如何对对象进行遍历的呢

Object.keys

在ES6里面，遍历对象获得key值是这样操作的

let data = {
    name:'Yao',
    age:18
}
for (const key in data) {
    if (data.hasOwnProperty(key)) {
        const element = data[key];
        console.log(key,element); 
        //name Yao
        //age 18
    }
    
}

在ES8里面这个过程变得非常的简洁

let myData = Object.keys(data)
console.log(myData); // ["name","age"]
console.log(...myData); // name age

Object.values

这个API是用来遍历对象里面的value值的，使用的方法也非常的简单，优雅。

let myData = Object.values(data);
console.log(myData);  //["Yao",18]

同样，由于 Object.keys 和 Object.values 这个API会把对象转换成一个数组的形式返回回来，那么所有数组上的API方法也可以在这里使用了。

例如，如果想单独拿到这个对象上面name的属性值，只需要这样做就可以了

let myData = Object.values(data)
.filter(item=>item==='Yao'?'Yao':'');

Object.entries

将不可遍历的对象转变成可遍历的对象，这个API的作用就是这样，也就是处理for…of…遍历对象的时候报错
xxx is not iterable，这个问题

for (const iterator of Object.entries(data)){
    console.log(iterator)
    // ["name","Yao"]  ["age",18]
}

同样的也会转换并且返回的一个数组。

严格意义上来说，它是把对象转换成了一个数组结构，然后内部的属性同样也变成了数组形式

console.log(Object.entries(data));

打印出来的结构：

创作不易，这些都是我自己在学习过程中的一些笔记，如果觉得我的文章对你有些帮助，点个赞吧！！！