ES6

ES6新特性

学习自黑马传智播客
现在使用主流前端框架中，如ReactJS、Vue.js、angularjs等，都会使用到ES6的新特性，作为一名高级工程师而
言，ES6也就成为了必修课。

了解ES6

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

什么是ECMAScript？

前端的发展历程：
web1.0时代：

• 最初的网页以HTML为主，是纯静态的网页。网页是只读的，信息流只能从服务的到客户端单向流通。开发人员也只关心页面的样式和内容即可。

web2.0时代：

• 1995年，网景工程师Brendan Eich花了10天时间设计了JavaScript语言。
• 1996年，微软发布了JScript，其实是JavaScript的逆向工程实现。
• 1997年，为了统一各种不同script脚本语言，ECMA（欧洲计算机制造商协会）以JavaScript为基础，制定了
  ECMAscript 标准规范。JavaScript和JScript都是 ECMAScript 的标准实现者，随后各大浏览器厂商纷纷实现了
  ECMAScript标准。

所有，ECCMAScript是浏览器脚本语言的规范，而各种我们熟知的js语言，如JavaScript则是规范的具体实现。

ECMAScript的快速发展

而后，ECMAScript就进入了快速发展期。

• 1998年6月，ECMAScript 2.0 发布。
• 1999年12月，ECMAScript 3.0 发布。这时，ECMAScript 规范本身也相对比较完善和稳定了，但是接下来的事
  情，就比较悲剧了。
• 2007年10月。。。。ECMAScript 4.0 草案发布。
  这次的新规范，历时颇久，规范的新内容也有了很多争议。在制定ES4的时候，是分成了两个工作组同时工作
  的。
  1. 一边是以 Adobe, Mozilla, Opera 和 Google为主的 ECMAScript 4 工作组。
  2. 一边是以 Microsoft 和 Yahoo 为主的 ECMAScript 3.1 工作组。

ECMAScript 4 的很多主张比较激进，改动较大。而 ECMAScript 3.1 则主张小幅更新。最终经过 TC39 的会
议，决定将一部分不那么激进的改动保留发布为 ECMAScript 3.1，而ES4的内容，则延续到了后来的
ECMAScript5和6版本中

• 2009年12月，ECMAScript 5 发布。
• 2011年6月，ECMAScript 5.1 发布。
• 2015年6月，ECMAScript 6，也就是 ECMAScript 2015 发布了。 并且从 ECMAScript 6 开始，开始采用年号来
  做版本。即 ECMAScript 2015，就是ECMAScript6。
• 2016年 6月，小幅修订的《ECMAScript 2016标准》 (简称 ES2016)如期发布， 这个版本可以看作是 ES6.1版，
  因为两者的差异非常小(只新增了数组实例的 includes 方法 和指数运算符)，基本上可以认为是同 一个标准 。
• 2017 年 6 月发布了ES2017 标准。

因此， ES6 既是一个历史名词，也是一个泛指，含义是 5.1 版本以后的 JavaScript 的下一代 标准，涵盖了 ES2015、
ES2016、 ES2017 等，而 ES2015 则是正式名称，特指当年发布的正式版本的语言标准。

let和const命令

之前，我们写的js定义变量的时候，只有一个关键字：var
var 有一个问题，就是定义的变量会莫名其妙成为全局变量。

for(var i = 0; i < 5; i++){
 console.log(i);
  }
  console.log("循环外:"+i)

运行打印的结果如下

可以看出，在循环部也可以获取到变量i的值，显然变量i的作用域范围太大了，在做复杂页面时，会带来很大的问题。

let
let所声明的变量，只在let命令所在的代码块内有效。
我们把刚才的var改成let试试：

for(let i = 0; i < 5 ; i++){
console.log(i);
}
console.log("循环外" + i)

结果：

这样，就把变量的作用域控制在了循环内部。

const
const声明的变量是常量，不能被修改，类似于java中final关键字。

const  a = 1;
console.log("a = " , a);
//给a重新赋值
a = 2;
console.log("a = " , a);

可以看到，变量a的值是不能修改的。

字符串扩展

在es6中，为字符串扩展了几个新的api：

• includes（）：返回布尔值，表示是否找到参数字符串。
• startswith（）：返回布尔值，表示参数字符串是否在原字符串头部。
• endswith（）： 返回布尔值，表示参数字符串是否在原字符串的尾部。
  测试：

let str = "hello heima";
    console.log(str,"中是否包含了hiema",str.includes("hiema"));
    console.log(str,"中是否包含了baima",str.includes("biama"));

    console.log(str,"中是否已h开头-》",str.startsWith("h"));
    console.log(str,"中是否已a开头——》",str.startsWith("a"));

    console.log(str,"中是否已a结束——》",str.endsWith("a"));
    console.log(str,"中是否已h结束--》",str.endsWith("h"))

