媒介

ES6 虽供应了许多新特征，但我们现实事情中用到频次较高并不多，依据二八轨则，我们应该用百分之八十的精神和时刻，好好专研这百分之二十中心特征，将会收到事半功倍的奇效！写文章不轻易，请人人多多支撑与关注！本文首发地点GitHub博客（含头脑导图）

一、开辟环境设置

这部份偏重引见：babel 编译ES6语法，怎样用webpack完成模块化。

1.babel

为啥须要babel？

ES6 供应了许多新特征，但并非一切的浏览器都可以圆满支撑。下图是各个浏览器对ES6兼容性一览表(以export为例)

由上图可知，有些浏览器关于ES6并非很友爱，针对 ES6 的兼容性题目，许多团队为此开辟出了多种语法剖析转换东西(比方babel，jsx，traceur 等)，可以把我们写的 ES6 语法转换成 ES5，相称于在 ES6 和浏览器之间做了一个翻译官。个中Babel是一个普遍运用的转码器，可以将ES6代码转为ES5代码，从而在现有环境实行。

怎样设置babel？

·首先要先装置node.js，运转npm init，然后会天生package.json文件
·npm install --save-dev babel-core babel-preset-es2015 babel-preset-latest
·建立并设置.babelrc文件//寄存在项目的根目录下，与node_modules同级
·npm install -g babel-cli
·babel-version

Babel的设置文件是.babelrc，寄存在项目的根目录下。该文件用来设置转码划定规矩和插件，详细内容以下：

//.babelrc文件
{
    "presets": ["es2015", "latest"],
    "plugins": []
}

考证设置是不是胜利

