ES6全扩展

2020-06-16  本文已影响0人  六个周

字符串的扩展


1⃣️、字符的unicode表示法

首先要先对字符的unicode表示法有一个整体认识。
其次,在ES6之前,unicode字符表示法只限于码点在\u0000 ~\uFFFF之间的字符,超过此范围的字符需用两个双字节表示,ES6对此做出的改进为:
将码点放入大括号中去,就能正确解读该字符

2⃣️、字符串的遍历器接口

ES6 为字符串添加了遍历器接口,使得字符串可以被for...of循环遍历。
除了遍历字符串,这个遍历器最大的优点是可以识别大于0xFFFF的码点,传统的for循环无法识别这样的码点。

3⃣️、模板字符串

ES6 引入了模板字符串解决输出模板比较繁琐的问题。
模板字符串(template string)是增强版的字符串,用反引号(`)标识。

字符串的新增方法


1⃣️、String.fromCodePoint()

如果知道了一个码点,想知道它表示的是什么字符。ES6之前我们可以使用:
String.fromCharCode(0x0030)来转化成为字符。
上述的这个方法有个缺陷,就是它有限制,只能识别0x0000~0xFFFF 之间的码点,超出后会溢出。
于是,我们这里要学习的就是这个:String.fromCodePoint()

2⃣️、String.raw()

String.raw()本质上是一个正常的函数,只是专用于模板字符串的标签函数。

3⃣️、实例方法:codePointAt()

不想看这里。

4⃣️、实例方法:normalize()

ES6 提供字符串实例的normalize()方法,用来将字符的不同表示方法统一为同样的形式,这称为 Unicode 正规化.

5⃣️、实例方法:includes()、startWith()、endsWith()

这三个方法都支持第二个参数,表示开始搜索的位置。

6⃣️、实例方法:padStart()、padEnd()

ES2017 引入了字符串补全长度的功能。如果某个字符串不够指定长度,会在头部或尾部补全。padStart()用于头部补全,padEnd()用于尾部补全。
padStart()和padEnd()一共接受两个参数,第一个参数是字符串补全生效的最大长度,第二个参数是用来补全的字符串。

7⃣️、实例方法:trimStart()、trimEnd()

ES2019 对字符串实例新增了trimStart()trimEnd()这两个方法。它们的行为与trim()一致,trimStart()消除字符串头部的空格,trimEnd()消除尾部的空格。它们返回的都是新字符串,不会修改原始字符串。

数值的扩展


1⃣️、二进制、八进制表示法(分别用二、八进制表示10)

ES6规定:二进制与十进制分别以0b[B]0o[O].
因此用二进制表示数字10为:0B1010,用八进制表示数字10为0O12;

2⃣️、Number.isFinite()、Number.isNaN()

这个Number的这俩方法在日常开发中几乎没用到过。
判断一个数是不是有效,判断一个数是不是数值。这里简单做下记录,明确知道有这俩新方法。

3⃣️、Number.parseInt()、Number.parseFloat()

这俩东西的出现频率极高,ES6将这俩方法移植到了Number对象上,这么做的目的是逐步减少全局性方法,使得语言逐步模块化。
因此下次使用这俩方法的时候用上Number,那就说明对这个小知识点有了掌握。

4⃣️、Number.isInteger()

Number.isInteger()用来判断一个数值是否为整数。

5⃣️、Number.EPSILON

ES6 在Number对象上面,新增一个极小的常量Number.EPSILON。根据规格,它表示 1 与大于 1 的最小浮点数之间的差。
Number.EPSILON实际上是 JavaScript 能够表示的最小精度。误差如果小于这个值,就可以认为已经没有意义了,即不存在误差了。

6⃣️、安全整数和Number.isSafeInterger()

JavaScript能够准确表示的整数范围是在-253到253之间(不含两个端点)。超过这个范围,无法精确表示这个值。
ES6引入两个常量来表示这个范围的上下限:Number.MAX_SAFE_INTERGERNumber.MIN_SAFE_INTERGER.
Number.isSafeInteger()则是用来判断一个整数是否落在这个范围之内。

7⃣️、Math.trunc()

Math.trunc()用于去除一个整数的小数部分,返回整数部分。

8⃣️、Math.sign()

Math.sign()用来判断一个数是正数(+1)、负数(-1)、+0或-0.

函数的扩展


1⃣️、函数参数的默认值

我们在写一个工具函数的时候,要积极使用这种函数默认值的写法,不仅让我们对此函数传值有一个整体了解,还可以减少因为参数传递错误出现的bug。

2⃣️、rest参数

ES6 引入 rest 参数(形式为...变量名),用于获取函数的多余参数,这样就不需要使用arguments对象了。rest 参数搭配的变量是一个数组,该变量将多余的参数放入数组中。
注意,rest 参数之后不能再有其他参数(即只能是最后一个参数),否则会报错。

数组的扩展


1⃣️、扩展运算符

对于一个数组来说,如果使用扩展运算符,相当于是rest参数的逆运算,将一个数组转为用逗号分割的参数序列。

2⃣️、Array.from()

Array.from方法用于将两类对象转为真正的数组:类似数组的对象(array-like object)和可遍历(iterable)的对象(包括 ES6 新增的数据结构 Set 和 Map)。

3⃣️、Array.of()

Array.of()用于将一组值转化为数组。

4⃣️、数组实例的find()和findIndex()

数组实例的find方法,用于找出第一个符合条件的数组成员。
数组实例的findIndex方法的用法与find方法非常类似,返回第一个符合条件的数组成员的位置,如果所有成员都不符合条件,则返回-1。

5⃣️、数组示例的fill()

fill方法使用给定值,填充一个数组。

  let arr = [1,3,3,4,5];
  arr.fill(2,1,2); //[1,2,3,4,5]

6⃣️、数组实例的entries()、keys()和values()

ES6 提供三个新的方法——entries(),keys()和values()——用于遍历数组。它们都返回一个遍历器对象(详见《Iterator》一章),可以用for...of循环进行遍历,唯一的区别是keys()是对键名的遍历、values()是对键值的遍历,entries()是对键值对的遍历。

7⃣️、数组实例的flat()、flatMap()

数组的成员有时还是数组,Array.prototype.flat()用于将嵌套的数组“拉平”,变成一维的数组。该方法返回一个新数组,对原数据没有影响。
如果不管有多少层嵌套,都要转成一维数组,可以用Infinity关键字作为参数。

8⃣️、数组的空位

注意,空位不是undefined,一个位置的值等于undefined,依然是有值的,空位是指没有任何值。
ES6明确将空位转为undefined。
由于空位的处理规则非常不统一,所以建议避免出现空位。

对象的扩展


1⃣️、属性的简洁表示法

对于键值对来说:属性名就是变量名, 属性值就是变量值。let obj ={name,age}
对于对象中的方法来说,也可以直接简写 methods (){}

2⃣️、属性的可枚举性和遍历

对象的每一个属性都有一个描述对象(Descriptor),用来控制该属性的行为。
Object.getOwnPropertyDescriptor(obj,key)方法可以获取该属性的描述对象。
他们分别是:

  • enumerable:可枚举性,目前有四个操作会忽略enumerable为false的属性
    for...in:只遍历自身的和继承的可枚举的属性。
    Object.keys():返回对象自身所有可枚举的属性键名。
    JSON.stringfy():只串行化对象自身的可枚举属性。
    Object.assign():忽略enumerable为false的属性,只拷贝对象自身的可枚举属性。

3⃣️、super关键字

我们知道,this关键字总是指向当前函数所在的对象,ES6又新增了一个类似的关键字super,指向当前对象的原型对象。
注意,super指向原型对象时,只能用在对象的方法之中,用在其他地方都会报错。(目前,只有对象方法的简写法可以让 JavaScript 引擎确认,定义的是对象的方法。)

4⃣️、对象的扩展运算符

解构赋值:

  • 解构赋值等号的右边要求是一个对象。
  • 解构赋值必须是最后一个参数,否则会报错。
  • 解构赋值的拷贝是浅拷贝。
  • 扩展运算符的解构赋值,不能复制继承自原型对象的属性。

5⃣️、链判断运算符

我们写代码时,会遇到判断一个对象的某个属性是否存在,比如我们需要判断lmz的user信息的age属性是否存在,我们安全的写法是这样的:
if(lmz && lmz.user && lmz.user.age){return "age属性存在! "}

ES2020引入了链判断运算符,简化上面写法:
if(lmz ?. user ?.age){return "age属性存在!"}

6⃣️、Null判断运算符

当判断某个属性的值是undefined或者null的时候,我们一般使用||来给定默认值。但是这个符号有个缺陷,如果判断的这个属性是0或者false或者空字符串的时候,他同样会返回||后面的值(默认值生效)。
这个时候我们使用||这个符号就不太妙来,ES2020引入了一个新的Null判断运算符:??,它的行为类似||,但是只有运算符左侧的值为null或undefined时,才会返回右侧的值。
此运算符的一个目的就是与链式运算符一起使用,判断一个属性为null或undefined时,给定默认值。

上一篇下一篇

猜你喜欢

热点阅读