Javascript Object对象类型使用详解

在 Javascript 中，Object 对象类型是最重要的类型之一。它是一种可以容纳各种数据类型的复合类型，用于表示对象实体或无序集合。在本文中，我们将详细讲解 Object 对象类型的各个方面，包括创建、读写属性、遍历、方法和继承等。

创建 Object 对象

使用 Object 构造函数或对象字面量语法可以创建一个空的 Object 对象。使用 Object 构造函数创建一个空对象的语法如下：

const obj = new Object();

使用对象字面量语法创建一个空对象的语法如下：

const obj = {};

你还可以在对象字面量中定义对象的属性和值：

const person = {
  name: 'John',
  age: 25,
  address: '123 Main St.'
};

读写 Object 对象的属性

Object 对象的属性可以通过点标记法和方括号标记法进行访问。使用点标记法访问属性的语法如下：

const person = { name: 'John' };
console.log(person.name); // output: John

使用方括号标记法访问属性的语法如下：

const person = { name: 'John' };
console.log(person['name']); // output: John

你还可以添加、修改或删除对象的属性。例如：

// 添加属性
const person = { name: 'John' };
person.age = 25;

// 修改属性
person.name = 'Jane';

// 删除属性
delete person.age;

遍历 Object 对象

遍历 Object 对象时有多种方法。以下是一些常见的遍历方法：

• for...in 循环
• Object.keys() 方法
• Object.values() 方法
• Object.entries() 方法

使用 for...in 循环遍历 Object 对象的语法如下：

const person = { name: 'John', age: 25 };

for (const key in person) {
  console.log(`${key}: ${person[key]}`);
}

使用 Object.keys() 方法获取 Object 对象的属性名组成的数组，然后遍历该数组即可：

const person = { name: 'John', age: 25 };
const keys = Object.keys(person);

for (const key of keys) {
  console.log(`${key}: ${person[key]}`);
}

使用 Object.values() 方法获取 Object 对象的属性值组成的数组，然后遍历该数组即可：

const person = { name: 'John', age: 25 };
const values = Object.values(person);

for (const value of values) {
  console.log(value);
}

使用 Object.entries() 方法获取 Object 对象的属性名和属性值组成的二维数组，然后遍历该数组即可：

const person = { name: 'John', age: 25 };
const entries = Object.entries(person);

for (const [key, value] of entries) {
  console.log(`${key}: ${value}`);
}

Object 对象的方法

Object 对象有许多有用的方法，以下是一些常见的方法：

• Object.assign() 方法
• Object.create() 方法
• Object.defineProperty() 方法
• Object.hasOwnProperty() 方法
• Object.is() 方法
• Object.seal() 方法
• Object.freeze() 方法

使用 Object.assign() 方法可以将多个对象的属性合并到一个目标对象中：

const person = { name: 'John' };
const info = { age: 25, address: '123 Main St.' };
const merged = Object.assign({}, person, info);

console.log(merged); // output: { name: 'John', age: 25, address: '123 Main St.' }

使用 Object.create() 方法可以创建一个新对象，其原型链指向指定对象。

const person = { name: 'John' };
const info = Object.create(person);
info.age = 25;
info.address = '123 Main St.';

console.log(info.name); // output: John

使用 Object.defineProperty() 方法可以为对象添加或修改属性的特性，例如设置只读属性或访问器属性：

const person = { name: 'John', age: 25 };
Object.defineProperty(person, 'name', { writable: false });
// person.name = 'Jane'; // Error: Cannot assign to read only property 'name'

Object.defineProperty(person, 'fullName', {
  get() {
    return `${this.name} Doe`;
  },
  set(value) {
    const names = value.split(' ');
    this.name = names[0];
  }
});

person.fullName = 'Jane Smith';
console.log(person.name); // output: Jane

使用 Object.hasOwnProperty() 方法可以检查对象本身是否包含指定属性：

const person = { name: 'John', age: 25 };
console.log(person.hasOwnProperty('name')); // output: true
console.log(person.hasOwnProperty('toString')); // output: false

使用 Object.is() 方法可以比较两个值是否严格相等：

