JavaScript 对象操作完全指南：从基础到高级技巧

前言

JavaScript 中的对象是这门语言的核心概念之一，理解对象的创建、操作和高级特性对于成为一名优秀的 JavaScript 开发者至关重要。本文将全面介绍 JavaScript 中对象的各种操作技巧，从基础创建方式到高级原型链操作，帮助开发者掌握对象相关的核心知识。

1. 对象的多种创建方式

JavaScript 提供了多种创建对象的方法，每种方法都有其适用场景：

1.1 使用 Object 构造函数

const object = Object.create({ key: value });

这种方法通过显式调用 Object 构造函数创建对象，可以指定原型对象。

1.2 对象字面量形式

const object = {
  key: value,
};

这是最常见且简洁的对象创建方式，适合创建简单的对象。

1.3 构造函数函数

function getObject(key, value) {
  this[key] = value;
}

const object = new getObject("key", "value");

通过构造函数可以创建多个相似的对象实例，适合需要批量创建的场景。

1.4 使用 ES6 类

class Obj {
  constructor(key, value) {
    this[key] = value;
  }
}

const object = new Obj("key", "value");

ES6 类语法提供了更清晰的面向对象编程方式，是构造函数函数的语法糖。

2. 对象属性的遍历与访问

2.1 获取对象所有键

// 方法1：for...in循环
for (let key in obj) {
  if (obj.hasOwnProperty(key)) {
    console.log(key);
  }
}

// 方法2：Object.keys配合for...of
for (let key of Object.keys(obj)) {
  if (obj.hasOwnProperty(key)) {
    console.log(key);
  }
}

// 方法3：Object.keys配合forEach
Object.keys(obj).forEach((key) => {
  if (obj.hasOwnProperty(key)) {
    console.log(key);
  }
});

注意：hasOwnProperty 用于确保只获取对象自身的属性，不包括原型链上的属性。

2.2 获取对象所有值

// 方法1：直接获取所有值
console.log(Object.values(obj));

// 方法2：使用for...of遍历
for (let value of Object.values(obj)) {
  console.log(value);
}

// 方法3：使用forEach遍历
Object.values(obj).forEach((value) => console.log(value));

// 方法4：传统for...in方式
for (let key in obj) {
  if (obj.hasOwnProperty(key)) {
    console.log(obj[key]);
  }
}

3. 对象操作的高级技巧

3.1 检查对象是否为空

function isObjectEmpty(obj) {
  if (obj !== null && typeof obj !== "undefined" && typeof obj === "object")
    return Object.keys(obj).length === 0 && JSON.stringify(obj) === "{}";
  else return false;
}

优化建议：对于性能敏感的场景，可以只检查 Object.keys(obj).length === 0。

3.2 创建无原型的对象

const obj = Object.create(null);

这种对象完全干净，不继承任何 Object 的原型方法，适合用作纯粹的字典。

3.3 从键值对创建对象

// 从数组创建
const arr = [
  ["0", "a"],
  ["1", "b"],
  ["2", "c"],
];
const obj = Object.fromEntries(arr);

// 从Map创建
const map = new Map([
  ["foo", "bar"],
  ["baz", 42],
]);
const obj = Object.fromEntries(map);

3.4 对象原型链操作

const obj1 = { a: 1 };
const obj2 = { b: 2 };
Object.setPrototypeOf(obj2, obj1);

// 或者使用非标准的__proto__
const obj1 = { a: "Object 1 value" };
const obj2 = { b: "Object 2 value" };
obj2.__proto__ = obj1;

注意：修改原型链会影响性能，应谨慎使用。

4. 对象属性控制

4.1 使用 getter 和 setter

const obj = {};

Object.defineProperty(obj, "data", {
  _data: 0, // 闭包变量存储实际数据
  get() {
    return this._data;
  },
  set(value) {
    this._data = value;
  },
});

4.2 属性描述符

var obj = {};

Object.defineProperty(obj, "prop", {
  value: 1,
  writable: true,    // 是否可修改
  configurable: true, // 是否可配置
  enumerable: true    // 是否可枚举
});

5. 对象保护机制

JavaScript 提供了三种级别的对象保护：

// 1. 防止扩展
Object.preventExtensions(obj);
Object.isExtensible(obj); // false

// 2. 密封对象
Object.seal(obj);
Object.isSealed(obj); // true

// 3. 冻结对象
Object.freeze(obj);
Object.isFrozen(obj); // true

6. 高级对象特性

6.1 使对象可迭代

const obj = {
  [Symbol.iterator]() {
    const keys = Object.keys(this);
    let idx = 0;
    return {
      next: () => {
        if (idx >= keys.length) 
          return { value: this[keys[idx++]], done: true };
        else 
          return { value: this[keys[idx++]], done: false };
      },
    };
  },
  key1: "value1",
  key2: "value2",
  key3: "value3",
};

6.2 实现范围迭代

let range = {
  start: 1,
  end: 10,
};

Object.defineProperty(range, Symbol.iterator, {
  value: function () {
    let i = this.start;
    return {
      next: () =>
        i <= this.end
          ? { value: i++, done: false }
          : { value: undefined, done: true },
    };
  },
});

for (let i of range) console.log(i); // 1 2 3 4 5 6 7 8 9 10

7. 类与面向对象编程

7.1 静态成员

class Browser {
  static className = "Browser";

  static areTheySameBrowsers(browser1, browser2) {
    return browser1.browserName === browser2.browserName;
  }
}

7.2 私有成员

class ClassWithPrivateFields {
  #privateVar;
  
  #privatFunc() {
    this.#privateVar = 7;
  }
}

7.3 继承与 super 关键字

class BaseComponent {
  constructor(componentName) {
    this.componentName = componentName;
  }
}

class Component extends BaseComponent {
  constructor(name = "", props) {
    super(name); // 调用父类构造函数
    this.state = { ...props };
  }
}

8. Proxy 对象

let obj = { key: "value" };

let proxy = new Proxy(obj, {
  get(target, handler) {
    console.log("读取属性: " + handler);
    return target[handler];
  },
  set(target, handler, value) {
    console.log("设置属性: " + handler + " 值为: " + value);
    target[handler] = value;
  },
});

9. 闭包与伪私有变量

function ObjectCreator() {
  var privateVar = 0;

  this.getPrivateVar = function () {
    return privateVar;
  };
  this.setPrivateVar = function (value) {
    privateVar = value;
  };
}

注意：这种方式的"私有"变量实际上可以通过闭包泄露，不是真正的私有。

结语

JavaScript 的对象系统既强大又灵活，从简单的键值对存储到复杂的面向对象编程，对象都扮演着核心角色。掌握这些对象操作技巧，可以帮助开发者编写出更高效、更健壮的 JavaScript 代码。无论是日常开发还是面试准备，这些知识都是 JavaScript 开发者必备的技能。