前言

项目里面很多地方我们需要把数据处理一下才能应用，包括我们拿到的是一个对象，但是我们需要遍历，这个时候就需要把对象转成数组来实现我们的目的了，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()方法返回一个可枚举属性的数组。

最后

为大家准备了一个前端资料包。包含54本，2.57G的前端相关电子书，《前端面试宝典（附答案和解析）》，难点、重点知识视频教程（全套）。

有需要的小伙伴，可以点击下方卡片领取，无偿分享

js对象转数组可枚举属性和不可枚举属性相关推荐

js对象、数组、字符串操作总结（保姆级教程）
对象操作 1. 扩展运算符作用是遍历某个对象或者数组 testMethod() {// 三个点 ... 俗称扩展运算符或延展运算符,需要注意的是扩展运算符在拷贝的时候只能深拷贝第一层,第二层及以下都 ...
js 对象中，可枚举性（enumerable）是什么？
js 对象中,可枚举性(enumerable)是什么? 可枚举性(enumerable)用来控制所描述的属性,是否将被包括在 for-in 循环之中(除非属性名是一个 Symbol).具体来说,如果一 ...
JavaScript对象中的可枚举属性和不可枚举属性
在JavaScript中,对象的属性有可枚举和不可枚举之分,它是由对象属性描述符enumerable决定的.如果该属性是可枚举性的那么这个属性就能被for-in查找遍历到. 对象的属性描述符在Jav ...
js对象转数组的方法一种方法
js对象转数组的方法一种方法 let obj = { name: '张三', age: 18, sex: '男' };let a = Object.values(obj) //属性值 // ['张三' ...
JS 数组转对象，JS 对象转数组
JS数组转对象 // 原始数据 const arr = [{ label: 'title_one', val: '参数值1' }, { label: 'title_two', val: '参数值2' ...
js 对象转数组切割转回对象
js 对象转数组切割转回对象最近有一个需求:分享图片到(QQ,微信,朋友圈) 前端计算生成数据对象传给后端,后端生成图片返回图片路径给前端,前端显示图片就行但是前端生成的数据太多,传到后端,也没那 ...
js的可枚举属性与不可枚举属性
可枚举属性和不可枚举属性什么意思? 在javascript中,对象的属性可以分为可枚举属性和不可枚举属性,它们的属性由enumerable值决定,可枚举属性决定了这个属性能否被for in 遍历到判 ...
可枚举属性和不可枚举属性（for...in循环和Objec.keys()和Object.getOwnPropertyNames()）
可枚举属性和不可枚举属性(for...in循环和Objec.keys()和Object.getOwnPropertyNames()) for...in循环是遍历对象的每一个可枚举属性,包括原型链上面 ...
JS对象的可枚举属性和不可枚举属性
昨天在写文章(转载)的时候发现了有些对象的方法是分可枚举性和不可枚举性的. 简单的查了一下资料,今天来捋一捋啥是对象的可枚举啥是不可枚举. JS中对象转数组方法总结可枚举性: 对象的每一个属性都有一 ...

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

前言