js - 遍历对象

38 阅读2分钟

《用得上的前端知识》系列 - 你我都很忙,能用100字说清楚,绝不写万字长文

一、for in循环

let obj = {
    id: 1,
    name: 'haha',
    age: 20
}
for(let key in obj){
    console.log(key + '---' + obj[key])
} 

二、Object.keys()和Object.values()

Object.keys

该方法返回一个数组,返回指定元素的所有可枚举的属性值。
兼容情况:edge、firefox、chrome、safari、opera、ie(10~11)都支持

  • 传入对象, 返回包含对象可枚举属性和方法的数组
var obj = {'a':'123','b':'345'};
console.log(Object.keys(obj));  //['a','b']

var obj1 = { 100: "a", 2: "b", 7: "c"};
console.log(Object.keys(obj1)); // console: ["2", "7", "100"]

var obj2 = Object.create({}, { getFoo : { value : function () { return this.foo } } });
obj2.foo = 1;
console.log(Object.keys(obj2)); // console: ["foo"]
  • 传入字符串,返回索引
var str = 'ab1234';
console.log(Object.keys(obj));  //[0,1,2,3,4,5]构造函数 返回空数组或者属性名
  • 数组,返回索引
var arr = ["a", "b", "c"];
console.log(Object.keys(arr)); // console: ["0", "1", "2"]

Object.keys可用于判断对象是否为空

console.log( Object.keys(obj).length ); 

Object.values

该方法返回一个给定对象自身的所有可枚举属性值的数组,值的顺序与使用for…in循环的顺序相同 ( 区别在于 for-in 循环枚举原型链中的属性 )。
兼容情况:edge、firefox、chrome、safari、opera支持,ie(10~11)不支持

//demo1
var obj = { foo: 'bar', baz: 42 };
console.log(Object.values(obj)); // ['bar', 42]

//demo2
function Fn(){}
Fn.prototype.name = 'haha';

var obj = new Fn();
console.log( obj ); //{}
console.log( Object.keys(obj) ); //[] 

for(var p in obj){
    console.log(p, obj[p]); //name haha
}

三、Object.getOwnPropertyNames

方法返回一个由指定对象的所有自身属性的属性名(包括不可枚举属性但不包括Symbol值作为名称的属性)组成的数组

var arr = ["a", "b", "c"];
console.log(Object.getOwnPropertyNames(arr).sort()); // ["0", "1", "2", "length"]

// 类数组对象
var obj = { 0: "a", 1: "b", 2: "c"};
console.log(Object.getOwnPropertyNames(obj).sort()); // ["0", "1", "2"]

//不可枚举属性
var my_obj = Object.create({}, {
  getFoo: {
    value: function() { return this.foo; },
    enumerable: false
  }
});
my_obj.foo = 1;

console.log(Object.getOwnPropertyNames(my_obj).sort()); // ["foo", "getFoo"]

总结

  • for in:只遍历对象的可枚举属性(包括它的原型链上的可枚举属性);
  • Object.keys:返回一个由一个给定对象的自身可枚举属性组成的数组,数组中属性名的排列顺序和正常循环遍历该对象时返回的顺序一致;
  • Object.getOwnPropertyNames:返回一个由指定对象的所有自身属性的属性名(包括不可枚举属性但不包括Symbol值作为名称的属性)组成的数组。