es6学习

es6是着眼于企业级开发，增加了大量的属性和方法，目前好的浏览器可以支持80%语法特性（我们在学习的时候，可以直接在浏览器中测试），由于es6还有一些功能不能被浏览器支持，因此我们实现的时候需要编译，在es6中面向对象语法出自typescript，只不过不用加任何类型的限制。

一、编译es6

有两种方式

1.1 浏览器端编译

这种方式不能投入生产，要引入traceur.js一级traceur.bootstrap.js,将script标签的type属性设置成module

1.2工程化编译

（1）引入工程化工具

（2）定义配置

es6常用拓展名是.es,bable是为es标砖量身定制的编译工具，es没发布一个版本（小小的改动也算，草案也算），babel就更新一次，来解析这些es的语法，es6中编译的类是一个安全类，并且原型方法和静态方法定义了特性。

二、定义变量

js的作用域是一个函数级作用域，es6新增let关键字，用来定义块作用域变量的，函数就是用function定义的，当函数执行的时候，就会创建一个韩书记作用域，一堆{}定义了一个代码块，这个空间我们称之为作用域。

2.1块级作用域变量

2.1.1 var与let比较

(1)作用域

          var支持函数级作用域，不支持块作用域

           let支持函数级作用域，也支持块作用域

(2)声明前置

           var支持声明前置

           let不支持声明前置

(3)重复定义

           var可以重复定义

            let不能重复定义

(4)循环中存储变量

          var不能在循环中的函数内存储变量，可以通过闭包存储

         let可以在循环中的函数内存储变量

2.1.2常量

一旦定义，我们就无法修改，只能访问，这类数据称之为常量，es6中新增定义常量的关键字const

(1)常量无法被修改

（2）支持函数级作用域，也支持块级作用域

（3）不支持声明前置

（4）不能重复定义

（5）不能在循环中使用（不能用来定义循环变量的）

（6）只能定义值类型数据，不能定义引用类型数据（此时失效。如果 const 的是一个对象，对象所包含的值是可以被修改的。抽象一点儿说，就是对象所指向的地址不能改变，而变量成员是可以修改的）

可以通过对象的冻结实现（对象属性：不能添加，不能修改，不能删除）

注意：属性值必须是值类型，引用类型的属性值对象是可以修改的。

es3.1中静态变量的实现

可以通过单例模式实现，我们只定义取值器，不定义赋值器，既可实现，不能定义引用类型的对象。

无论是const关键字，还是对象的冻结，还是单例模式，我们都不能将静态变量定义成引用类型

三、字符串拓展

3.1判断字符串位置

startsWith 是否是以参数字符串开头，第一个参数表示子字符串，第二个参数表示判断位置，截取的是后面的一段字符串。

endsWith 是否是以参数字符串结尾，第一个参数表示子字符串，第二个参数表示判断的位置，截取的是前面的一段字符串

includes 是否包含参数字符串，第一个参数表示子字符串，第二个参数表示判断的位置，截取的是后面一段字符串。

三个方法返回值都是布尔值。true表示包含，false表示不包含。

3.2多行字符创

目前学习的字符创都是单行字符串，不允许我们输入回车键等特殊字符，使用特殊字符需要使用转义符号。单行字符创是通过单行号，和双引号来定义的，单引号和双引号是可以嵌套的。

多行字符创定义：直接写在``内部的字符串称之为多行字符串，多行字符串内部可以使用任何特殊字符。多行字符串支持模板语法

以前学过的模板

ejs: <%=key%>

MVC框架: <%key%>

Backbone(underscore): <%=key%>

Vue: {{key}}, {{{key}}}, {{*key}}, {{{*key}}}

Angular: {{key}}

Less: @{key}  

Sass: #{$key}

Stylus: {key}

React(jsx语法中): {key}

ES6中也有插值模板，语法${key}，在ES6的模板中，我们可以使用任意的js表达式

3.3重复字符串

es6新增了repeat方法，来重复一个字符串，参数就是重复的次数，返回值就是重复的字符串。原始字符串没有发生改变

3.4原始字符串

raw:获取原始字符串（不会转义字符，看不到转义字符的结果），raw是String类的静态方法，String.raw `传递参数`

四、数学拓展

4.1数字类的拓展

Number类

判断是否是NaN

全局作用域中有个isNaN可以用来判断是否NaN,它是有局限性，在判断的时候会做数据类型的转化，我们不能识别出是否出数字中的NaN,所以es6新增了一个方法叫Number.isNaN,可以判断出数字中了NaN

判断是否是一个有限（数字）

