对象的常用的操作 Object.assign(对象的深复制/浅复制) Object.defineProperty Object.keys Object.values Object.freeze

### JavaScript 中 `Object` 对象的方法 #### 创建对象的方式 可以使用多种方式来创建对象，其中包括对象字面量 `{}` 和 `new Object()`，这两种方法的效果相同[^1]。 ```javascript const objLiteral = {}; const newObj = new Object(); ``` #### 使用 `Object.create()` 此函数用于基于现有对象创建新对象。当参数为 `null` 时，所创建的对象不会继承任何默认属性或方法，这使得该对象非常纯净，适合特定场景下的性能优化需求。 ```javascript // 创建无原型的纯净对象 const pureObj = Object.create(null); ``` #### 常见 `Object` 方法及其用途 ##### 1. `Object.assign(target, ...sources)` 将所有可枚举属性的值从一个或多个源对象复制到目标对象，并返回修改后的目标对象。 ```javascript let target = { a: 1 }; let source = { b: 2 }; Object.assign(target, source); // 结果是 {a: 1, b: 2} ``` ##### 2. `Object.keys(obj)` 返回给定对象自身的所有可枚举属性组成的数组。 ```javascript const object = { a: 1, b: 2, c: 3 }; console.log(Object.keys(object)); // ["a", "b", "c"] ``` ##### 3. `Object.values(obj)` 获取指定对象所有自身属性（不是继承来的）对应的值组成的数组。 ```javascript const object = { foo: 'bar', baz: 42 }; console.log(Object.values(object)); // ['bar', 42] ``` ##### 4. `Object.entries(obj)` 返回一个新的数组实例，其中包含了对象自身所有的键值对。 ```javascript const object = { foo: 'bar', baz: 42 }; console.log(Object.entries(object)); // [['foo', 'bar'], ['baz', 42]] ``` ##### 5. `Object.defineProperty(obj, prop, descriptor)` 定义新的属性直接在一个对象上，或者修改对象已有的属性，并返回这个对象。 ```javascript const object = {}; Object.defineProperty(object, 'property', { value: true, writable: false, }); console.log(object.property); // true object.property = false; console.log(object.property); // still true because it's not writable ``` ##### 6. `Object.freeze(obj)` 冻结一个对象，阻止添加、删除或更改其现有的属性；以及防止扩展它。 ```javascript const object = { property: 42 }; Object.freeze(object); try { object.property = 99; // 尝试改变属性会失败 } catch (e) {} console.log(object.property); // 输出仍然是 42 ``` ##### 7. `Object.seal(obj)` 密封一个对象，允许当前属性被更新但是不允许新增加或移除属性。 ```javascript const person = { name: 'John' }; Object.seal(person); person.name = 'Jane'; // 可以修改已有属性 delete person.name; // 不可以删除属性 person.age = 28; // 新增属性将会失败 ``` ##### 8. `Object.getPrototypeOf(obj)` 返回指定对象的原型（内部[[Prototype]]属性的值）。 ```javascript function Person(name) { this.name = name; } Person.prototype.sayName = function () { console.log(this.name); }; var john = new Person('John'); console.log(Object.getPrototypeOf(john) === Person.prototype); // true ```

