ECMAScript 6新特性

ECMAScript 6 简介

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

ECMAScript 和 JavaScript 的关系

ECMAScript 是浏览器脚本语言的规范，而各种我们熟知的JS语言，如 JavaScript 则是规范的具体实现。
另外，ECMAScript 的实现还有 Jscript 和 ActionScript。

新特性

声明变量的关键字：const 和 let

JavaScript ES6中引入了另外两个声明变量的关键字：const和let。在ES6中，我们将很少能看到var了。
ES6声明变量的六种方法：
ES5只有两种声明变量的方法：var和function
ES6除了添加let和const，还有另外两种声明变量的方法：import命令和class命令。所以，ES6一共有6种声明变量的方法。

let关键字：
let声明的变量只有所在的代码块有效。

// var 声明的变量往往会越域
// let 声明的变量有严格的局部作用域
{
    var a = 1;
    let b = 2;
}
console.log(a); // 1
console.log(b); // ReferenceError: b is not defined

不存在变量的提升：使用let声明的变量要在声明后使用，否则会报错。

// var 定义的变量，存在变量的提升。
console.log(a);   //undefined
var a = 10; 
     
// let 定义的变量，不存在变量的提升，所以下面的代码会报错
console.log(b);  // ReferenceError: b is not defined
let b = 20;

const关键字：
const声明一个只读的常量。一旦声明，常量的值不能被改变。
const声明一个变量，就必须立即初始化，不能留到以后再赋值。
需注意： 若这个变量是数组或者对象的话，它里面持有的内容是可以被更新的。
因为使用const声明一个复合类型的数据(主要是对象和数组)，变量名不指向数据，而是指向数据的地址。

// 这种写法是不可行的
const str = 'hello world';
str = 'hello kitty';     //TypeError: Assignment to constant variable

//这种写法是可行的
const arr = [1,2,3];
arr[0]=9;

解构表达式

在ES6中，可以使用解构语法从数组和对象提取值并赋值给独特的变量。

解构数组：
[]表示被解构的数组，x、y、z表示要将数组中的值存储在其中的变量，在解构数组时还可以忽略值， 例如const[x,,z]=arr，忽略y坐标。

let arr = [1, 2, 3];
// ES6 之前，获取数组中的值，只能通过角标
const [x, y, z] = arr; // x y z 将与 arr 中的每个位置对应来取值
console.log(x, y, z);

解构对象：
{ } 表示被解构的对象，name、age、language 表示要将对象中的属性存储到其中的变量。

let person = {
    name: "Tom",
    age: 22,
    language: ['Java', 'css']
}
// 解构表达式获取值，将 person 里面每一个属性和左边对应赋值
let { name, age, language } = person;
console.log(name, age, language);

// 扩展：如果想要将 name 的值赋值给其他变量，可以在 name 后面加冒号后再追加变量名
const { name: nn, age, language } = person;
console.log(nn); 

解构字符串：

字符串扩展

let str = "hello.vue";
console.log(str.startsWith("hello")); // true
console.log(str.endsWith(".vue")); // true
console.log(str.includes("e")); // true

字符串模板

传统的JavaScript语言，输出模板通常是用字符串拼接起来的，这种写法相当繁琐不方便，于是ES6引入了模板字符串来解决这个问题。

