在 JavaScript 中,对象是非常重要的数据结构,提供了许多方法来进行操作。以下是对 ES5 和 ES6 中对象的常用操作方法的详细介绍。
目录
一、ES5 对象方法
1. 创建对象
2. 访问和修改属性
3. 遍历对象的属性
二、ES6 对象方法
1. 对象字面量简写
2. 对象解构赋值
3. 扩展运算符
4. Object.assign()
5. Object.is()
6. Object.setPrototypeOf()
7. Object.getPrototypeOf()
8. Object.freeze()
9. Object.seal()
一、ES5 对象方法
1. 创建对象
-
对象字面量
var person = { name: 'Alice', age: 25 };
-
使用
new Object()
var person = new Object(); person.name = 'Alice'; person.age = 25;
2. 访问和修改属性
-
访问属性
var name = person.name; // 'Alice' var age = person['age']; // 25
-
修改属性
person.age = 30; // 修改年龄 person['name'] = 'Bob'; // 更改名字
-
添加新属性
person.gender = 'female'; // 添加性别属性
-
删除属性
delete person.age; // 删除年龄属性
3. 遍历对象的属性
-
for...in
循环:用于遍历对象的可枚举属性。for (var key in person) { console.log(key + ': ' + person[key]); }
-
Object.keys(obj)
:返回一个包含对象所有可枚举属性名称的数组。var keys = Object.keys(person); // ['name', 'gender']
-
Object.values(obj)
:返回一个包含对象所有可枚举属性值的数组。var values = Object.values(person); // ['Bob', 'female']
-
Object.entries(obj)
:返回一个数组,其中每个元素是一个由对象自身可枚举属性的键值对数组。var entries = Object.entries(person); // [['name', 'Bob'], ['gender', 'female']]
二、ES6 对象方法
ES6 引入了一些新的语法和方法,增强了对对象的操作。
1. 对象字面量简写
- 属性和方法的简写
var name = 'Alice'; var age = 25; var person = { name, age, greet() { console.log('Hello, ' + this.name); } };
2. 对象解构赋值
- 解构赋值
var person = { name: 'Alice', age: 25 }; // 使用解构赋值提取属性 var { name, age } = person; console.log(name); // 'Alice'
3. 扩展运算符
- 对象合并
var person = { name: 'Alice' }; var age = { age: 25 }; var user = { ...person, ...age }; // { name: 'Alice', age: 25 }
4. Object.assign()
- 对象合并和克隆
var target = { a: 1 }; var source = { b: 2, c: 3 }; Object.assign(target, source); // target 变为 { a: 1, b: 2, c: 3 }
5. Object.is()
- 比较两个值是否相同
Object.is(NaN, NaN); // true Object.is('foo', 'foo'); // true
6. Object.setPrototypeOf()
- 设置对象的原型
var proto = { greet: function() { console.log('Hello!'); } }; var obj = {}; Object.setPrototypeOf(obj, proto); obj.greet(); // 'Hello!'
7. Object.getPrototypeOf()
- 获取对象的原型
var proto = {}; var obj = Object.create(proto); console.log(Object.getPrototypeOf(obj) === proto); // true
8. Object.freeze()
- 冻结对象,防止其被修改
var obj = { name: 'Alice' }; Object.freeze(obj); obj.name = 'Bob'; // 无效:无法修改
9. Object.seal()
- 密封对象,防止添加新属性
var obj = { name: 'Alice' }; Object.seal(obj); obj.age = 25; // 无效:无法添加新属性
总结
在 ES5 和 ES6 中,JavaScript 提供了丰富的方法来创建、访问、修改和操作对象。掌握这些方法可以帮助你更有效地管理和处理数据。如果你有具体方法的使用问题,欢迎随时询问!