·建立./src/index.js
·内容：[1,2,3].map(item=>item+1）；
·运转babel./src/index.js

运转后获得以下部份，申明已胜利设置了babel

"use strict";
[1, 2, 3].map(function (item) {
  return item + 1;
});

2.webpack

为啥要运用WebPack？

当今的许多网页实在可以看作是功用雄厚的运用，它们拥有着庞杂的JavaScript代码和一大堆依靠包，模快化东西就应运而生了，个中webpack 功用壮大深受人们喜欢。
Webpack的事情体式格局是：把你的项目看成一个团体，经由历程一个给定的主文件（如：index.js），Webpack将从这个文件最先找到你的项目的一切依靠文件，运用loaders处置惩罚它们，末了打包为一个（或多个）浏览器可辨认的JavaScript文件。

怎样设置webpack？

·npm install webpack babel-loader --save-dev
·建立并设置 webpack.config.js//webpack.config.js文件与package.json同级
·设置 package.json中的scripts
·运转 npm start

//设置 webpack.config.js  针对.js末端的文件除了node_modules都用babel剖析
module.exports = {
    entry: './src/index.js',
    output: {
        path: __dirname,
        filename: './build/bundle.js'
    },
    module: {
        rules: [{
            test: /\.js?$/,
            exclude: /(node_modules)/,
            loader: 'babel-loader'
        }]
    }
}

//设置 package.json中的scripts
"scripts": {
    "start": "webpack",
    "test": "echo \"Error: no test specified\" && exit 1"
  }

二、块级作用域

ES5 只需全局作用域和函数作用域（比方，我们必须将代码包在函数内来限定作用域），这致使许多题目：

状况1：内层变量掩盖外层变量

var tmp = new Date();
function f() {
  console.log(tmp); //undefined
  if (false) {   
    var tmp = "hello world";
  }
}

状况2：变量泄漏，成为全局变量

var s = 'hello';
for (var i = 0; i < s.length; i++) {
  console.log(s[i]);
}
console.log(i); // 5

ES6 供应 let 和 const 来替换 var 声明变量，新的声明体式格局支撑用大括号示意的块级作用域，这会带来一些优点：

1.不再须要马上实行的函数表达式(IIFE)
在 ES5 中，我们须要组织一个马上实行的函数表达式去保证我们不污染全局作用域。在 ES6中， 我们可以运用更简朴的大括号（{}），然后运用 const 或许 let 替换 var 来到达一样的效果。

2.轮回体中的闭包不再有题目
在 ES5 中，假如轮回体内有发生一个闭包，接见闭包外的变量，会发生题目。在 ES6，你可以运用 “let” 来防备题目。

3.防备反复声明变量
ES6 不许可在同一个作用域内用 let 或 const 反复声明同名变量。这关于防备在差别的 js 库中存在反复声明的函数表达式异常有协助。

三、数组的扩大

1. Array.from() : 将伪数组对象或可遍历对象转换为真数组

假如一个对象的一切键名都是正整数或零，而且有length属性，那末这个对象就很像数组，称为伪数组。典范的伪数组有函数的arguments对象，以及大多数 DOM 元素集，另有字符串。

...
<button>测试1</button>
<br>
<button>测试2</button>
<br>
<button>测试3</button>
<br>
<script type="text/javascript">
let btns = document.getElementsByTagName("button")
console.log("btns",btns);//获得一个伪数组
btns.forEach(item=>console.log(item)) Uncaught TypeError: btns.forEach is not a function
</script>

针对伪数组，没有数组平常要领，直接遍历便会失足,ES6新增Array.from()要领来供应一种明白清楚的体式格局以处理这方面的需求。

Array.from(btns).forEach(item=>console.log(item))将伪数组转换为数组

2.Array.of(v1, v2, v3) : 将一系列值转换成数组

当挪用 new Array( )组织器时，依据传入参数的范例与数目的差别，现实上会致使一些差别的效果， 比方：

let items = new Array(2) ;
console.log(items.length) ; // 2
console.log(items[0]) ; // undefined
console.log(items[1]) ;

let items = new Array(1, 2) ;
console.log(items.length) ; // 2
console.log(items[0]) ; // 1
console.log(items[1]) ; // 2

当运用单个数值参数来挪用 Array 组织器时，数组的长度属性会被设置为该参数。 假如运用多个参数(不论是不是为数值范例)来挪用，这些参数也会成为目的数组的项。数组的这类行动既杂沓又有风险，因为偶然可以不会注重所传参数的范例。

ES6 引入了Array.of( )要领来处理这个题目。该要领的作用异常类似Array组织器，但在运用单个数值参数的时刻并不会致使特别效果。Array.of( )要领总会建立一个包括一切传入参数的数组，而不论参数的数目与范例：

let items = Array.of(1, 2);
console.log(items.length); // 2
console.log(items[0]); // 1
console.log(items[1]); // 2
items = Array.of(2);
console.log(items.length); // 1
console.log(items[0]); // 2

Array.of基础上可以用来替换Array()或newArray()，而且不存在因为参数差别而致使的重载，而且他们的行动异常一致。

3.数组实例的 find() 和 findIndex()

数组实例的find要领，用于找出第一个相符前提的数组成员。它的参数是一个回调函数，一切数组成员顺次实行该回调函数，直到找出第一个返回值为true的成员，然后返回该成员。假如没有相符前提的成员，则返回undefined。

[1, 4, -5, 10].find((n) => n < 0) // -5

数组实例的findIndex要领的用法与find要领异常类似，返回第一个相符前提的数组成员的位置，假如一切成员都不相符前提，则返回-1。

[1, 5, 10, 15].findIndex(function(value, index, arr) {
  return value > 9;
}) // 2

4.数组实例的includes()

Array.prototype.includes要领返回一个布尔值，示意某个数组是不是包括给定的值。该要领的第二个参数示意搜刮的肇端位置，默认为0。假如第二个参数为负数，则示意倒数的位置，假如这时候它大于数组长度（比方第二个参数为-4，但数组长度为3），则会重置为从0最先。

[1, 2, 3].includes(2)   // true
[1, 2, 3].includes(3, -1); // true
[1, 2, 3, 5, 1].includes(1, 2); // true

没有该要领之前，我们一般运用数组的indexOf要领，搜检是不是包括某个值。indexOf要领有两个瑕玷，一是不够语义化，它的寄义是找到参数值的第一个涌现位置，所以要去比较是不是不等于-1，表达起来不够直观。二是，它内部运用严厉相称运算符（===）举行推断，这会致使对NaN的误判。

[NaN].indexOf(NaN) // -1
[NaN].includes(NaN) // true

5.数组实例的 entries()，keys() 和 values()

ES6 供应entries()，keys()和values(),用于遍历数组。它们都返回一个遍历器对象，可以用for…of轮回举行遍历，唯一的区分是keys()是对键名的遍历、values()是对键值的遍历，entries()是对键值对的遍历。

for (let index of ['a', 'b'].keys()) {
  console.log(index);
}
// 0
// 1

for (let elem of ['a', 'b'].values()) {
  console.log(elem);
}
// 'a'
// 'b'

for (let [index, elem] of ['a', 'b'].entries()) {
  console.log(index, elem);
}
// 0 "a"
// 1 "b"

四、箭头函数

ES6 许可运用“箭头”（=>）定义函数。它重要有两个作用：缩减代码和转变this指向，接下来我们细致引见：

1. 缩减代码

const double1 = function(number){
   return number * 2;   //ES5写法
}
const double2 = (number) => {
 return number * 2;    //ES6写法
}
const double4 = number => number * 2; //可以进一步简化

多个参数记得加括号

 const double6 = (number,number2) => number + number2;

假如箭头函数的代码块部份多于一条语句，就要运用大括号将它们括起来，而且运用return语句返回。

 const double = (number,number2) => {
   sum = number + number2 
   return sum;
 }

因为大括号被解释为代码块，所以假如箭头函数直接返回一个对象，必须在对象表面加上括号，不然会报错。

// 报错
let getTempItem = id => { id: id, name: "Temp" };
// 不报
let getTempItem = id => ({ id: id, name: "Temp" });

另外另有个优点就是简化回调函数

// 一般函数写法
[1,2,3].map(function (x) {
  return x * x;
});
// 箭头函数写法
[1,2,3].map(x => x * x);//[1, 4, 9]

2. 转变this指向

长期以来，JavaScript 言语的this对象一直是一个使人头痛的题目，在对象要领中运用this，必须异常警惕。箭头函数”绑定”this，很大水平上处理了这个搅扰。我们无妨先看一个例子：

const team = {
  members:["Henry","Elyse"],
  teamName:"es6",
  teamSummary:function(){
    return this.members.map(function(member){
      return `${member}隶属于${this.teamName}小组`;    // this不晓得该指向谁了
    })
  }
}
console.log(team.teamSummary());//["Henry隶属于undefined小组", "Elyse隶属于undefined小组"]

teamSummary函数内里又嵌了个函数，这致使内部的this的指向发生了紊乱。
那怎样修正：

要领一、let self = this

const team = {
  members:["Henry","Elyse"],
  teamName:"es6",
  teamSummary:function(){
    let self = this;
    return this.members.map(function(member){
      return `${member}隶属于${self.teamName}小组`;
    })
  }
}
console.log(team.teamSummary());//["Henry隶属于es6小组", "Elyse隶属于es6小组"]

要领二、bind函数

const team = {
  members:["Henry","Elyse"],
  teamName:"es6",
  teamSummary:function(){
    return this.members.map(function(member){
      // this不晓得该指向谁了
      return `${member}隶属于${this.teamName}小组`;
    }.bind(this))
  }
}
console.log(team.teamSummary());//["Henry隶属于es6小组", "Elyse隶属于es6小组"]

要领三、 箭头函数

const team = {
  members:["Henry","Elyse"],
  teamName:"es6",
  teamSummary:function(){
    return this.members.map((member) => {
      // this指向的就是team对象
      return `${member}隶属于${this.teamName}小组`;
    })
  }
}
console.log(team.teamSummary());//["Henry隶属于es6小组", "Elyse隶属于es6小组"]

3.运用注重点

（1）函数体内的this对象，就是定义时地点的对象，而不是运用时地点的对象。

（2）不可以看成组织函数，也就是说，不可以运用new敕令，不然会抛出一个毛病。

（3）不可以运用arguments对象，该对象在函数体内不存在。假如要用，可以用 rest 参数替换。

（4）不可以运用yield敕令，因而箭头函数不能用作 Generator 函数。

五、rest 参数

ES6 引入 rest 参数（情势为…变量名），用于猎取函数的过剩参数，如许就不须要运用arguments对象了。

rest 参数搭配的变量是一个数组，该变量将过剩的参数放入数组中。
我们举个例子：怎样完成一个乞降函数？

传统写法：

function addNumbers(a,b,c,d,e){
  var numbers = [a,b,c,d,e];
  return numbers.reduce((sum,number) => {
    return sum + number;
  },0)
 }
 console.log(addNumbers(1,2,3,4,5));//15

ES6写法：

 function addNumbers(...numbers){
  return numbers.reduce((sum,number) => {
    return sum + number;
  },0)
 }
 console.log(addNumbers(1,2,3,4,5));//15

也可以与解构赋值组合运用

var array = [1,2,3,4,5,6];
var [a,b,...c] = array;
console.log(a);//1
console.log(b);//2
console.log(c);//[3, 4, 5, 6]

rest 参数还可以与箭头函数连系

const numbers = (...nums) => nums;
numbers(1, 2, 3, 4, 5)// [1,2,3,4,5]  

注重：①每一个函数最多只能声明一个rest参数，而且 rest参数必须是末了一个参数，不然报错。

②rest参数不能用于对象字面量setter当中

let object = {
    set name(...value){   //报错
        //实行一些逻辑
    }
}

六、睁开运算符

与盈余参数关联最亲昵的就是扩大运算符。盈余参数许可你把多个自力的参数合并到一个数组中；而扩大运算符则许可将一个数组支解，并将各个项作为星散的参数传给函数。

当用在字符串或数组前面时称为扩大运算符,个人认为可以明白为rest参数的逆运算，用于将数组或字符串举行拆解。有些时刻，函数不许可传入数组，此时运用睁开运算符就很轻易，不信的话，我们看个例子：Math.max()要领，它接收恣意数目的参数，并会返回个中的最大值。

let value1 = 25,                
let value2 = 50;
console.log(Math.max(value1, value2));    //    50

但若想处置惩罚数组中的值，此时该怎样找到最大值？Math.max()要领并不许可你传入一个数组。实在你可以像运用rest参数那样在该数组前增加…,并直接将其传递给 Math.max()

let values = [25,50,75,    100]
//等价于console.log(Math.max(25,50,75,100));
console.log(Math.max(...values));    //100

扩大运算符还可以与其他参数混用

let values = [-25,-50,-75,-100]
console.log(Math.max(...values,0));    //0

扩大运算符拆解字符串与数组

var array = [1,2,3,4,5];
console.log(...array);//1 2 3 4 5
var str = "String";
console.log(...str);//S t r i n g

还可以完成拼接

var defaultColors = ["red","greed"];
var favoriteColors = ["orange","yellow"];
var fallColors = ["fire red","fall orange"];
console.log(["blue","green",...fallColors,...defaultColors,...favoriteColors]
//["blue", "green", "fire red", "fall orange", "red", "greed", "orange", "yellow"]

七、解构赋值—-更轻易的数据接见

ES6 新增了解构，这是将一个数据构造分解为更小的部份的历程。

1.解构为什么有效？

在ES5及更早版本中，从对象或数组中猎取信息、并将特定数据存入当地变量，须要誊写许多而且类似的代码。比方：

 var expense = {
   type: "es6",
   amount:"45"
 };
 var type = expense.type;
 var amount = expense.amount;
 console.log(type,amount);

此代码提取了expense对象的type与amount值，并将其存在同名的当地变量上。虽然 这段代码看起来简朴，但设想一下如有大批变量须要处置惩罚，你就必须逐一为其赋值；而且如有一个嵌套的数据构造须要遍历以寻觅信息，你可以会为了一点数据而发掘全部构造。

这就是ES6为什么要给对象与数组增加解构。当把数据构造分解为更小的部份时，从中提取你要的数据会变得轻易许多。

2.对象

上个例子中假如采纳对象解构的要领，就很轻易猎取expense对象的type与amount值。

const { type,amount } = expense;
console.log(type,amount);

我们再来看个例子：

let node = {type:"Identifier",    name:"foo"},    
type = "Literal",name = 5;
({type,name}= node);//    运用解构来分派差别的值 
console.log(type); //    "Identifier" 
console.log(name); //    "foo"

注重:你必须用圆括号包裹解构赋值语句，这是因为暴露的花括号会被剖析为代码块语句，而块语句不许可在赋值操纵符（即等号）左边涌现。圆括号标示了内里的花括号并非块语句、而应该被解释为表达式，从而许可完成赋值操纵。

默许值：
可以挑选性地定义一个默许值，以便在指定属性不存在时运用该值。若要这么做，须要在 属性名背面增加一个等号并指定默许值，就像如许：

let node = {
  type: "Identifier",
  name: "foo"
};
let {
  type,
  name,
  value = true
} = node;
console.log(type); //    "Identifier" 
console.log(name); //    "foo" 
console.log(value); //    true

嵌套对象解构：
运用类似于对象字面量的语法，可以深切到嵌套的对象构造中去提取你想要的数据。

let node = {
  type: "Identifier",
  name: "foo",
  loc: {
    start: {
      line: 1,
      column: 1
    },
    end: {
      line: 1,
      column: 4
    }
  }
};
let { loc: { start }} = node;
console.log(start.line); //    1 
console.log(start.column); //    1

本例中的解构形式运用了花括号，示意应该下行到node对象的loc属性内部去寻觅start属性。

必须传值的解构参数

function setCookie(name, value, {
  secure,
  path,
  domain,
  expires
}) {
  //    设置cookie的代码 
}
  setCookie("type", "js");//报错

在此函数内，name与value参数是必须的，而secure、path、domain与expires则不是。默许状况下挪用函数时未给参数解构传值会抛失足误。像上例中假如setCookie不传第三个参数，就会报错。若解构参数是可选的，可以给解构的参数供应默许值来处置惩罚这类毛病。

function setCookie(name, value, {
  secure,
  path,
  domain,
  expires
} = {}) {}
setCookie("type", "js");//不会报错

3.数组

const names = ["Henry","Bucky","Emily"];
const [name1,name2,name3] = names;
console.log(name1,name2,name3);//Henry Bucky Emily
const [name,...rest] = names;//连系睁开运算符
console.log(rest);//["Bucky", "Emily"]

用{}解构返回数组个数

const {length} = names;
console.log(length);//3

数组解构也可以用于赋值上下文，但不须要用小括号包裹表达式。这点跟对象解构的商定差别。

let colors = ["red", "green", "blue"],
  firstColor = "black",
  secondColor = "purple";
[firstColor, secondColor] = colors;
console.log(firstColor); //    "red" 
console.log(secondColor);    // "green"

默许值：数组解构赋值一样许可在数组恣意位置指定默许值。当指定位置的项不存在、或其值为undefined，那末该默许值就会被运用。

let colors = ["red"];
let [firstColor, secondColor = "green"] = colors;
console.log(firstColor); //    "red" 
console.log(secondColor);//    "green"

与rest参数搭配

在ES5中经常运用concat()要领来克隆数组，比方：

//在ES5中克隆数组 
var colors = ["red", "green", "blue"];
var clonedColors = colors.concat();
console.log(clonedColors); //"[red,green,blue]"

在ES6中，你可以运用盈余项的语法来到达一样效果

//在ES6中克隆数组 
let colors = ["red", "green", "blue"];
let [...clonedColors] = colors;
console.log(clonedColors); //[red,green,blue]

接下我们看个例子：怎样将数组转化为对象

const points = [
  [4,5],
  [10,1],
  [0,40]
];
//希冀获得的数据格式以下，怎样完成？
// [
//   {x:4,y:5},
//   {x:10,y:1},
//   {x:0,y:40}
// ]
let newPoints = points.map(pair => {
  const [x,y] = pair;
  return {x,y}
})
//还可以经由历程以下方法，越发轻便
let newPoints = points.map(([x,y]) => {
  return {x,y}
})
console.log(newPoints);

夹杂解构

const people = [
  {name:"Henry",age:20},
  {name:"Bucky",age:25},
  {name:"Emily",age:30}
];
//es5 写法 
var age = people[0].age;
console.log(age);
//es6 解构
const [age] = people;
console.log(age);//第一次解构数组 {name:"Henry",age:20}
const [{age}] = people;//再一次解构对象
console.log(age);//20

4.注重点

当运用解构来合营var、let、const来声明变量时，必须供应初始化顺序（即等号右侧的值）。下面的代码都邑因为缺失初始化顺序而抛出语法毛病：

var { type, name }; // 语法毛病！ 
let { type, name }; // 语法毛病！
const { type, name }; // 语法毛病！

八、模板字符串（template string）

模板字符串是增强版的字符串，用反引号（`）标识。**它可以看成一般字符串运用，也可以用来定义多行字符串，或许在字符串中嵌入变量。
模板字符串中嵌入变量和函数，须要将变量名写在${}当中。**

let name = "Henry";
function makeUppercase(word){
  return word.toUpperCase();
}
let template = 
  `
  <h1>${makeUppercase('Hello')}, ${name}!</h1>//可以寄存函数和变量
  <p>谢谢人人收看我们的视频, ES6为我们供应了许多遍历好用的要领和语法!</p>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
  </ul>
  `;
document.getElementById('template').innerHTML = template;

再举个例子，事情中常用到ElementUI库，在自定义一个弹出框时，运用模板字符串就很轻易:

   await this.$alert(
          `<p><strong>确认是不是晋级${
            this.lectureName
          }</strong><br>(若已存在课本套件，晋级后请从新天生)</p>`,
          {
            dangerouslyUseHTMLString: true
          }
        )

九、Class 和传统组织函数有何区分

从观点上讲，在 ES6 之前的 JS 中并没有和其他面向对象言语那样的“类”的观点。长时刻里，人们把运用 new 关键字经由历程函数（也叫组织器）组织对象看成“类”来运用。因为 JS 不支撑原生的类，而只是经由历程原型来模仿，种种模仿类的体式格局相关于传统的面向对象体式格局来讲异常杂沓，尤其是处置惩罚当子类继续父类、子类要挪用父类的要领等等需求时。
ES6供应了更靠近传统言语的写法，引入了Class（类）这个观点，作为对象的模板。经由历程class关键字，可以定义类。然则类只是基于原型的面向对象形式的语法糖。

对照在传统组织函数和 ES6 中离别怎样完成类：

//传统组织函数
function MathHandle(x,y){
  this.x=x；
  this.y=y；
}
MathHandle.prototype.add =function（）{
  return this.x+this.y；
}；
var m=new MathHandle(1,2）；
console.log(m.add()）

//class语法
class MathHandle {
 constructor(x,y){
  this.x=x；
  this.y=y；
}
 add(){
   return this.x+this.y；
  }
}
const m=new MathHandle(1,2);
console.log(m.add()）

这两者有什么联络？实在这两者实质是一样的，只不过是语法糖写法上有区分。所谓语法糖是指计算机言语中增加的某种语法，这类语法对言语的功用没有影响，然则更轻易顺序员运用。比方这里class语法糖让顺序越发简约，有更高的可读性。

typeof MathHandle //"function"
MathHandle===MathHandle.prototype.constructor //true

对照在传统组织函数和 ES6 中离别怎样完成继续：

//传统组织函数继续
function Animal() {
    this.eat = function () {
        alert('Animal eat')
    }
}
function Dog() {
    this.bark = function () {
        alert('Dog bark')
    }
}
Dog.prototype = new Animal()// 绑定原型，完成继续
var hashiqi = new Dog()
hashiqi.bark()//Dog bark
hashiqi.eat()//Animal eat

//ES6继续
class Animal {
    constructor(name) {
        this.name = name
    }
    eat() {
        alert(this.name + ' eat')
    }
}
class Dog extends Animal {
    constructor(name) {
        super(name) // 有extend就必须要有super，它代表父类的组织函数，即Animal中的constructor
        this.name = name
    }
    say() {
        alert(this.name + ' say')
    }
}
const dog = new Dog('哈士奇')
dog.say()//哈士奇 say
dog.eat()//哈士奇 eat

Class之间可以经由历程extends关键字完成继续，这比ES5的经由历程修正原型链完成继续，要清楚和轻易许多。

Class 和传统组织函数有何区分

• Class 在语法上越发贴合面向对象的写法
• Class 完成继续越发易读、易明白，对初学者越发友爱
• 实质照样语法糖，运用prototype

十、Promise的基础运用和道理

在JavaScript的天下中，一切代码都是单线程实行的。因为这个“缺点”，致使JavaScript的一切收集操纵，浏览器事宜，都必须是异步实行。Promise 是异步编程的一种处理方案，比传统的处理方案(回调函数和事宜)更合理和更壮大。

ES6中的promise的涌现给我们很好的处理了回调地狱的题目，所谓的回调地狱是指当太多的异步步骤须要一步一步实行，或许一个函数里有太多的异步操纵，这时候刻就会发生大批嵌套的回调，使代码嵌套太深而难以浏览和保护。ES6熟悉到了这点题目，如今promise的运用，圆满处理了这个题目。

Promise道理

一旦状况转变，就不会再变，任何时刻都可以获得这个效果。Promise对象的状况转变，只需两种可以：从pending变成fulfilled和从pending变成rejected。promise 对象初始化状况为 pending ；当挪用resolve(胜利)，会由pending => fulfilled ；当挪用reject(失利)，会由pending => rejected。详细流程见下图：

Promise的运用流程

1. new Promise一个实例，而且要 return
2. new Promise 时要传入函数，函数有resolve reject 两个参数
3. 胜利时实行 resolve，失利时实行reject
4. then 监听效果

function loadImg(src){
   const promise=new Promise(function(resolve,reject){
     var img=document.createElement（'img'）
     img.onload=function(){
        resolve(img)
   }
     img.onerror=function（）{
        reject()
   }
    img.src=src
 })
  return promise//返回一个promise实例
}
var src="http://www.imooc.com/static/img/index/logo_new.png"
var result=loadImg(src)
result.then(function(img){
    console.log(img.width)//resolved(胜利)时刻的回调函数
},function(){
    console.log("failed")//rejected(失利)时刻的回调函数
})
result.then(function(img){
    console.log(img.height)
})

promise会让代码变得更轻易保护，像写同步代码一样写异步代码,同时营业逻辑也更易懂。

十一、Iterator 和 for…of 轮回

JavaScript 原有的示意“鸠合”的数据构造，主如果数组（Array）和对象（Object），ES6 又增加了Map和Set。如许就须要一种一致的接口机制，来处置惩罚一切差别的数据构造。遍历器（Iterator）就是如许一种机制。它是一种接口，为种种差别的数据构造供应一致的接见机制。任何数据构造只需布置 Iterator 接口，就可以完成遍历操纵（即顺次处置惩罚该数据构造的一切成员）。

1.Iterator的作用：

• 为种种数据构造，供应一个一致的、轻便的接见接口；
• 使得数据构造的成员可以按某种序次分列
• ES6制造了一种新的遍历敕令for…of轮回，Iterator接口重要供for…of消耗。

2.原生具有iterator接口的数据(可用for of遍历)

• Array
• set容器
• map容器
• String
• 函数的 arguments 对象
• NodeList 对象

let arr3 = [1, 2, 'kobe', true];
for(let i of arr3){
   console.log(i); // 1 2 kobe true
}

let str = 'abcd';
for(let item of str){
   console.log(item); // a b c d
}   

var engines = new Set(["Gecko", "Trident", "Webkit", "Webkit"]);
for (var e of engines) {
  console.log(e);
}
// Gecko
// Trident
// Webkit    

3.几种遍历体式格局比较

• for of 轮回不仅支撑数组、大多数伪数组对象，也支撑字符串遍历，另外还支撑 Map 和 Set 对象遍历。
• for in轮回可以遍历字符串、对象、数组，不能遍历Set/Map
• forEach 轮回不能遍历字符串、对象,可以遍历Set/Map

十二、ES6模块化

ES6 在言语规范的层面上，完成了模块功用，而且完成得相称简朴，旨在成为浏览器和服务器通用的模块处理方案。其模块功用重要由两个敕令组成：export和import。export敕令用于划定模块的对外接口，import敕令用于输入其他模块供应的功用。

/** 定义模块 math.js **/
var basicNum = 0;
var add = function (a, b) {
    return a + b;
};
export { basicNum, add };
/** 援用模块 **/
import { basicNum, add } from './math';
function test(ele) {
    ele.textContent = add(99 + basicNum);
}

如上例所示，运用import敕令的时刻，用户须要晓得所要加载的变量名或函数名，不然没法加载。为了给用户供应轻易，让他们不必浏览文档就可以加载模块，就要用到export default敕令，为模块指定默许输出。

// export-default.js
export default function () {
  console.log('foo');
}

上面代码是一个模块文件export-default.js，它的默许输出是一个函数。
其他模块加载该模块时，import敕令可认为该匿名函数指定恣意名字。

// import-default.js
import customName from './export-default';
customName(); // 'foo'

上面代码的import敕令，可以用恣意称号指向export-default.js输出的要领，这时候就不须要晓得原模块输出的函数名。须要注重的是，这时候import敕令背面，不运用大括号。

假如认为文章对你有些许协助，迎接在我的GitHub博客点赞和关注，感激涕零！

参考文章

ES6笔记（一）：ES6所改进的javascript“缺点”

在 ES6 中 改进的 5 个 JavaScript “缺点”

ECMAScript 6 入门

深切明白ES6

ES6的rest参数和扩大运算符