前言

项目里面很多地方我们需要把数据处理一下才能应用，包括我们拿到的是一个对象，但是我们需要遍历，这个时候就需要把对象转成数组来实现我们的目的了，js对象转数组有几种方法，归纳整理一下～

js对象转数组

方法一：Array.from()

Array.from() 用于数组的浅拷贝。就是将一个类数组对象或者可遍历对象转换成一个真正的数组。

object中必须有length属性，返回的数组长度取决于length长度
对象的key 必须是数值否则返回[undefined,undefined]

const obj1 = {
  0: 'dhf',
  1: 'male',
  length: 2
}
console.log(Array.from(obj1))   //['dhf','male']

方法二：Object.keys()

Object.keys()跟方法一不同，不需要length属性，返回一个对象所有可枚举 key 关于什么是可枚举，讲完这几种方法下面具体介绍

const obj2 = {
  name: 'dd',
  sex: 'male'
}
console.log(Object.keys(obj2))   //['name','sex']

方法三：Object.values()

Object.values()跟方法二类似，不需要length属性，返回一个对象所有可枚举 value

const obj2 = {
  name: 'dd',
  sex: 'male'
}
console.log(Object.values(obj2))   //['dd','male']

方法四：Object.entries()

Object.entries()也不需要length属性，返回一个给定对象自身可枚举属性的键值对数组

const obj2 = {
  name: 'dd',
  sex: 'male'
}
console.log(Object.entries(obj2))

可枚举属性和不可枚举属性

什么是可枚举属性

一个对象中的属性可以分为可枚举属性与不可枚举属性。
可枚举属性是指那些内部 “可枚举”（enumerable）标志设置为 true 的属性。
对于通过直接的赋值和属性初始化的属性，该标识值默认为即为 true。
但是对于通过 Object.defineProperty 等定义的属性，该标识值默认为 false。

可以结合获取对象属性的几个方法来了解可枚举属性和不可枚举属性。

几种获取对象的属性的方法

function Person() {
  this.name = 'Dhf'
}
let dd: any = new Person()
//在dd对象上的原型上添加属性 school 属性值为qinghua
Person.prototype.school = 'qinghua'
//Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。
//那么这句意思就是在dd这个对象上添加了新的属性sex value为male 且设置了不可枚举
Object.defineProperty(dd, 'sex', {
  value: 'male',
  //是否为枚举属性
  enumerable: false
})

console.log(dd)

方法一: for...in

遍历对象的每一个可枚举属性,包括原型链上面的可枚举属性
(js基本包装类型的原型属性是不能被遍历因为是不可枚举的)。

for (var p in dd) {
    console.log(p) //name，school
}

方法二: Object.keys()

Object.keys()方法只能遍历自己的对象上的可枚举的属性，不能遍历自己原型上可枚举的属性。

console.log(Object.keys(dd)) //['name']

方法三: Object.getOwnPropertyNames()

如果用Object.getOwnPropertyNames方法的话可以遍历到它所有的属性，包括可枚举和不可枚举的属性。

Object.getOwnPropertyNames(dd).forEach(key => {
  console.log(key) //name ,sex
})

总结

可枚举的属性可以通过for...in循环进行遍历（除非该属性名是一个Symbol），或者通过Object.keys()方法返回一个可枚举属性的数组。

js对象转数组&&可枚举属性和不可枚举属性

前言