ES6新特性

什么是ES6

ECMA ->ECMAScript ->ES6 ->javaScript

ECMA

ECMA（European Computer Manufacturers Association）中文名称为欧洲计算机制

造商协会，这个组织的目标是评估、开发和认可电信和计算机标准。1994 年后该

组织改名为 Ecma 国际（简单来说这个组织就是来认可和制定标准的）

ECMAScript

ECMAScript 是由 Ecma 国际通过 ECMA-262 标准化的脚本程序设计语言（简单的说就是一种标准语言）

ECMA-262 标准

Ecma 国际制定了许多标准，而 ECMA-262 只是其中的一个；ECMA-262标准几乎每个几年就会发布一个新的版本更新了一些新的特性（ES6就是2015年发布的ECMA-262标准新的版本）

JavaScript

JavaScript语言是ECMAScript标准语言的一种实现方式

关键字

let 关键字和var关键字

• let 关键字一般用来声明局部变量
• var 关键字一般用来声明全局变量

const 关键字

• 用来声明常量，声明时必须要赋初始值
• 声明的常量一般大写
• 不允许重复声明
• 值不允许修改，但是当使用const 关键字声明对象或数组时，可以修改里面的数据（本质：只要没有修改声明的常量的地址就可以）

解构赋值

对声明的变量进行快速赋值

//数组解构赋值
const arr = ['关羽','花木兰','马超','夏侯惇']
let [a,b,c,d] = arr
console.log(a);
console.log(b);
console.log(c);
console.log(d);

//对象的解构赋值
const obj = {
  name:'张三',
  age:'22',
  hobbys:['学习','打游戏','看综艺']
} 
let {myName,myAge,myHobbys} = obj

模板字符串

