es6 新内容

简述

类 06 类
模块 07 模块
新增语法
- letconst
- 字符串模板
- 函数参数默认值
- 参数扩展…
- 箭头函数=>
- forof
新增对象
- Symbol Symbol
- 容器对象容器对象
- 缓存对象
- 异步 promise 对象 Promise
- 生成器和迭代器生成器和迭代器
- 反射
- 代理 proxy 对象 Proxy
原有对象新增属性
- symbol 的操作
- 迭代器相关/forof
- 其他

es6 新增语法

在编程语言中，“语法糖”（Syntactic Sugar）是指那些使代码更易于编写和阅读的语法特性，这些特性并不增加语言的功能，但可以使代码更加简洁和易懂。JavaScript 也引入了许多语法糖，以下是一些常见的示例：

1. 箭头函数（Arrow Functions）

箭头函数是 ES6 引入的一种更简洁的函数书写方式，它有以下几个特点：

更简洁的语法：不需要使用 function 关键字，直接使用 => 表示。
没有自己的 this：箭头函数不绑定自己的 this，它会捕获其所在上下文的 this 值作为自己的 this 值，所以在箭头函数内部使用 this 时，实际上来自于外围最近一层非箭头函数的上下文。
没有 arguments 对象：箭头函数不绑定自己的 arguments 对象，只能使用 rest 参数替代。
不能用作构造函数：箭头函数不能用作构造函数，即不能使用 new 关键字调用箭头函数。

// 普通函数
function add(a, b) {
    return a + b;
}
// 箭头函数
const add = (a, b) => a + b;

2. 解构赋值（Destructuring Assignment）

解构赋值允许你从数组或对象中提取数据，并将其赋值给变量。这使得代码更加简洁和易于理解。

对象解构

// 普通方式
const person = { name: 'Alice', age: 30 };
const name = person.name;
const age = person.age;
// 解构赋值
const { name, age } = person;

数组解构

// 普通方式
const numbers = [1, 2, 3];
const first = numbers[0];
const second = numbers[1];
// 解构赋值
const [first, second] = numbers;

3. 模板字符串（Template Literals）

模板字符串使用反引号 ` 包围，可以包含嵌入的表达式，这些表达式用 ${} 包围。模板字符串支持多行字符串和字符串插值，使字符串操作更加方便。

// 普通字符串拼接
const name = 'Alice';
const age = 30;
const message = 'Hello, my name is ' + name + ' and I am ' + age + ' years old.';
// 模板字符串
const message = `Hello, my name is ${name} and I am ${age} years old.`;

4. 默认参数（Default Parameters）

ES6 允许在函数的参数定义中设置默认值，这使得函数调用时可以省略某些参数，而这些参数会自动使用默认值。

// 普通方式
function greet(name) {
    if (!name) {
        name = 'Guest';
    }
    console.log(`Hello, ${name}!`);
}
// 默认参数
function greet(name = 'Guest') {
    console.log(`Hello, ${name}!`);
}

5. 扩展运算符（Spread Operator）

扩展运算符 ... 可以将一个数组或对象展开为多个元素或属性，常用于数组或对象的合并、函数参数的传递等。

数组扩展

// 合并数组
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = [...arr1, ...arr2]; // [1, 2, 3, 4, 5, 6]
// 传递函数参数
function sum(a, b, c) {
    return a + b + c;
}
const numbers = [1, 2, 3];
console.log(sum(...numbers)); // 6

对象扩展

// 合并对象
const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };
const obj3 = { ...obj1, ...obj2 }; // { a: 1, b: 3, c: 4 }

6. 简化对象字面量

ES6 允许在对象字面量中省略属性名，如果属性名和变量名相同，可以直接使用变量名。

// 普通方式
const name = 'Alice';
const age = 30;
const person = { name: name, age: age };
// 简化对象字面量
const person = { name, age };

7. 类（Classes）

ES6 引入了类的语法，虽然 JavaScript 仍然是基于原型的，但类语法提供了一种更简洁的方式来定义构造函数和方法。

// 普通方式
function Person(name, age) {
    this.name = name;
    this.age = age;
}
Person.prototype.greet = function() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
};
// 类语法
class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
    greet() {
        console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
    }
}

8. Promise

Promise 是 ES6 引入的一种异步编程解决方案，它提供了一种更简洁的方式来处理异步操作，避免了回调地狱（Callback Hell）。

// 普通回调
function fetchData(callback) {
    setTimeout(() => {
        callback('Data');
    }, 1000);
}
fetchData((data) => {
    console.log(data); // 'Data'
});
// Promise
function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('Data');
        }, 1000);
    });
}
fetchData().then(data => {
    console.log(data); // 'Data'
});

9. async/await

async 和 await 是 ES2017 引入的语法糖，用于简化 Promise 的使用，使异步代码看起来更像同步代码。

// Promise
function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('Data');
        }, 1000);
    });
}
fetchData().then(data => {
    console.log(data); // 'Data'
});
// async/await
async function fetchDataAsync() {
    const data = await fetchData();
    console.log(data); // 'Data'
}
fetchDataAsync();

这些语法糖使得 JavaScript 代码更加简洁、易读和易写，提高了开发效率和代码质量。