掌握 JavaScript 对象指南

对象是 JavaScript 的基本组成部分，是存储和管理数据的支柱。对象是属性的集合，每个属性都是键（或名称）和值之间的关联。了解如何创建、操作和利用对象对于任何 JavaScript 开发人员都至关重要。在本文中，我们将探索 JavaScript 中的各种对象函数，并提供详细的解释、示例和注释来帮助您掌握它们。

JavaScript 中的对象简介

在 JavaScript 中，对象用于存储数据集合和更复杂的实体。它们是使用对象文字或对象构造函数创建的。

// Using object literals
let person = {
    name: "John",
    age: 30,
    city: "New York"
};

// Using the Object constructor
let person = new Object();
person.name = "John";
person.age = 30;
person.city = "New York";

对象属性

• Object.prototype：每个 JavaScript 对象都从其原型继承属性和方法。

let obj = {};
console.log(obj.__proto__ === Object.prototype); // Output: true

对象方法

1. 对象分配()

将所有可枚举自身属性的值从一个或多个源对象复制到目标对象。它返回目标对象。

let target = {a: 1};
let source = {b: 2, c: 3};
Object.assign(target, source);
console.log(target); // Output: {a: 1, b: 2, c: 3}

2. 对象.create()

使用指定的原型对象和属性创建一个新对象。

let person = {
    isHuman: false,
    printIntroduction: function() {
        console.log(`My name is ${this.name}. Am I human? ${this.isHuman}`);
    }
};

let me = Object.create(person);
me.name = "Matthew";
me.isHuman = true;
me.printIntroduction(); // Output: My name is Matthew. Am I human? true

3.Object.defineProperties()

直接在对象上定义新属性或修改现有属性，并返回该对象。

let obj = {};
Object.defineProperties(obj, {
    property1: {
        value: true,
        writable: true
    },
    property2: {
        value: "Hello",
        writable: false
    }
});
console.log(obj); // Output: { property1: true, property2: 'Hello' }

4.Object.defineProperty()

直接在对象上定义新属性或修改现有属性并返回对象。

let obj = {};
Object.defineProperty(obj, 'property1', {
    value: 42,
    writable: false
});
console.log(obj.property1); // Output: 42
obj.property1 = 77; // No error thrown, but the property is not writable
console.log(obj.property1); // Output: 42

5.Object.entries()

返回给定对象自己的可枚举字符串键控属性 [key, value] 对的数组。

let obj = {a: 1, b: 2, c: 3};
console.log(Object.entries(obj)); // Output: [['a', 1], ['b', 2], ['c', 3]]

6. 对象.freeze()

冻结一个对象。冻结的对象无法再更改；冻结对象可以防止向其添加新属性、删除现有属性，并防止更改现有属性的值。

let obj = {prop: 42};
Object.freeze(obj);
obj.prop = 33; // Fails silently in non-strict mode
console.log(obj.prop); // Output: 42

7.Object.fromEntries()

将键值对列表转换为对象。

let entries = new Map([['foo', 'bar'], ['baz', 42]]);
let obj = Object.fromEntries(entries);
console.log(obj); // Output: { foo: 'bar', baz: 42 }

8.Object.getOwnPropertyDescriptor()

返回给定对象的自有属性（即直接存在于对象上而不是在对象原型链中的属性描述符）。

let obj = {property1: 42};
let descriptor = Object.getOwnPropertyDescriptor(obj, 'property1');
console.log(descriptor);
// Output: { value: 42, writable: true, enumerable: true, configurable: true }

9.Object.getOwnPropertyDescriptors()

返回一个包含对象所有自己的属性描述符的对象。

let obj = {property1: 42};
let descriptors = Object.getOwnPropertyDescriptors(obj);
console.log(descriptors);
/* Output:
{
  property1: {
    value: 42,
    writable: true,
    enumerable: true,
    configurable: true
  }
}
*/

10.Object.getOwnPropertyNames()

返回直接在给定对象上找到的所有属性（包括不可枚举属性，使用 Symbol 的属性除外）的数组。

let obj = {a: 1, b: 2, c: 3};
let props = Object.getOwnPropertyNames(obj);
console.log(props); // Output: ['a', 'b', 'c']

11.Object.getOwnPropertySymbols()

返回直接在给定对象上找到的所有符号属性的数组。

