ES6对象方法扩展

47 阅读3分钟

ES6对象方法扩展

ES6(ECMAScript 2015)为对象(Object)引入了许多新的方法和语法糖,使得对象的操作更加简洁和强大。以下是 ES6 中对象方法的主要扩展:

  1. 属性简写

在对象字面量中,如果属性名和变量名相同,可以省略属性值。

示例:

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 }
  1. 方法简写

在对象字面量中,定义方法时可以省略 function 关键字。

示例:

// ES5
const obj1 = {
    sayHello: function() {
        console.log('Hello');
    }
};

// ES6
const obj2 = {
    sayHello() {
        console.log('Hello');
    }
};

obj2.sayHello(); // 输出: Hello
  1. 计算属性名

在对象字面量中,可以使用表达式作为属性名,用 [] 包裹。

示例:

const prop = 'name';

const obj = {
    [prop]: 'Alice',
    ['age']: 25
};

console.log(obj); // 输出: { name: 'Alice', age: 25 }
  1. 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
  1. 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 }
  1. Object.setPrototypeOf()

设置一个对象的原型(即 __proto__ 属性)。

示例:

const obj = {};
const proto = { foo: 'bar' };

Object.setPrototypeOf(obj, proto);
console.log(obj.foo); // 输出: bar
  1. Object.getPrototypeOf()

获取一个对象的原型。

示例:

const obj = {};
const proto = { foo: 'bar' };

Object.setPrototypeOf(obj, proto);
console.log(Object.getPrototypeOf(obj) === proto); // 输出: true
  1. 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]]
  1. 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 }
  1. 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
  1. Object.getOwnPropertyDescriptors()

返回对象所有自身属性的描述符(包括 valuewritableenumerableconfigurable)。

示例:

const obj = { a: 1 };
const descriptors = Object.getOwnPropertyDescriptors(obj);

console.log(descriptors);
// 输出:
// {
//   a: { value: 1, writable: true, enumerable: true, configurable: true }
// }
  1. 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