ES6标准总结


ES6标准总结

let、const、var命令

let

  1. 声明的变量只在let命令所在的代码块内有效。
  2. 声明的变量一定要在声明后使用,否则报错。
  3. 只要块级作用域内存在let命令,它所声明的变量就绑定这个区域,不再受外部影响(封闭作用域)。
  4. 不允许在相同作用域内重复声明同一个变量。
  5. 为JavaScript新增了块级作用域,防止了内层变量覆盖外层变量或泄露为全局变量。
  6. 在块级作用域之前加上do,使得块级作用域可以变为表达式,得到返回值(本质上块级作用域是一个语句,没有返回值)。

const

  1. 声明一个只读的常量。一旦声明,常量的值就不能改变。
  2. 一旦声明常量,就必须立即初始化,不能留到以后赋值。
  3. 只在声明所在的块级作用域内有效。
  4. 声明的变量一定要在声明后使用,否则报错。
  5. const实际上保证的并不是变量的值不得改动,而是变量指向的那个内存地址不得改动。
    • 对于简单类型的数据(数值、字符串、布尔值〉而言,值就保存在变量指向的内存地址中,因此等同于常量。
    • 但对于复合类型的数据(主要是 对象和数组)而言,变量指向的内存地址保存的只是一个指针,const只能保证这个指针是固定的,至于它指向的数据结构是不是可变的,这完全不能控制。

var

在ES5中,顶层对象的属性和全局变量是等价的,用var声明的变量既是全局变量,也是顶层变量

注意:顶层对象,在浏览器环境指的是window对象,在 Node 指的是global对象

var a = 10;
console.log(window.a) // 10
  • 使用var声明的变量存在变量提升的情况

    console.log(a) // undefined
    var a = 20

    在编译阶段,编译器会将其变成以下执行

    var a
    console.log(a)
    a = 20
  • 使用var,我们能够对一个变量进行多次声明,后面声明的变量会覆盖前面的变量声明

    var a = 20 
    var a = 30
    console.log(a) // 30
  • ⚠️在函数中使用使用var声明变量时候,该变量是局部的

    var a = 20
    function change(){
        var a = 30
    }
    change()
    console.log(a) // 20 
  • ⚠️而如果在函数内不使用var,该变量是全局的

    var a = 20
    function change(){
       a = 30
    }
    change()
    console.log(a) // 30 

顶层对象的属性

在ES5中,顶层变量(在浏览器环境中指的是window对象,在Node环境中指的是global对象)=全局变量,有以下缺点:

  1. 无法在编译时就提示变量未声明的错误,只有运行时才能知道(因为全局变量可能是顶层对象的属性创造的,而属性的创造是动态的)。
  2. 很容易不知不觉地就创建全局变量。
  3. 顶层对象的属性是到处都可以读写的,这非常不利于模块化编程。
  4. window对象有实体含义,指的是浏览器的窗口对象,这样也是不合适的。

从ES6开始,全局变量逐步与顶层对象的属性隔离:

  1. var命令和function命令声明的全局变量 = 顶层对象的属性。
  2. let命令、const命令、class命令声明的全局变量 ≠ 顶层对象的属性。

解构

ES6允许按照一定模式从数组和对象中提取值,然后对变量进行赋值,这被称为解构。

数组的解构赋值

  1. 模式匹配——只要等号两边的模式(对应位置)相同,左边的变量就会被赋予对应的值。

  2. 解构不成功,变量的值等于undefined。

  3. 不完全解构,即等号左边的模式只匹配一部分的等号右边的数组。这种情况下,解构依然可以成功。

  4. 如果等号的右边不是数组(严格来说不是可遍历的结构),那么将会报错。

    因为等号右边的值或是转为对象以后不具备Iterator接口,或是本身就不具备Iterator接口。

  5. 解构赋值允许指定默认值。默认值生效的条件是,数组成员的属性值严格等于undefined。

    • 如果默认值是一个表达式,那么这个表达式是惰性求值的,即只有在用到时才会求值。
    • 默认值可以引用解构赋值的其他变量,但该变量必须已经声明。

对象的解构赋值

  1. 对象的属性没有次序,变量必须与属性同名才能取到正确的值。
  2. 解构赋值允许指定默认值。默认值生效的条件是,对象的属性值严格等于undefined。
  3. 如果解构模式是嵌套的对象,而且子对象所在的父属性不存在,那么将会报错。
  4. 应该将整个解构赋值语句放在一个圆括号里面,否则JavaScript引擎会将句首{}理解成一个代码块,从而发生语法错误。
  5. 解构赋值允许等号左边的模式之中不放置任何变量名。
  6. 由于数组本质是特殊的对象,因此可以对数组进行对象属性的解构。

字符串的解构赋值

  1. 字符串被转换了一个类似数组的对象,所以也可以解构赋值。
  2. 类似数组的对象都有一个length属性,因此还可以对这个属性进行解构赋值。

数值和布尔值的解构赋值

  1. 如果等号右边是数值和布尔值,则会先转为对象。
  2. 只要等号右边的值不是对象或数组,就先将其转为对象。

函数参数的解构赋值

圆括号问题

  1. 只要有可能导致解构的歧义,就不得使用圆括号。
    • 变量声明语句,模式不能使用圆括号。
    • 函数参数属于变量声明,不能使用圆括号。
    • 赋值语句的模式不能使用圆括号。
  2. 可以使用圆括号的情况只有一种:赋值语句的非模式部分可以使用圆括号。

解构用途

  1. 交换变量的值
  2. 从函数返回多个值
  3. 设置函数参数
  4. 提取JSON数据
  5. 设置函数参数的默认值
  6. 遍历Map结构
  7. 输入模块的指定方法

字符串的扩展

字符的Unicode表示法

  1. JavaScript允许采用 \uxxxx 形式表示一个字符,其中 xxxx 表示字符的 Unicode 码点。但是,这种表示法只限于码点在 \u0000~\uFFFF 之间的字符。超出这个范围的字符,必须用2个双字节的形式表达。
  2. ES6允许将码点放入大括号,就能正确解读该字符。

CodePointAt()

  1. JavaScript内部,字符以UTF-16的格式存储,每个字符固定为2个字节。对于那些需要4个字节存储的字符,JavaScript会认为它们是两个字符。
  2. ES6提供了codePointAt()方法,能够正确处理4个字节存储的字符,返回一个字符的码点(十进制值)。
  3. 该方法定义在字符串的实例对象上。

String.fromCodePoint()

  1. 可以识别大于 0xFFFF 的字符,弥补了String.fromCharCode方法的不足。在作用上,正好与codePointAt方法相反。
  2. 该方法定义在String对象上。

字符串的遍历器接口

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

at()

  1. 字符串实例的at方法,可以识别Unicode编号大于0xFFFF的字符,返回正确的字符。

normalize()

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

其余方法

  1. includes():返回布尔值,表示是否找到了参数字符串。(使用第二个参数n,针对从第n个位置到字符串结束位置之间的字符)
  2. startsWith():返回布尔值,表示参数字符串是否在源字符串的头部。(使用第二个参数n,针对从第n个位置到字符串结束位置之间的字符)
  3. endsWith():返回布尔值,表示参数字符串是否在源字符串的尾部。(使用第二个参数n,针对前n个字符)

repeat()

返回一个新字符串,表示将原字符串重复n次。

  1. 参数如果是小数,会被取整。
  2. 参数如果是负数或者Infinity,会报错。
  3. 参数如果是0到-1之间的小数,则等同于0,这是因为会先进行取整运算。
  4. 参数如果是NaN等同于0。
  5. 参数如果是字符串,则会先转换成数字。

padStart()、padEnd()

如果某个字符串不够指定长度,会在头部或者尾部补全。

padStart()用于头部补全,padEnd()用于尾部补全。

  1. 第一个参数:指定字符串的最小长度
  2. 第二个参数:用来补全的字符串
  3. 如果原字符串的长度等于或大于指定的最小长度,则返回原字符串。
  4. 如果用来补全的宇符串与原字符串的长度之和超过了指定的最小长度,则会截去超出位数的补全字符串。
  5. 如果省略第二个参数,则会用空格来补全。
  6. 可用来提示字符串格式。

模板字符串

增强版的字符串,用反引号(`)标识。

  1. 可以当作普通字符串使用
  2. 可以用来定义多行字符串
  3. 字符串中嵌入变量
  4. 如果在模板字符串中需要使用反引号,则在其前面要用反斜杠转义。
  5. 如果使用模板字符串表示多行字符串,所有的空格和缩进都会被保留在输出中。
  6. 大括号内可以放入任意的JavaScript表达式,可以进行运算,以及引用对象属性。
  7. 如果大括号中的值不是字符串,将按照一般的规则转换为字符串(例如对象)。
  8. 模板字符串中还能调用函数。
  9. 如果模板字符串中的变量没有声明,将报错。

标签模板

模板字符串可以紧跟在一个函数名后面,该函数将被调用来处理这个模板字符串。

String.raw()

该方法往往用来充当模板字符串的处理函数,返回一个反斜线都被转义(即反斜线前面再加一个反斜线)的字符串,对应于替换变量后的模板字符串。

  1. 如果原字符串中的反斜线已经被转义,那么String.raw不会做任何处理。
  2. 该方法也可以作为正常的函数使用,其第一个参数应该是一个具有raw属性的对象,且raw属性的值应该是一个数组。

模板字符串的限制

标签模板中可以内嵌其他语言,但是模板字符串默认会将字符串转义,导致无法嵌入其他语言。

  1. 有一个解决方法是放松对标签模板里面的字符串转义的限制。如果遇到不合法的字符串转义,就返回undefined,而不是报错,且从raw属性上可以得到原始字符串(只在标签模板解析字符串时生效,非标签模板场合依然会报错。)。

正则表达式的扩展

RegExp构造函数

在ES5中,RegExp构造函数的参数有两种情况:

  1. 第一种情况:参数是字符串,这时第二个参数表示正则表达式的修饰符。
  2. 第二种情况:参数是一个正则表达式,这时会返回一个原有正则表达式的拷贝。但是,此时ES5不允许使用第二个参数添加修饰符,否则会报错。

ES6改变了这种行为。如果RegExp构造函数第一个参数是一个正则对象,那么可以使用第二个参数指定修饰符。而且,返回的正则表达式会忽略原有正则表达式的修饰符,只使用新指定的修饰符。

U修饰符

ES6对正则表达式添加了u修饰符,含义为“Unicode 模式”,用来正确处理大于\uFFFF的Unicode字符。也就是说,可以正确处理4个字节的UTF-16编码。

点字符

.字符在正则表达式中的含义是除换行符以外的任意单个字符,对于码点大于0xFFFF的Unicode字符,.字符不能识别,必须加上u修饰符。

后面的以后再写,懒得写了。


文章作者: QT-7274
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 QT-7274 !
评论
  目录