📜  ES6-对象(1)

📅  最后修改于: 2023-12-03 15:00:37.337000             🧑  作者: Mango

ES6-对象

在ES6中,对象的语法得到了很大的改进。新语法的优势是使代码更为简洁易读,提供了更多的功能,同时也可以更为方便地进行面向对象的编程。

1. 对象初始化简写方法

ES6增加了对象属性初始化的简写方式,这使得我们可以更容易地定义和初始化新对象。下面是一个简单的例子:

let a = 1, b = 2, c = 3;
let obj = {a, b, c}; //等价于 {a: a, b: b, c: c}

console.log(obj); // {a: 1, b: 2, c: 3}

我们不需要再写重复的属性名和属性值,只需要将属性名和变量名相同即可。

2. 对象动态属性名

ES6支持在对象字面量中使用动态属性名(computed property names),其格式为[expression]。这使得我们可以更灵活地定义对象的属性名,下面是一个简单的例子:

let firstName = 'John', lastName = 'Doe';

let person = {
    [firstName + lastName]: {
        firstName,
        lastName,
        age: 22
    }
};

console.log(person); // {JohnDoe: {firstName: "John", lastName: "Doe", age: 22}}
3. 对象方法简写

ES6增加了对对象方法的支持,其语法和函数类似。这使得我们可以更为方便地对对象进行方法的定义和调用。下面是一个简单的例子:

let person = {
    firstName: 'John',
    lastName: 'Doe',
    sayHello() {
        console.log(`Hello, I'm ${this.firstName} ${this.lastName}`);
    }
};

person.sayHello(); // Hello, I'm John Doe

可以看到,在ES6中,我们不需要再写冗长的函数定义,直接在对象中定义方法即可。

4. 对象解构赋值

ES6中引入了解构赋值的语法,使用对象解构赋值可以轻松地从一个对象中提取所需要的数据。下面是一个简单的例子:

let person = {
    firstName: 'John',
    lastName: 'Doe',
    age: 22,
    address: {
        city: 'New York',
        state: 'NY'
    }
};

let {firstName, lastName} = person;

console.log(firstName, lastName); // John Doe
5. 对象新方法

除了上述ES6新增加的对象语法之外,ES6还引入了很多新的方法,这些方法帮助我们更容易地对对象进行操作和处理。下面是一部分常用的方法,更多的方法可以参考MDN文档:

Object.assign()

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

let obj1 = {a: 1, b: 2};
let obj2 = {c: 3};
let obj3 = {d: 4};

let newObj = Object.assign(obj1, obj2, obj3);

console.log(newObj); // {a: 1, b: 2, c: 3, d: 4}
Object.keys()

返回一个由一个给定对象的自身可枚举属性组成的数组。

let obj = {a: 1, b: 2, c: 3};
let keys = Object.keys(obj);

console.log(keys); // ["a", "b", "c"]
Object.values()

返回一个由一个给定对象的自身可枚举属性值组成的数组。

let obj = {a: 1, b: 2, c: 3};
let values = Object.values(obj);

console.log(values); // [1, 2, 3]
Object.entries()

返回一个给定对象自身可枚举属性的键值对数组。

let obj = {a: 1, b: 2, c: 3};
let entries = Object.entries(obj);

console.log(entries); // [["a", 1], ["b", 2], ["c", 3]]
总结

ES6中对对象语法的改进,使得我们可以更为方便地进行对象操作和处理。使用新的语法和方法,我们可以更容易地创建和处理复杂的对象,提高了代码的可读性和代码的维护性。