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

时间:2024-03-29 15:30:56

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

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

后端童鞋给我返回的数据格式是这样的:
使用 ES 6 的 Object.keys() 和 Object.values() 方法获取对象中的键值对
代码里面如下:

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

我想要获取 info 里面的键名循环展示;
直接使用 var name = Object.keys(info); 这里的 name 就是我们想要的键名数组,打印:
使用 ES 6 的 Object.keys() 和 Object.values() 方法获取对象中的键值对
代码里是这样的:

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

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

直接使用 var data = Object.values(info); 这里的 data 就是我们想要的值数组,打印:
使用 ES 6 的 Object.keys() 和 Object.values() 方法获取对象中的键值对
代码里是这样的:

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

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