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