javascript - 扩展语法和手动分配属性之间的差异

Question

我在复制对象时遇到问题。当我手动复制所需的属性时，一切正常，但是当我尝试使用 Object.assign 方法或扩展运算符时，我会在应用程序的后续步骤中丢失一些数据。所以我的问题是:手动复制属性和使用扩展运算符/Object.assign 是否有任何真正的区别？

正如我提到的，我尝试了扩展运算符、Object.assign 方法和手动复制属性:

// works
const bar = {
    data: response.data,
    foo: response.foo
}

//doesn't work
const bar = { ...response}

//doesn't work too
const bar = Object.assign({}, response)

Answer 1

当您使用展开语法或Object.assign时，仅复制对象的自己的可枚举属性。

请参阅 MDN。 On spread syntax :

It copies own enumerable properties from a provided object onto a new object.

On Object.assign :

The Object.assign() method is used to copy the values of all enumerable own properties from one or more source objects to a target object.

相反，当您只是简单地引用一个属性时，例如 response.data ，即使属性值不可枚举，或者位于原型(prototype)继承链中，也会检索该属性值。

const proto = { prop: 'onPrototype' };
const obj = Object.create(proto);
Object.defineProperty(obj, 'prop2', { value: 'notEnumerable', enumerable: false });

const copiedSpread = { ...obj };
const copiedObjectAssign = Object.assign({}, obj);

console.log(
  copiedSpread, // nothing
  copiedObjectAssign, // nothing
  obj.prop, // works
  obj.prop2 // works
);

所以，data和foo属性必须是不可枚举的，或者位于 response 的内部原型(prototype)上(但不适用于 response 本身)。

要迭代对象及其所有内部原型(prototype)上的所有属性(无论是否可枚举)，请使用 Object.getOwnPropertyNames :

const proto = { prop: 'onPrototype' };
const obj = Object.create(proto);
Object.defineProperty(obj, 'prop2', { value: 'notEnumerable', enumerable: false });


let checkingObj = obj;
while (checkingObj) {
  Object.getOwnPropertyNames(checkingObj).forEach((propName) => {
    console.log(propName);
  });
  checkingObj = Object.getPrototypeOf(checkingObj);
}