console.log(Object.is(1, 1)); // output: true
console.log(Object.is(1, '1')); // output: false
console.log(Object.is(NaN, NaN)); // output: true
console.log(Object.is(0, -0)); // output: false

使用 Object.seal() 方法可以禁止添加或删除对象的属性，但可以修改现有属性：

const person = { name: 'John', age: 25 };
Object.seal(person);

person.age = 30; // OK
person.address = '123 Main St.'; // Error: Cannot add property address, object is not extensible
delete person.age; // Error: Cannot delete property 'age' of #<Object>

使用 Object.freeze() 方法可以禁止修改和扩展对象的属性：

const person = { name: 'John', age: 25 };
Object.freeze(person);

person.age = 30; // Error: Cannot assign to read only property 'age' of object '#<Object>'
person.address = '123 Main St.'; // Error: Cannot add property address, object is not extensible
delete person.age; // Error: Cannot delete property 'age' of #<Object>

继承

使用原型链可以实现对象的继承。通过将一个对象设置为另一个对象的原型，可以使前者从后者继承属性和方法。以下是一个简单的例子：

function Animal(species) {
  this.species = species;
}

Animal.prototype.sayHello = function() {
  console.log(`I am a ${this.species}`);
}

function Dog(name) {
  this.name = name;
}

Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

const myDog = new Dog('Rex');
myDog.sayHello(); // output: I am a undefined

在上述例子中，我们创建了两个构造函数，分别用于创建 Animal 对象和 Dog 对象。然后为 Animal 对象添加一个方法 sayHello。接着，我们将 Dog 对象的原型链设置为 Animal 对象，从而让 Dog 对象继承了 Animal 对象的属性和方法。最后我们创建了一个名为 myDog 的 Dog 对象，并调用了 sayHello 方法。

示例1：使用 Object 对象实现散列结构

在本示例中，我们将展示如何使用 Object 对象来实现一种散列结构。散列结构是一种键值对数据结构，其中键和值都可以是任何类型的数据。

class HashTable {
  constructor() {
    this.items = {};
  }

  set(key, value) {
    this.items[key] = value;
  }

  get(key) {
    return this.items[key];
  }

  delete(key) {
    delete this.items[key];
  }

  has(key) {
    return this.items.hasOwnProperty(key);
  }

  get keys() {
    return Object.keys(this.items);
  }

  get values() {
    return Object.values(this.items);
  }

  get size() {
    return Object.keys(this.items).length;
  }
}

const table = new HashTable();
table.set('A', 1);
table.set('B', 2);
console.log(table.keys); // output: [ 'A', 'B' ]
console.log(table.values); // output: [ 1, 2 ]
console.log(table.size); // output: 2

在上述例子中，我们定义了一个 HashTable 类，其实现了散列结构的常用方法。散列结构本质上就是一个 Object 对象，我们将数据和操作封装到一个类中，提供了更方便的 API。

示例2：使用 Object 对象实现一个工具库

在本示例中，我们将展示如何使用 Object 对象来实现一个工具库，该工具库封装了一些常用的函数。

const utils = {
  getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
  },

  debounce(fn, delay) {
    let timer = null;

    return function(...args) {
      clearTimeout(timer);
      timer = setTimeout(() => {
        fn.apply(this, args);
      }, delay);
    };
  },

  cloneObject(obj) {
    const clone = {};

    for (const key in obj) {
      if (obj.hasOwnProperty(key)) {
        clone[key] = obj[key];
      }
    }

    return clone;
  }
};

console.log(utils.getRandomInt(0, 10)); // output: a random integer between 0 and 10
const debouncedFn = utils.debounce(() => console.log('debounced!'), 1000);
debouncedFn(); // will log 'debounced!' after 1 second
const original = { name: 'John', age: 25 };
const clone = utils.cloneObject(original);
console.log(clone); // output: { name: 'John', age: 25 }

在上述例子中，我们定义了一个 utils 对象，其中包含了三个常用函数：随机数生成函数 getRandomInt、防抖函数 debounce 和对象克隆函数 cloneObject。这个工具库可以作为任何 JavaScript 项目的一部分，并提供了快捷的 API，以简化代码和提高生产力。