关于工作中常用到的ES6语法

154 阅读9分钟

一、let和const


在JavaScript中咱们以前主要用关键var来定义变量,ES6之后,新增了定义变量的两个关键字,分别是let和const。


对于变量来说,在ES5中var定义的变量会提升到作用域中所有的函数与语句前面,而ES6中let定义的变量则不会,let声明的变量会在其相应的代码块中建立一个暂时性死区,直至变量被声明。


let和const都能够声明块级作用域,用法和var是类似的,let的特点是不会变量提升,而是被锁在当前块中。


一个非常简单的例子:

7c09e776b4d046b891395adcf7e265e4.png

唯一正确的使用方法:先声明,再访问。

29e0ed38eac040d9984f48396b2e415d.png

const


声明常量,一旦声明,不可更改,而且常量必须初始化赋值。


const虽然是常量,不允许修改默认赋值,但如果定义的是对象Object,那么可以修改对象内部的属性值。

74bad1cb562a484f9c7168c9f5a48f27.png

const和let的异同点


相同点:const和let都是在当前块内有效,执行到块外会被销毁,也不存在变量提升(TDZ),不能重复声明。
不同点:const不能再赋值,let声明的变量可以重复赋值。

const实际上保证的,并不是变量的值不得改动,而是变量指向的那个内存地址所保存的数据不得改动。对于简单类型的数据(数值、字符串、布尔值),值就保存在变量指向的那个内存地址,因此等同于常量。但对于复合类型的数据(主要是对象和数组),变量指向的内存地址,保存的只是一个指向实际数据的指针,const只能保证这个指针是固定的(即总是指向另一个固定的地址),至于它指向的数据结构是不是可变的,就完全不能控制了。因此,将一个对象声明为常量必须非常小心。


块级作用域的使用场景


除了上面提到的常用声明方式,我们还可以在循环中使用,最出名的一道面试题:循环中定时器闭包的考题


在for循环中使用var声明的循环变量,会跳出循环体污染当前的函数。

1b63956c8ef84d8480bad34a76b3ca1d.png


在实际开发中,我们选择使用var、let还是const,取决于我们的变量是不是需要更新,通常我们希望变量保证不被恶意修改,而使用大量的const。使用const声明,声明一个对象的时候,也推荐使用const,当你需要修改声明的变量值时,使用let,var能用的场景都可以使用let替代。


symbol


ES6 以前,我们知道5种基本数据类型分别是Undefined,Null,Boolean,Number以及String,然后加上一种引用类型Object构成了JavaScript中所有的数据类型,但是ES6出来之后,新增了一种数据类型,名叫symbol,像它的名字表露的一样,意味着独一无二,意思是每个 Symbol类型都是独一无二的,不与其它 Symbol 重复。


可以通过调用 Symbol() 方法将创建一个新的 Symbol 类型的值,这个值独一无二,不与任何值相等。

7d162728d5424c8cb4bd0443f076ccf4.png

二、字符串


ES6字符串新增的方法


UTF-16码位:ES6强制使用UTF-16字符串编码。关于UTF-16的解释请自行百度了解。


codePointAt():该方法支持UTF-16,接受编码单元的位置而非字符串位置作为参数,返回与字符串中给定位置对应的码位,即一个整数值。


String.fromCodePoiont():作用与codePointAt相反,检索字符串中某个字符的码位,也可以根据指定的码位生成一个字符。


normalize():提供Unicode的标准形式,接受一个可选的字符串参数,指明应用某种Unicode标准形式。


在ES6中,新增了3个新方法。每个方法都接收2个参数,需要检测的子字符串,以及开始匹配的索引位置。


模板字符串


字符串是JavaScript中基本类型之一,应该算是除了对象之外是使用最为频繁的类型吧,字符串中包含了例如substr,replace,indexOf,slice等等诸多方法,ES6引入了模板字符串的特性,用反引号来表示,可以表示多行字符串以及做到文本插值(利用模板占位符)。

f6dc21cf58c74fd8aa7c066da22cbc7c.png

可以用${}来表示模板占位符,可以将你已经定义好的变量传进括弧中,例如:

fa4c4613cf98425db84b1a80ebd3ddef.png

includes(str, index):如果在字符串中检测到指定文本,返回true,否则false。

16c1e801c23341d7ac7847cdfbe20379.png

startsWith(str, index):如果在字符串起始部分检测到指定文本,返回true,否则返回false。

cd19d105324a4044ad5dd831469669ff.png

endsWith(str, index):如果在字符串的结束部分检测到指定文本,返回true,否则返回false。

ed3b18a1e7db496190013a3bac212c47.png

如果你只是需要匹配字符串中是否包含某子字符串,那么推荐使用新增的方法,如果需要找到匹配字符串的位置,使用indexOf()。


三、函数


函数的默认参数


在ES5中,我们给函数传参数,然后在函数体内设置默认值,如下面这种方式。

ff413f50649949278adf56868e93e236.png

在ES6中,我们使用新的默认值写法

4ce94ebdb5024fd7ac9c1401f2520951.png


四、箭头函数(=>)


(箭头函数比较重要,现在简单提一下,迟一点有空专门写一篇箭头函数的文章。)

92c5e34a75d44497a43cb52f5de78017.png

箭头函数中this的使用跟普通函数也不一样,在JavaScript的普通函数中,都会有一个自己的this值,主要分为:


