js：向对象数组中添加新的属性

原创已于 2022-08-23 11:52:48 修改 · 3.7k 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js

于 2022-05-19 10:39:03 首次发布

项目实战遇到的问题同时被 2 个专栏收录

25 篇文章

订阅专栏

数据转换

6 篇文章

订阅专栏

这篇博客探讨了在JavaScript中如何操作数组，包括使用map方法创建新数组，并在Vue3中遇到向数组对象添加属性的问题。示例代码展示了如何通过克隆数组来解决这一问题，以及三种不同的方法为数组对象添加'sex'属性。

原数组
在这里插入图片描述
现数组：

let arr=[
      {
        name:'张三',
        age:18,
        sex:'男'
      },
      {
        name:'小李',
        age:12,
        sex:'女'
      }
    ]
    console.log(arr)
    let res=arr.map((item,index)=>{
      return {...item,school:'小花中学'}
    })
    console.log(res)

vue3中当往数组里面添加不了属性时，可克隆数组再添加

const result=cloneDeep(res).map((item,index) => item = { ...item, key: index });
      console.log(result,'ssss')

    let arr = [{
        name: '张三',
        age: 23
    }, {
        name: '李四',
        age: 23
    }, {
        name: '王五',
        age: 23
    }, {
        name: '赵六',
        age: 23
    }, ]
    //第一种方法
    for(let i in arr){
        arr[i].sex='男'
    }
    //第二种方法
    let res=arr.map(item=>{
        return {...item,sex:'男'}
    })
    //第三种方法
    let result=arr.map(item=>{
        (item as any).sex='男' //ts写法
        return item
    })
    console.log(arr,res,result);