JS 之keys()

JavaScript016

JS 之keys(),第1张

The Object.keys() method returns an array of the names of the enumerable properties and methods of an object.

Object.keys(object)

An array that contains the names of the enumerable properties and methods of the object.

ES6新语法(oh, 老语法...),简单,就是需要了解并记忆,这以后会常用~ 晚安!~

const ArraytoObj = (keys = [], values = []) =>{

if(keys.length === 0 || values.length === 0) return {}

const len = keys.length >values.length ? values.length : keys.length

// if you want save all the keys, and the value could be undefined, you can use keys.forEach function instead of for loop

const obj = {}

for(let i = 0i <len++i) {

obj[keys[i]] = values[i]

}

return obj

}

// test cases

expect(ArraytoObj(['ka', 'kb'], ['va', 'vb'])).to.eql({ ka: 'va', kb: 'vb' })

expect(ArraytoObj(['ka', 'kb', 'kc'], ['va', 'vb'])).to.eql({ ka: 'va', kb: 'vb' })

expect(ArraytoObj(['ka', 'kb'], ['va', 'vb', 'vc'])).to.eql({ ka: 'va', kb: 'vb' })

expect(ArraytoObj([], ['va', 'vb'])).to.eql({})

expect(ArraytoObj(['ka', 'kb'], [])).to.eql({})

expect(ArraytoObj()).to.eql({})

最近工作上遇到一些问题,我这边需要把从后端拿到的一些数据进行绘图。

这里使用的是绘图方式是echarts-for-react,详细使用方法可以见 echarts-for-reac的使用方法 ,根据这个网址里的component props部分,可以知道ReactEchartsCore组件接受的打点的参数是option,话不多说,直接上例子。

我这边需要对目标数据进行object遍历以及array遍历,最后需要得到的是一个数组。

目标数据的数据结构是:

这里我需要对obj这个数据进行一些操作,目标是得到一个这样的数据:

最后我想得到这样的数据类型。

这里从一开始我就没有思考把这个数据结构转变成数组来进行两次map操作来得到自己想要的结果,我一直都是考虑如何遍历这个对象,之后再遍历该对象里某个属性值的数组。

这里用了Object.keys来遍历对象,但是一开始并不明白怎么用,所以我卡住了很久..

这里拿官方的例子来简单说明一下这个方法怎么使用。

这里可以看到,对象使用了Object.keys()方法变成了一个数组,数组里存储着对象的key值,如果你还需要对该对象key值里的数据进行操作,可以用map来遍历这个存储了key值的数组,来达到目的。

比如,我在绘图的时候,需要拿到一个数组类型给options的series属性,对于我刚开始拿出的例子来说,解决办法就是:

哈哈哈我只是记录一下工作,如果这篇文章没有给你们带来帮助的话....就....点个赞再走吧~