全局作用域中，有一个isFinite,判断是否是有限的，在判断的时候会做数据类型的转化，因此判断不够准确，所以es6新增一个方法叫Number.isFinite可以准确地判断出数据中的有限数字，判断的依据：就是看这个数据能否用数字表示出来。

判断是否是一个整数：isInteger

如果是一个整数返回true,不是就返回false,不会做数据类型的转化。

默认转化为false的数据类型：undefined,null,false,'',0,NaN

转化成数字是NaN的：NaN,undefined

转化成数字是0的：0，‘’，null,false

4.2数学对象

sign判断数字的类型，返回值一共有5个，我们能够查看0，-0.

es6着眼于企业级大型项目的开发，因此为了让计算更精简（为了适应复杂计算），对Math对象拓展了很多方法（大型游戏开发中）

Math.cbrt：计算一个数的立方根。

Math.fround：返回一个数的单精度浮点数形式。

Math.hypot：返回所有参数的平方和的平方根。

Math.expm1(x)：返回ex - 1。

Math.log1p(x)：返回1 + x的自然对数。如果x小于-1，返回NaN。

Math.log10(x)：返回以10为底的x的对数。如果x小于0，则返回NaN。

Math.log2(x)：返回以2为底的x的对数。如果x小于0，则返回NaN。

三角函数方法

Math.sinh(x)返回x的双曲正弦（hyperbolic sine）

Math.cosh(x)返回x的双曲余弦（hyperbolic cosine）

Math.tanh(x)返回x的双曲正切（hyperbolic tangent）

Math.asinh(x)返回x的反双曲正弦（inverse hyperbolic sine）

Math.acosh(x)返回x的反双曲余弦（inverse hyperbolic cosine）

Math.atanh(x)返回x的反双曲正切（inverse hyperbolic tangent）

五、对数组的拓展

5.1转化数组

Array.from:将类数组对象转化成数组，第一个参数表示类数组对象，第二个参数表示回调函数，回调函数的作用域是window，参数有2个，第一个是成员值，第二个是索引值，返回值就是结果数组的成员，from方法返回值是数组

5.2创建数组

在es6之前，创建数组有三种方式，构造函数式，函数式，字面量
Array是一个安全类，Array在创建数组的时候，由于传递参数的不同，导致创建的行为不一致，es6为了解决这个问题，提供了Array.of方法，参数都表示数组的成员

5.3查找数组

find:查找数组成员，参数是一个函数，跟forEach很像，该有三个参数，成员值、索引值、原数组，回调方法的返回值就是查找的成员值，没有找到返回值就是undefined,存在则返回成员。

findIndex:查找数组成员，参数是一个函数，跟find一样，方法的返回值是索引值，存在返回索引值，不存在返回-1

indexOf和lastIndexOf也返回成员的索引值，参数表示成员不会执行

findIndex参数是函数，会执行

find和findIndex遇到符合条件的成员就停止遍历

5.4 数组内部复制

copyWithin:在数组内部，复制数组成员，三个参数，第一个参数表示：操作的位置，第二个参数表示复制的起始位置，第三个参数表示复制的结束位置，返回值是复制后的结果，原数组：[0,1,2,3,4,5,6,7,8,9],操作：arr.copyWithin(3,6,8),结果[0,1,2,6,7,5,6,7,8,9]

splice方法

第一个参数表示操作的位置，第二个参数表示删除的成员，从第三个参数开始表示在该位置新增的成员

5.5 es6中的迭代器接口

在es6中只有迭代器接口，没有具体的类，这里说的地带器对象是就是指实现了迭代器接口的对象

keys 获取数组索引值，返回迭代器接口

value 获取数组成员值，返回迭代器对象

entries 获取数组成员值与索引值，返回迭代器对象，第一个参数是索引值，第二个参数是成员值

他们的返回值都实现了迭代器接口，因此访问他们的数据有两种方式，第一种方式可以通过 for of 循环遍历，第二种方式，可以通过next方法遍历，next方法返回值是一个对象，value表示当前的值，如果遍历完成就是undefined,done表示是否遍历完成，true遍历完成，false没有遍历完成，可以继续遍历.

六、对象定义

es6对定义的对象做了拓展，1.在对象字面量中，想用变量为属性赋值，如果变量与属性名称同名，可以省略属性名称2.在对象字面量中，我们可以对定义的属性名称使用表达式，在es6之前，我们只能在访问对象的属性时候使用表达式3.在对象字面量中，如果为对象添加属性，：function可以省略（与定义类的方法的语法一样），这三条使我们定义对象变得非常简单了。

6.1判断数据是否全等

