前端js vue遇到的一些简单的数据处理-持续更新

1. 数据处理： 直接从后台返回数据取出自己想要的属性，并将其修改成自己想要的属性名：

list - 为需要处理的数组
value label: 是想要需要的属性名
item.nichname item.nickname,是上面需要被修改属性名
背景：就是修改请求回来的数据中某些数据的字段名，修改成自己想要的字段名

 const list007 = list.map((item) => {
          return {
            value: item.platformUid,
            label: item.nickname,
          };
       });
       // 这样就会把后台返回的数据中我们不需要的属性剔除了，取出我们想要的属性 platformUid nickname ,然后我们只是要这两个字段对应的数据，不想要两个字段名，所以需要修改字段名修改为 value label， 最后就会返回一个数组如：
       [
       {
        value:'zs',  // zs 是 platformUid 字段对应的数据
        label:'张三'  // 张三 是 nickname 字段对应的数据
        }
       ]
       

2.数据已经修改了但是视图没有更新：

本次我遇到的是 修改数组中某个对象中的某一个属性，数据已经修改成功了，但是视图却没有修改成功。
解决办法使用this.$set，来修改数据，这样才会触发视图更新。
比如要修改：allCard数组中，某项（对象）中的某个属性值：

 allCard: [
        {
          iconUrl: '', 
          title: '请添加名称', 
          desc: '请用一句话描述',
          thumburl:
            'xxxx', 
          pagepath: '', 
          remark: 'xxx', // 备注
            isSelectAppletCard:false
        },
        {
          iconUrl: 'xxxx', 
          title: '请添加名称', 
          desc: '请用一句话描述', 
          thumburl: '', 
          pagepath: '', 
          isSelectAppletCard:false
        }
       ]

// this.allCard --为要修改的对象  val为修改数组中对象的索引值  { ...this.allCard[val] } 是要修改对象所有数据的数据
        this.allCard[val].isSelectAppletCard = true;  // 这里是对要修改数组中对象的某个属性，进行修改
    this.$set(this.allCard, val, { ...this.allCard[val] });  // 把修改后的该对象，重新用this.$set修改下，这样就会触发视图更新。

3.给数组中每一个对象添加一个属性：

// allCard 是一个数组  我们要给这个数组中的每一个对象添加一个属性，并赋予一个初始值。
this.allCard.filter((item) => (item.isSelectAppletCard = false)); // 选中

4.冻结对象，使该对象中的属性无法被修改，赋值。

function freezeObj(obj) {
    Object.freeze(obj)
    Object.keys(obj).forEach((key, i) => {
        if (
            typeof obj[key] === 'object' &&
            Object.prototype.toString.call(obj[key]) !== '[object Null]'
        ) {
            freezeObj(obj[key])
        }
    })
}

5. 判断对象属性中的值是否包含指定的值：

// 接口a获取的数据：
let array = [
    {
        value: 15, // value 注意：均是字符串类型，因为一般从接口获取的字符串类型的-我们公司
        label: '张三',
    },
    {
        value: 12,
        label: '李四',
    },
    {
        value: 14,
        label: '王五',
    },
    {
        value: 10,
        label: '王二麻子',
    },
]

//  接口b 获取的数据：

let array02 = [
    {
        age: 18,
        values: '可乐',
        traggerValue: '15',
    },
    {
        age: 19,
        values: '可乐',
        traggerValue: '14,13,10', // 注意：也是字符串类型
    },
]
需求： array02 是要渲染到页面的数据，要将 array02 中的 traggerValue 属性，在 array 中的数据找到 相同 value 对应的 label, 并用逗号将对应的 label 数据 拼接好

array.forEach((val, index) => {
    array02.forEach((item) => {
        item.selectWeChatIndex = item.weChatRobotIds.indexOf(val.value)
        if (item.selectWeChatIndex !== -1) {
            if (item.slectWeChatName === undefined) item.slectWeChatName = ''
            // item.slectWeChatName += val.label + ',';
            const values = index ? ',' + val.label : val.label
            item.slectWeChatName += values
        }
        return item
    })
})  // 注意这里使用 计算属性比较好

6. 工作中常用的深拷贝（简单，快速）:

背景：工作中对于一些数据不是很复杂的，但又确实需要拷贝一份出来，不受其他数据影响，就可以用这个方法。

注意：使用拓展运算符来进行深拷贝，只能拷贝一层数据，既在对象中的对象，里面的对象拷贝的还是内存地址。
```javascript
let object02 = {name:'张三',age:18,deep:{name:'张三的小弟',age:177777},array:[1,2,3]}  // 假如这是从后台接口获取的数据
// 现在要克隆一份出来
let deepCopy= {...object02,deep:{...object02.deep}}; // {name:'张三',age:18,deep:{name:'张三的小弟',age:177777},array:[1,2,3]}  --已经拷贝成功

// 此时进行此时
object02.age=88;
console.log(object02 ) // {name: "张三", age: 88, deep: {…}, array: Array(3)}
console.log(deepCopy) // {name: "张三", age: 18, deep: {…}, array: Array(3)}

// 修改对象中的对象中的属性值：
object02.deep.age=99；
console.log(object02); 
// age: 18
// array: (3) [1, 2, 3]
// deep: {name: "张三的小弟", age: 99}
// name: "张三"

console.log(deepCopy)
// age: 18
// array: (3) [1, 2, 3]
// deep:{age: 177777
// name: "张三的小弟"}
//name: "张三"


// 都是没有问题的，都是拷贝的是值，不是内存地址。但是注意：使用拓展运算符只能深拷贝一层数据结构， 多层次的（对象里面套对象），中这种拷贝的是内存地址，还是属于浅拷贝。 这里我是直接在控制台写的，可能不是很规范。