<think>我们正在讨论JavaScript对象的使用和操作方法。根据用户提供的引用，我们可以总结出以下几个关键点： 1. 对象的创建：可以使用构造函数或字面量形式。 2. 对象属性的添加：可以动态地为对象添加属性和方法。 3. Object的静态方法：如Object.is()用于比较两个值是否相同，Object.hasOwn()用于判断对象自身是否具有某个属性，Object.isExtensible()判断对象是否可扩展等。 接下来，我们将系统地介绍JavaScript对象的使用和操作方法。 ## 一、对象的基本操作 ### 1. 创建对象 - **字面量形式**（最常用）： ```javascript const obj = {}; // 空对象 ``` - **构造函数形式**： ```javascript const obj = new Object(); ``` ### 2. 添加/修改属性 ```javascript obj.name = "张三"; // 添加属性 obj.age = 25; obj.sayHello = function() { // 添加方法 console.log(`你好，我是${this.name}`); }; ``` ### 3. 访问属性 ```javascript console.log(obj.name); // "张三" obj.sayHello(); // 调用方法 ``` ### 4. 删除属性 ```javascript delete obj.age; // 删除age属性 ``` ## 二、Object静态方法详解 ### 1. `Object.is(value1, value2)` [^2][^3] 比较两个值是否为同一个值，与`===`类似，但有以下区别： ```javascript Object.is(NaN, NaN); // true，而NaN === NaN 为false Object.is(0, -0); // false，而0 === -0 为true ``` ### 2. `Object.hasOwn(obj, prop)` [^3] 判断对象自身（非原型链上）是否有指定属性： ```javascript const car = { brand: 'Toyota' }; console.log(Object.hasOwn(car, 'brand')); // true console.log(Object.hasOwn(car, 'toString')); // false（toString是继承的） ``` ### 3. `Object.keys()` / `Object.values()` / `Object.entries()` - **获取对象自身可枚举属性的键、值或键值对数组**： ```javascript const person = { name: 'Alice', age: 30 }; Object.keys(person); // ['name', 'age'] Object.values(person); // ['Alice', 30] Object.entries(person); // [['name','Alice'], ['age',30]] ``` ### 4. `Object.assign(target, ...sources)` 合并多个对象的属性到目标对象（浅拷贝）： ```javascript const target = { a: 1 }; const source = { b: 2 }; Object.assign(target, source); // { a:1, b:2 } ``` ### 5. `Object.freeze()` / `Object.seal()` - **冻结对象**（不可修改、添加、删除属性）： ```javascript const frozen = Object.freeze({ value: 100 }); frozen.value = 200; // 静默失败（严格模式下报错） ``` - **密封对象**（不可添加/删除属性，但可修改现有属性）： ```javascript const sealed = Object.seal({ value: 100 }); sealed.value = 200; // 允许修改 delete sealed.value; // 失败 ``` ### 6. `Object.create(proto)` 以指定原型创建新对象： ```javascript const parent = { type: '动物' }; const dog = Object.create(parent); dog.name = '旺财'; console.log(dog.type); // "动物"（通过原型链继承） ``` ## 三、原型链相关操作 ### 1. 查看原型 ```javascript const arr = []; console.log(Object.getPrototypeOf(arr) === Array.prototype); // true ``` ### 2. 修改原型（谨慎使用） ```javascript const obj1 = { a: 1 }; const obj2 = { b: 2 }; Object.setPrototypeOf(obj1, obj2); console.log(obj1.b); // 2（通过原型链访问） ``` ## 四、对象迭代与检测 ### 1. 检测对象类型 ```javascript const date = new Date(); console.log(date instanceof Date); // true console.log(typeof date); // "object" ``` ### 2. 遍历对象属性 ```javascript const user = { name: 'Bob', age: 40 }; for (const key in user) { if (Object.hasOwn(user, key)) { // 过滤原型链上的属性 console.log(`${key}: ${user[key]}`); } } ``` ## 五、实际应用场景 ### 场景1：动态配置对象 ```javascript const createConfig = (options) => { const defaults = { color: 'red', size: 'medium' }; return Object.assign({}, defaults, options); }; const config = createConfig({ size: 'large' }); console.log(config); // { color: "red", size: "large" } ``` ### 场景2：安全拷贝对象（浅拷贝） ```javascript const original = { a: 1, b: { c: 2 } }; const copy = Object.assign({}, original); ``` ### 场景3：防止对象被篡改 ```javascript const sensitiveData = { apiKey: 'xYz123' }; Object.freeze(sensitiveData); sensitiveData.apiKey = 'hacked'; // 修改无效（严格模式报错） ``` ## 六、注意事项 1. **深拷贝问题**：`Object.assign()`和展开运算符`{...obj}`都是浅拷贝 2. **性能影响**：`Object.setPrototypeOf()`会破坏JS引擎优化 3. **属性枚举顺序**：`Object.keys()`等方法的顺序规则（数字键升序，字符串键按添加顺序） > 完整对象方法列表可参考MDN文档： > [Object - JavaScript | MDN](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object) §§相关问题§§ 1. JavaScript中如何实现对象的深拷贝？ 2. `Object.assign()`和扩展运算符`...`有什么区别？ 3. 如何检测一个对象是否被冻结（frozen）或密封（sealed）？ 4. JavaScript原型链继承的优缺点是什么？ 5. 如何遍历对象的Symbol属性？</think>## JavaScript 对象使用与操作方法详解 ### 一、对象创建与基本操作 #### 1. 对象创建方式 ```javascript // 字面量创建（推荐） const person = { name: "张三", age: 28, greet() { return `你好，我是${this.name}`; } }; // 构造函数创建 const car = new Object(); car.brand = "Toyota"; car.model = "Camry"; ``` #### 2. 属性操作 ```javascript // 添加属性 person.job = "工程师"; // 访问属性 console.log(person.name); // "张三" // 删除属性 delete person.age; // 检查属性存在性 console.log("name" in person); // true console.log(Object.hasOwn(person, "job")); // true [^3] ``` ### 二、对象静态方法详解 #### 1. `Object.is()` - 值比较 [^2][^3] ```javascript console.log(Object.is(25, 25)); // true console.log(Object.is(NaN, NaN)); // true（与 === 不同） console.log(Object.is(0, -0)); // false（与 === 不同） ``` #### 2. `Object.keys()`/`Object.values()`/`Object.entries()` ```javascript const student = { id: 101, name: "李四" }; console.log(Object.keys(student)); // ["id", "name"] console.log(Object.values(student)); // [101, "李四"] console.log(Object.entries(student)); // [["id", 101], ["name", "李四"]] ``` #### 3. `Object.assign()` - 对象合并 ```javascript const target = { a: 1, b: 2 }; const source = { b: 4, c: 5 }; const result = Object.assign(target, source); console.log(result); // { a: 1, b: 4, c: 5 } ``` #### 4. `Object.freeze()`/`Object.seal()` - 对象保护 ```javascript const frozenObj = Object.freeze({ value: 100 }); frozenObj.value = 200; // 静默失败（严格模式报错） const sealedObj = Object.seal({ value: 100 }); sealedObj.value = 200; // 允许修改 sealedObj.newProp = "test"; // 禁止添加 ``` ### 三、原型与继承操作 #### 1. 原型链访问 ```javascript const animal = { eats: true }; const rabbit = { jumps: true }; Object.setPrototypeOf(rabbit, animal); // 设置原型 console.log(rabbit.eats); // true（继承属性） console.log(Object.getPrototypeOf(rabbit) === animal); // true ``` #### 2. 原型方法创建 ```javascript function Person(name) { this.name = name; } Person.prototype.greet = function() { return `你好，${this.name}`; }; const john = new Person("John"); console.log(john.greet()); // "你好，John" ``` ### 四、对象遍历与转换 #### 1. 遍历对象属性 ```javascript const product = { id: "P001", price: 99.99 }; // for...in 循环（包含继承属性） for (const key in product) { console.log(`${key}: ${product[key]}`); } // Object.entries + forEach Object.entries(product).forEach(([key, value]) => { console.log(`${key} = ${value}`); }); ``` #### 2. 对象转JSON ```javascript const user = { name: "王五", roles: ["admin", "editor"], metadata: { created: "2023-01-01" } }; const jsonString = JSON.stringify(user); /* 输出： '{"name":"王五","roles":["admin","editor"],"metadata":{"created":"2023-01-01"}}' */ ``` ### 五、高级对象操作 #### 1. 属性描述符 ```javascript const obj = {}; Object.defineProperty(obj, "readOnlyProp", { value: 42, writable: false, enumerable: true }); console.log(obj.readOnlyProp); // 42 obj.readOnlyProp = 100; // 赋值无效（严格模式报错） ``` #### 2. 对象代理（Proxy） ```javascript const target = { balance: 1000 }; const handler = { set(obj, prop, value) { if (prop === "balance" && value < 0) { throw new Error("余额不能为负数"); } obj[prop] = value; return true; } }; const protectedAccount = new Proxy(target, handler); protectedAccount.balance = -500; // 抛出错误 ``` ### 六、最佳实践与注意事项 1. **优先使用字面量语法**：比`new Object()`更简洁高效 2. **避免修改内置原型**：`Object.prototype.myMethod = ...` 是危险操作 3. **深拷贝解决方案**：使用`JSON.parse(JSON.stringify(obj))`或第三方库 4. **循环引用处理**： ```javascript const objA = {}; const objB = { ref: objA }; objA.ref = objB; // 循环引用 try { JSON.stringify(objA); // 抛出错误 } catch (e) { console.error("检测到循环引用"); } ``` > 完整对象方法参考：[MDN Object文档](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object)