如何在JavaScript中使用对象的方法

介绍

创新互联主要从事网站设计制作、成都做网站、网页设计、企业做网站、公司建网站等业务。立足成都服务余姚,十年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:18982081108

JavaScript 中，对象是键/值对的集合。值可以包含属性和方法，并且可以包含所有其他 JavaScript 数据类型，例如字符串，数字和布尔值。

JavaScript中的所有对象都来自父 Object 的构造函数。Object 为我们提供了很多实用的内置方法，并且可以在单个对象中直接使用。不同于数组的原型方法例如 sort() 和 reverse() 只能被数组实例使用，对象方法直接来自 Object 构造函数，并使用对象实例作为参数。这称为静态方法。

本教程将介绍重要的内置对象方法，下面的每个部分都涉及特定方法并提供使用示例。

前提

为了充分利用本教程，您应该熟悉创建，修改和使用对象，您可以在“ 了解JavaScript中的对象 ”一文中查看这些对象。

有关JavaScript的其他指导，您可以查看“ JavaScript 如何编码 ”系列。

Object.create()

Object.create() 方法用于创建一个新对象，并将其链接到现有的对象原型。

我们可以创建一个job对象实例，并将其扩展为更具体的对象。

 
 
   
  
  // Initialize an object with properties and methods    
  
  const job = {    
  
  position: 'cashier',    
  
  type: 'hourly',    
  
  isAvailable: true,    
  
  showDetails() {    
  
  const accepting = this.isAvailable ? 'is accepting applications' : "is not currently accepting applications";    
  
  console.log(`The ${this.position} position is ${this.type} and ${accepting}.`);    
  
  }    
  
  };    
  
  // Use Object.create to pass properties    
  
  const barista = Object.create(job);    
  
  barista.position = "barista";    
  
  barista.showDetails();

 
 
   
  
  Output    
  
  The barista position is hourly and is accepting applications.

barista 对象现在有一个 position 属性 - 但是所有其他属性和方法都可以通过 job 的原型获得。通过Object.create()来实现最小化重复，对于保持代码DRY十分有效。

Object.keys()

Object.keys() 会创建一个包含对象键的数组。

我们可以创建一个对象并打印键的数组。

 
 
   
  
  // Initialize an object    
  
  const employees = {    
  
  boss: 'Michael',    
  
  secretary: 'Pam',    
  
  sales: 'Jim',    
  
  accountant: 'Oscar'    
  
  };    
  
  // Get the keys of the object    
  
  const keys = Object.keys(employees);    
  
  console.log(keys);

 
 
   
  
  Output    
  
  ["boss", "secretary", "sales", "accountant"]

Object.keys() 还可用于迭代对象的键和值。

 
 
   
  
  // Iterate through the keys    
  
  Object.keys(employees).forEach(key => {    
  
  let value = employees[key];    
  
  console.log(`${key}: ${value}`);    
  
  });

 
 
   
  
  Output    
  
  boss: Michael    
  
  secretary: Pam    
  
  sales: Jim    
  
  accountant: Oscar

for-in 循环和Object.keys()返回的可枚举属性有一个区别：

for-in 循环同时也会遍历原型属性

Object.keys() 只会返回自有(实例)属性

Object.keys() 对于检查对象的长度也很有用。

 
 
   
  
  // Get the length of the keys    
  
  const length = Object.keys(employees).length;    
  
  console.log(length);

使用该 length 属性，我们能够计算employees包含4个自有属性。

Object.values()

Object.values() 创建一个包含对象值的数组。

 
 
   
  
  // Initialize an object    
  
  const session = {    
  
  id: 1,    
  
  time: `26-July-2018`,    
  
  device: 'mobile',    
  
  browser: 'Chrome'    
  
  };    
  
  // Get all values of the object    
  
  const values = Object.values(session);    
  
  console.log(values);

 
 
   
  
  Output    
  
  [1, "26-July-2018", "mobile", "Chrome"]

Object.keys()和Object.values()允许您从对象返回数据。

Object.entries()

Object.entries() 创建对象的键/值对的嵌套数组。

 
 
   
  
  // Initialize an object    
  
  const operatingSystem = {    
  
  name: 'Ubuntu',    
  
  version: 18.04,    
  
  license: 'Open Source'    
  
  };    
  
  // Get the object key/value pairs    
  
  const entries = Object.entries(operatingSystem);    
  
  console.log(entries);

 
 
   
  
  Output    
  
  [    
  
  ["name", "Ubuntu"]    
  
  ["version", 18.04]    
  
  ["license", "Open Source"]    
  
  ]

一旦我们有了键/值对数组，我们就可以使用该forEach()方法循环并处理结果。

 
 
   
  
  // Loop through the results    
  
  entries.forEach(entry => {    
  
  const [key, value] = entry;    
  
  console.log(`${key}: ${value}`);    
  
  });

 
 
   
  
  Output    
  
  name: Ubuntu    
  
  version: 18.04    
  
  license: Open Source

