使用 ES 5 的 Object.keys() 和 ES 6 Object.values()、Object.entries() 方法获取对象中的键值对

今天撸代码写小程序的时候，后端同学一改之前数据返回格式常态，将 JSON 数组换成了 JSON 对象的格式。这下取出数据成问题了啊，作为一个前端小菜鸟，只能到处搜索方法，终于找到了ES 6 中的新方法可以直接用来读取Object中的键值对，闲话不说上代码。

这里我直接用今天写的接口里的数据作为例子，后端童鞋给我返回的数据格式console.log的打印结果是这样的：

代码中的表现形式为：

info: {
	"装修花费": {
		value: 5,
		ratio: "5.75"
	},
	"有氧器械": {
		value: 0,
		ratio: "0.00"
	},
	......
}

一、ES 5 的 Object.keys() 将对象中的键名返回成一个数组

使用方法：var name = Object.keys(info);
返回格式：[key1,key2,...],
在我提供的例子中console.log(name)打印结果为：

代码中的表现形式为：

name = [ "装修花费" , "有氧器械",......]

二、ES 6 的 Object.values() 将对象中的值返回成一个数组

使用方法：var data = Object.values(info);
返回格式：[value1,value2,...],
在我提供的例子中console.log(data)打印结果为：

代码中的表现形式为：

data = [ 
	{
		value: 30,
		ratio: 34.48
	},
	{
		value: 20,
		ratio: 22.99
	}
	......
]

三、ES 6 的 Object.entries() 将对象中的键值对返回成一个数组

使用方法：var jsonArr = Object.entries(info);
返回格式：[[key1,value1],[key2,value2],...],
在我提供的例子中console.log(jsonArr)打印结果为：

代码中的表现形式为：

jsonArr = [ 
	[ "装修花费" , {value: 30,ratio: 34.48} ] ,
	[ "有氧器械" , {value: 20,ratio: 22.99} ] , 
	......
 ]

就是这么简单，对象中的键值对，都返回成我们想要的数组格式，用于前端循环展示。