模板字符串是增强版的字符串，用反引号（`）标识

特性：

• 拼接html解构字符串可以直接换行，省略了“+”号
• 可以获取字符串中的变量

//原来的拼接方式
let str1 = "<ul>" +
    "<li>关羽</li>" +
    "<li>张飞</li>" +
    "<li>刘备</li>" +
    "</ul>"

//es6新加的模板字符串
let str2 = `<ul>
              <li>于禁</li>
              <li>典韦</li>
              <li>夏侯惇</li>
              <li>夏侯渊</li>
			</ul>`

//变量拼接
let hero = '关羽';
let str3 = `${hero}是我最擅长的英雄！`

声明对象简写形式

es6允许在声明对象时，在大括号里面直接写入变量和函数

let name = '张三';
let change = function(){
  console.log('我是傻子!!');
}

const school = {
  name,
  change,
  improve(){
    console.log("你也是！");
  }
}

箭头函数

es6允许使用箭头函数来定义函数

//原来定义函数的方式
let fn = function () {

}

//使用箭头函数定义函数
let fn = (a,b) => {

}

注意：使用箭头定义函数

• 函数参数只有一个，小括号可省略
• 函数体只有一条执行语句，大括号可省略
• 箭头函数 this 指向声明时所在作用域下 this 的值
• 箭头函数不能作为构造函数实例化
• 不能使用 arguments

rest 参数

用于获取函数的实参，代替arguments

Promise

Promise 是 ES6 引入的异步编程的新解决方案。语法上 Promise 是一个构造函数，

用来封装异步操作并可以获取其成功或失败的结果。

使用Promise构造函数创建实例对象时，该构造函数需要接收一个函数（函数里面执行异步操作）作为参数，接收的函数带有两个函数类型的形参，并且能够通过调用这两个函数类型（形参）的方法来改变实例化的Promise对象的状态

• 初始化状态
• 成功状态（调用resolve 之后）
• 失败状态（调用reject 之后）

之后用实例化后的对象调用Promise 对象封装的then 方法，该方法根据实例化对象的状态来返回对应的结果；then 方法需要两个函数作为形参，每个函数也有一个形参，每个函数的形参就是返回的结果。

基本语法

<script>
  //实例化 Promise 对象
  //resolve
  //reject
  const p = new Promise(function(resolve, reject){
    setTimeout(function(){
      // let data = '数据库中的用户数据';
      // resolve
      // resolve(data);
      let err = '数据读取失败';
      reject(err);
    }, 1000);
  });

//调用 promise 对象的 then 方法
p.then(function(value){
  console.log(value);
}, function(reason){
  console.error(reason);
})

//Promise实例化对象，对象状态为失败时，也可以通过catch捕获失败信息
p.catch(function(reason){
  console.warn(reason);
});
</script>

Promise 封装ajax

封装原生ajax

<script>
  // 接口地址: https://api.apiopen.top/getJoke
  const p = new Promise((resolve, reject) => {
    //1. 创建对象
    const xhr = new XMLHttpRequest();

    //2. 初始化
    xhr.open("GET", "https://api.apiopen.top/getJ");

    //3. 发送
    xhr.send();

    //4. 绑定事件, 处理响应结果
    xhr.onreadystatechange = function () {
      //判断
      if (xhr.readyState === 4) {
        //判断响应状态码 200-299
        if (xhr.status >= 200 && xhr.status < 300) {
          //表示成功
          resolve(xhr.response);
        } else {
          //如果失败
          reject(xhr.status);
        }
      }
    }
  })

//指定回调
p.then(function(value){
  console.log(value);
}, function(reason){
  console.error(reason);
});
</script>

模块化

模块化语法

模块功能主要由两个命令构成：export 和 import

• export：用户规定模块的对外接口
• import：用于导入其他模块

export对外暴露接口的方式有三种：

• 分别暴露

  //a.js
  //分别暴露
  export let school = 'aynu';
  
  export function teach() {
      console.log("我在b站学习！");
  }
  

• 统一暴露

  //b.js
  //统一暴露
  let school = 'aynu';
  
  function findJob(){
      console.log("我准备去实习!!");
  }
  
  export {school, findJob};
  

• 默认暴露

  //c.js
  //默认暴露
  export default {
      school: 'aynu',
      change: function(){
          console.log("我凉了!!");
      }
  }
  

import引入其他外部模块

• 万能导入方式

  <script type="module">
    	//1. 通用的导入方式
    	import * as a from "./src/js/a.js";
  	import * as b from "./src/js/b.js";
  	import * as c from "./src/js/c.js";
  </script>
  

• 解构赋值形式

  <script type="module">
    	//2. 解构赋值形式
    	import {school, teach} from "./src/js/a.js";
  	//重名的可以引入后取别名
  	import {school as mtf, findJob} from "./src/js/b.js";
  	import {default as c} from "./src/js/c.js";
  </script>
  

• 简便形式（注意：这里的简便形式只适用于通过默认方式暴露接口的模块）

  <script type="module">
    //3. 简便形式  针对默认暴露
    import c from "./src/js/c.js";
  </script>
  

ES8新特性

async 函数

async 函数的返回值为 promise 对象，promise 对象的结果由 async 函数执行的返回值决定

<script>
  //async 函数
  async function fn(){
  // 返回一个字符串
  // return 'aynu';
  // 返回的结果不是一个 Promise 类型的对象, 返回的结果就是成功 Promise 对象
  // return;
  //抛出错误, 返回的结果是一个失败的 Promise
  // throw new Error('出错啦!');
  //返回的结果如果是一个 Promise 对象
  return new Promise((resolve, reject)=>{
    resolve('成功的数据');
    // reject("失败的错误");
  });
}

const result = fn();

//调用 then 方法
result.then(value => {
  console.log(value);
}, reason => {
  console.warn(reason);
})
</script>

await 函数

• await 必须写在 async 函数中
• await 右侧的表达式一般为 promise 对象
• await 返回的是 promise 成功的值
• await 的 promise 失败了, 就会抛出异常, 需要通过 try…catch 捕获处理
• await取代了Promise 对象中的then方法

<script>
  //创建 promise 对象
  const p = new Promise((resolve, reject) => {
    // resolve("用户数据");
    reject("失败啦!");
  })

// await 要放在 async 函数中.
async function main() {
  try {
    let result = await p;
    //
    console.log(result);
  } catch (e) {
    console.log(e);
  }
}
//调用函数
main();
</script>

async 和await 封装ajax

<script>
  // 发送 AJAX 请求, 返回的结果是 Promise 对象
  function sendAJAX(url) {
  return new Promise((resolve, reject) => {
    //1. 创建对象
    const x = new XMLHttpRequest();

    //2. 初始化
    x.open('GET', url);

    //3. 发送
    x.send();

    //4. 事件绑定
    x.onreadystatechange = function () {
      if (x.readyState === 4) {
        if (x.status >= 200 && x.status < 300) {
          //成功啦
          resolve(x.response);
        }else{
          //如果失败
          reject(x.status);
        }
      }
    }
  })
}

//promise then 方法测试
// sendAJAX("https://api.apiopen.top/getJoke").then(value=>{
//     console.log(value);
// }, reason=>{})

// async 与 await 测试  axios
async function main(){
  //发送 AJAX 请求
  let result = await sendAJAX("https://api.apiopen.top/getJoke");
  //再次测试
  let tianqi = await sendAJAX('https://www.tianqiapi.com/api/?version=v1&city=%E5%8C%97%E4%BA%AC&appid=23941491&appsecret=TXoD5e8P')

  //注意：上述写法会打破操作的“并行”，效率不高()
  let [a,b] = await Promise.all([result,tianqi])
  console.log(tianqi);
}
main();
</script>

注意：

• 使用async 声明的函数为异步函数，而这里的异步函数就是返回值为Promise 对象的函数