概述: Object.keys() 方法会返回一个由给定对象的所有可枚举自身属性的属性名组成的数组,数组中属性名的排列顺序和使用for-in循环遍历该对象时返回的顺序一致(两者的主要区别是 for-in 还会遍历出一个对象从其原型链上继承到的可枚举属性)。
一、它返回的是一个对象可枚举属性的数组
var obj = {"name": 'aaa', "code": 'dddd'}
console.log(Object.keys(obj)) // [name, code]
二、 它对于key为数字或者‘1’的会进行大小排序
var obj = {'4': '123', '3': '345', '1': '222'}
console.log(Object.keys(obj)) // ['1', '3', '4']
var obj = {4: '123',3: '345', 1: '222'}
console.log(Object.keys(obj)) // ['1', '3', '4']
三、只能返回可枚举的属性
var obj2 = Object.create({}, {
getFoo: {
value: function () {
return this.foo
}
}
})
obj2.foo = 1
console.log(obj2) // {foo: 1, getFoo: ƒ}
console.log(Object.keys(obj2)) // ["foo"]
四、针对字符串 (返回字符串的索引数组)
var str ='abc1234'
console.log(Object.keys(str)) // ["0", "1", "2", "3", "4", "5"]
// 但是这个是针对es6可以 es5则会报错
Object.keys("foo");
// TypeError: "foo" is not an object (ES5 code)
Object.keys("foo");
// ["0", "1", "2"]
五、数组
var list = ['a', 'c', 'b']
console.log(Object.keys(list)) // ['0', '1', '2']
六、构造函数
function Arr (name, age, height) {
this.name = name
this.age = age
this.height = height
this.dd = function () {
console.log(0)
}
}
console.log(Object.keys(arr)) // []
var newArr = new Arr('bxm', 18, '170') // 构造函数的名字首字母必须为大写字母
console.log(Object.keys(newArr)) ["name", "age", "height", "dd"]
七、兼容问题
运行下面的代码可以兼容那些没有原生支持Object.key方法的JavaScript环境。
if (!Object.keys) {
Object.keys = (function () {
var hasOwnProperty = Object.prototype.hasOwnProperty,
hasDontEnumBug = !({toString: null}).propertyIsEnumerable('toString'),
dontEnums = [
'toString',
'toLocaleString',
'valueOf',
'hasOwnProperty',
'isPrototypeOf',
'propertyIsEnumerable',
'constructor'
],
dontEnumsLength = dontEnums.length;
return function (obj) {
if (typeof obj !== 'object' && typeof obj !== 'function' || obj === null) throw new TypeError('Object.keys called on non-object');
var result = [];
for (var prop in obj) {
if (hasOwnProperty.call(obj, prop)) result.push(prop);
}
if (hasDontEnumBug) {
for (var i=0; i < dontEnumsLength; i++) {
if (hasOwnProperty.call(obj, dontEnums[i])) result.push(dontEnums[i]);
}
}
return result;
}
})()
};