ES6对象方法扩展
ES6(ECMAScript 2015)为对象(Object)引入了许多新的方法和语法糖,使得对象的操作更加简洁和强大。以下是 ES6 中对象方法的主要扩展:
- 属性简写
在对象字面量中,如果属性名和变量名相同,可以省略属性值。
示例:
const name = 'Alice';
const age = 25;
// ES5
const obj1 = {
name: name,
age: age
};
// ES6
const obj2 = { name, age };
console.log(obj2); // 输出: { name: 'Alice', age: 25 }
- 方法简写
在对象字面量中,定义方法时可以省略 function 关键字。
示例:
// ES5
const obj1 = {
sayHello: function() {
console.log('Hello');
}
};
// ES6
const obj2 = {
sayHello() {
console.log('Hello');
}
};
obj2.sayHello(); // 输出: Hello
- 计算属性名
在对象字面量中,可以使用表达式作为属性名,用 [] 包裹。
示例:
const prop = 'name';
const obj = {
[prop]: 'Alice',
['age']: 25
};
console.log(obj); // 输出: { name: 'Alice', age: 25 }
Object.is()
用于比较两个值是否严格相等,与 === 类似,但处理了一些特殊情况(如 NaN 和 +0/-0)。
示例:
console.log(Object.is(NaN, NaN)); // 输出: true
console.log(Object.is(+0, -0)); // 输出: false
console.log(Object.is(42, 42)); // 输出: true
Object.assign()
用于将一个或多个源对象的属性复制到目标对象,返回目标对象。
示例:
const target = { a: 1 };
const source1 = { b: 2 };
const source2 = { c: 3 };
const result = Object.assign(target, source1, source2);
console.log(result); // 输出: { a: 1, b: 2, c: 3 }
Object.setPrototypeOf()
设置一个对象的原型(即 __proto__ 属性)。
示例:
const obj = {};
const proto = { foo: 'bar' };
Object.setPrototypeOf(obj, proto);
console.log(obj.foo); // 输出: bar
Object.getPrototypeOf()
获取一个对象的原型。
示例:
const obj = {};
const proto = { foo: 'bar' };
Object.setPrototypeOf(obj, proto);
console.log(Object.getPrototypeOf(obj) === proto); // 输出: true
Object.keys()、Object.values()和Object.entries()
Object.keys():返回对象自身可枚举属性的键名数组。Object.values():返回对象自身可枚举属性的值数组。Object.entries():返回对象自身可枚举属性的键值对数组。
示例:
const obj = { a: 1, b: 2, c: 3 };
console.log(Object.keys(obj)); // 输出: ['a', 'b', 'c']
console.log(Object.values(obj)); // 输出: [1, 2, 3]
console.log(Object.entries(obj)); // 输出: [['a', 1], ['b', 2], ['c', 3]]
Object.fromEntries()
将键值对数组转换为对象(与 Object.entries() 相反)。
示例:
const entries = [['a', 1], ['b', 2], ['c', 3]];
const obj = Object.fromEntries(entries);
console.log(obj); // 输出: { a: 1, b: 2, c: 3 }
super关键字
在对象方法中,super 用于调用父对象的方法。
示例:
const parent = {
sayHello() {
console.log('Hello from parent');
}
};
const child = {
sayHello() {
super.sayHello();
console.log('Hello from child');
}
};
Object.setPrototypeOf(child, parent);
child.sayHello();
// 输出:
// Hello from parent
// Hello from child
Object.getOwnPropertyDescriptors()
返回对象所有自身属性的描述符(包括 value、writable、enumerable 和 configurable)。
示例:
const obj = { a: 1 };
const descriptors = Object.getOwnPropertyDescriptors(obj);
console.log(descriptors);
// 输出:
// {
// a: { value: 1, writable: true, enumerable: true, configurable: true }
// }
Symbol作为属性名
ES6 引入了 Symbol 类型,可以用作对象的唯一属性名。
示例:
const key = Symbol('key');
const obj = {
[key]: 'value'
};
console.log(obj[key]); // 输出: value
总结
ES6 为对象引入了许多实用的扩展和方法,包括:
- 属性简写和方法简写。
- 计算属性名。
- 新的
Object方法:is()、assign()、setPrototypeOf()、getPrototypeOf()等。 Object.keys()、Object.values()和Object.entries()。super关键字。Symbol作为属性名。
这些扩展使得对象的操作更加简洁和强大,是现代 JavaScript 开发中不可或缺的工具。
更多vue相关插件及后台管理模板可访问vue admin reference,代码详情请访问github