js对象常用的方法

鱼樱前端
153 阅读4分钟

记录一次总结js对象常用的方法

1. 对象创建与操作方法

  • Object.create()

    • 创建一个新对象，使用指定的原型对象和可选的属性。
    const proto = { 
    test() { 
        console.log("Hello!"); 
    } 
};
const obj = Object.create(proto);
obj.test(); // 输出: Hello!

  • Object.assign()

    • 将一个或多个源对象的可枚举属性复制到目标对象。返回目标对象。
    const target = { a: 1 };
const source = { b: 2, c: 3 };
Object.assign(target, source);
console.log(target); // 输出: { a: 1, b: 2, c: 3 }

  • Object.keys()

    • 返回一个数组，包含给定对象的所有可枚举属性的名称。
    const obj = { a: 1, b: 2, c: 3 };
console.log(Object.keys(obj)); // 输出: ['a', 'b', 'c']

  • Object.values()

    • 返回一个数组，包含给定对象的所有可枚举属性的值。
    const obj = { a: 1, b: 2, c: 3 };
console.log(Object.values(obj)); // 输出: [1, 2, 3]

  • Object.entries()

    • 返回一个数组，其中包含给定对象的所有可枚举属性的键值对数组。
    const obj = { a: 1, b: 2, c: 3 };
console.log(Object.entries(obj)); // 输出: [['a', 1], ['b', 2], ['c', 3]]

2. 对象属性描述符

  • Object.getOwnPropertyDescriptor()

    • 返回对象中指定属性的描述符。
    const obj = { a: 1 };
console.log(Object.getOwnPropertyDescriptor(obj, 'a'));
// 输出: { value: 1, writable: true, enumerable: true, configurable: true }

  • Object.defineProperty()

    • 在对象上定义新的属性，或修改现有属性，并返回该对象。
    const obj = {};
Object.defineProperty(obj, 'a', {
    value: 1,
    writable: false,
});
console.log(obj.a); // 输出: 1
obj.a = 2;          // 修改失败
console.log(obj.a); // 仍然输出: 1

3. 对象遍历

  • for...in

    • 用于遍历对象的可枚举属性。
    const obj = { a: 1, b: 2, c: 3 };
for (const key in obj) {
    console.log(`${key}: ${obj[key]}`);
}

  • Object.keys() + forEach

    • 利用 Object.keys() 和 forEach() 进行对象属性遍历。
    Object.keys(obj).forEach((key) => {
    console.log(`${key}: ${obj[key]}`);
});

4. 其他常用方法

  • Object.freeze()

    • 冻结对象，以便其无法被修改（无法添加、删除或修改属性）。
    const obj = { a: 1 };
Object.freeze(obj);
obj.a = 2; // 不会生效
console.log(obj.a); // 输出: 1

  • Object.seal()

    • 密封对象，禁止添加或删除属性，但仍可以修改现有属性。
    const obj = { a: 1 };
Object.seal(obj);
obj.a = 2; // 可以修改属性
delete obj.a; // 不能删除属性
console.log(obj.a); // 输出: 2

5. 对象拷贝

  • Object.assign() （前面提到过，但值得再强调）

    • 复制对象的可枚举属性到目标对象。可以用于实现对象的浅拷贝。
    const obj1 = { a: 1, b: 2 };
const obj2 = Object.assign({}, obj1); // 浅拷贝
console.log(obj2); // 输出: { a: 1, b: 2 }

  • Object.fromEntries()

    • 从一个键值对列表构建一个对象。通常与 Object.entries() 一起使用。
    const entries = [['a', 1], ['b', 2]];
const obj = Object.fromEntries(entries);
console.log(obj); // 输出: { a: 1, b: 2 }

6. 对象比较

  • JavaScript 本身没有内建的对象比较功能，但可以结合其他方法自定义比较。

  • JSON.stringify()

    • 将对象转换为 JSON 字符串，可以用于比较两个对象。
    const obj1 = { a: 1, b: 2 };
const obj2 = { a: 1, b: 2 };
console.log(JSON.stringify(obj1) === JSON.stringify(obj2)); // 输出: true

7. 对象原型和继承

  • Object.getPrototypeOf()

    • 返回指定对象的原型（内部 [[Prototype]] 属性）。
    const obj = {};
const proto = Object.getPrototypeOf(obj);
console.log(proto === Object.prototype); // 输出: true

  • Object.setPrototypeOf()

    • 设置指定对象的原型（内部 [[Prototype]] 属性）。
    const proto = { greet() { console.log("Hello!"); } };
const obj = {};
Object.setPrototypeOf(obj, proto);
obj.greet(); // 输出: Hello!

8. 对象的 JSON 方法

  • JSON.stringify()

    • 将对象转换为 JSON 字符串。可用于序列化对象。
    const obj = { a: 1, b: 2 };
const jsonString = JSON.stringify(obj);
console.log(jsonString); // 输出: '{"a":1,"b":2}'

  • JSON.parse()

    • 将 JSON 字符串转换为对象。用于反序列化。
    const jsonString = '{"a":1,"b":2}';
const obj = JSON.parse(jsonString);
console.log(obj); // 输出: { a: 1, b: 2 }

9. 对象构造器和类

  • class 关键字

    • ES6 引入的类语法，可以用来创建对象构造器。
    class Person {
    constructor(name) {
        this.name = name;
    }
    greet() {
        console.log(`Hello, my name is ${this.name}`);
    }
}

const person = new Person('Alice');
person.greet(); // 输出: Hello, my name is Alice

