如何给数组对象中每一项都新增某属性

倪成.

于 2023-03-09 15:10:59 发布

阅读量2.9k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_46193186/article/details/129360211

前端专栏收录该内容

7 篇文章

订阅专栏

文章介绍了在JavaScript中使用map和forEach方法处理数组的不同方式。map方法用于创建新数组，不改变原数据，而forEach则直接修改原数组，无返回值。示例中展示了如何添加新属性并应用颜色数组到对象列表。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

方法一：map（）

map()方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。

注意：为了不影响原对象数据，所以对属性进行拷贝（...item）

const dataList = [
    {
      name:'小芳',
      age: 18
    },
    {
      name:'小花',
      age: 19
    }
  ]
 const cList = ['#FFA822', '#C215F9'];
  const newList = dataList.map((item,index)=>{
    return {
      ...item,
      sex:'女',
      itemStyle: {
        color: cList[index],
      },
    }
  })
  console.log(newList,'newList',dataList);

方法二： foreach() 方法：

foreach()方法用于调用数组的每个元素，并将元素传递给回调函数。

注意：该方法会直接改变原数组，无返回值

const dataList = [
    {
      name:'小芳',
      age: 18
    },
    {
      name:'小花',
      age: 19
    }
  ]
  const cList = ['#FFA822', '#C215F9'];
  const newList = dataList?.forEach((item, index) => {
    item.sex = '女'
    item.itemStyle = {
      color: cList[index]
    }
  })
  console.log(newList, 'newList', dataList);