ES6新特性

ES6（ECMAScript 6）

1. 箭头函数

const sum = (a, b) => {
  return a + b;
};
// 等同于
function sum(a, b) {
  return a + b;
}

2. 解构赋值

const [a, b] = [1, 2];
console.log(a); // 1
console.log(b); // 2
const { name, age } = { name: "Jack", age: 18 };
console.log(name); // Jack
console.log(age); // 18

3. 模板字符串

const gender = "man";
const str = `My gender is ${name}`;
console.log(str); // My gender is man

4. class 类

class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
sayHello() {
console.log(`Hello, my name is ${this.name}`);
}
}
const person = new Person("Jack", 18);
person.sayHello(); // Hello, my name is Jack

5. Promise

const promise = new Promise((resolve, reject) => {
setTimeout(() => {
resolve("success");
}, 1000);
});
promise
.then((res) => {
console.log(res); // success
})
.catch((err) => {
console.log(err);
});

6. 模块化

• 导出模块: 使用 export 关键字导出模块

// 导出变量
export const name = "Jack"

// 导出函数
export function sayHello() {
  console.log("Hello!")
}

// 导出类
export class Person {
  constructor(name){
    this.name = name
  }
}

• 导入模块: 使用 import 关键字导入模块

// 导入单个变量
import { name } from "./module.js";

// 导入函数
import { sayHello } from "./module.js"

// 导入类
import { Person } from "./module.js"

// 导入整个模块
import * as module from "./module.js"

• 默认导出: 使用 export default 关键字可以导出一个默认值, 一个模块只能有一个默认导出

// 导出默认值
export default function sayHello() {
  cosole.log("Hello!");
}

// 导入默认值
import sayHello form "./module.js"

• 模块化的循环引用: ES6 模块支持循环引用, 但需要注意避免死循环

// moduleA.js
import { funcB } from "./moduleB.js"
export function funcA() {
  console.log("funcA");
  funcB();
}

// moduleB.js
import { funcA } from "./moduleA.js"

export function funcB(){
  console.log("funcB");
  funcA()
}

7. 扩展运算符: 将数组或者类数组对象展开成单个元素列表

• 使用扩展运算符将数组展开成单个元素列表

const arr = [1, 2, 3];
console.log(...arr); // 1 2 3

• 使用扩展运算符将一个数组展开成多个参数

function sum (a, b, c) {
 return a + b + c;
}
const arr = [1, 2, 3];
console.log(sum(...arr)) // 6

• 扩展运算符用于合并数组

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = [...arr1, ...arr2];
console.log(arr3); [1, 2, 3, 4, 5, 6];

• 用于复制数组

const arr1 = [1, 2, 3];
const arr2 = [...arr1];
console.log(arr2);

• 扩展运算符用户对象的展开

const obj1 = {a:1, b: 2};
const obj2 = { c: 3, d: 4};
const obj3 = {...obj1, ...obj2};
console.log(obj3); // {a: 1, b: 2, c: 3, d: 4}

8. Map 和 Set 数据结构
   Map 是一种键值对的集合, 其中每个键只能出现一次. 它类似于对象, 但是可以使用任何类型的值作为键, 而不仅仅是字符串
   Set是一种值的集合, 其中每个值只能出现一次, 它类似于数组, 但没有重复的值

• Map:

let map = new Map();
map.set("key1", "value1");
map.set("key2", "value2");
map.set("key3", "value3");

console.log(map.get("key1")); // value1
console.log(map.has("key2")); // true
console.log(map.size); // 3

map.delete("key3");
console.log(map.size); // 2

for(let [key, value] of map) {
  console.log(`${key}: ${value}`);
}
// key1: value1
// key2: value2

Set:

let set = new Set();
set.add("value1");
set.add("value2");
set.add("value3");

console.log(set.has("value1")); // ture
console.log(set.size); // 3

set.delete("value2");
console.log(set.size);

for(let value of set) {
  console.log(value);
}
// value1
// value2

// 用于数组去重
let arr = [1, 2, 3, 2, 1];
let unique_arr1 = [...new Set(arr)];
let unique_arr2 = Array.from(new Set(arr))
console.log(unique_arr1); // [1, 2, 3]
console.log(unique_arr2); // [1, 2, 3]

9. Generator 的使用
   ES6 Generator 是一种特殊的函数, 它可以在执行过程中暂停和恢复, Generator函数使用 function* 关键字定义, 它可以通过 yield 关键字暂停执行并返回一个值, 然后可以通过 next() 方法恢复执行

• 示例

function* myGenerator() {
 yield "Hello";
 yield "World";
 yield "!";
}

const gen = myGenerator();
gen.next()
gen.next()
// console.log(gen.next().value); // hello
// console.log(gen.next().value); // world
console.log(gen.next().value); // !

• Generator 函数的一个重要特性是可以通过 yield 语句向外部传递值, 也可以通过 next() 向Generator函数内部传递值

function* myGenerator() {
   const x = yield 'Enter a number:';
   const y = yield 'Enter another number:';
   yield `The sum of ${x} and ${y} is ${x + y}.`;
 }

 const gen = myGenerator();
 console.log(gen.next().value); // 输出：Enter a number:
 console.log(gen.next(2).value); // 输出：Enter another number:
 console.log(gen.next(3).value); // 输出：The sum of 2 and 3 is 5.

• 通过 next(2) 方法向 Generator 函数传递了一个值, 这个值被赋值给了变量 x
• 然后通过 next(3) 方法向 Generator 函数传递了另一个值, 这个值被赋值给了变量 y
• 最后, Generator函数返回了一个字符串, 其中包含了 x 和 y 的和
• Generator 函数的另一个重要特性是可以使用 for..of 循环来遍历它返回的值.

function* myGenerator() {
 yield "Hello";
 yield "World";
 yield "!";
}

for( const value of myGenerator()) {
 console.log(value);
}
// hello
// world
// !

每次循环都会获取一个 yield 语句的值