Object.entries() 方法仅返回对象实例自己的属性，而不返回可通过其原型继承的任何属性。

Object.assign()

Object.assign() 用于把一个对象的值复制到另一个对象。

我们可以创建两个对象，使用Object.assign()方法将它们合并。

 
 
   
  
  // Initialize an object    
  
  const name = {    
  
  firstName: 'Philip',    
  
  lastName: 'Fry'    
  
  };    
  
  // Initialize another object    
  
  const details = {    
  
  job: 'Delivery Boy',    
  
  employer: 'Planet Express'    
  
  };    
  
  // Merge the objects    
  
  const character = Object.assign(name, details);    
  
  console.log(character);

 
 
   
  
  Output    
  
  {firstName: "Philip", lastName: "Fry", job: "Delivery Boy", employer: "Planet Express"}

也可以使用展开语法(Spread syntax)来完成相同的任务。在下面的代码中，我们将通过展开语法合并name和details对象，来声明character对象。

 
 
   
  
  // Initialize an object    
  
  const name = {    
  
  firstName: 'Philip',    
  
  lastName: 'Fry'    
  
  };    
  
  // Initialize another object    
  
  const details = {    
  
  job: 'Delivery Boy',    
  
  employer: 'Planet Express'    
  
  };    
  
  // Merge the object with the spread operator    
  
  const character = {...name, ...details}    
  
  console.log(character);

 
 
   
  
  Output    
  
  {firstName: "Philip", lastName: "Fry", job: "Delivery Boy", employer: "Planet Express"}

展开语法(Spread syntax) 在对象语法中也成为浅层克隆(shallow-cloning)。

Object.freeze()

Object.freeze() 防止修改对象的属性和值，并防止在对象中添加或删除属性。

 
 
   
  
  // Initialize an object    
  
  const user = {    
  
  username: 'AzureDiamond',    
  
  password: 'hunter2'    
  
  };    
  
  // Freeze the object    
  
  const newUser = Object.freeze(user);    
  
  newUser.password = '*******';    
  
  newUser.active = true;    
  
  console.log(newUser);

 
 
   
  
  Output    
  
  {username: "AzureDiamond", password: "hunter2"}

在上面的例子中，我们试图重写密码用*******覆盖hunter2，但password的值能保持不变。我们还尝试添加一个新属性active，但没有添加。

Object.isFrozen() 可用于确定对象是否已冻结，并返回布尔值。

Object.seal()

Object.seal()阻止将新属性添加到对象，但允许修改现有属性。这种方法类似于Object.freeze()。在实现下面的代码之前刷新控制台以避免错误。

 
 
   
  
  // Initialize an object    
  
  const user = {    
  
  username: 'AzureDiamond',    
  
  password: 'hunter2'    
  
  };    
  
  // Seal the object    
  
  const newUser = Object.seal(user);    
  
  newUser.password = '*******';    
  
  newUser.active = true;    
  
  console.log(newUser);

 
 
   
  
  Output    
  
  {username: "AzureDiamond", password: "*******"}

新active属性未添加到密封对象，但password属性已成功更改。

Object.isSealed() 可用于确定对象是否已封闭，并返回布尔值。

Object.getPrototypeOf()

Object.getPrototypeOf()用于获取[[Prototype]]对象的内部隐藏，也可通过 __proto__ 属性访问。

在这个例子中，我们可以创建一个可以访问Array原型的数组。

 
 
   
  
  const employees = ['Ron', 'April', 'Andy', 'Leslie'];    
  
  Object.getPrototypeOf(employees);

 
 
   
  
  Output    
  
  [constructor: ƒ, concat: ƒ, find: ƒ, findIndex: ƒ, pop: ƒ, …]

我们可以在该原型输出中看到employees数组访问pop，find以及其他数组原型方法。我们可以通过测试employees原型来证实这一点Array.prototype。

 
 
   
  
  Object.getPrototypeOf(employees) === Array.prototype;

 
 
   
  
  Output    
  
  true

此方法可用于获取有关对象的更多信息或确保它可以访问另一个对象的原型。

还有一种相关Object.setPrototypeOf()方法将一个原型添加到另一个对象。建议您使用Object.create()，因为它更快，性能更高。

结论

对象有许多有用的方法可以帮助我们修改，保护和迭代它们。在本教程中，我们回顾了如何创建和分配新对象，迭代对象的键和/或值，以及冻结或密封对象。

如果您需要查看JavaScript对象，可以阅读“了解 JavaScript中的对象” 。如果您想熟悉原型链，可以查看“ 了解JavaScript中的原型和继承”。

网站名称：如何在JavaScript中使用对象的方法
网页链接：http://www.shufengxianlan.com/qtweb/news10/483060.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容