Object.keys方法之详解

Object.keys方法之详解

Object.keys() 方法会返回一个由一个给定对象的自身可枚举属性组成的数组，数组中属性名的排列顺序和正常循环遍历该对象时返回的顺序一致。

语法

Object.keys(obj)

参数

要返回其枚举自身属性的对象。

返回值

一个表示给定对象的所有可枚举属性的字符串数组。

描述

Object.keys() 返回一个所有元素为字符串的数组，其元素来自给定的 object 上面可直接枚举的属性。这些属性的顺序与手动遍历该对象属性时的一致。

示例

一、传入对象，返回属性名

let obj= {name:"张三",age:25,address:"深圳",getName:function(){}}
console.log(Object.keys(obj));  // ["name", "age", "address","getName"]

常用操作

Object.keys(obj).map((key)=>{
　　console.log(key,obj[key]);  //key=>属性名  obj[key]=>属性值
}) 

扩展

// 类数组对象
const obj = { 0: 'a', 1: 'b', 2: 'c' };
console.log(Object.keys(obj)); // console: ['0', '1', '2']

// 具有随机键顺序的类数组对象
const anObj = { 100: 'a', 2: 'b', 7: 'c' };
console.log(Object.keys(anObj)); // console: ['2', '7', '100']

问题：为什么Object.keys的返回值会自动排序？

Object.keys在内部会根据属性名key的类型进行不同的排序逻辑。分三种情况：
1、如果属性名的类型是Number，那么Object.keys返回值是按照key从小到大排序
2、如果属性名的类型是String，那么Object.keys返回值是按照属性被创建的时间升序排序。
3、如果属性名的类型是Symbol，那么逻辑同String相同

二、传入字符串，返回索引

var str = 'ab1234';
console.log(Object.keys(obj));  //[0,1,2,3,4,5]

三、传入数组，返回索引

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

四、构造函数，返回空数组或者属性名

function Pasta(name, age, gender) {
      this.name = name;
      this.age = age;
      this.gender = gender;
      this.toString = function () {
            return (this.name + ", " + this.age + ", " + this.gender);
    }
}
console.log(Object.keys(Pasta)); //console: []

var spaghetti = new Pasta("Tom", 20, "male");
console.log(Object.keys(spaghetti)); //console: ["name", "age", "gender", "toString"]

五、getFoo 是一个不可枚举的属性

const myObj = Object.create({}, {
  getFoo: {
  	// enumerable: true, // 如果为true 就是可枚举属性 默认为false 不可枚举
    value() { return this.foo; }
  }
});
myObj.foo = 1;
console.log(Object.keys(myObj)); // console: ['foo']

如果你想获取一个对象的所有属性，甚至包括不可枚举的，可以使用 Object.getOwnPropertyNames

扩展 ：Object.values()和Object.keys()是相反的操作，把一个对象的值转换为数组

Object.values方法返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（ enumerable ）属性的键值。

Object.entries方法返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（ enumerable ）属性的键值对数组。

参考链接

https://zhuanlan.zhihu.com/p/40601459