es6学习

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

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块级作用域变量

img_e1b13302b6890246d9292968cc31d5b7.png

2.1.1 var与let比较

(1)作用域

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

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

(2)声明前置

           var支持声明前置

           let不支持声明前置

(3)重复定义

           var可以重复定义

            let不能重复定义

(4)循环中存储变量

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

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

img_f2f90415895bc4cdde83503f0ef1033f.png

2.1.2常量

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

(1)常量无法被修改

(2)支持函数级作用域,也支持块级作用域

(3)不支持声明前置

(4)不能重复定义

(5)不能在循环中使用(不能用来定义循环变量的)

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

可以通过对象的冻结实现(对象属性:不能添加,不能修改,不能删除)

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

es3.1中静态变量的实现

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

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

img_4b6efb27c00fe5cdd8e68c1a8ed17ffa.png

三、字符串拓展

3.1判断字符串位置

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

img_dbfc634ea9edaebf36c677937c72f699.png

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

img_b36e1d0e986b03076a2a4b3ed0b8130b.png

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

img_ebdc5f36f73689726a60a7e7939e00fa.png

三个方法返回值都是布尔值。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表达式

img_c22ed445a296bde8d4ac9bf7291884e3.png

3.3重复字符串

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

img_8705a75b2098a00f80034c6db453a3ad.png

3.4原始字符串

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

img_faaa04f3f93f0714ff42def91940fd11.png

四、数学拓展

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

img_7cb5d52654c75691feae1a0e802915af.png

4.2数学对象

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

img_583bd7689c321473e1b36accae3d23a7.png

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)

img_37038c84b9a385fc5eb98a2282e761c2.png

五、对数组的拓展

5.1转化数组

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

img_c11299c795cec7286af72511166c134f.png

5.2创建数组

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

img_14a6346efc92387d0a847b943de42c51.png

5.3查找数组

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

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

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

findIndex参数是函数,会执行

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

img_4eb1bfb8d4d59e18544f831fafb76d65.png

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方法

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

img_e2b74cf37ed886b6c9b22cd3d91710ea.png

5.5 es6中的迭代器接口

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

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

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

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

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

img_2a60eaec803cff1429ef22806721d0dc.png

六、对象定义

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

img_1c75ca0f3c22b7cf98c84c45183480d8.png

6.1判断数据是否全等

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

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

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

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

img_0893255b906bca8f03b2ab522a30707b.png

6.2assign

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

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

深复制:对值类型的数据直接复制,引用类型的数据直接复制

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

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

img_7344d918b33467170f76e69b3cbf852d.png

七、Symbol类型

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

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

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

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

img_cc4cfa964f6444abde059c7862c06175.png

八、代理

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

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

img_dde87a8da706115d876e464b5560bb1a.png

九、函数的拓展

9.1默认参数

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

通过  ||  设置默认参数

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

通过? : 设置默认参数

使用起来很麻烦

适配对象:extend, assign

只能处理对象

ES6中为了简化这些操作,

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

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

img_e1fde2fd5b6e89df709a3351448f9f85.png

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依然是空数组

img_8005d4798d6cabd6407377eac8501f76.png

十、解构

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

10.1对象的解构

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

img_a524e9d64fb7099058d1a83f3d4460ee.png

10.2数组解构

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

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

img_777e71a6dbc2e81fb44fba85a656e445.png

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

10.3 三个点语法

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

数组解构

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

解构逆运用(获取剩余参数逆运用)

将数组转化成函数的参数

img_cc63ee8cfc3e8800160916f887ba41ad.png

十一、箭头函数

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

箭头函数的三大特点:

(1)箭头函数中,无法使用arguments,但是可以通过...语法获取剩余参数;

(2)箭头函数作用域永远是定义时候的作用域;

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

箭头函数的两点省略

(1)当箭头函数的参数只有一个的时候,参数集合()可以省略

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

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

img_1754107471532b13e5932c025989b4ca.png

十二、聚合数据

在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遍历

img_2597e39604bc1c66930cea91163990ab.png

12.2WeakSet对象

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

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

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

img_2eb837054d3db1c91325f78b423dc19f.png

12.3Map对象

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

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

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

img_c05eec302d76b11fc4c323f70ba858a5.png

12.4WeakMap对象

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

实例化对象

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

Delete:删除成员

Has:查找成员

Get:获取成员

Set:设置成员

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

img_2248c1ad5c89748efbff994e845d6229.png

十三、迭代器

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

相关文章
|
6月前
|
JavaScript 小程序 Java
ES6使用实践总结
ES6使用实践总结
44 0
|
Java
ES6 学习笔记一
ES6 学习笔记一
60 0
|
2月前
|
JavaScript 前端开发
ES6学习(6)
ES6学习(6)
|
2月前
|
网络架构
ES6学习(5)
ES6学习(5)
|
6月前
|
Java
es 学习笔记
es 学习笔记
39 1
|
JavaScript
ES6 学习笔记二
ES6 学习笔记二
40 0
|
Docker 容器
es应用笔记1-es部署
es应用笔记1-es部署
115 0
|
存储 JSON 安全
es学习笔记1-es概念
es学习笔记1-es概念
83 0
|
JavaScript 前端开发
每天3分钟,重学ES6-ES12(十八)ES Module(二)
每天3分钟,重学ES6-ES12(十八)ES Module
80 0