js修改对象数组中的对象属性名一看就懂yyds

最近看到一个面试题要求如下：

将数组中所有id变为code，所有title变为name

<script>
const list = [{
    id: 'a',
    title: 'A'
}, {
    id: 'b',
    title: 'B',
    children: [{
        id: 'c',
        title: 'C'
    }, {
        id: 'd',
        title: 'D'
    }]
}]
</script>

由于没有接触和学习这块内容，然后被难住了。

一开始想到了暴力法解决这个问题，后来发现如果数据量很大的话，效率是很低的。

于是就面向百度大学学习了一波。。。。。。。 

我们啥时候需要修改属性名呢？

通常后端拿过来的JSON对象数据中，某些属性字段可能不是我们想要的，所以我们需要对这些属性进行处理，方便我们前端的操作。

目前解决方法有俩

1. 通过JSON+正则修改对象属性

JSON.parse(JSON.stringify(list).replace(/title/g, 'name')）

• 1.JSON.stringify()将json对象转为JSON字符串
• 2.使用正则的replace(/title/g, 'name')）方法将tilte替换为name
• 3.JSON.parse()将json字符串转为json对象

方法1可以链式调用哦，如下：

 let res = JSON.parse(JSON.stringify(list[i]).replace(/title/g, 'name').replace(/id/g, "code"));

既替换title为name，也替换id为code。

所以题目通过方法一解决的代码来了~~

  <script>
    // 将数组中所有id变为code，所有title变为name
    const list = [{
      id: 'a',
      title: 'A'
    }, {
      id: 'b',
      title: 'B',
      children: [{
        id: 'c',
        title: 'C'
      }, {
        id: 'd',
        title: 'D'
      }]
    }]
    let result = [];//结果保存
    for (let i = 0; i < list.length; i++) {
      //获取到list的第i个对象，修改后返回一个新对象，不修改原对象
      let res = JSON.parse(JSON.stringify(list[i]).replace(/title/g, 'name').replace(/id/g, "code"));
      //判断是否还有孩子，有就执行下面的操作
      if (list[i].children) {
        let childs = []//存孩子修改后的对象
        //遍历children下对象数组
        for (let j = 0; j < list[i].children.length; j++) {
          //获取到孩子的第j个对象，修改后返回一个新对象，不修改原对象
          let ch = JSON.parse(JSON.stringify(list[i].children[j]).replace(/title/g, 'name').replace(/id/g, "code"));
          childs.push(ch);
        }
        //将孩子修改后的属性赋值给res
        res.children = childs;
      }
      //将res装入result
      result.push(res)
    }
    console.log(result);
  </script>

输出：

 但是！！！上面的方法会修改键值对的值包含title和id的字符！因此严格上以上方法效率较高却不准确~

 下面来看一下方法2：通过数组方法map（）修改属性名。

通过数组方法map（）修改属性名。

例如：let res = data.map(item=>{return {name:item.title,code:item.id}});

代码：

let result2 = [];
    let s = list.map(item => {
      let res = {};
      res.code = item.id;
      res.name = item.title;
      if (item.children) {
        res.children = item.children.map(data => { return { code: data.id, name: data.title } });
      }
      return res;
    })
    console.log(s);

结果打印

 ok，

哈哈，太卷了，给自己打打鸡血