一、ES6基本语法

ES标准中不包含 DOM 和 BOM的定义，只涵盖基本数据类型、关键字、语句、运算符、内建对象、内建函数等通用语法。

本部分只学习前端开发中ES6的必要知识，方便后面项目开发中对代码的理解。

二、let声明变量

与我们的JavaScript中var声明变量有什么区别？

🔶 作用域不同

{
    var a = 0; // var声明的变量是全局变量
    let b = 0; // let声明的变量是局部变量
}
console.log(a);
console.log(b); //b is not defined：b没有定义

🔶 声明次数不同

// var可以声明多次
// let只能声明一次
var m = 1;
var m = 2;
let n = 3;
let n = 4; //SyntaxError: Identifier 'n' has already been declared（语法错误：n已经声明过了）

console.log(m);
console.log(n);

🔶 声明与使用顺序不同

// var 声明的变量会全局存储
// let 声明的变量只能在执行后才存储

console.log( x ); //没有报错，输出：undefined
var x = "苹果";

console.log(y); //y is not defined（y没有定义）
let y = "香蕉";

三、const声明常量

const 声明常量,为只读变量

1. 一旦声明之后，其值是不允许改变的

2. 一但声明必须初始化，否则会报错 SyntaxError: Missing initializer in const declaration（语法错误，声明常量丢失了初始化）

const PI = 3.14;
PI = 3.1415; //Assignment to constant variable.（声明的是常量）

console.log( PI );

四、解构赋值

解构赋值是对赋值运算符的扩展

它是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值。

解构，顾名思义，就是将集合型数据进行分解，拆分，把里面的值逐一遍历获取

在代码书写上简洁且易读，语义更加清晰明了；也方便了复杂对象中数据字段获取

4.1 数组解构

var arr = [1,2,3];

// 传统的js
let a = arr[0];
let b = arr[1];
let c = arr[2];
console.log(a,b,c);

//es6的解构
var [x,y,z] = arr;
console.log(x,y,z);

4.2 对象解构

var user = {
    username : "吕布",
    weapon:"方天画戟",
    horse:"赤兔马"
};

// 传统的js
let mingzi = user.username;
let wuqi = user.weapon;
let zuoji = user.horse;
console.log("姓名:"+mingzi+",武器:"+wuqi+",坐骑:"+zuoji);

//es6的解构
let {username,weapon,horse} = user; // 注意：解构的变量名必须是对象中的属性
console.log("姓名:"+username+",武器:"+weapon+",坐骑:"+horse);

五、 模板字符串

模板字符串相当于加强版的字符串，用反引号" ` "，除了作为普通字符串，还可以用来定义多行字符串，还可以在字符串中加入变量和表达式。

5.1 定义多行字符串

let str = `hello,
你俩在哪呢？
心情不好，出来喝点啊！`;

console.log(str)

5.2 字符串插入变量和表达式

let name = `吕布`;
let age = 24;

// 传统的拼接字符串
var info1 = "我叫:"+ name +",我今年"+age+"岁！";
console.log(info1);

// es6的拼接字符串
var info2 = `我叫:${name},我明年${age+1}岁！`;
console.log(info2);

5.3 字符串中调用函数

function test(){
    return "吃喝玩乐";
}

let str = `悲催的人生，从${test()}开始`;
console.log( str );

六、声明对象简写

let name = `吕布`;
let age = 28;

//传统
let user1 = {
name : name,
age : age
};
console.log(user1);

//es6新语法中的简写
let user2 = {name,age};
console.log(user2);

七、定义方法简写

// 传统
let user1 = {
    say : function(){
    console.log("大家好！");
    }
};

user1.say();

//es6
let user2 = {
    say(){
        console.log("大家好啊！");
    }
};

user2.say();

八、对象拓展运算符

拓展运算符 {...} 将参数对象中所有可以遍历的属性拿出来，然后拷贝给新对象。

8.1 拷贝对象(深拷贝)

let user1 = {
    name:"项羽",
    age:34
};

let user2 = {...user1}; // 深拷贝（克隆）

console.log(user1);
console.log(user2);

8.2 合并对象

let user1 = {
    name:"项羽",
    age:34
};

let user2 = {head:"诸葛亮"};

let user = {...user1,...user2};

