ES6的改变

ES6常用语法

变量声明

ES6之前，JavaScript只有var用于变量声明。ES6引入了let 和const，它们提供了块作用域和不可改变的变量。

let关键字

let关键字用于声明可变变量，它的作用域是当前块级作用域内。

const关键字

const声明不可改变的变量，作用域同样是块级作用域。声明时需要初始化，且以后不能改变。

箭头函数

箭头函数提供了更为简洁的函数定义方式，并且不会绑定自己的this，它会捕捉其所在上下文的this值。

• 没有自己的this绑定
• 没有arguments对象，但可以使用rest参数(…srgs)代替
• 不能用作构造函数，没有[[Construct]]方法，不能使用new关键字。
• 没有prototype属性，不能用于定义类的方法。

function Person() {
    this.age = 0;
    // 传统函数需要额外绑定 this
    setInterval(function growUp() {
        this.age++;
    }.bind(this), 1000);
}

function Person() {
    this.age = 0;
    // 箭头函数自动捕获外部 this
    setInterval(() => {
        this.age++;
    }, 1000);
}

const showArgs = (...args) => {
    console.log(args);
};
showArgs(1, 2, 3); // [1, 2, 3]

模板字符串

模板字符串通过反引号定义，可以使用${}语法嵌入变量和表达式。

const name = 'Wuhu';
const age = 20;

let info = `你好，我的名字是：${name}，年龄是：${age}`
console.log(info);

解构赋值

解构赋值允许从数组和对象中提取值，并赋值给变量。

//结构数组
let arr = [1, 2, 3];
const [a, b] = [1, 2];
console.log(a); // 1
console.log(b); // 2

//对象赋值
const person = {
    name: "Wuhu",
    age: 20,
    hobby: ['唱', '跳', 'rap']
}
// 解构表达式获取值，将 person 里面每一个属性和左边对应赋值
const {name, age, hobby} = person;
// 可以分别打印
console.log(name);
console.log(age);
console.log(hobby);

//扩展：如果想要将 name 的值赋值给其他变量，可以如下,nn 是新的变量名
const {name: nn, age, hobby} = person;
console.log(nn);
console.log(age);
console.log(hobby);

展开运算符

展开运算符(…)可以用来展开数组或者对象，主要用于将一个可迭代对象展开成多个元素。

//展开数组
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5, 6];
console.log(arr2); // [1, 2, 3, 4, 5, 6]

//展开对象
const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3 };
console.log(obj2); // { a: 1, b: 2, c: 3 }

//展开字符串
const str = 'hello';
const chars = [...str];
console.log(chars); // 输出：['h', 'e', 'l', 'l', 'o']

模块化

一个js文件可以理解为一个模块，这个模块可以被任何一个模块使用import关键字引入，引入的结果就是对这个模块进行执行后所拥有的对象。但是文件模块被引入后存在作用域的问题，所以使用export来决定一个模块向外暴露什么东西。

三种暴露方式

分别暴露

// 假设模块名为math.js
export function add(a, b) {
    return a + b;
}

export const PI = 3.14;

相应的导入模块

// main.js
import { add, PI } from './math.js';

console.log(add(2, 3)); // 5
console.log(PI); // 3.14

/*
import * as math from "./math.js"
console.log(math.add(2,3));//5
console.log(math.PI)；//3.14
*/

统一暴露

// 假设模块名为math.js
function add(a, b) {
    return a + b;
}
const PI = 3.14;

export {
	add,PI
}

和分别暴露采用相同的导入方式

默认暴露

推荐单值导出时使用，一个模块只能导出一个export default，而且要在文件的最后写。

// 假设模块名为math.js
export default function add(a, b) {
    return a + b;
}

相应的倒入方式

import add from './math.js';
console.log(add(2, 3)); // 5

import的其他用法

动态导入

import作为函数使用，参数是需要导入模块的路径，函数的返回值是一个promise对象。

import("./m1.js").then(m=>{
  console.log('then:',m)
})

then中回调的m，就是文件模块的整个文件对象(包括export和export default)。

不导入文件对象，只执行文件

import还可以不导入文件对象，仅仅是使用文件模块提供的方法。比如在vue中我们需要给vue对象挂载很多东西，可以用一个模块编写，之后在需要的地方只需要执行，并不需要返回什么东西。

//main.js
import './lib/init.js'

使用import直接引用一个文件时，会执行一遍这个文件，而不获取任何文件对象。

Promise

Promise 是一种用于处理异步操作的对象。它可以将异步操作封装成一个Promise对象，通过then()方法来添加回调函数，当异步操作完成时自动执行回调函数。

const promise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('Success!');
    }, 1000);
});

promise.then((message) => {
    console.log(message); // Success!
}).catch((error) => {
    console.error(error);
});

生成器函数

生成器函数用function*关键字，可以通过yield关键字多次返回值

function* generator() {
    yield 1;
    yield 2;
    yield 3;
}

const gen = generator();
console.log(gen.next()); // { value: 1, done: false }
console.log(gen.next().value); // 2
console.log(gen.next().value); // 3

函数返回值是一个迭代器对象generator，每次调用generator.next()都会执行一次函数体，并返回一个包含value和done两个属性的对象。