1. ES6背景和概念

1.1 什么是ES6？

ES6全称为ECMAScript2015，是一个大的更新，提供了很多新功能，是新版本的代表

1.2 Babel转码器

Babel主要用于将ES6代码转换成ES5代码，便于在浏览器运行

2. 解构赋值

将数组或对象中的数据，一个一个解析出来赋值给变量，就是解构赋值

2.1 数组的解构

let arr = [4, 5, 6, 7, 8];
let [a, b, c] = arr;

2.2 对象的解构

let { name, age, gender } = obj;

注意：变量名和属性名要同名

3. 展开运算符

//1. 展开字符串
let str = 'hello';
console.log(...str); //将字符串展开成为一堆字符序列

//2. 展开数组
let arr = [5, 4, 3, 9, 8, 0];
console.log(...arr);
console.log(Math.max(...arr)); //将数组展开成为一个序列

//3. 展开对象
let obj = { name: '小源', age: 16 };
let obj2 = { ...obj }; //展开成为一个键值对序列，实现浅拷贝

4. 模板字符串

let name = '张飞';
let str = `hello ${name} !!!`;

注意：可以在字符串中实现变量的解析，可以实现多行字符串

5. 对象的简写

5.1 属性简写

let obj = {
    name, //属性名和属性值相同时，只写一个
    age: 18,
}

5.2 方法简写

let obj2 = {
    name,
    age: 19,
    show() { //省略 :function 不写
        console.log(this.name + `年龄是${this.age}岁`)
    }
}

6. class类

6.1 class的写法

class Person {
    //构造函数
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }

    //原型方法
    jump() {
        console.log('跳跳跳!!!')
    }
}

6.2 静态方法

class Person {
    //构造函数
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }

    //原型方法-可以被实例化的对象调用
    jump() {
        console.log('跳跳跳!!!')
    }

    //静态方法-只能被类调用
    static run() {
        console.log('跑跑跑....');
    }

    //静态属性-类的属性
    static eyes=2
}

6.3 class继承

extends 关键字实现继承

//父类
class User {
    constructor(username, password) {
        this.username = username;
        this.password = password;
    }

    login() {
        console.log(this.username + '登陆成功');
    }
}

//子类，继承自父类User
class Student extends User {
    constructor(score, ...rest) {
        super(...rest); //调用父类的构造函数，必须写在this前
        this.score = score;
    }

    study() {
        console.log(this.username + '努力学习');
    }
}

7. ES6模块化

7.1 什么是模块化？

ES6之前没有模块化的语法，但是程序员想了各种各样的模块化实现，如：AMD、CMD、CommonJS

问：为什么要使用模块化？

答：将程序员写的代码封装在内部，避免造成全局污染，有利于团队开发

7.2 node环境

要实现ES6的模块化，建议在node.js环境中编写

下载：https://nodejs.cn/download/

安装：一路下一步

测试：打开命令行执行，node -v

创建文件夹：名字不要写中文

打开命令行：找到文件夹后，在地址栏写 cmd + 回车

创建包描述文件： npm init -y

7.3 普通暴露和普通引入

在子模块中暴露：

//普通暴露（导出），可以暴露多个数据
export const obj = {
    name: '张三',
    age: 18,
}

export function show() {
    console.log('今天星期天，我们在上课，好海哦');
}

在主模块中引入：

//普通引入，要以解构的方式引入
import { obj, show } from './sub.js';

console.log(obj);
console.log(obj.name);
show();

7.4 默认暴露和默认引入

在子模块中暴露：

//默认暴露，一个模块只能有一个默认暴露
export default {
    name: '李四',
    age: 20,
}

在主模块中引入：

//默认引入，只引入一个数据，不需要解构
import a from './sub.js';
console.log(a);
console.log(a.name);