是该复习一下ES6了 -- 拓展用法篇

栏目: JavaScript · 发布时间: 7年前

内容简介:之前对于ES6的相关声明类关键字进行了一定的说明,本片我们将来学习一下ES6为JS新增的全局对象的方法内容,核对原有数据类型的新增特性吧。字符串是我们常常会使用的数据类型,作为五大基础数据类型之一,在ES5的时代,我们并不能通过String很好的处理我们的unicode字符编码的问题,所以现在ES6加强了对unicode的支持,我们来具体的看一下吧:字符串对于unicode的支持:

之前对于ES6的相关声明类关键字进行了一定的说明,本片我们将来学习一下ES6为JS新增的全局对象的方法内容,核对原有数据类型的新增特性吧。

正文

1.String

字符串是我们常常会使用的数据类型,作为五大基础数据类型之一,在ES5的时代,我们并不能通过String很好的处理我们的unicode字符编码的问题,所以现在ES6加强了对unicode的支持,我们来具体的看一下吧:

字符串对于unicode的支持:

  • 现在我们可以直接在代码之中通过 \u开头的4位六进制数据来表示一个16位的unicode字符 内容。
  • 我们知道unicode就算用16位表示一个字符但是还是有的时候表示不完全,中文常常一个16进制数完全不够用啊,所有超出最高上限\uFFFF是常有的事情,这是后我们要怎么办呢,首先我们 可以通过使用大括号将数据内容部分括起来,在最前方添加\u来表示当前位unicode码 。例如 \u20BB7 。
  • 或者,我们 使用两个unicode字符进行表示 ,例如 \uD842\uDFB7 。上面两个例子表示的都是同一个中文字。‘
  • 这里我不得不提一下RegExp对象了,因为支持了String之中的unicode码的编写,所以正则之中也提供了相关的匹配修饰符,以防当前正则表达式匹配unicode出错,这个 修饰符就是u ,写在正则的最末端。添加之后相关的比对方法也将会有修改。具体的我们将会后面进行介绍。
  • 因为需要支持unicode所以当我们将字符与unicode码比对的时候的情况需要考虑进来, 字符与对应的unicode码做比较的话,会得到正确的结果 ,哪怕使用全等符号比较。例如: '中' === '\u4e2d' // true
  • JSON.stringify也对与字符串的操作有一定的适配,UTF-8的标准0xD800到0xDFFF之间的码点是不可以单独使用的,ES2019之中将JSON.Stringify()进行了修改,会将这一段的unicode码自动的转义,交由应用自己处理。

字符串模板:

  • ES6为我们新增字符串模板的概念,我们通过 ` ... ` 的形式来进行编写的,其中可以通过 ${} 来添加相关的表达式和变量内容。方便了我们的程序之中的字符串拼接工作。
  • 标签模板,模板字符串可以直接写在一个函数名称之后,不需要加下括号,这样就相当于 模板字符串做拆分然后将参数依次序的填装入函数 内容。田庄参数的形式是,字符串未被表达式打断的部分,作为字符串数组,传递给第一个参数,之后的每一个表达式计算的值传递为一次后面的参数内容。
  • 最后我们说一下模板字符串的限制,再字符串模板之中我们是可以包含其他语言的相关逻辑的,但是有些情况下会将相关字符转义,导致相关的逻辑失效的情况,所以我们再编写逻辑代码的时候需要注意一下,转义字符的使用。

字符串的新增方法:

  • String.fromCodePoint(Number-16) 传递unicode编码,识别相关的字符内容。其有点类似于fromCharCode这一个方法的作用,但是相对的其识别超出了0xFFFF的编码内容。忘记说了,传递的值是16位进制数。而且新方法可以传递多个数值,最后获取的数值是,多个数值之和所对应的值。
  • String.raw(String) 这一方法可以用于标签模板的使用,传递模板字符串,返回一个将斜杠全部转义的字符串内容,或者用于普通方法,传递一个含有raw参数的对象,以及其他任意的数据内容作为之后的参数。其将会自动的将参数之中的数据穿插到raw数据对应的字符串之中。
  • 实例方法:codePointAt(Number-16)对于老版本charCodeAt方法的衍生,可以处理大于0xFFFF的unicode编码的字符。
  • 实例方法:normalize(type)在许多欧洲语言之中,我们可以看到音调的存在,这些字符可以通过一个字符直接表示,也可以通过两个字符相结合的表示方式,但是虽然表示的内容是相同的,但是字符串展示的内容是不相同的,并且判断时将会不成功。这个时候我们可以通过这一方法来转义当前字符串进行判断。这就是这个方法的意义。当然这一方法也可以设置相关的类型内容,详细的可以参考官方文档。
  • 实例方法:repeat(Number) 将字符串重复传入整型数据大小遍,生成新的字符,传入的数据如果时浮点型,也只会取整数部分,传递复数,返回空字符串。传递非数据类型参数,返回空字符串。
  • 实例方法:padStart(Number, String) 传递字符串长度和用于补全的字符串,直接上代码:
'x'.padStart(5, 'ab') // 'ababx'
    'x'.padStart(4, 'ab') // 'abax' 
