JS题目之数组数据拆分重组转成嵌套对象,让脑细胞活跃下

前言

下班的时候在群里看到一个小伙伴,在群里问了一道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);

复制代码

---

总结

这个只是其中的一个解决姿势,肯定还有其他更优的法子;

仅供参考,不对之处请留言,会及时修正...