数组map的深浅拷贝问题

数组map的深浅拷贝问题

// 基本数据类型
let a = [ 1, 2 , 3 ]

let res = a.map(item => {
   return item * 2
  }
)

[2, 4, 6]  // res

res[0] = 10

[10, 4, 6] // 修改后的res

[1, 2, 3]  // 原数组a并未受影响

// 引用数据类型

type CommonObj = {
  name: string,
  age: number,
  sex: string
}


let aaa: CommonObj[] = [
  {
    name: '牛哼',
    age: 23,
    sex: '男'
  },
  {
    name: '大脚',
    age: 22,
    sex: '女'
  },
  {
    name: '翠花',
    age: 18,
    sex: '女'
  },
  {
    name: '神魔恋',
    age: 25,
    sex: '男'
  },
]

let result = aaa.map((item: CommonObj, index: number): CommonObj => {
  if (item.name === '牛哼') {
    item.name = '牛恒'
  }
  if (item.age === 18) {
    item.age = 17
  }
  if (item.sex === '男') {
    item.sex = '女'
  }
  return item
})


// console.log('result', result);
// console.log('aaa', aaa);

// 两厢打印一致
    //result [
    //  { name: '牛恒', age: 23, sex: '女' },
    //  { name: '大脚', age: 22, sex: '女' },
    //  { name: '翠花', age: 17, sex: '女' },
    //  { name: '神魔恋', age: 25, sex: '女' }
    //]
    //aaa [
    //  { name: '牛恒', age: 23, sex: '女' },
    //  { name: '大脚', age: 22, sex: '女' },
    //  { name: '翠花', age: 17, sex: '女' },
    //  { name: '神魔恋', age: 25, sex: '女' }
    //]

// aaa[0].name = 'niubiheng'
// console.log('arr', aaa);
// console.log('改变', result);

  //  arr第零项改变，result也被改变
    // arr [
    //   { name: 'niubiheng', age: 23, sex: '女' },
    //   { name: '大脚', age: 22, sex: '女' },
    //   { name: '翠花', age: 17, sex: '女' },
    //   { name: '神魔恋', age: 25, sex: '女' }
    // ]
    // 改变 [
    //   { name: 'niubiheng', age: 23, sex: '女' },
    //   { name: '大脚', age: 22, sex: '女' },
    //   { name: '翠花', age: 17, sex: '女' },
    //   { name: '神魔恋', age: 25, sex: '女' }
    // ]

// console.log(aaa[0] === result[0]);  // true

其他

map和filter最大的区别就是

Map可以把每一项元素拦截，再做一些操作，改变每一个item中的属性值。

filter 也会把每个item过一遍，但它必须根据item的某些条件，决定是否保留这个item。