Question

有人可以帮助我理解当值等于它时有人进行迭代的原因吗？

例如

let subStyle = {
      width: 300,
      height: 50,
      borderRadius: 20,
      backgroundColor:  theme.primaryBlue
    };

subStyle = {
        ...subStyle,
        backgroundColor: theme.primaryWhite,
        borderWidth: 2,
        borderColor: '#707070'
      }

也就是说，在上面的代码中，这样做的原因可能是什么？

subStyle = {
        ...subStyle,
        backgroundColor: theme.primaryWhite,
        borderWidth: 2,
        borderColor: '#707070'
      }

Answer 1

他们正在将对象subStyle所引用的属性复制到一个新对象中（然后覆盖其中一个并添加另外两个），然后将该新对象分配给subStyle变量。当您不允许修改原始对象时，这是很标准的做法，因为可能有其他用途（例如，React状态）。

一个简单的例子：

let o1 = {a: "ay", b: "bee"};
let o2 = o1; // Something else is using the same object

// We need to create a new, updated object without
// affecting others who have access to the current one
o1 = {...o1, b: "BEE", c: "see"};

// The original is unchanged
console.log(o2);

// The new one has the updates
console.log(o1);

对象初始化程序中的...someObject被称为属性传播。它已在ES2018中添加到JavaScript。

我应该注意，它不是JavaScript术语的迭代（尽管当然是相似的），并且它不需要对象是可迭代的。（相反，数组初始化器中的...是迭代，而是要求您使用的迭代器是可迭代的。）

Answer 2

因为假设您要以不变的方式更新该对象。可变的方法是：

let x = {a:1, b:2};
x.a=123;

不可变的方法是，使用...运算符（以浅方式）创建新对象，旧对象的copy属性，并分配新属性（或覆盖现有属性）：

let x = {a:1, b:2};
let y = {...x, a:123} // We created a new object and copied properties from x to it, also update value of a

通过这种方式，您可以获得与第一个示例中内容相同的对象，但是您没有修改x。

Answer 3

本质上用于在对象中保持相同的值。当您执行subStyle = { ... }时，您将覆盖该对象。

如果您进行subStyle = { ...subStyle }，则将复制您以前在subStyle中拥有的所有内容，其余的将一起添加

一个示例：

let myObject = {
  a: 'a',
  b: 'b'
}

console.log('My object: ', myObject)

myObject = { ...myObject }

console.log('Copying my object with spread operator: ', myObject)

myObject = { 
  ...myObject,
  c: 'c',
  d: 'd'
}

console.log('Adding new elements to my copied object with spread operator: ', myObject)

Answer 4

那叫Destructuring_assignment。它允许将对象解压缩为一堆变量。

让subStyle1为新变量。 ...将允许将属性从subStyle复制到subStyle1

let subStyle = {
  width: 300,
  height: 50,
  borderRadius: 20,
  backgroundColor: 'theme.primaryBlue'
};

let subStyle1 = {
  ...subStyle,
  backgroundColor: 'theme.primaryWhite',
  borderWidth: 2,
  borderColor: '#707070'

};

console.log(subStyle1)

迭代并存储等于自身的对象

4 个答案: