ECMAScript6简介

ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言

ECMAScript和JavaScript的关系

要讲清楚这个问题，需要回顾历史。
1996 年 11 月，JavaScript 的创造者 Netscape 公司，决定将 JavaScript 提交给标准化组织ECMA，希望这种语言能够成为国际标准
ECMA 发布 262 号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为 ECMAScript，这个版本就是 1.0 版。
因此，ECMAScript （宪法）和 JavaScript（律师）的关系是，前者是后者的规格，后者是前者的一种实现

ES6与ECMAScript 2015的关系

2011 年，ECMAScript 5.1 版发布后，就开始制定 6.0 版了。因此，ES6 这个词的原意，就是指JavaScript 语言的下一个版本。
ES6 既是一个历史名词，也是一个泛指，含义是 5.1 版以后的 JavaScript 的下一代标准，涵盖了ES2015、ES2016、ES2017 等等

ES6基本语法

ES标准中不包含 DOM 和 BOM的定义，只涵盖基本数据类型、关键字、语句、运算符、内建对象、内建函数等通用语法。
本部分只学习前端开发中ES6的必要知识，方便后面项目开发中对代码的理解。

let声明变量

与我们的JavaScript中var声明变量有什么区别？
- 作用域不同
- 声明次数不同
- 声明与使用顺序不同

const声明常量

const 声明常量,为只读变量

一旦声明之后，其值是不允许改变的
一但声明必须初始化，否则会报错 SyntaxError: Missing initializer in const declaration（语法错误，声明常量丢失了初始化）

解构赋值

解构赋值是对赋值运算符的扩展
它是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值。
解构，顾名思义，就是将集合型数据进行分解，拆分，把里面的值逐一遍历获取
在代码书写上简洁且易读，语义更加清晰明了；也方便了复杂对象中数据字段获取。

数组解构

var arr = [1,2,3];
var [x,y,z] = arr; 
console.log(x,y,z);
复制代码

对象解构

var user = { 
    username : "吕布", 
    weapon:"方天画戟", 
    horse:"赤兔马" 
};
let {username,weapon,horse} = user; // 注意：解构的变量名必须是对象中的属性 
console.log("姓名:"+username+",武器:"+weapon+",坐骑:"+horse);
复制代码

模板字符串

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

声明对象简写

定义对象的时候，可以用变量名作为属性名

let name = `吕布`; 
let age = 28;
let user = {name,age}; 
console.log(user2);
复制代码

定义方法简写

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

user2.say();
复制代码

对象拓展运算符

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

拷贝对象(深拷贝)

科幻电影中的一滴血，就可以制作出一个完全一模一样的克隆人

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

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

console.log(user1); 
console.log(user2);
复制代码

合并对象

吞噬合并（两个对象合并成一个对象）

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 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

用来解决回调函数的嵌套噩梦

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("出错啦！"); 
    });
复制代码