关于工做中经常使用到的ES6语法

1、let和const面试


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


对于变量来讲,在ES5中var定义的变量会提高到做用域中全部的函数与语句前面,而ES6中let定义的变量则不会,let声明的变量会在其相应的代码块中创建一个暂时性死区,直至变量被声明。segmentfault


let和const都可以声明块级做用域,用法和var是相似的,let的特色是不会变量提高,而是被锁在当前块中。数组


一个很是简单的例子:数据结构

7c09e776b4d046b891395adcf7e265e4.png

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

29e0ed38eac040d9984f48396b2e415d.png

constapp


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


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

2、字符串


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()。


3、函数


函数的默认参数


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

ff413f50649949278adf56868e93e236.png

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

4ce94ebdb5024fd7ac9c1401f2520951.png


4、箭头函数(=>)


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

92c5e34a75d44497a43cb52f5de78017.png

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


普通函数:
一、函数做为全局函数被调用时,this指向全局对象
二、函数做为对象中的方法被调用时,this指向该对象
三、函数做为构造函数的时候,this指向构造函数new出来的新对象
四、还能够经过call,apply,bind改变this的指向

箭头函数:
一、箭头函数没有this,函数内部的this来自于父级最近的非箭头函数,而且不能改变this的指向。
二、箭头函数没有super
三、箭头函数没有arguments
四、箭头函数没有new.target绑定。
五、不能使用new
六、没有原型
七、不支持重复的命名参数。


箭头函数的简单理解


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

7da235de8471429d866a911b87abafe6.png

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

78376cc250424609a6e85a6351912729.png

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

abbe21f0d18943d4bd61be53796f7e15.png

四、箭头函数给数组排序

63f18e8fd77247fc9f39b92b1a1edb71.png


尾调用优化

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

ES6中,引擎会帮你作好尾调用的优化工做,你不须要本身优化,但须要知足下面3个要求:


一、函数不是闭包
二、尾调用是函数最后一条语句
三、尾调用结果做为函数返回


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


在ES5时代,咱们不推荐使用递归,由于递归会影响性能。


可是有了尾调用优化以后,递归函数的性能有了提高。


a52c8c67ec7d4b0eba956dcdc209fcac.png


5、ES6对象新增方法


Object.assign()


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


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


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


合并对象

f4b808ef7d0542649b4a0d0da898601e.png

合并具备相同属性的对象

4552b0625bce413785234b2cf381c543.png


6、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


7、迭代器(Iterator)


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


79419f1e92dc45b7982b61db7a15af4e.png

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

255337b42aaf4a10a901055f15113140.png

三、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()


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

75599842b63c45c7a9915a685275a721.png

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

8ff232cadf124b76a534ea9c4ac1e853.png

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

87ba80ebf8234976850fa9558bdb8be5.png

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

ee4e1cf7313b48d1932a39a4e3c39d65.png

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


来自:沉静地闪光

连接:segmentfault

相关文章
相关标签/搜索