还在以为map不会改变原数组?forEach可以改变原数组?

508 阅读2分钟

值类型(基本类型):字符串(string)、数值(number)、布尔值(boolean)、undefined、null 。(ECMAScript 2016新增了一种基本数据类型:symbol)

引用类型:对象(Object)、数组(Array)、函数(Function)

值类型:map和forEach都不会改变原数组(直接赋值也不会改变)

   const array = [1, 2, 3]; //值类型 
   
   array.map((v) => v + 1); //array  [1, 2, 3]
   array.forEach((v) => v + 1); //array  [1, 2, 3]
    
   //直接赋值
   array.map((v) => {
     v = v + 1;
   });        //array  [1, 2, 3]
   
   array.forEach((v) => {
     v = v + 1;
   });        //array  [1, 2, 3]

引用类型: map和forEach都不会改变原数组(直接赋值都会改变)

 const array = [{ value: 1 }, { value: 2 }, { value: 3 }]; //引用类型
 
  array.map((v) => {
     v.value+1;
  });    //array [{ value: 1 }, { value: 2 }, { value: 3 }]
  
  array.forEach((v, i, arr) => {
     v.value+1;
  });    //array [{ value: 1 }, { value: 2 }, { value: 3 }]

//直接赋值
  array.map((v) => {
      v.value = v.value + 1;
  });    //array [{ value: 2 }, { value: 3 }, { value: 4 }]
  
  array.forEach((v) => {
      v.value = v.value + 1;
  });    //array [{ value: 2 }, { value: 3 }, { value: 4 }]

既然知道了map和forEach只有在遍历引用类型使用直接赋值的方式时都会改变原数组,其他情况都不会改变原数组,现在来看看map和forEachd的区别:

map会返回新数组,forEach则返回undefined
const array = [{ value: 1 }, { value: 2 }, { value: 3 }]; //值类型

    const newArray = array.map((v) => {
      return v.value;
    }); //newArray [1, 2, 3]
    
    const newArray = array.forEach((v) => {
      return v.value;
    }); //newArray undefined

总结:

1)map会返回新数组,forEach则返回undefined;
(2)值类型:map和forEach都不会改变原数组;
(3)引用类型:map和forEach使用赋值写法都会改变原数组,否则都不会

注:
(1)map是映射,forEach是遍历。想要拿到值就用map,只是遍历操作就用forEach。
(2)基本类型的访问是按值访问的,任何方法都无法改变一个基本类型的值。(基本类型的值是不可变得)
(3)引用类型的赋值其实是对象保存在栈区地址指针的赋值,因此两个变量指向同一个对象,任何的操作都会相互影响。(引用类型的值是可变得)