ES6 基础教程（一）

1.let

用法：块级作用域；不可重复声明。

2.const

用法：定义常量；一旦定义，你只能去读取它，不要进行其他操作。

3.箭头函数

• 语法：(这里写参数列表)=>{这里写函数返回值}
• 这个函数永远是匿名的。
• this 指向函数所在的上下文环境
• 没有 arguments 对象

3.默认参数与 rest

默认参数

function fn(a,b){
    console.log(a,b);
}

fn();//undefiend  undefined



function fn(a=5,b=6){//现在我们给一个默认参数
    console.log(a,b);
}

fn();//5 6

rest

function fn(...re){
    console.log(re);
}

fn(1,2,3,4);//[1,2,3,4]


function fn(normal,...re){
    console.log(re);
}

fn();//[2,3,4]

4.spread

• 能把数组展开
• 能把对象展开（es7里面的内容）

function fn(normal,...re){
    //这里 spread 就把一个数组展开了
    ott(...re);
}

fn(1,2,3,4);//9

function ott(a,b,c){
    console.log(a+b+c);
}

5.模板字符串

模板字符串是一种新的用来拼接字符串的方式，只是用来拼接字符串。

• 语法：`这里面写字符串 ${这里面写你想写的变量}`
• 注意，包围字符串的不是单双引号，而是一对小浅点，也就是位于 tab 键上方，esc 键下方的那个键。

let firstname = "lao",lastname = "wang";

let str = `my mane is ${firstname} ${lastname}`;

console.log(str);// my name is lao wang

6.结构赋值

结构赋值只是一种新的更简便的赋值语法。

let human = {
    age : 18,
    name : "laowang"
}

let {age,name} = human;

console.log(age,human);// 18 laowang

//你也可以给变量赋予新的名字
let human = {
    age : 18,
    name : "laowang"
}

let {age=youngAge,name} = human;

console.log(youngAge,human);// 18 laowang

let human = {
    age : 18,
    name : "laowang",
    children:{
        c1 : "laoda",
        c2 : "laoer"
    }
}

//当然你不必结构所有的属性，需要什么就把什么拿出来就好了 
let {age=youngAge,name,children:{c1,c2} = human;

console.log(youngAge,human,c1,c2);// 18 laowang laoda laoer

7.类

语法：

class ClassName{
    constructor(){
//当我们在实例化一个对象的时候，首先会执行这个构造函数，这意味
//着，刚你在 new 一个类的时候，你可以在 constructor 里面做
//一些初始化的事情
    }
}

实例：

class Animal {
    constructor(a,b,c){
        this.a = a;
        this.b = b;
        this.c = c;
    }

    move(){
        console.log("i can move");
    }
}

//实例化一个类
let dog = new Animal(1,2,3);

console.log(dog.a,dog.b,dog.c);// 1 2 3 


//我们运行一下它的方法
dog.move();// i can move

对象之间的继承：

class Animal {
    constructor(a,b,c){
        this.a = a;
        this.b = b;
        this.c = c;
    }

    move(){
        console.log("i can move");
    }
}

//实例化一个类
let dog = new Animal(1,2,3);

console.log(dog.a,dog.b,dog.c);// 1 2 3 

class Human extends Animal{
    constructor(age){

//super 的意思是它会执行一个父类的构造函数，然后你可以在这里
//面给父类的构造函数赋值。你可以给它三个参数，你也可以什么都不
//给，但是你要执行一下 super 这个函数让父类的构造函数执行一下
//就可以了

        super();
        this.age= age;
    }

    //你可以覆盖掉父类的方法
    move(){
        console.log("i can run");
    }
}

let jim = new Human("18");
console.log(jim.age);//18
console.log(jim.a);//undefined 这里就是说他已经继承了父类的属性，但是你并没有对其初始化
jim.move();// i can run

8.模块化

ES6 模块化规范

(a.js)
//import 后面的这个变量是用来接受你导入的模块的默认导出值的，你可以自定义不同的名字,花括号就是用来拿到 export 里面导出的内容的，花括号里面名字必须和 export 里面的名字一样
import fnnn,{fn1,fn2} from "./b.js";


fn1();//fn1
fn2();//fn2

(b.js)

function fn1(){
    consolo.log("fn1");
}`

function fn2(){
    console.log("fn2");
}

//export 这是 ES6 的模块化规范里面用来暴露出口的关键字
export {
    fn1,
    fn2
}

export default function fn(){
    console.log("fn from module b");
}

commonJS 的模块化规范

const fnnn = require("./b.js");

fnnn.fn1();//fn1
fnnn.fn2();//fn2

(b.js)

function fn1(){
    consolo.log("fn1");
}`

function fn2(){
    console.log("fn2");
}

module.exports = {
    fn1,
    fn2
}