复制代码
  • 实例方法:padEnd(Number, String)和上面的方法类似,只是补全的位置再原有字符串的后面:
'x'.padEnd(5, 'ab') // 'xabab'
    'x'.padEnd(4, 'ab') // 'xaba'
复制代码

2. RegExp 正则表达式

正则表达式的扩展主要是正对unicode的支持和一点点修饰符还有方法的扩展。上面字符串内容我们已经有提到过的u修饰符内容就是了,我么来具体的看一下吧。

正则对于unicode的支持:

  • u修饰符:主要用来处理大于0xFFFF的unicode字符的内容。当家了这一修饰符之后,所有的大于0xFFFF编码的字符都将会再正则之内视作一个字符来进行匹配(原本时一个16位字节码表示一个字符的)。点字符的任意字符匹配再双字节编码的单个字符匹配时也可以作用了。再者正则之中的带大括号的字符写法也将可以做匹配了。预定义符号对于双字节字符也将会长生匹配效果。
  • RegExp.prototype.unicode:这一新增的属性,可以帮助我们确定当前的正则表达式是否添加了u修饰符。

正则表达式其他修饰符的扩展:

  • y修饰符:粘连修饰符,匹配的时候,当匹配到第一个子字符串的之后,如果还需要匹配成功,需要下一个字符开始就能匹配成功,否则失败。当然我们也有RegExp.prototype.sticky 属性帮我们判别当前的额修饰符内容,上例子:
var s = 'aaa_aa_a';
    var r1 = /a+/g;
    var r2 = /a+/y;
    
    r1.exec(s) // ["aaa"]
    r2.exec(s) // ["aaa"]
    
    r1.exec(s) // ["aa"]
    r2.exec(s) // null
复制代码
  • s修饰符:添加了这一修饰符之后,点匹配符可以匹配任意的字符了,所以我们又称S修饰符时正则表达式的dotAll模式。

正则表达式的其他部分内容:

  • 后行断言:新增后行匹配的功能,之前只能先行断言才会有效果。
  • ES2018之中引入了/p{}和/P{}的匹配字符,允许正则表达式匹配符合unicode某种行为的字符。
  • 具名组匹配:我们之前通过小括号来将结果提取出来,但是我们往往只能再exec方法之后通过结果数组来进行内容的获取,而且数据没有相关的名称,获取的时候还需要取比对相关的位置信息所以十分的麻烦,但是现在我们可以再小括号之中添加?的形式为当前小括号之中的数据取一个名称,然后我们可以通过结果对象.group.name的形式来获取相关的比对数据内容了。
  • 正则表达式内部需要引用某一个具名组匹配的话,我们可以通过\k方式来进行引用。
  • 我们现在想要获取字符串之中所有的匹配值,可以直接通过String.prototype.matchAll方法来获取。但是它返回的时一个遍历器,所有需要我们自己遍历一遍。

3.Number

数值做的扩展主要时再一些认证 的方法之上还有数据表示上面的支持。其他的部分变化不大。

进制数据表示:

  • 八进制数据可以通过前面加上0o或者0O来进行表示,且判断可以成功。
  • 二进制数据可以通过数据前面加上0b或者0B来进行转换。

数据类型的拓展方法和属性:

  • Number.isFinite():判断当前数据是否有穷。非数据类型一律返回false
  • Number.isNaN():判断餐是是否是NaN。
  • Number.parseInt() | Number.parseFloat():相关方法从全局改变到了Number对象上面。其他部分和原有方法相同。
  • Number.isInteger(): 判断数值是否为整形。
  • Number.EPSILON:新增一个极小数,了用于比较数据的时候来规避误差。
  • Number.isSafeInteger():表示的是JS能表示的精确整数的范围。2的53次方到-2的53次方。不包含两个端点。
  • Number.MAX_SAFE_INTEGER:表示可计算最大的整形数据
  • Number.MIN_SAFE_INTEGER:表示可计算最小的整形数据

4.Function

正对与Function的扩展内容,主要是有许多的语法糖可以帮助我们更为语义化的,便捷的编写当前的内容。

参数可写的优化:

  • 添加了默认值的设置,可以在函数的参数之后添加赋值号,并且将值赋值给参数,这样这个值将会是默认值,当没有传递参数的情况下,默认值将会作为函数参数的值。代码:
function(a = 5, b){...}
复制代码
  • 结构赋值可以用在函数的参数声明之中,这样我们可以更为方便的 传递数据内容。例如
function(x, {y = 0}){...}
复制代码
  • function的length属性会在参数有默认值的时候失真, 有默认值的参数将会不算在length属性之中 。
  • 使用默认值得时候需要注意的是,在 函数初始化的时候,有默认值的话,函数的参数会有一个单独的作用于内容,外部的参数将不会影响相关的数据内容 。
  • rest参数形式是函数的参数的另外一种语法糖形式。通过...value来将传递的参数通过数组的方式防止在value之中。这样我们就可以不限定当前的函数的形参数量,同时也方便我们的获取。当然这样的写法只能放置在参数的最后,否则将会报错。例如:
