JavaScript 踩坑记录

更新: 4/1/2025 字数: 0 字 时长: 0 分钟

扩展运算符相关的坑

ES6的扩展运算符...还挺好用的，它可以用在函数的参数上，也可以用在数组上去合并与复制数组，同样可以用在对象上。但是它的坑也有很多

对象扩展运算符返回属性限制

对象的扩展运算符，只会返回参数对象自身的、可枚举的属性。

class C {
  p = 12
  m() {}
}

let c = new C()
let clone = { ...c }

clone.p // ok
clone.m() // 报错

对象扩展运算符赋值覆盖问题

如果我们把扩展运算符放在我们自定义的属性后面，那么我们自定义的属性会被扩展运算符内部的同名属性覆盖掉。稍不注意就被坑了

let userInfo = {
    name: 'zhangsan',
    id: 1,
}

let res = {
    id: 2233
    ...userInfo, // 这里的id会被覆盖掉，
}

这也给我们一个教训：如果是想使用...运算符的展开作用，最好放在最前面，放在我们自定义属性的前面

扩展运算拷贝问题

展开运算符复制对象/数组时，值类型会被直接复制，而引用类型的地址会被拷贝出来，性质相当于浅拷贝

let obj = {
  a: 1,
  b: {
    c: 2,
  },
}

let obj1 = { ...obj }
obj.b.c = 3
obj1.b.c // 3