js中map()是否改变原数组

根据官方文档的描述

map定义和方法
map()方法返回一个新数组,数组中的元素为原始数组元素调用函数处理的后值。
map()方法按照原始数组元素顺序依次处理元素。
注意:
map不会对空数组进行检测
map不会改变原始数组
arr.map(function(currentValue,index,arr),thisValue)

但是在实际应用中发现在便利后还是会改变原数组,经查找资料发现
只有当arr为基本数据类型时,map方法才不会改变原始数组,arr为引用类型时,还是会改变原数组的:

// 1、基本数据类型
  let arr=[1,2,3,4,5]
  let newArr=arr.map((item) => item*2)
  console.log(arr); // [1,2,3,4,5]
  console.log(newArr);//[2, 4, 6, 8, 10]

// 2、引用数据类型
  let arr = [{ key1: '111' }, { key1: '222' }]
  let newArr=arr.map((item) => {
    item.key2='ceshi';
    return item;
  })
  console.log(arr); 
  // [{key1: "111", key2: "ceshi"},{key1: "222", key2: "ceshi"}]
  console.log(newArr);
  // [{key1: "111", key2: "ceshi"},{key1: "222", key2: "ceshi"}]

如何避免这种问题呢?
通过一个新的对象去接收每一个元素,修改后,返回该对象

  let arr = [{ key1: '111' }, { key1: '222' }]
  let newArr=arr.map((item) => {
	let obj={...item,key2:'xinzeng'}
	return obj;
  })
  console.log(arr);//原数组不变化
  // [{ key1: '111' }, { key1: '222' }]
  console.log(newArr); //返回的新数组发生变化
  // [{ key1: '111' ,key2: "xinzeng"}, { key1: '222' ,key2: "xinzeng"}]
posted @ 2022-01-13 14:07  seekHelp  阅读(1751)  评论(0编辑  收藏  举报