console.log( user );

九、函数的默认参数

function test(name , age = 18){
    console.log(`我叫${name}，我今年${age}岁`);
}

test("吕布",33); //我叫吕布，我今年33岁
test("貂蝉"); //我叫貂蝉，我今年18岁
test("关羽",null); //我叫关羽，我今年null岁
test("马超",""); //我叫马超，我今年岁
test("张飞",undefined); //我叫张飞，我今年18岁

十、函数的不定参数

function test( ...arg ){
    console.log(`传入了${arg.length}个参数`);
    for(var i = 0 ;i<arg.length;i++){
        console.log(arg[i]);
    }
}

test(1);
test(1,2);
test(1,2,3,4,5,6);
test();
test("郭","嘉",28);

十一、箭头函数

// 传统
var f1 = function(a){
    return a*10;
}

console.log( f1(10) );

// es6
var f2 = a=>a*10;
console.log( f2(20) );

// 当箭头函数一个参数时，（）可以省略
// 当箭头函数没有参数或者有多个参数，要用（）括起来
// 当箭头函数的函数体有多行语句，用｛｝括起来，表示代码块
// 当只有一条语句，并且需要返回时，可以省略｛｝，结果会自动返回

var f3 = (a,b) => {
    let sum = a+b;
    return sum;
}console.log( f3(3,7) );// 可以将f3进行简化 var f4 = (a,b) => a + b; console.log( f3(11,22) );

十二、Promise

嵌套噩梦：

使用promise解决掐架找人的噩梦：

找到一个人成功后，再继续找下一个人。逐渐形成了“队伍”；组建队伍的过程中，如果找某个人失败了，则“队伍”失败。其实有点类似“击鼓传花”的游戏，一个成功拿到花之后，才能传递给下一个人，依次类推！

传统方法

setTimeout(()=>{
    console.log(1);
    setTimeout(()=>{
        console.log(2);
        setTimeout(()=>{
            console.log(3);
            setTimeout(()=>{
                console.log(4);
            },1000);
        },1000);
    },1000);
},1000);

使用promise

next = n =>
    //Promise的构造函数接收一个参数，是函数，
    //并且传入两个参数：resolve(异步操作执行成功后的回调函数)，reject(异步操作执行失败后的回调函数)
    new Promise(function(resolve, reject) {
        setTimeout(function() {
            resolve(n);
       }, 1000);
    });

next(1)
    .then(res => { // 成功
        console.log(res);
        return next(2); //在then方法中调用的next方法，一定要用return ，否则不会通过resolve把数据往下传递
    })
    .then(res => {
        console.log(res);
        return next(3);
    })
    .then(res => {
        console.log(res);
    })
    .catch(() => { //处理失败：catch方法的第二个参数是失败的回调
        console.log("出错啦！");
    });

十三、模块化

如果在a.js文件中定义了5个方法，现在b.js文件中想使用a中的5个方法，怎么办？

java语言的做法是import引入之后，就能使用了。es6的模块化，就是这个过程将一个js文件声明成一个模块导出之后，另一个js文件才能引入这个模块，每一个模块只加载一次（是单例的）， 若再去加载同目录下同文件，直接从内存中读取。

13.1 传统的模块化

user.js

function addUser(name){
    return `保存${name}成功！`;
}

function removeUser(id){
    return `删除${id}号用户！`;
}

// 声明模块并导出
// module.exports={
// save:addUser,
// delete:removeUser
// }

// 声明模块导出的简写
module.exports={
    addUser,
    removeUser
}

test.js

let user = require("./user.js"); //引入user模块

console.log( user );

let result1 = user.addUser("吕布");
let result2 = user.removeUser(101);

console.log(result1);
console.log(result2);

13.2 ES6的模块化

user.js

let name = "老孙";
let age = 66;
let fn = function(){
    return `我是${name}!我今年${age}岁了！`;
}

// 声明模块并导出
export{
    name,
    age,
    fn
}

test.js

import {name,age,fn} from "./user.js"

console.log(name);
console.log(age);
console.log(fn);

运行test.js，报错：SyntaxError: Unexpected token { （语法错误，在标记{的位置 ）

原因是node.js并不支持es6的import语法，我们需要将es6转换降级为es5！