携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第8天，点击查看活动详情

前言

目前正在开发的问卷项目不知不觉已经已经进行了20天了，该项目需要两个客户端：web端与微信小程序端，小程序端仅作做题使用。在后端返回的题目数据中，选项被混在了包括题目标题等属性在内的题目信息中— —即所有的信息都被混在了同一对象的同一层中，非常不利于Vue进行遍历渲染。

为了提取出其中有需要遍历的内容，我花了一些时间利用es6解构赋值写了一个函数用来提取选项，并将这个函数封装成了一个.js文件，以便于后续多次调用

正文

注意：使用该方式提取元素需要提前知道键名，若提取数目过于庞大的话建议根据键名的规律循环提取

先贴出全部代码，并不长

let obj = ...     //obj为需要提取转换的原对象
let arr = []      //arr是即将输出的数组

let {
	optionA,
	optionB,
	optionC,
} = {
	...obj
}

    let allOption = {     //提取完毕新对象，但其中可能会含有空元素
	optionA,
	optionB,
	optionC,
}

for (let key in allOption) {     //将非空元素转换为数组
	if(typeof(allOption[key]) !== 'undefined'){
		arr.push(option[key])
	}
}
return arr

代码解释

解构赋值部分

首先拿到原对象，将该对象解构赋值

值得注意的是，第一次赋值中的解构赋值的作用大致为：将对象obj中的元素一个一个拆解开，将拆解出来的元素键名与等号左边大括号中的变量名进行比对，若名字相同，则等号左边的变量将会获得obj中对应同名元素的值。

例如：在上述代码中，optionA、optionB、optionC与被拆解开的obj进行逐一比对，当发现obj中有某一元素的键名同样也为optionA时，等号左边的optionA将会被赋值，值为obj中的optionA。

再例如：假设有一对象obj我们写下代码

let obj = {xxx:... , optionA:123 , yyy:...}
let {optionA,optionB} = {...obj}

则上述optionA与optionB的值分别为optionA = 123与optionB = undefined

新对象allOption的赋值触发了es6的对象简写形式

循环遍历部分

根据上述例子我们注意到optionB的值为undefined，这将会导致即将输出的数组中收到污染

于是我们还需要添加一段循环用于去掉undefined，同时在该循环中一步步push出我们需要的数组，于是便有了最开始贴出的代码中的如下循环

for (let key in option) {
	if(typeof(option[key]) !== 'undefined'){
		arr.push(option[key])
	}
}
return arr

上述代码就比较简单了，for...in...可以快捷遍历一个对象内的所有内容

在函数体内添加typeof()可以检查出哪个元素的值是undefined，并将非空元素添加入数组arr中，最后返回数组arr

需要注意的是：由于JavaScript中的null的数据类型为object，想要循环遍历并去除的话可能会引来一些意料之外的bug，因此推荐后台响应请求时将null过滤掉