function(x, y, ...rest){...}
复制代码

函数的其他拓展:

  • 严格模式:ES6之中严格模式可以编写在函数之中,严格模式下,函数的参数是不可以设置默认值的,同时不能使用解构赋值,或者任何扩展运算符了,否则会报错。这样规定是有原因的,因为JS是顺序执行解析,我们发现在函数体之中写'use strict'字符串将会和参数以及函数体都要严格模式的形式相冲突。因为只有在确认参数了之后才能在函数体之中发现使用严格模式。为了防止前述三种语法糖导致严格模式下规定不能被遵守,所以直接不予使用。
  • name属性:函数拥有name属性,返回该函数的函数名称。如果将匿名函数赋值给一个变量,那么在ES6之中函数名称将会是变量名。如果是Function构造出来的函数对象的话name属性将会是anonymous。
  • 箭头函数:相信含多人已经用过了,只需要注意: 其中的this指针的指向就好了,它是定义时所在的对象,而不是使用时所在的对象。它不能作为构造函数,没有arguments属性,不可以使用yield指令(这个将会在之后进行讲解)。
  • 尾部调用优化:意思是如果在函数的尾部调用了函数,那么严格模式下,js自动转化当前函数调用栈,将要调用函数的调用帧直接替换当前调用函数的调用帧,而不是在当前函数之后再次启用一个新的调用帧,压入到调用栈。好处就在于节省内存空间。只有严格模式之下才能调用是因为,因为严格模式下arguments和caller两个变量的禁用,这两个变量会追踪函数的调用栈,如果这两个变量可以使用的话,将会和调用帧替换有冲突。

4.数组的扩展

数组主要是对于方法的扩展和一个扩展运算符(...)的语法糖新增。让我们来看看到底有什么:

  • 扩展运算符( ... ):其实就是三个点,我们在function的rest参数之中有看到过它,那个时候表示参数省略,而在其之后加数组变量的话,实际上就等于是将当前的数组进行了一个拆分操作。将数组元素打散。当然其本质是调用了Iterator来进行内容的遍历,并返回了数据
  • Array.from():传递对象内容,把类数组对象和可遍历对象转化成为真正的数组内容。
  • Array.of():将传递的参数组成一个数组。主要是弥补Array构造函数的缺陷。
  • 实例方法:entries(), key(), values()这三个方法主要是用来数组的便利,key获取的是下标内容,values主要获取的是数值内容,entries返回的是由下标和数值组成的数组作为项的数组。
  • 我们这里主要讲一下主要的几个方法,还有部分方法想要了解的伙伴可以取官网看一看。

6.Object

对象的扩展直接影响着我们程序编写时候的便捷和语义表达。ES6之中为我们简化了许多对象的编写的方式。

  • 我们在声明关键字篇之中有提到了,ES6之中对象的变量可以通过[表达式]的形式来展示,变量名就是表达式的结果。
  • 对象的每个属性都有一个描述对象(descriptor)用来控制属性的行为,Object.getOwnPropertyDescriptor可以获取属性的描述符,属性表述符,一般对象属性有四个特性,值(value),writable(是否可写),enumerable(可枚举),configurable(属性是否可配置)。如果是getter/setter方法的属性则有get,set和enumerable,configurable这四个属性。具体的操作和内容请见MDN,很详细咯。
  • 扩展运算符:对象也是可以使用三点运算符,可以获取所有的可遍历属性。

下面来看一些Object的拓展方法把:

  • Object.is() 用于判断两个值是否完全相等和 === 的行为基本一致,不同的在于+0于-0的不相等,还有NaN和本身相等,这两点和全等不一样。
  • Object.assign() 合并对象,将原对象所有可枚举属性开被盗目标对象之中。如果目标对象参数传递的不是对象,将会先转化城对象然后再合并。如果首位参数传递了undefined和null将会出错,如果传递不在首位参数就不会报错。
  • Object.getPrototypeOf() | Object.setPrototypeOf() 这两个方法主要是用于设置和获取对象的原型的对象的。
  • Object.keys() | Object.values() | Object.entries() 这三个方法返回的是数组,分别返回对象的 可枚举属性的名称,可枚举属性的值,或者可枚举属性名称和值组成的数组作为项的数组。

结束

ES6中主要添加的相关的扩展,语法糖,以及部分新的操作符号,我们就讲到这里了。部分概念只是提及,没有完全讲明白,可以看一看官网文档,一首说明莫过于此。如果有错误的地方请帮忙指出,希望共同成长,共同进步。拜拜。


以上所述就是小编给大家介绍的《是该复习一下ES6了 -- 拓展用法篇》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。

Learning JavaScript

Learning JavaScript

Shelley Powers / Oreilly & Associates Inc / 2006-10-17 / $29.99

As web browsers have become more capable and standards compliant, JavaScript has grown in prominence. JavaScript lets designers add sparkle and life to web pages, while more complex JavaScript has led......一起来看看 《Learning JavaScript》 这本书的介绍吧!

html转js在线工具
html转js在线工具

html转js在线工具

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具