原生 JS 遍历对象方法汇总

本文主要分享使用原生的 JavaScript 遍历对象的几种方法，一起来看看吧：

要遍历的对象：obj

const obj = {
            id: 1,
            name: 'zs',
            age: '20'
        }

1.for...in 方法

        for (k in obj) {
            // k 是对象的属性，obj[k] 可得到该属性的值
            console.log(k, obj[k]);
        }

打印结果：

 使用 for...in 方法可以得到一个对象内部所有的属性和属性值，可以在内部分别使用两个数组来存储，这样可以得到属性的集合和属性值的集合，当然如果是这个需求则推荐使用第二种遍历对象的方法，如下：

2.Object.keys() 方法和 Object.values() 方法

Object.keys() 方法得到该对象所有属性的集合

Object.values() 方法得到该对象的所有属性值的集合

console.log(Object.keys(obj));      // ['id', 'name', 'age']
console.log(Object.values(obj));    // [1, 'zs', '20']

当然，第三种方法也可以得到一个对象所有属性的集合，如下：

3.Object.getOwnPropertyNames() 方法

Object.getOwnPropertyNames() 方法返回该对象的所有属性的集合

        const arr = Object.getOwnPropertyNames(obj)
        console.log(arr);  // ['id', 'name', 'age']
        // 循环遍历该属性列表使用 obj[item] 可得到该对象所有的属性值
        arr.forEach(item => {
            console.log(obj[item]);
        })

打印结果：