JS题目之数组数据拆分重组转成嵌套对象,让脑细胞活跃下
栏目: JavaScript · 发布时间: 7年前
内容简介:下班的时候在群里看到一个小伙伴,在群里问了一道来了兴趣就折腾了下,以下是解答过程,用的是格式:先拿到数据格式如下;
下班的时候在群里看到一个小伙伴,在群里问了一道 js 的题,发现没人理会他;
来了兴趣就折腾了下,以下是解答过程,用的是 ES6+ 的特性,在 chrome跑的
题目
效果图
解答
尽量注释,我分步骤解答
1:数组变形
格式:先拿到数据格式如下;
[ [ 'code', 'Zh' ], [ 'code', 'Cn' ], [ 'taobao', '.cn' ], [ 'taobao', '.com' ] ] 复制代码
实现
这一步是拆开数据拿到我们想要的,比如基于大写字母,基于域名后缀;
因为数据格式是死的,所以正则也相对较为简单
let arr = ['codeZh', 'codeCn', 'taobao.cn', 'taobao.com'];
let arrSplit = arr.map(item => {
if (item.indexOf('.')!== -1){
return item.replace(/(\.)/g, ",$1").split(',')
} else {
return item.replace(/([A-Z])+/g, ",$1").split(',')
}
})
console.log(arrSplit);
复制代码
2:输出构建对象数据
格式:先拿到数据格式如下;
[ { code: { Zh: 'codeZh' } },
{ code: { Cn: 'codeCn' } },
{ taobao: { '.cn': 'taobao.cn' } },
{ taobao: { '.com': 'taobao.com' } } ]
复制代码
实现
let arrGroup = arrSplit.map(item => {
return {[item[0]]:{[item[1]]:item.join('')}}
})
console.log(arrGroup);
复制代码
3: 实现符合的JSON
格式: 先拿到数据格式如下;
{
"code": {
"Zh": "codeZh",
"Cn": "codeCn"
},
"taobao": {
".cn": "taobao.cn",
".com": "taobao.com"
}
}
复制代码
实现
let resultObj = {};
for (let i = 0; i < arrGroup.length; i++){
for (const [key, value] of Object.entries(arrGroup[i])) {
resultObj[key] = {
...resultObj[key],
...value
}
}
}
console.log(resultObj);
复制代码
完整代码
// 求数组转换成jso
//['codeZh', 'codeCn', 'taobao.cn', 'taobao.com']
// 输出
/*
{
'code':{Zh:'codeZh',Cn:'codeCn'},
'taobao':{'.cn':'taobao.cn},'.com':'taobao.com'
}
*/
const resultObj = {};
let arr = ['codeZh', 'codeCn', 'taobao.cn', 'taobao.com'];
let arrSplit = arr.map(item => (item.indexOf('.') !== -1 ? item.replace(/(\.)/g, ",$1").split(',') : item.replace(/([A-Z])+/g, ",$1").split(',')))
let arrGroup = arrSplit.map(item => ({ [item[0]]: { [item[1]]: item.join('') } }))
for (let i = 0; i < arrGroup.length; i++){
for (const [key, value] of Object.entries(arrGroup[i])) {
resultObj[key] = {
...resultObj[key],
...value
}
}
}
console.log(arrSplit);
console.log(arrGroup);
console.log(resultObj);
复制代码
以上所述就是小编给大家介绍的《JS题目之数组数据拆分重组转成嵌套对象,让脑细胞活跃下》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- iOS组件化拆分之业务与拆分并行开发
- html – 当我们拆分表时,如何将div拆分为两列?
- Python 循环嵌套
- MyBatis嵌套查询解析
- MyBatis嵌套查询解析
- Android 嵌套 Intent
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
用户力:需求驱动的产品、运营和商业模式
郝志中 / 机械工业出版社 / 2015-11-1 / 59.00
《用户力:需求驱动的产品、运营和商业模式》从用户需求角度深刻阐释了互联网产品设计、网络运营、商业模式构建的本质与方法论! 本书以“用户需求”为主线,先用逆向思维进行倒推,从本质的角度分析了用户的需求是如何驱动企业的产品设计、网络运营和商业模式构建的,将这三个重要部分进行了系统性和结构化的串联,然后用顺向思维进行铺陈,从实践和方法论的角度总结了企业究竟应该如围绕用户的真实需求来进行产品设计、网......一起来看看 《用户力:需求驱动的产品、运营和商业模式》 这本书的介绍吧!
JS 压缩/解压工具
在线压缩/解压 JS 代码
正则表达式在线测试
正则表达式在线测试