10. 对象方法的现代语法

  • getter 和 setter

    • 可以在对象中定义访问器属性（getter 和 setter），用于自定义属性的读取和写入行为。
    const obj = {
    _name: 'Alice',
    get name() {
        return this._name;
    },
    set name(value) {
        this._name = value;
    }
};

console.log(obj.name); // 输出: Alice
obj.name = 'Bob';
console.log(obj.name); // 输出: Bob

11. 判断两个值是否严格相等

  • Object.is(value1, value2)

    • Object.is() 是 JavaScript 中的一个静态方法，用于判断两个值是否严格相等。其设计目的是提供一个更一致且清晰的方式来比较对象或基本数据类型的值。与传统的 === 运算符相似，但在某些情况下表现得更为一致。
    // **比较 `NaN`**
console.log(Object.is(NaN, NaN)); // 输出: true

// **比较 +0 和 -0**
console.log(Object.is(+0, -0)); // 输出: false

// 对于基本数据类型（如数字、字符串、布尔值），`Object.is()` 和 `===` 的行为一致
console.log(Object.is(5, 5)); // 输出: true
console.log(Object.is('hello', 'hello')); // 输出: true

// `Object.is()` 是一个用于比较值是否相等的方法，特别在处理一些特殊情况（如 `NaN` 和 `+0/-0`）时非常有用
console.log(Object.is(10, 10));             // 输出: true
console.log(Object.is('a', 'a'));            // 输出: true
console.log(Object.is(true, true));          // 输出: true
console.log(Object.is(null, null));          // 输出: true
console.log(Object.is(undefined, undefined)); // 输出: true

console.log(Object.is(NaN, NaN));            // 输出: true
console.log(Object.is(0, -0));                // 输出: false
console.log(Object.is(-0, -0));               // 输出: true

const objA = { name: 'Alice' };
const objB = { name: 'Alice' };
const objC = objA;

console.log(Object.is(objA, objB));          // 输出: false（不同引用）
console.log(Object.is(objA, objC));          // 输出: true（相同引用）

创建对象的方式以及其区别

1. 对象字面量

这是最简单、最常用的方式，直接使用 {} 创建对象。

示例代码：
const obj = {
  name: 'Alice',
  age: 25,
  greet: function() {
    console.log(`Hello, my name is ${this.name}`);
  }
};

console.log(obj); // 输出：{ name: 'Alice', age: 25, greet: [Function] }
obj.greet(); // 输出：Hello, my name is Alice

2. 构造函数

使用构造函数创建对象，这种方式可以创建多个具有相同属性和方法的对象。

示例代码：
function Person(name, age) {
  this.name = name;
  this.age = age;
  this.greet = function() {
    console.log(`Hello, my name is ${this.name}`);
  };
}

const alice = new Person('Alice', 25);
const bob = new Person('Bob', 30);

console.log(alice); // 输出：Person { name: 'Alice', age: 25, greet: [Function] }
alice.greet(); // 输出：Hello, my name is Alice
console.log(bob); // 输出：Person { name: 'Bob', age: 30, greet: [Function] }
bob.greet(); // 输出：Hello, my name is Bob

3. 工厂函数

工厂函数也是一种创建对象的方式，通常用于返回一个对象实例。

示例代码：
function createPerson(name, age) {
  return {
    name: name,
    age: age,
    greet: function() {
      console.log(`Hello, my name is ${this.name}`);
    }
  };
}

const alice = createPerson('Alice', 25);
const bob = createPerson('Bob', 30);

console.log(alice); // 输出：{ name: 'Alice', age: 25, greet: [Function] }
alice.greet(); // 输出：Hello, my name is Alice
console.log(bob); // 输出：{ name: 'Bob', age: 30, greet: [Function] }
bob.greet(); // 输出：Hello, my name is Bob

4. ES6 类

ES6 引入了类的概念，使得创建对象更加简洁和面向对象。

示例代码：
class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  greet() {
    console.log(`Hello, my name is ${this.name}`);
  }
}

const alice = new Person('Alice', 25);
const bob = new Person('Bob', 30);

console.log(alice); // 输出：Person { name: 'Alice', age: 25 }
alice.greet(); // 输出：Hello, my name is Alice
console.log(bob); // 输出：Person { name: 'Bob', age: 30 }
bob.greet(); // 输出：Hello, my name is Bob

5. 对象.create()

使用 Object.create() 方法创建对象，可以指定原型对象。

示例代码：
const personPrototype = {
  greet: function() {
    console.log(`Hello, my name is ${this.name}`);
  }
};

const alice = Object.create(personPrototype);
alice.name = 'Alice';
alice.age = 25;

const bob = Object.create(personPrototype);
bob.name = 'Bob';
bob.age = 30;

console.log(alice); // 输出：{ name: 'Alice', age: 25 }
alice.greet(); // 输出：Hello, my name is Alice
console.log(bob); // 输出：{ name: 'Bob', age: 30 }
bob.greet(); // 输出：Hello, my name is Bob

区别总结

  1. 对象字面量：

    • 最简单直接的方式。
    • 适用于创建单个对象。
    • 不支持继承。

  2. 构造函数：

    • 适用于创建多个具有相同属性和方法的对象。
    • 支持继承。
    • 语法稍微复杂一些。

  3. 工厂函数：

    • 适用于创建多个具有相同属性和方法的对象。
    • 不支持继承。
    • 语法简洁。

  4. ES6 类：

    • 语法简洁，面向对象风格。
    • 支持继承。
    • 适用于现代JavaScript开发。

  5. Object.create() ：

    • 明确指定原型对象。
    • 支持继承。
    • 适用于需要显式控制原型链的情况。
avatar
文章
阅读
粉丝