数组中添加对象 & 通过递归数组，给数组中的对象添加新字段 & $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": , "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": , "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> 显示效果
版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！
转载请注明出处，原文链接：https://www.xkablog.com/jszy-jszl/10878.html