let obj = {};
let sym = Symbol('foo');
obj[sym] = 'bar';
let symbols = Object.getOwnPropertySymbols(obj);
console.log(symbols); // Output: [Symbol(foo)]

12.Object.getPrototypeOf()

返回指定对象的原型（即内部 [[Prototype]] 属性的值）。

let proto = {};
let obj = Object.create(proto);
console.log(Object.getPrototypeOf(obj) === proto); // Output: true

13. 对象.is()

判断两个值是否相同。

console.log(Object.is('foo', 'foo')); // Output: true
console.log(Object.is({}, {})); // Output: false

14.Object.isExtensible()

确定是否允许扩展对象。

let obj = {};
console.log(Object.isExtensible(obj)); // Output: true
Object.preventExtensions(obj);
console.log(Object.isExtensible(obj)); // Output: false

15. 对象.isFrozen()

确定对象是否被冻结。

let obj = {};
console.log(Object.isFrozen(obj)); // Output: false
Object.freeze(obj);
console.log(Object.isFrozen(obj)); // Output: true

16. 对象.isSealed()

确定对象是否被密封。

let obj = {};
console.log(Object.isSealed(obj)); // Output: false
Object.seal(obj);
console.log(Object.isSealed(obj)); // Output: true

17. 对象.keys()

返回给定对象自己的可枚举属性名称的数组，以与正常循环相同的顺序进行迭代。

let obj = {a: 1, b: 2, c: 3};
console.log(Object.keys(obj)); // Output: ['a', 'b', 'c']

18. 对象.preventExtensions()

防止对象的任何扩展。

let obj = {};
Object.preventExtensions(obj);
obj.newProp = 'test'; // Throws an error in strict mode
console.log(obj.newProp); // Output: undefined

19. 对象.seal()

密封一个对象，防止向其中添加新属性并将所有现有属性标记为不可配置。只要当前属性可写，它们的值仍然可以更改。

let obj = {property1: 42};
Object.seal(obj);
obj.property1 = 33;
delete obj.property1; // Throws an error in strict mode
console.log(obj.property1); // Output: 33

20. 对象.setPrototypeOf()

将指定对象的原型（即内部 [[Prototype]] 属性）设置为另一个对象或 null。

let proto = {};
let obj = {};
Object.setPrototypeOf(obj, proto);
console.log(Object.getPrototypeOf(obj) === proto); // Output: true

21. 对象.values()

返回给定对象自己的可枚举属性值的数组，其顺序与 for...in 循环提供的顺序相同。

let obj = {a: 1, b: 2, c: 3};
console.log(Object.values(obj)); // Output: [1, 2, 3]

实际例子

示例 1：克隆对象

使用 Object.assign() 克隆对象。

let obj = {a: 1, b: 2};
let clone = Object.assign({}, obj);
console.log(clone); // Output: {a: 1, b: 2}

示例 2：合并对象

使用 Object.assign() 合并对象。

let obj1 = {a: 1, b: 2};
let obj2 = {b: 3, c: 4};
let merged = Object.assign({},

 obj1, obj2);
console.log(merged); // Output: {a: 1, b: 3, c: 4}

Example 3: Creating an Object with a Specified Prototype

Using Object.create() to create an object with a specified prototype.

let proto = {greet: function() { console.log("Hello!"); }};
let obj = Object.create(proto);
obj.greet(); // Output: Hello!

Example 4: Defining Immutable Properties

Using Object.defineProperty() to define immutable properties.

let obj = {};
Object.defineProperty(obj, 'immutableProp', {
    value: 42,
    writable: false
});
console.log(obj.immutableProp); // Output: 42
obj.immutableProp = 77; // Throws an error in strict mode
console.log(obj.immutableProp); // Output: 42

Example 5: Converting an Object to an Array

Using Object.entries() to convert an object to an array of key-value pairs.

let obj = {a: 1, b: 2, c: 3};
let entries = Object.entries(obj);
console.log(entries); // Output: [['a', 1], ['b', 2], ['c', 3]]

Conclusion

Objects are a core component of JavaScript, offering a flexible way to manage and manipulate data. By mastering object functions, you can perform complex operations with ease and write more efficient and maintainable code. This comprehensive guide has covered the most important object functions in JavaScript, complete with detailed examples and explanations. Practice using these functions and experiment with different use cases to deepen your understanding and enhance your coding skills.

以上是掌握 JavaScript 对象指南的详细内容。更多信息请关注PHP中文网其他相关文章！