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"}]


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM