js中的map到底会不会改变原数组？

不会改变原数组

分析如下：

这就要扯到js的数据类型上了. js数据类型分为两种 基本类型: number/ string/ boolean/ undefined/ null/ symbol 和 引用类型 object 包括 array/function/ date等. 基本数据类型是按照值传递的, 引用类型则是按照引用传值的.

基本数据类型&引用数据类型

1. 基本数据类型

看例子

let a = 'tom'
let b = a;
b = 'tony'
console.log(b);  // 'tony'
console.log(a);  // 'tom'

例子中b变量获取到的是 a 变量的值的拷贝. 虽然两个值相等, 但是属于独立的两个基本类型的值, 此时修改任何一个对另外一个都没有影响. 基本数据类型是按值访问的，因为可以直接操作保存在变量中的实际值。基本数据类型都是保存在栈内存。

2. 引用数据类型

看例子

let person = {
  name: 'tony',
  age: 18
}
let person2 = person;
person2.name = 'tom'
console.log(person.name);  // 'tom'

本例中, 这两个引用数据类型指向了同一个堆内存对象。 person 赋值给 person2, 实际上这个堆内存对象在栈内存的引用地址复制给了 person2. 实际上它们共同指向同一块内存对象(即是一块内存地址), 所以引用类型 修改的是内存对象中的值, 就会影响所有指向这块内存地址引用的数据值( 因为它们就是一个).

总结两种类型的区别

1. 声明变量时不同的内存分配

   • 基本数据类型: 存储在栈(stack)中的简单数据段. 也就是说, 它们的值直接储存在变量访问的位置. 这是因为这些原始类型占据的空间是固定的, 所以可以将它们存储在较小的内存区域 - 栈中. 这样存储便于迅速查找变量的值.
   • 引用数据类型: 存储在堆(heap)中的复杂数据对象. 也就是说储存在变量出的值是一个指向堆内存的一个引用地址(有人称为指针). 这是因为: 引用值的大小会改变, 所以不能把它放到栈中, 否则会降低变量查寻的速度. 相反，放在变量的栈空间中的值是该对象存储在堆中的地址。地址的大小是固定的，所以把它存储在栈中对变量性能无任何负面影响。

2. 不同的内存分配机制也带来了不同的访问机制

   • 在javascript中是不允许直接访问保存在堆内存中的对象的，所以在访问一个对象时，首先得到的是这个对象在堆内存中的地址，然后再按照这个地址去获得这个对象中的值，这就是传说中的按引用访问
   • 而原始类型的值则是可以直接访问到的

3. 复制变量时的不同

   • 原始值：在将一个保存着原始值的变量复制给另一个变量时，会将原始值的副本赋值给新变量，此后这两个变量是完全独立的，他们只是拥有相同的value而已
   • 引用值：在将一个保存着对象内存地址的变量复制给另一个变量时，会把这个内存地址赋值给新变量，也就是说这两个变量都指向了堆内存中的同一个对象，他们中任何一个作出的改变都会反映在另一个身上。（这里要理解的一点就是，复制对象时并不会在堆内存中新生成一个一模一样的对象，只是多了一个保存指向这个对象指针的变量罢了）。多了一个指针

4. 参数传递的不同（把实参复制给形参的过程）

   首先我们应该明确一点：ECMAScript中所有函数的参数都是按值来传递的。但是为什么涉及到原始类型与引用类型的值时仍然有区别呢？还不就是因为内存分配时的差别

   • 原始值：只是把变量里的值传递给参数，之后参数和这个变量互不影响
   • 引用值：对象变量它里面的值是这个对象在堆内存中的内存地址，这一点你要时刻铭记在心！因此它传递的值也就是这个内存地址，这也就是为什么函数内部对这个参数的修改会体现在外部的原因了，因为它们都指向同一个对象

如何防止map后的数组修改原数组

map是不会改变原数组的( 在不违背map的使用原则的情况下). 对于数组中的值是基本数据类型的情况 是完全不会修改原数组的. 但是在 数据中的值是引用类型的情况下,如果使用不恰当会改变原数组.

数组中的项是引用类型如何正确使用map方法

let items = [
  {name: 'tom'},
  {name: 'tony'}
]
// good: 这样原数组不会影响
let result = items.map(item=> {
  return {
    ...item,
    gender: 'male'
  }
})
// bad: 这用会修改原数组
let result2 = items.map(item=> item.gender: 'male')  // 我之前总是这样用

这样做原始数组就不会改变