《用得上的前端知识》系列 - 你我都很忙,能用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值作为名称的属性)组成的数组。