vue map操作数组里对象 不改变原数组

最近遇到一个问题map方法不会修改原数组,会得到一个新数组并返回。但原数组真的不会修改吗?
 let tableDate = [
      {
        enableAssigned: false,
        enableNotified: false,
        finishedAt: 1679414400000,
        startedAt: 1678809600000,
        username: "",
      },
      {
        enableAssigned: false,
        enableNotified: false,
        finishedAt: 1679414400000,
        startedAt: 1678809600000,
        username: "",
      },
    ];
    let arr = tableDate.map((item)=>{ 
    item.finishedAt = item.finishedAt/1000
    item.startedAt = item.startedAt/1000
      return item
    }
  )
    console.log(arr,"新数组");
    console.log(tableDate,"原数组");

在这里插入图片描述

一、在网上搜了一下,原来是上面的map方法不够“纯粹”,实际上还是直接修改了每个item的属性,如果不想影响原数组,应该这样写:

  let tableDate = [
      {
        enableAssigned: false,
        enableNotified: false,
        finishedAt: 1679414400000,
        startedAt: 1678809600000,
        username: "",
      },
      {
        enableAssigned: false,
        enableNotified: false,
        finishedAt: 1679414400000,
        startedAt: 1678809600000,
        username: "",
      },
    ];
    let arr = tableDate.map((item)=>{ 
  return {...item,startedAt:item.startedAt/1000,finishedAt:item.finishedAt/1000}}
  )
  // let arr = tableDate.map((item)=>({...item,startedAt:item.startedAt/1000,finishedAt:item.finishedAt/1000}))
    console.log(arr,"新数组");
    console.log(tableDate,"原数组");

二、我们对对象数组中的item值,通过扩展运算符…深拷贝给obj,不在原数组中直接操作item的值,而是操作obj中的值,这样原数组就不会改变了。

1.当数组的值为基本类型的时候,map遍历数组,不会改变原数组。
在这里插入图片描述

2.当数组是一个对象数组时,map遍历数组,原数组发生改变
在这里插入图片描述

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值