浅谈JS中对象的使用

Javascript是一门面向对象的语言，因此对象是其核心之一。对象是JS编程中的重要特性之一，也是数据在JS中的主要形式。本篇文章将介绍JS中对象的基础概念、使用方法及常用技巧。

什么是对象

在JavaScript中，对象是一个值（value），这个值可以被当作一个容器，存储一组属性/方法（properties/methods）。每个对象都有自己的属性和方法，其中属性就是对象的状态数据（可以是数字、布尔值、字符串等基础类型），方法则表示对象可以执行的操作或函数。

对象的创建

有多种方式可以创建JS对象，常见的有：

字面量形式

JS对象可以通过一组大括号{}创建，其中每个键值对就是一个对象属性：

const obj = {...} // 这里是对象字面量形式创建

构造函数

JS中内置了很多构造函数，比如 Object(), Date(), Array() 等。利用 new 这个关键字可以将这些构造函数用来创建新的实例对象：

const obj = new Object()
obj.key = 'value'

Object.create()

Object.create() 是 ES5 引入的方法，它能够创建一个新的对象，让新对象继承自另一个对象。比如：

const person = {
  name: 'Tom',
  age: 18,
  sayHi() {
    console.log('Hi, I am ' + this.name)
  }
}

const newPerson = Object.create(person)
newPerson.name = 'Jerry'
newPerson.sayHi() // Hi, I am Jerry

对象属性的访问

JS对象的属性有点像一个数组，可以通过方括号和点语法来访问。方括号语法可以用于访问属性名中包含空格的属性，而点语法则更简洁易懂。

const obj = { key: 'value' }
obj.key // "value"
obj['key'] // "value"

在访问不存在的属性时，会返回undefined。不过需要注意的是，如果一不小心对未定义的属性赋值，那么这个属性就会被创建并赋值，这会影响对象自身的属性列表和一些场景的正确性。

对象的遍历

JavaScript提供了多个循环的方法，其中面向范式的 for...in 语句可以用来遍历对象的所有非 Symbol 属性（因此尽量不要使用内置类型提供的属性名，比如继承自Object.prototype的成员）。

for (key in obj) {
  console.log(key + ': ' + obj[key])
}

示例

示例一：创建一个人的对象，并打印其姓名、年龄、性别

const person = {
  name: 'Jack',
  age: 20,
  gender: 'male',
}

console.log(person.name) // Jack
console.log(person.age) // 20
console.log(person.gender) // male

示例二：创建一个矩形的对象，并计算它的面积和周长

const rectangle = {
  width: 5,
  height: 10,
  area() {
    return this.width * this.height
  },
  perimeter() {
    return 2 * (this.width + this.height)
  }
}

console.log(rectangle.area()) // 50
console.log(rectangle.perimeter()) // 30