模板字符串(template string)是增强版的字符串，用反引号(`)标识。可以当做普通的字符串使用。也可以用来定义多行字符串，或者在字符串中嵌入变量。

模板字符串中，将变量名写在 ${ } 之中，表示获取变量值，${ } 还可以调用函数和放入 JavaScript 表达式。调用函数：${fn()}，执行表达式：${age + 10}。

// 定义多行字符串
let str = `<div>
                <span>hello world</span>
            </div>`;
console.log(str);
// 字符串中嵌入变量，变量名写在 ${} 中
let name = "Tom", age = 22;
let info = `我是${name}，年龄${age}`;
console.log(info);
// 模板字符串中还能调用函数
function fn() {
    return "hello world";
}
let foo = `foo ${fn()} bar`;
console.log(foo);

函数优化

函数参数默认值：

// 直接给参数写上默认值，没有传就会自动使用默认值
function add(a, b = 2) {
    return a + b;
}
console.log(add(10));

函数不定参数：

function fun(...values) {
    for (const value of values) {
        console.log(value);
    }
}
fun(1, 2);
fun(1, 2, 3);

箭头函数：

let print = obj => console.log(obj);
print("hello");

let sum = (a, b) => {
    return a + b;
}
console.log(sum(10, 20));

箭头函数+解构：
参数为一个对象时，参数中可以使用解构表达式获取对象属性值。

        let person = {
            name: "Tom",
            age: 22,
            language: ['Java', 'css']
        }
        // 参数传入了 person 对象，并使用了解构表达式获取 person 中的 name 属性值
        let fun = ({ name }) => console.log("hello, " + name);
        fun(person);

对象优化

Object 新增的API：

let person = {
    name: "Tom",
    age: 22,
    language: ['Java', 'css']
}
console.log(Object.keys(person)); // ["name", "age", "language"]
console.log(Object.values(person)); // ["Tom", 22, Array(2)]

声明对象简写：

let age = 22;
let name = "Tom";
let person1 = { age: age, name: name };
// 或者
let person2 = { age, name };
console.log(person2);

对象的函数属性简写：

let person = {
    name: "James",
    eat(food) {
        console.log(this.name + food);
    }
}
person.eat("Apple");

对象拓展运算符：

let person = {
    name: "James",
    age: 22
}
// 将 person 对象值深拷贝到 someone
let someone = { ...person };
console.log(someone.name);

let age = { age: 22 };
let name = { name: "James" };
// 合并对象，如果两个对象的字段名重复，后面对象字段值会覆盖前面对象的字段值
let person = { ...age, ...name };
console.log(person.name);

Promise

在 JavaScript 中，所有代码都是单线程的，也就是同步执行的。而 Promise 就为异步编程提供了一种解决方案。

基本用法：

const promise = new Promise((resolve, reject) => {
    // do something here ...
    if (success) {
        resolve(value); // fulfilled
    } else {
        reject(error); // rejected
    }
});

该构造函数接收两个函数作为参数，分别是resolve和reject。
当异步操作执行成功后，会将异步操作结果作为参数传入resolve函数并执行，此时 Promise 对象状态从pending变为fulfilled；
失败则会将异步操作的错误作为参数传入reject函数并执行，此时 Promise 对象状态从pending变为rejected；

接下来，通过then方法，分别指定resolved状态和rejected状态的回调函数。

promise.then(function(value) {
    // success
}, function(error) {
    // failure
});

then方法可以接收两个回调函数作为参数，第一个回调函数就是fulfilled状态时调用；第二个回调函数就是rejected时调用。这边的第二个参数是可选的，不一定要提供。

案例：
1、查出当前用户信息
2、按照当前用户的id查出他的课程
3、按照当前课程id查出分数
模拟请求的数据：

// 文件名：user.json
{
    "id": 1,
    "name": "zhangsan",
    "password": "123456"
}
// 文件名：user_corse_1.json
{
    "id": 10,
    "name": "chinese"
}
// 文件名：corse_score_1.json
{
    "id": 100,
    "score": 90
}

简单请求写法：

 $.ajax({
      url: "mock/user.json",
      success(data) {
          console.log("查询用户：", data);
          $.ajax({
              url: `mock/user_corse_${data.id}.json`,
              success(data) {
                  console.log("查询到课程：", data);
                  $.ajax({
                      url: `mock/corse_score_${data.id}.json`,
                      success(data) {
                          console.log("查询到分数：", data);
                      },
                      error(error) {
                          console.log("出现异常了：" + error);
                      }
                  });
              },
              error(error) {
                  console.log("出现异常了：" + error);
              }
          });
      },
      error(error) {
          console.log("出现异常了：" + error);
      }
  });

使用 Promise：

// 1、Promise可以封装异步操作
let p = new Promise((resolve, reject) => {
    //1、异步操作
    $.ajax({
        url: "mock/user.json",
        success: function (data) {
            console.log("查询用户成功:", data)
            resolve(data);
        },
        error: function (err) {
            reject(err);
        }
    });
});

p.then((obj) => {
    return new Promise((resolve, reject) => {
        $.ajax({
            url: `mock/user_corse_${obj.id}.json`,
            success: function (data) {
                console.log("查询用户课程成功:", data)
                resolve(data);
            },
            error: function (err) {
                reject(err);
            }
        });
    })
}).then((data) => {
    console.log("上一步的结果", data)
    $.ajax({
        url: `mock/corse_score_${data.id}.json`,
        success: function (data) {
            console.log("查询课程得分成功:", data)
        },
        error: function (err) {
        }
    });
});

封装请求：

function get(url, data) {
    return new Promise((resolve, reject) => {
        $.ajax({
            url: url,
            data: data,
            success: function (data) {
                resolve(data);
            },
            error: function (err) {
                reject(err);
            }
        })
    });
};

get("mock/user.json")
    .then((data) => {
        console.log("用户查询成功~~~:", data)
        return get(`mock/user_corse_${data.id}.json`);
    })
    .then((data) => {
        console.log("课程查询成功~~~:", data)
        return get(`mock/corse_score_${data.id}.json`);
    })
    .then((data) => {
        console.log("课程成绩查询成功~~~:", data)
    })
    .catch((err) => {
        console.log("出现异常", err);
    });