数组中添加对象 & 通过递归数组，给数组中的对象添加新字段 & $set给对象添加新属性 & 遍历唯一ID标识-随机数或时间戳

最新推荐文章于 2024-07-22 18:31:28 发布

viceen

最新推荐文章于 2024-07-22 18:31:28 发布

阅读量6.6k

点赞数 5

分类专栏： js知识 vue项目-运维文章标签： vue js javascript

本文链接：https://blog.csdn.net/weixin_44867717/article/details/117077154

版权

js知识同时被 2 个专栏收录

152 篇文章 13 订阅

订阅专栏

vue项目-运维

111 篇文章 2 订阅

订阅专栏

数组中添加对象 & 通过递归数组，给数组中的对象添加新字段 & $set给对象添加新属性 & 遍历唯一ID标识-随机数或时间戳

1、空数组中添加对象

  var cardNumArr = [];
        //定义一个空的数组
        var cardNumObj = {};
        //定义一个空的对象
        cardNumObj = {
            name: '李白',
            id: 1
   };
  cardNumArr.push(cardNumObj);
  console.log(cardNumArr);

效果

在这里插入图片描述

2、js高效修改对象数组里的对象属性名

有些时候，我们前端从后端拿过来的JSON对象数据，某些字段并不是前端想要的，需要对一些字段名进行重命名。一般修改对象数组的对象属性名:

JSON.parse(JSON.stringify(data).replace(/name/g, 'new_name'))    
//data为数组，name为修改前，new_name为修改后

解释：

1）JSON.stringify()把json对象转成json字符串；

2）使用正则的replace()方法替换属性名；

3）JSON.parse()把json字符串又转成json对象。

修改多个属性：当要修改多个属性名时，多次调用replace方法，可以链式调用。如下面说明

JSON.parse(JSON.stringify(data).replace(/name1/g, 'new_name1').replace(/name2/g, 'new_name2').replace(/name3/g, 'new_name3')...)

附：

JSON.parse和JSON.stringify方法详解

1、JSON.parse(“要转换的数据”)

2、JSON.stringify(“要转化的数据”)

3、首先，两个方法的用法是有差别的：

①.JSON.stringify是从一个对象中解析出字符串

②.JSON.parse是从一个字符串中解析出json(键值对)

4、所以在使用的时候如果参数不对应，就不能正确转换：

一.JSON.parse()【从一个字符串中解析出json对象】

例子：

1.定义一个字符串，var data=’{“name”:“goatling”}’

2.解析对象，JSON.parse(data)

3.结果是：

name:“goatling”

二.JSON.stringify()【从一个对象中解析出字符串】

1.var data={name:‘goatling’}

2.JSON.stringify(data)

3.结果是：

‘{“name”:“goatling”}’

实例-给数组对象修改属性名

var arr = [{
         "courseName": "英语",
         "code": "english"
    },
    {
          "courseName": "药物化学",
          "code": "yw"
     }
];
console.log(arr)
arr = JSON.stringify(arr).replace(/courseName/g, "title").replace(/code/g, "name");
console.log(arr)
var b = JSON.parse(arr);
console.log(b)

显示效果

在这里插入图片描述

3、$set给对象添加新属性

类似——Vue.set(object, key, value) 方法将响应属性添加到嵌套的对象上

this.$set(el,"myID",myID)

“myID”——key，对象属性名

myID——value，属性值

动态生成随机数——避免v-for或forEach等循环时，出现重复`:key=index`,出现控制台标红

// 1、随机数——优选
let myID = Math.random().tostring(36).substr(2);
// 2、时间戳——遍历太快，会出现时间戳一样的情况
let myID = Date.parse(new Date())

通过递归数组，给数组中的对象添加新字段

methods:{
    // 递归 添加字段
    recursion(arr) {
      console.log(arr)
      arr.forEach((el) => {
        console.log(el)
      //  let myID = Date.parse(new Date());
       let myID = Math.random().toString(36).substr(2);
        this.$set(el, "myID", myID);
          console.log(el)
         if (el.children && el.children.length) {
          this.recursion(el.children);
        }
      });
    },
}

//调用递归方法
 this.recursion(Array);

var Array =  [{
    "id": 1,
    "showName": "XXX席位方案",
    "children": [{
        "id": 121,
        "showName": "XXX部们",
        "children": [{
            "id": 131,
            "showName": "系统分类",
            "children": [{
                "id": 141,
                "code": "172.16.66.212",
                "showName": "电脑席位",
                "startOver": 96,
                "memoryUsage": 18,
                "cpuUsage": 39,
                "children": [{
                    "id": 151,
                    "showName": "软件开发",
                    "code": 65894234,
                    "startOver": 16,
                    "cpuUsage": 45,
                    "memoryUsage": 17
                }]
            }]
        }]
    }]
  }]

实例-递归方式添加数组中对象属性

全代码单页面实例

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <button @click="showinfo(arr)">显示</button>
  </div>

 // <script src="./vue.js"></script>
//    或
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        arr: [{
          "id": 1,
          "showName": "XXX席位方案",
          "children": [{
            "id": 121,
            "showName": "XXX部们",
            "children": [{
              "id": 131,
              "showName": "系统分类",
              "children": [{
                "id": 141,
                "code": "172.16.66.212",
                "showName": "电脑席位",
                "startOver": 96,
                "memoryUsage": 18,
                "cpuUsage": 39,
                "children": [{
                  "id": 151,
                  "showName": "软件开发",
                  "code": 65894234,
                  "startOver": 16,
                  "cpuUsage": 45,
                  "memoryUsage": 17
                }]
              }]
            }]
          }]
        }]
      },
      // 给vue实例定义 方法，这个方法可以供事件操作使用
      methods: {
        showinfo: function (arr) {
          console.log(this)
          // 获取data数据，具体通过this关键字
          console.log(arr)
          arr.forEach((el) => {
            console.log(el)
            //  let myID = Date.parse(new Date());
            let myID = Math.random().toString(36).substr(2);
            this.$set(el, "myID", myID);
            console.log(el)
            if (el.children && el.children.length) {
              this.showinfo(el.children);
            }
          })
        }
      }
    });
    console.log(vm)
  </script>
</body>

</html>