在 JavaScript 中将属性添加到对象的开头

将属性添加到 Javascript 对象的开头

使用扩展语法 (…) 将属性添加到对象的开头，例如obj = {one: 1, ...obj};.

spread 语法将在添加的属性之后解包对象的键值对。

索引.js


let obj = {two: 2, three: 3};

obj = {one: 1, ...obj};

console.log(obj); // 👉️ {one: 1, two: 2, three: 3}

我们使用
扩展语法 (…)将一个对象的键值对解包为一个新对象。

索引.js


let obj = {two: 2, three: 3};

const newObj = {...obj};

console.log(newObj); // 👉️ {two: 2, three: 3}

代码示例使用扩展语法 (…) 创建对象的浅表副本。

我们需要在对象的开头添加一个属性，所以我们在属性后面解包现有的键值对。

索引.js


let obj = {two: 2, three: 3};
obj = {one: 1, ...obj};

// 👇️ { one: 1, two: 2, three: 3 }
console.log(obj);

我们在对象的开头添加了该属性，因此如果在现有对象中设置该属性，它将被覆盖。

索引.js


let obj = {one: 1000, two: 2, three: 3};
obj = {one: 1, ...obj};

// 👇️ { one: 1000, two: 2, three: 3 }
console.log(obj);

该one属性已存在于对象上，因此即使我们将属性添加到对象的开头，指定属性的最后一个值仍将获胜。

另一种方法是使用
Object.assign
方法。

该Object.assign()方法将一个或多个对象的属性复制到目标对象并返回结果。

索引.js


let obj = {two: 2, three: 3};
obj = Object.assign({one: 1}, obj);

console.log(obj); // 👉️ {one: 1, two: 2, three: 3}

Object.assign
方法将
所有属性从一个source对象复制到另一个target对象。

索引.js


const obj = Object.assign({a: 1}, {b: 2}, {c: 3});
console.log(obj); // 👉️ { a: 1, b: 2, c: 3 }

该Object.assign()方法有两个参数：

该方法返回应用了提供的属性的目标对象。

第二个和第三个对象的键值对被复制到第一个对象中。

这使您能够将一个或多个属性添加到对象的开头。

迭代对象时会遵守顺序，就像展开语法一样。

索引.js


let obj = {two: 2, three: 3};
obj = Object.assign({one: 1}, obj);

for (const key in obj) {
  console.log(key); // 👉️ one, two, three
}

您选择哪种方法是个人喜好的问题。我会使用扩展语法 (…)，因为我发现它更具可读性和直观性。

您可以通过查看以下教程来了解有关相关主题的更多信息：