ES6全扩展

字符串的扩展


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时,给定默认值。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,271评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,275评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,151评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,550评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,553评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,559评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,924评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,580评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,826评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,578评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,661评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,363评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,940评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,926评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,156评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,872评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,391评论 2 342