普通函数:
1、函数作为全局函数被调用时,this指向全局对象
2、函数作为对象中的方法被调用时,this指向该对象
3、函数作为构造函数的时候,this指向构造函数new出来的新对象
4、还可以通过call,apply,bind改变this的指向

箭头函数:
1、箭头函数没有this,函数内部的this来自于父级最近的非箭头函数,并且不能改变this的指向。
2、箭头函数没有super
3、箭头函数没有arguments
4、箭头函数没有new.target绑定。
5、不能使用new
6、没有原型
7、不支持重复的命名参数。


箭头函数的简单理解


1、箭头函数的左边表示输入的参数,右边表示输出的结果。

7da235de8471429d866a911b87abafe6.png

2、在箭头函数中,this属于词法作用域,直接由上下文确定,对于普通函数中指向不定的this,箭头函数中处理this无疑更加简单,如下:

78376cc250424609a6e85a6351912729.png

3、箭头函数中没有arguments(我们可以用rest参数替代),也没有原型,也不能使用new 关键字,例如:

abbe21f0d18943d4bd61be53796f7e15.png

4、箭头函数给数组排序

63f18e8fd77247fc9f39b92b1a1edb71.png


尾调用优化

尾调用是指在函数return的时候调用一个新的函数,由于尾调用的实现需要存储到内存中,在一个循环体中,如果存在函数的尾调用,你的内存可能爆满或溢出。

ES6中,引擎会帮你做好尾调用的优化工作,你不需要自己优化,但需要满足下面3个要求:


1、函数不是闭包
2、尾调用是函数最后一条语句
3、尾调用结果作为函数返回


尾调用实际用途——递归函数优化


在ES5时代,我们不推荐使用递归,因为递归会影响性能。


但是有了尾调用优化之后,递归函数的性能有了提升。


a52c8c67ec7d4b0eba956dcdc209fcac.png


五、ES6对象新增方法


Object.assign()


Object.assign()方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。


Object.assign 方法只会拷贝源对象自身的并且可枚举的属性到目标对象。该方法使用源对象的[[Get]]和目标对象的[[Set]],所以它会调用相关 getter 和 setter。因此,它分配属性,而不仅仅是复制或定义新的属性。如果合并源包含getter,这可能使其不适合将新属性合并到原型中。为了将属性定义(包括其可枚举性)复制到原型,应使用Object.getOwnPropertyDescriptor()和Object.defineProperty() 。


String类型和 Symbol 类型的属性都会被拷贝。


合并对象

f4b808ef7d0542649b4a0d0da898601e.png

合并具有相同属性的对象

4552b0625bce413785234b2cf381c543.png


六、Map和Set


Map和Set都叫做集合,但是他们也有所不同。Set常被用来检查对象中是否存在某个键名,Map集合常被用来获取已存的信息。


Set是有序列表,含有相互独立的非重复值。


Array和Set对比

都是一个存储多值的容器,两者可以互相转换,但是在使用场景上有区别。如下:
Array的indexOf方法比Set的has方法效率低下
Set不含有重复值(可以利用这个特性实现对一个数组的去重)
Set通过delete方法删除某个值,而Array只能通过splice。两者的使用方便程度前者更优
Array的很多新方法map、filter、some、every等是Set没有的(但是通过两者可以互相转换来使用)


Object和Map对比
Object是字符串-值,Map是值-值
Object键为string类型,Map的键是任意类型
手动计算Object尺寸,Map.size可以获取尺寸
Map的排序是插入顺序
Object有原型,所以映射中有一些缺省的键。可以理解为Map=Object.create(null)


Set操作集合

dbf3d638c2cc450e86df79608faa3ecb.png


Map的方法集合

1ebb0b8f30204bde9f26bb5535a1cf59.png


七、迭代器(Iterator)


1、entries() 返回迭代器:返回键值对


79419f1e92dc45b7982b61db7a15af4e.png

2、values() 返回迭代器:返回键值对的value

255337b42aaf4a10a901055f15113140.png

3、keys() 返回迭代器:返回键值对的key

8d4436acb892467d9bce27814c0934af.png

虽然上面列举了3种内建的迭代器方法,但是不同集合的类型还有自己默认的迭代器,在for of中,数组和Set的默认迭代器是values(),Map的默认迭代器是entries()。

for of循环解构


对象本身不支持迭代,但是我们可以自己添加一个生成器,返回一个key,value的迭代器,然后使用for of循环解构key和value。


a24a5f30229a47958602c98ee294aabe.png


字符串迭代器

ba256fa7519442f2af989727d529b48d.png

ES6给数组添加了几个新方法:find()、findIndex()、fill()、copyWithin()


1、find():传入一个回调函数,找到数组中符合当前搜索规则的第一个元素,返回它,并且终止搜索。

75599842b63c45c7a9915a685275a721.png

2、findIndex():传入一个回调函数,找到数组中符合当前搜索规则的第一个元素,返回它的下标,终止搜索。

8ff232cadf124b76a534ea9c4ac1e853.png

3、fill():用新元素替换掉数组内的元素,可以指定替换下标范围。

87ba80ebf8234976850fa9558bdb8be5.png

4、copyWithin():选择数组的某个下标,从该位置开始复制数组元素,默认从0开始复制。也可以指定要复制的元素范围。

ee4e1cf7313b48d1932a39a4e3c39d65.png

ES6中类class、Promise与异步编程、代理(Proxy)和反射(Reflection)API,这几块内容比较复杂,以后有机会再详细写。


来自:沉静地闪光

链接:segmentfault