Object.is方法：来判断两个参数是否是全等

===判断两个参数是否全等 ， ===不会做类型的转化，==会做类型的转化

===不能判断0和-0,0和-0虽然在数值上都表示0，但是存储的地址是不一样的，-0带有负号位，Object.is可以区分。

===认为所有的NaN不是同一个。Object.is认为是同一个，其余的数据判断的结果都是一样的，Object.is会判断数据的存储地址。

6.2assign

对对象进行复制的方法（实现一个多继承），第一个参数表示目标对象，从第二个参数开始表示复制的对象，将这些参数中的属性，方法赋值诶第一个参数对象，返回值就是第一个参数目标对象拓展后结果，后面的对象属性会覆盖掉前面对象的属性。

浅复制：对象类型的数据直接复制，引用类型的数据直接做指向

深复制：对值类型的数据直接复制，引用类型的数据直接复制

很多框架中都实现了多继承，比如——extend，react中混合，$.extend

jquery中的extend方法可以实现深复制，如果第一个参数是布尔值true,就是深复制。如果第二个参数是对象，就是浅复制

七、Symbol类型

es5中数据类型:字符串，数字，布尔，null.undefined,object

es6中新增了一种数据类型叫Symbol类型表示独一无二的数据类型。创建Symbol类型数据用Symbol()方法，绝对不能使用new关键字，创建的时候，可以传递参数，但是对于结果是没有影响的，只是传入参数后，在控制台中展示的结果不一样。

应用：对于一个对象来说，为其添加属性，有时候很危险（列如覆盖问题）。如果添加的属性名称是一个独一无二的名称，那么就不会产生覆盖问题了。

添加Symbol类型的属性名称数据，不能通过for in循环遍历，只能通过Symbol变量获取

八、代理

在一个系统中，总会有一些数据是重要事务，我们不希望别人访问，在js中，只要能够访问数据，我们就可以修改他们，为了解决这个问题，es6提供了Proxy。

我们通过new关键字实例化代理类，第一个参数表示代理的对象，第二个参数表示对代理对象的除开方法（操作对象），get:获取代理对象中的属性（第一个参数表示代理对象，第二个参数表示获取的属性名称，作用域是操作对象），set：设置代理对象属性（第一个参数表示代理对象，第二个参数表示设置的属性名称，第三个参数表示设置的属性值，作用域是操作对象）

九、函数的拓展

9.1默认参数

es6之前，默认参数的实现我们通常都是通过适配器实现的

通过  ||  设置默认参数

值为false都会设置默认参数，所以屏蔽了6个数据：false 0  ‘’  undefined null NaN

通过? : 设置默认参数

使用起来很麻烦

适配对象：extend, assign

只能处理对象

ES6中为了简化这些操作，

定义默认参数的语法key = value

等价语法key === undefined ? Value : key

9.2获取剩余参数

在css预编译中，我们已经解除了获取剩余参数的方法

sass @arg...    style arg...

在es6中，我们通过...arg语法定义默认参数，例如add(num1,num2,...num3)   (1) num3不包含num1，和num2;(2) num1和num2可以正常使用;(3) num3截取的是，从num2后面的所有变量;(4) num3是一个数组，每一个成员代表一个参数，可以直接使用数组的方法;(5)是为箭头函数定制的，（箭头函数中无法使用arguments）; (6)如果没有获取参数，num3依然是空数组

十、解构

解析聚合数据的解构，常用的有两类聚合数据，数组和对象

10.1对象的解构

语法：var {key1,key2} = obj,key1,key2是obj中的属性，然后被定义成变量，通过这个变量可以直接访问对象内部的属性，上边的语法等价于var key1 = obj.key1，var key2 = obj.key;解构的语法，使我们使用的对象变得更简单，对象的解构导致在当前作用域中，创建了一些变量，因此我们通常在模块化开发中使用。

10.2数组解构

let [item1,item2,item3,item4,item5,item6,...item] = arr  , item1, item2, item3代表的是arr的前三个成员（索引值是相对应的)Item代表剩余的成员，也是一个数组,

解构逆运用，我们可以通过...语法获取函数参数成员（剩余参数），我们也可以用...语法将数组的每一个成员传递给函数作为参数，函数的参数前面还可以添加其他参数，并且能够正常使用。

以前可以通过apply将数组的成员传递给函数作为参数，现在通过...就能实现了

10.3 三个点语法

获取剩余参数，将参数转化成数组

数组解构

将数组的一些成员转化成新数组

解构逆运用（获取剩余参数逆运用）

将数组转化成函数的参数

十一、箭头函数