结果：

字符串模板
ES6中提供了`来作为字符串模板标记。

let  str = `hello
    itheima itcast`;
    console.log(str)

解构表达式

比如一个数组；

let arr = [ 1 , 2 ,3]

之前，如果取其中的值，只能通过角标

let arr = [ 1 ,2 ,3];
    const [x,y,z] = arr;//将每个位置对应进行取数
    console.log(x,y,z) ;
    const[a] = arr;
    console.log(a);

对象解构

const person = {
        name:"jack",
        age:21,
        language:['java','js','css']
    }
    const {name,age,language} = person;
    console.log(name);
    console.log(age);
    console.log(language);

• {name：n}：name是person中的属性名，冒号后面的n是解构后要赋值给的变量。

函数优化

在ES6中，对函数的操作做了优化，使我们在操作更加便捷。

函数参数默认值

在ES6以前，我们无法给一个函数参数设置默认值，只能采用变通也法：

function add(a,b) {
//判断b是否为空，为空就给默认值1
        b = b || 1;
        return a+b;
    }
//传一个参数
       console.log(add(10));

现在可以这么写：

   function add(a,b = 1) {
return a + b;
    }
    console.log(add(10));

箭头函数

ES6 中定义函数的简写方式：
一个参数时：

 let print = function (obj) {
  console.log(obj);
 }
 //简写为：
  let print2 = obj => console.log(obj);

多个参数：

//俩个参数的情况
let sum = function (a,b) {
return a + b;
}
//简写为：
let sum2 = (a,b) => a+b;

没有参数：

//没有参数的时候
let sayHello = () => console.log("hello")!

代码不止一行，可以用{}括起来。

let sum3 = (a,b)=>{
     return a + b;
 }
  //多行，没有返回值
  let sayhello = () => {
     console.log("hello!");
     console.log("hello!");
     
  }    
  sayhello();

对象的函数属性简写

比如一个peison对象，里面有个eat方法：

let  person = {
     name: "jack",
     //以前:
     eat: function (food) {
        console.log(this.name+"再吃"+food);
     },
     //箭头函数版：
     eat2: food => console.log(person.name+"再吃"+food),//这里拿不到this
     //简写版：
     eat3(food){
         console.log(this.name+"再吃"+food);
     }

箭头函数结合结构表达式

比如有一个函数

 const  person = {
      name:"jack",
      age:21,
      language: ['java','js','css']
  }
  function hello(person) {
    console.log("hello,"+person.name)
  }

如果用箭头函数和解构表达式

  let hi =({name})=>console.log("hello"+name);
  hi(person);

map和reduce

ES6中，数组新增了map和reduce方法。

map

map(): 接收一个函数，将原数组中的所有元素用这个函数处理后放入新数组返回。
举个例：有一个字符串数组希望转为int数组。

let arr = ['1','2','3'];
  console.log(arr);

  let newArr = arr.map(s => parseInt(s));
  console.log(newArr)

reduce
reduce():接收一个函数（必须）和一个初始值（可选），该函数接收俩个参数：

• 第一个参数是上一次reduce处理的结果
• 第二个参数是数组中要处理的下一个元素

reduce() 会从左到右依次把数组中的元素用reduce处理，并把处理的结果作为下次reduce的第一个参数。如果是
第一次，会把前两个元素作为计算参数，或者把用户指定的初始值作为起始参数
举例：

const arr= [1,20,-5,3];

没有初始值：

指定初始值：

扩展运算符

扩展运算符（spread）是三个点（…），将一个数组转化为用逗号分隔的参数序列。
用自己理解：将数组进行去掉括号（不完全这个道理）。

 console.log(...[1,2,3]);//1,2,3
  console.log(1,...[2,3,4],5);//1 2,3,4,5
  
  function add(x,y) {
      return x+y;
  }
  let number = [1,2];
  console.log(add(...number));//3
  
  //数组合并
   let arr = [...[1,2,3],...[4,5,6]];
   console.log(arr);//[1,2,3,4,5,6]
   
   //与结构表达式结合
   const [first,...rest] = [1,2,3,4,5];
   console.log(first,rest)//1 [2,3,4,5]
       
    //将字符串转化为数组
    console.log([...'hello'])  //["h","e","l","l","o"] 

Promise

所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是异步操作）的结果。从语法上说，Promise是一个对象，从它可以获取异步操作的信息。Promise提供统一的API，各种异步操作都可以用同样的方法进行处理。
我们可以通过Promise的构造函数来创建Promise对象，并在内部封装一个异步执行的结果。

const promise = new Promise(function (resolve, reject) {
      //...执行异步操作
      if (/*异步操作成功*/){
          resolve(value);//调用resolve，代表Promise将返回成功的结果
      }else{
          reject(error);//调用reject，代表Promise会返回失败结果
      }

  })

这样，在promise中就封装一段异步执行的结果。

如果需要等待异步完成，可以通过promise的then方法来实现语法：

promise.then(function(value){ // 异步执行成功后的回调 });

如果想要处理promise异步执行失败的事件，还可以跟上catch：

promise.then(function(value){ // 异步执行成功后的回调 }).catch(function(error){ // 异步执行失败后的回调 })

示例：

const promise = new Promise(function (resolve, reject) {
     //这里我们用定时任务模拟异步
      setTimeout(()=>{
          const num = Math.random();
          //随机返回成功或失败
          if (num <0.5){
             resolve("成功！num"+num);
          }else {
              reject("出错了！num"+num)
          }
      },300)
  })
  let msg = "ss";
       //调用promise
  promise.then(function (msg) {
        console.log(msg);
       }).catch(function (msg) {
          console.log(msg);
       })

set和map

ES6提供了Set和Map的数据结构。
Set，本质与数组类似。不同在于Set中只能保存不同元素，如果元素相同会被忽略。和java中的Set集合非常相似。
构造函数：

  //Set构造函数可以接收一个数组或空
       let  set = new Set();
       set.add(1);//[1]
       //接收数组
       let set2 = new Set([2,3,4,5,5]);//得到[2,3,4,5]

方法：

set.add(1);//添加
set.clear();//清空
set.delete(2);//删除指定元素
set.has(2);//判断是否存在
set.forEach(function(){});//遍历元素
set.size;//元素个数。是属性，不是方法。

map，本质是与Object类似的结构。不同在于，Object强制规定key只能是字符串。而map结构的key可以是任意对象。即：

• object是<string,object>集合
• map是<object,object>集合

构造函数：

 //map接收一个数组，数组中的元素是键值对数组
   const map = new Map([
           ['key1','value'],
           ['key2','value2'],
   ])
   //或者接收一个set
   const set = new Set([
       ['key1','value1'],
       ['key2','value2'],
   ])  
   const map2 = new Map(set);
   //或者其它map
   const map3 = new Map(map); 

方法：

map.set(key,value);//添加
map.clear();//清空
map.delete(key);//删除指定元素
map.has(key);//判断是否存在
map.forEach()//遍历元素
map.size; // 元素个数。是属性，不是方法  map.values() //获取value的迭代器  map.keys() //获取key的迭代器 
map.entries() //获取entry的迭代器 用法：
for (let key of map.keys()) {
   console.log(key);
 }
  或:
 console.log(...map.values()); //通过扩展运算符进行展开

class（类）的基本语法

JavaScript语言的传统方法是通过构造函数定义并生成新对象。ES6中引入class概念，通过calss关键字定义类。
基本用法：

 class User{
        constructor(name,age = 20) {//构造函数
            this.name = name;//添加属性并赋值
            this.age = age;
        }
        sayHello(){//定义方法
            return "hello";
        }
        static isAdult(age){//静态方法
            if (age >= 18){
                return "成年人";
            }
            return "未成年人";
        }
    }
    let user = new User("张三");
    //测试
    console.log(user);//User{name：张三，age：20
    console.log(user.sayHello());//hello
    console.log(user.isAdult(20));//成年人

类的继承：

    class User{
        constructor(name,age = 20) {//构造函数
            this.name = name;//添加属性并赋值
            this.age = age;
        }
        sayHello(){//定义方法
            return "hello";
        }
        static isAdult(age){//静态方法
            if (age >= 18){
                return "成年人";
            }
            return "未成年人";
        }
    }
    class Zhangsan extends User{
        constructor() {
            super("张三",30);//如果是父类中的构造方法参数，那么子类必须通过super调用父类的构造方法
            this.address = "上海";//设置子类中的属性，位置必须处于super下面
        }
    }
    let user = new User("张三");
    //测试
    console.log(user);//User{name：张三，age：20
    console.log(user.sayHello());//hello
    console.log(user.isAdult(20));//成年人

Generator函数

Generator函数是ES6提供的一种异步编程解决方案，语法行为与传统函数完成不同。
Generator函数有俩个特征：一是function命令与函数名之间有一个星号：二是函数体内部使用yeild吾句定义不同的内部状态。
用法：

function* hello() {
        yield "hello";
        yield "world";
        return "done";
 }
  let  h = hello();
 console.log(h.next()); //{value: "hello",done:false
 console.log(h.next()); //{value: "world",done:false
 console.log(h.next()); //{value: "done",done:true
 console.log(h.next()); //{value: "undefined",done:true

可以看到，通过hello（）返回的h对象，每调用一次next（）方法返回一个对象，该对象包含了value值和done状态。直到遇到return关键字，或者函数执行完毕，这个时候返回的状态为true，表示执行结束了。

for…of循环

通过for…of可以循环遍历Generator函数返回的迭代器。
用法：

function* hello() {
        yield "hello";
        yield "world";
        return "done";
 }
 for (let obj of hello()){
     console.log(obj);
 }

修饰器（Decorator）

修饰器（Decorator）是一个函数，用来修饰类行为。ES2017引入这项功能，目前Babel转换器已经支持。
使用

 @T //通过@符号进行引用该方法，类似java中的注解
  class User{
      constructor(name,age = 20) {
          this.name = name;
          this.age = age;
      }
  }
  function T(target) {//定义一个普通的方法
      console.log(target);//target对象为修饰的目标对象，这里是user对象
      target.conuntry = "中国";//为User类添加一个静态属性conutry

  }
  console.log(User.country);

原因是，在ES6中，并没有支持该用法，在ES2017中才有，所以我们不能直接运行了，需要进行编码后再运行。
转码的意思是：将ES6或ES2017转为ES5执行。类似这样：

//转码前
  input.map(item => item + 1);
  //转码后
  input.map(function (item) {
      return item + 1;
  })

转码器

• Babel（babeljs.io）是一个广为使用的ES6转码器，可以将ES6代码转为ES5代码，从而在游览器或其他环境执行。
• Google公司的Traceur转码器Gigthub.com/google/traceur-compiler,也可以将ES6代码转为ES5的代码。
  这2款都是很优秀的转码工具，但我们使用阿里的开源企业级react框架：UmiJS.

了解UmiJS

官网

UmiJS读音：（乌米）
特点：

• 插件化
  - umi的整个生命周期都是插件化的，甚至其内部实现都是由大量插件组成，比如pwa、按需加载、一键切换preact、一键兼容ie9等等，都是由插件实现。

• 开箱即用
  - 你只需一个umi依赖就可启动开发，无需安装react、preact、webpack、react-router、babel、jest等等。

• 约定式路由
  - 类 next.js 的约定式路由，无需再维护一份冗余的路由配置，支持权限、动态路由、嵌套路由等等。

部署安装

#首先，需要安装Node.js
#安装完成后，通过node -v 命令查看其版本号
node -v
#接下来，开始安装yarn，其中tyarn使用的是npm.taobao.org的源，速度要快一些
#可以把yarn看做了优化了的npm
npm i yarn tyarn -g #-g 是指全局安装
tyarn -v #进行测试，如果能够正常输出版本信息则说明安装成功了
#下面开始安装umi
tyarn global add umi
umi #进行测试
#通过初始化命令将生成package.json文件，它是 NodeJS 约定的用来存放项目的信息和配置等信息的文件。
tyarn init -y
#通过umi命令创建index.js文件
umi g page index #可以看到pages下创建好了index。js和index.css文件
#将下面内存拷贝到index.js文件中进行测试 
@T //通过@符号进行引用该方法，类似java中的注解
class User{
  constructor(name,age = 20) {
    this.name = name;
    this.age = age;
  }
}
function T(target) {//定义一个普通的方法
  console.log(target);//target对象为修饰的目标对象，这里是user对象
  target.conuntry = "中国";//为User类添加一个静态属性conutry

}
console.log(User.country);
#通过命令行启动umi的后台服务，用于本地开发
umi dev
#通过游览器进行访问，http://localhost:8000/，查看效果
#值得注意的是，这里访问的是umi的后台服务，不是idea提供的服务

查看编码后的js文件：

可以看到，将我们写的代码进行的编码。

模块化

什么是模块化
模块化就是把代码进行拆分，方便重复利用。类似java中的导包：要使用一个包，必须先导包。而js中没有包的概念，换来的是模块。
模块功能主要由俩个命令构成：exprot和import。

• export命令用于规定模块的对外接口。
• import 命令用于导入其他模块提供的功能。
  export
  比如我定义一个js文件:Util.js，里面有一个Util类：

class Util{
      static sum = (a,b) => a+b;
  }
  //导出该类
    export default Util;

import
使用export命令定义模块的对外接口以后，其他JS文件就可以用过import命令加载这个模块。
例如我要使用上面导出的Util：

//Index.js
    //导入Util类
    import Util from './Util'
    //使用Util中的Sum方法
    console.log(Util.sum(1,2));