JavaScript 中创建对象的不同方法总结

2025-06-07

在 JavaScript 中创建对象的不同方法

结论

JavaScript 中除了原始类型之外，还有一种变量类型，那就是对象。JavaScript 借助原型继承实现了面向对象。因此，对象成为了 JavaScript 的关键结构。

通过了解一些在 Javascript 中创建对象的便捷方法，您可以在应用程序开发工作流程中节省一些时间。/祝贺您度过快乐而富有成效的一天/。

在 JS 中创建对象的所有方法或策略都有其特定的用途。当然，你可以在任何你想要的地方使用它们。但请记住，它可能无法达到提高代码可读性或降低复杂性的目的。

请谨慎使用这些方法，因为：

编写代码时，一定要假设最终维护你代码的人是一个知道你住在哪里的暴力精神病患者。

目录：

（注：目录中的链接将带您到原始文章）

使用对象表示法

在 JavaScript 中创建对象的最简单方法是使用对象表示法。

将键和值对括在花括号中，即{ }

const person = {
  name: 'Full Name',
  email: 'full.name@domain.com',
};

const employee = {
  id: 123456,
    person: person,
}
Enter fullscreen mode Exit fullscreen mode

对象分配

另一种创建对象的方法是使用 Object.assign。它还允许你创建 不可变的任何对象的全新副本。

const person = Object.assign({
  name: 'Full Name',
  email: 'full.name@domain.com',
});

const newPersonDetails = Object.assign({}, person, {
  email: 'new.email@domain.com'
});
Enter fullscreen mode Exit fullscreen mode

您还可以使用 更改对象值Object.assign。如以下示例所示，我们将person使用 更改对象的电子邮件Object.assign

const person = Object.assign({
  name: 'Full Name',
  email: 'full.name@domain.com',
});

Object.assign(person, {
  email: 'new.email@domain.com'
});
Enter fullscreen mode Exit fullscreen mode

使用对象扩展运算符

您可以使用对象扩展运算符将任何对象的值扩展到另一个对象中。

因此，如果目标对象使用对象符号，它将创建一个新的对象。让我们看下面的例子：

const person = {
  name: 'Full Name',
  email: 'full.name@domain.com',
};

const personWithAddress = {
  ...person,
  address: 'Somewhere on the Earth'
};
Enter fullscreen mode Exit fullscreen mode

JS 变量的对象表示法

使用 ES6+，如果两者的名称相同，则无需编写键，然后编写 JS 变量。

例如，如果你想将名为 的键添加website到 person 对象，并且你已经有一个名为 的变量website。你不需要写两次同样的东西。

例如，如果你想将名为 key 的键添加website到person对象中。你可以使用名为的变量website，这样你就不需要在对象中重复写它们了。website: website,

const person = {
  name: 'Full Name',
  email: 'full.name@domain.com',
};

const website = 'https://time2hack.com';

const personWithWebsite = {
  ...person,
  website
};
Enter fullscreen mode Exit fullscreen mode

将变量的值作为键

有时你想在现有对象上创建一个键，但不知道键的名称；它是动态的。在这种情况下，有两种方法可以创建具有动态键的对象：

像数组一样访问对象的键并分配新值

众所周知，访问对象中的值的方式与使用索引访问数组值的方式相同。您也可以使用相同的方式在对象中创建这些键。

const person = {
  name: 'Full Name',
  email: 'full.name@domain.com',
};

console.log( person.name ) // Full Name
console.log( person['name'] ) // Full Name

const fullNameKey = 'name';

console.log( person[fullNameKey] ) // Full Name

const newKey = 'phone';
const phoneNum = '00123456789';

person[newKey] = phoneNum;

console.log(person);
// 👆→ { name: ..., email: ..., phone: '00123456789' }
Enter fullscreen mode Exit fullscreen mode

对象表示法和 Object.assign 中的数组索引访问

const person = {
  name: 'Full Name',
  email: 'full.name@domain.com',
};
const newKey = 'phone';
const phoneNum = '00123456789';

Object.assign(person, {
  [newKey]: phoneNum,
});

console.log(person);
// 👆→ { name: ..., email: ..., phone: '00123456789' }
Enter fullscreen mode Exit fullscreen mode

使用 Object.create

这是一种非常有趣的创建新对象的方式。通过这种方式，你可以通过引用另一个对象或原型来创建新对象。

这意味着新对象将在其原型中保留示例对象的引用。原型值的访问方式与访问其他值的方式相同。

还有一点需要注意的是，你可以覆盖原型中现有的任何值。但是新对象将拥有自己的值，而无需更改原型。

const person = {
  name: 'Full Name',
  email: 'full.name@domain.com',
};

const pankaj = Object.create(person);

console.log(pankaj); // 👈 → {}
console.log(pankaj.name); // 👈 → 'Full Name'

person.name = 'Fullest Name';

console.log(pankaj.name); // 👈 → 'Fullest Name'

console.log(pankaj.__proto__);
// 👆→ { name: 'Fullest Name', email: 'full.name@domain.com', phone: '00123456789' }

pankaj.name = 'Pankaj';
console.log(pankaj); // 👈 → { name: 'Pankaj' }
console.log(pankaj.name); // 👈 → 'Pankaj'
console.log(pankaj.__proto__.name); //👈 → 'Fullest Name'
Enter fullscreen mode Exit fullscreen mode

如果您想在创建新对象时向对象添加一些新属性，该怎么办？此示例向我们展示了：

const person = {
  name: 'Full Name',
  email: 'full.name@domain.com',
};

const pankaj = Object.create(person, {
  website: { value: 'https://pankaj.pro/' }
});
Enter fullscreen mode Exit fullscreen mode

最终对象将如下所示：

使用构造函数，即使用new关键字

现在您更有可能定义一个类，然后使用 new 关键字从该类创建一个对象。

很长一段时间以来，JavaScript 都没有类的概念，但它仍然是面向对象（OO）的。它通过原型继承实现了 OO。

构造函数是构造自定义对象的主要方法。

const Person = function(name, email) {
    this.name = name;
    this.email = email;
  return this;
};

const person = new Person('Full Name', 'full.name@domain.com');
Enter fullscreen mode Exit fullscreen mode

后来在 ES6 中，JavaScript 获得了 Class 相关关键字的支持。这降低了现代 JavaScript 的复杂性和学习曲线。

new现在你更有可能定义一个类，然后使用关键字从该类创建一个对象

class Person {
  constructor(name, email) {
      this.name = name;
      this.email = email;
  }
}

const person = new Person('Full Name', 'full.name@domain.com');
Enter fullscreen mode Exit fullscreen mode

结论

正如您所看到的，在 JavaScript 中创建对象的基本方法中，每种方法都有其用例。

那么“你通常使用什么方式来创建对象？”

请通过评论💬或在 Twitter 上关注@patel_pankaj_和@time2hack让我知道

如果您觉得这篇文章有帮助，请与其他人分享🗣

订阅Time to Hack即可直接在收件箱中收到新帖子。

最初于 2020 年 1 月 31 日发布于https://time2hack.com 。

文章来源：https://dev.to/time2hack/ Different-ways-to-create-objects-in-javascript-2192
Devto 翻译
PREV
探索 F# 前端领域
NEXT
使用 Node 创建真实世界的 CLI 应用程序