组成部分() => {}，()表示参数集合，=>箭头函数的标志，{}表示函数体，箭头函数中，我们只能用函数的表达式定义

箭头函数的三大特点：

（1）箭头函数中，无法使用arguments，但是可以通过...语法获取剩余参数；

（2）箭头函数作用域永远是定义时候的作用域；

（3）箭头函数不能作为类的构造函数；（关于箭头函数的使用场景及不能使用的场景，查看文章es6的箭头函数https://www.jianshu.com/writer#/notebooks/20757449/notes/33855210）

箭头函数的两点省略

（1）当箭头函数的参数只有一个的时候，参数集合（）可以省略

（2）当函数体只有返回值的时候，函数体{}一级return 关键字可以省略

箭头函数的作用域永远是定义时候的作用域，我们想改变箭头函数的作用域，我们只能改变箭头函数定义时候的作用域，因此改变箭头函数的作用域，就要将箭头函数定义在函数内部，然后改变外部函数的作用域

十二、聚合数据

在es6之前，常用的聚合数据有两个：数组，对象

es6新增了四类聚合数据：Set，Weakset,Map,Weakmap

12.1 set对象

Set是对数组的拓展：表示一个去重后的数组（不是真正的数组），是一个实现了迭代器接口对象

由于实现了迭代器接口，所以可以使用for of 循环遍历

(1) Set实例化对象

size:获取长度的属性

add：添加成员方法，参数就是添加的成员，只能添加一个，返回值是set对象，因此可以链式调用

clear:清楚set对象内部的数据

delete：删除成员，返回值是布尔值，true表示删除成功，false表示删除失败

Entries：获取成员值（两个都是成员值）

forEach：遍历实例化对象，使用方式跟数组forEach一样，回调函数作用域是window，第一个参数表示成员值，第二个参数表示成员值，第三个参数表示set对象

Has:是否拥有某个成员

Keys和values都是获取成员值可以通过for of遍历

12.2WeakSet对象

弱set对象，成员必须是对象

WeakSet实例化对象没有了size，forEach，clear，values，entries，keys等方法。add：添加成员；delete删除成员；has是否拥有成员

注意weakset不能被垃圾回收机制回收，因此尽量少用

12.3Map对象

是对对象的一个拓展，是一个超对象，对象的属性名称只能是字符串，map对象允许属性名称是任意类型的数据：布尔值，数组，方法，对象，null，undefined等等都可以

Map实例化对象：size：获取对象的成员个数；clear：清空map对象;delete删除某个成员;entries：获取属性值以及属性名称;forEach：遍历map对象

回调函数作用域是window,第一个参数表示属性值,第二个参数表示属性名称,第三个参数表示map对象,Get：获取某个成员,Has：是否拥有某个成员,Keys：获取所有属性名称,Value：获取所有属性值,Map对象实现了迭代器接口，我们可以通过for of循环遍历

12.4WeakMap对象

弱map对象，属性名称必须是对象

实例化对象

比map对象少了一些方法：keys，foreach，values，entries， size等等

Delete：删除成员

Has：查找成员

Get：获取成员

Set:设置成员

我们尽量少用weakmap对象，因为不会被垃圾回收机制回收

十三、迭代器

es6中没有真正的迭代器，只实现了迭代器接口，以下四种操作会执行迭代器操作：

1、当结构的时候，会触发迭代器操作，对象解构，数组解构

2、当我们创建set，map,weakset,weakmap对象的时候；

3、获取实现迭代器接口的数据，keys,value,entries方法等等

4、在for of 循环中

十四、循环

14.1 For循环

我们可以遍历数组，

当嵌套的层级很多的时候，访问，操作成员变得很复杂

可以使用continue，break等关键字

Continue：跳过当前循环，进入下次循环

Break：终止循环

在方法内部

Return终止循环，并且跳出函数

Break终止循环，继续执行函数

创建循环变量，

14.2 for in循环

为对象设计的一套循环，会遍历到原型上的数据（用hasOwnProperty过滤）

遍历数组可以使用continue，break关键字

创建了循环变量，并且在遍历数组的时候，将数组的索引值数据类型，由number改成string

14.3迭代器方法

例如forEach，map，some， every，filter等等

在回调函数中，我们无法使用continue以及break

可以使用return，但是只能终止一次，类似continue

14.4 For of循环

为实现了迭代器接口数据设计的一套循环

可以使用continue，break等关键字，也创建了循环变量

不能访问索引值的，我们可以创建一个索引值变量来解决

十五、Promise对象

参照文章《promise对象》https://www.jianshu.com/writer#/notebooks/20757449/notes/30305030