ES6笔记

ES6新特性内容笔记(未完成)

let和const

  1. 不存在变量提升(变量声明前不可用)

  2. 暂时性死区(变量声明前,不可复制,注意 typeof不再是绝对安全的

    当一个变量出现暂时性死区,在使用typeof方法时则会报错,如果是普通的var变量,则返回undefined

  1. 不允许重复声明

    相同作用域内不允许重复声明变量,函数内不允许重新定义参数

  2. 块级作用域

    解决内层变量覆盖外层变量,局部变量泄露为全局变量的问题

    解决使用立即执行代码的问题 ( function ( ) { … } ( ) );

  3. const指向一个内存地址,当内存地址内的对象发生改变,const不报错

ES声明变量的6种方法

  • ES5:var、function
  • ES6:let、const、class、import
  1. 全局变量不再与顶级对象属性挂钩 ( window.a != let/const a )

  2. 顶级对象global

    由于在不同环境下的顶级对象差异(浏览器下为windownodejs中为global),在各种环境中设置顶级对象global使其在所有环境下能够被访问

变量的结构赋值

从数组和对象中提取值,对变量进行赋值

  • 左右两侧结构相同
  • 等式右边必须是合法数据类型
  • 必须在声明时赋值

数组的结构赋值

  1. 等式两边的值必须都是可迭代对象

  2. 利用“模式匹配”的方式将可迭代对象拆分赋值

  3. 当等式左边只匹配右边一部分的模式,称为“不完全匹配”,也可赋值成功

  4. 默认值

    结构赋值允许指定默认值,但只有结构变量严格等于 ( === ) undefined,默认值才会生效

对象的结构赋值

  1. 对象属性无次序,所以要赋值变量名必须与对象属性名相同,一一对应

    如果变量名与属性名不一致则必须写成 let { val : foo } = { foo : 'hello world' } // foo = 'hello world'

字符串的结构赋值

字符串会被转换为一个类数组对象进行结构赋值

1
2
const [a,b,c,d,e] = 'hello'    // a='h',b='e',c='l',d='l',e='o'
const {lenth: len} = 'hello' // lenth=5

字符串的扩展

Unicode字符串方法

  1. 字符的Unicode表示法(采用大括号的形式解决字符编码上限问题)

  2. codePointAt()方法正确返回占用4个字节的字符码点(十进制)

  3. String.fromCharCode()方法正确将码点返回成对应字符

  4. 字符串的遍历接口 for ... of (能够正确遍历占用4个字节的字符)

  5. normalize()方法(Unicode 正规化)

    许多语言有语调符号和重音符号

    在ES5中 直接提供带重音符号的字符 != 合成符号,即原字符与重音符号的合成,两个字符合成一个字符

    1
    2
    > '\u01D1'.normalize() === '\u004F\u030C'.normalize()  //ture
    >

字符串方法

  1. 查询方法

    • includes():返回布尔值,表示是否找到了参数字符串。
    • startsWith():返回布尔值,表示参数字符串是否在原字符串的头部。
    • endsWith():返回布尔值,表示参数字符串是否在原字符串的尾部。
  2. repeat( n )方法:返回一个新的字符串,将原字符串循环n次
  3. padStart(lenth, str),padEnd(lenth,str)字符串补全长度方法
  4. matchAll()方法返回一个正则表达式在当前字符串的所有匹配

模板字符串

  1. 模板字符串: `…` ,可换行,并且会保留所有的空格和缩进

  2. 模板字符串绑定变量的方式 :${ value|function }

  3. 模板编译:使用<%...%>放置 JavaScript 代码,使用<%= ... %>输出 JavaScript 表达式

  4. 标签模板

    将模板紧跟在一个函数的后面,该函数则用来处理这个模板,例如:alert`hello world`

    实质是调用函数的另一种表达形式

  5. String.raw()方法:处理模板字符串的基本方法,它会将所有变量替换,而且对斜杠进行转义,方便下一步作为字符串来使用

数值的扩展

  1. 二进制和八进制的表示法:二进制-> 0B|0b,八进制-> 0o|0O
  2. 十进制转换:Number( 0b|0o )
  3. Number.isFinite()Number.isNaN()方法

    • Number.isFinite() 用于查询一个数字是否是有限的,即不是Infinity
    • Number.isNaN()用于检查一个值是否为NaN
  4. Number.parseInt(), Number.parseFloat()window对象移植,功能不变
  5. Number.isInteger():判断一个数值是否为整数,非数字类型返回false超过IEEE754精度以及极限值都会存在误差
  6. Number.EPSILON,常量,等于0.0(52个)1,实际表示JS的最小精度,可以用来设置误差范围
  7. 安全整数和 Number.isSafeInteger()
    • Number.MAX_SAFE_INTEGER = 2^53Number.MIN_SAFE_INTEGER = -2^53:常量,表示JS整数上下限
    • Number.isSafeInteger()方法,用于判断数值是否在安全整数范围内

Math对象的扩展

  1. Math.trunc()方法:去除一个数的小数部分,返回整数部分
  2. Math.sign()方法:判断一个数是正数(返回+1),负数(返回-1),还是零(返回0或-0)
  3. Math.cbrt()方法:用于计算一个数的立方根
  4. Math.clz32()方法:将参数转化为32位无符号整数形式
  5. Math.imul()方法:返回两个数以32位带符号整数形式相乘的结果
  6. Math.fround()方法:返回一个数的32位单精度浮点数形式
  7. Math.hypot()方法:返回所有参数的平方和的平方根
对数方法
  1. Math.expm1(x)方法:返回e^x - 1,即Math.exp(x)-1
  2. Math.log1p(x)方法:返回1+x的自然对数,即Math.log(1 + x)
  3. Math.log10(x)方法:返回以10为底的x的对数
  4. Math.log2(x)方法:返回以2为底x的对数
双曲函数方法
  • Math.sinh(x) 返回x的双曲正弦(hyperbolic sine)
  • Math.cosh(x) 返回x的双曲余弦(hyperbolic cosine)
  • Math.tanh(x) 返回x的双曲正切(hyperbolic tangent)
  • Math.asinh(x) 返回x的反双曲正弦(inverse hyperbolic sine)
  • Math.acosh(x) 返回x的反双曲余弦(inverse hyperbolic cosine)
  • Math.atanh(x) 返回x的反双曲正切(inverse hyperbolic tangent)

指数运算符

** :右结合运算符,多个指数运算符优先算右面的

函数的扩展

  1. 函数参数的默认值(不能出现同名参数,惰性求值,尽量定义在尾部)

    • length属性:返回没有指定默认值的参数个数(如果默认值参数不是尾参数,则只返回默认参数前面未指定默认值的参数个数)

    • 作用域:设置了默认值的参数,函数进行声明初始化时,参数会形成一个单独的作用域。等到初始化结束时,这个作用域会消失。

  2. rest参数:形式为...变量名,该变量名对应一个类数组对象,用于获取函数的多余参数,类似于arguments

  3. 严格模式:只要函数参数使用了默认值,解构赋值,扩展运算符,那么函数内部就不能显式设定为严格模式

  4. name属性:返回函数的函数名,匿名函数会返回被赋值的变量名(Function构造函数返回的函数实例,name属性的值为anonymous

  5. 箭头函数:使用箭头定义函数(“ () => { ... }”

    • 函数体内的this对象,是定义时所在的对象,而不是使用时所在的对象
    • 不可以当做构造函数,即不可食用new命令
    • 函数体内没有arguments对象,不可用,可以用...rest代替
    • 不可以使用yield命令,因此箭头函数不能用作 Generator 函数。

    当只有一个参数时,参数的圆括号可以省去

    当只有一个return时,花括号和return可以同事省去

  6. 双冒号运算符:函数绑定运算符,双冒号左边是一个对象,右边是一个函数。该运算符会自动将左边的对象,作为this对象绑定到右边的函数上面

  7. 尾调用优化:在函数尾部返回调用其他函数,则只保留内层函数调用帧,外层函数由于已经返回不会再用到则不会保留调用帧,所以其内部调用帧会取代外部调用帧

    ES6的尾调用优化比现在严格模式下开启,正常模式无效。

    正常模式下,函数内部有两个变量argumentscaller,可以跟踪函数的调用栈

  8. 尾递归:一个函数返回函数本身进行递归,则只保留一个调用帧,不会出现栈溢出现象

    • 改写:将所有的内部变量改写成函数参数

    在严格模式下实现,非严格模式下减少调用栈的方法就是采用循环替代递归

  9. 函数参数的尾逗号:允许函数在最后一个参数后面添加一个逗号

数组的扩展

  1. 扩展运算符(...),类似于...rest参数逆运算,将一个数组转化为用逗号分隔的参数序列

    • 可以替代函数的apply方法
    • 复制数组(直接复制数组,只是复制了数组的指针)
    • 合并数组
    • 与解构赋值结合
    • 将字符串转化为数组
    • 可迭代对象
  2. Array.from()方法:将类数组对象和可迭代对象转化为数组

    该方法可以接受第二个参数,其作用类似于map方法,返回一个数组

  3. Array.of()方法:将一组值转化为数组

  4. copyWithin(target, start = 0, end = this.length)方法:在数组内部将指定位置的成员复制到其他位置(会覆盖原有成员)。

    • target(必需):从该位置开始替换数据。如果为负值,表示倒数。
    • start(可选):从该位置开始读取数据,默认为 0。如果为负值,表示倒数。
    • end(可选):到该位置前停止读取数据,默认等于数组长度。如果为负值,表示倒数。
  5. find()findIndex()方法

    • Array.find( func ):根据函数所提供的规则找出符合规则的第一个元素,如果整个数组都没有则返回undefined
    • Array.findIndex( func ):返回的是下标,没有则返回-1

    这两个方法的第二个参数,用于绑定this指向的对象

  6. 数组实例的fill()方法:给定一个参数值用于填充整个数组(第二、三个参数用于指定起始和结束位置,可选)

  7. 数组实例的 entries()keys()values():遍历数组。

    • entries():返回数组键值对
    • keys():返回键
    • values():返回值
  8. includes()方法:查询数组中是否包含给定的值,返回布尔值(可以给定第二个参数为查询的起始位置)

  9. flat()flatMap()方法

    • flat():将多维数组拉平,默认只拉平一层,可以给定参数选择拉平的层数
    • flatMap():先对数组内的元素执行map(),然后执行flat()方法

对象的扩展

  1. 属性和方法可以简写
  2. 属性名表达式:可以同时使用标识符和表达式作为对象的属性名
  3. 方法的name属性:返回方法名
  4. 属性的遍历:
    • for ... in
    • Object.keys(obj):返回可枚举属性的键名数组
    • Object.getOwnPropertyNames(obj):返回所有属性的键名数组(不包括Symbol)
    • Object.getOwnPropertySymbols(obj):返回所有Symbol属性的键名
    • Reflect.ownKeys(obj):返回对象的所有属性
  5. super关键字:指向当前对象的原型对象(只能在对象的方法中使用)
  6. 对象的扩展运算符:( ... )将所有可遍历属性,解构赋值在其他对象中
    • 对象的扩展运算符也可以用到数组,将数组转换为对象,键为数组元素的下标
    • 如果用到字符串,会将字符串转化为类数组对象

对象的新增方法

  1. Object.is()方法用来比较两个值是否相等。(解决了 ===== 的缺陷)

  2. Object.assgin()方法用于对象合并,第一个参数为目标对象,后续参数为源对象

    如果合并的对象有相同的属性,那么后面的会覆盖前面的属性

  3. Object.getOwnPropertyDescriptors()方法:返回指定对象所有自身属性的描述对象

  4. __proto__属性,Object.setPrototypeOf()Object.getPrototypeOf()

    • __proto__:用来设置当前对象的prototype对象
    • Object.setPrototypeOf():用来设置一个对象的prototype对象,返回对象本身
    • Object.getPrototypeOf():用于读取一个对象的prototype对象
  5. Object.keys()Object.values()Object.entries()

    • Object.keys(): 返回一个含有所有可枚举属性键名的数组
    • Object.values():返回一个含有所有可枚举属性键值的数组
    • Object.entries():返回一个含有所有属性键值对的二维数组
  6. Object.fromEntries()方法是Object.entries()方法的逆方法,用于将一个二维数组转化为对象

Symbol

  • 原始数据类型,表示独一无二的值,ES中第七种原始数据类型
  • 利用symbol函数构成,可对对象新增已有的属性名而不发生冲突(原有字符串属性名,现有symbol属性名)

  • 利用方括号 [] 访问Symbol对象属性,不可以用点操作符

  • Symbol类型不会被普通的for ... infor ... of 循环到,也不会被Object.keys()Object.getOwnPropertyNames()JSON.stringify()方法返回

    使用Object.getOwnPropertySymbols()方法,可以获得对象内所有Symbol属性名

  • Reflect.ownKeys(obj)返回所有类型的键名,包括Symbol类型

  • Symbol.for(str) 查找是否有以此字符串为标识的Symbol值,有,则返回,无,则新建

  • Symbol.keyFor()方法返回一个已登记的 Symbol 类型值的key,如果没有则不新建

Set 和 Map 数据结构

Set 类数组集合

  • 构造函数,利用实例化对象构造( new Set() )
    • 利用add()方法添加新值
    • 可以再实例化对象时传入一个数组或可迭代对象

属性

  • Set.prototype.constructor:构造函数,默认就是Set函数
  • Set.prototype.size:返回Set实例的成员总数

方法

  • add(value):添加某个值,返回 Set 结构本身。
  • delete(value):删除某个值,返回一个布尔值,表示删除是否成功。
  • has(value):返回一个布尔值,表示该值是否为Set的成员。
  • clear():清除所有成员,没有返回值。

Array.from方法可以将 Set 结构转为数组。

遍历

  • keys():返回键名的遍历器
  • values():返回键值的遍历器
  • entries():返回键值对的遍历器
  • forEach():使用回调函数遍历每个成员

Weak Set

WeakSet 结构与 Set 类似,也是不重复的值的集合。但是,它与 Set 有两个区别。

  1. WeakSet 的成员只能是对象,而不能是其他类型的值。
  2. WeakSet 中的对象都是弱引用

方法

  • WeakSet.prototype.add(value):向 WeakSet 实例添加一个新成员。
  • WeakSet.prototype.delete(value):清除 WeakSet 实例的指定成员。
  • WeakSet.prototype.has(value):返回一个布尔值,表示某个值是否在 。

Map

提供一种键值对的数据结构,并且键名不再强制要求为字符串类型,即可以为 值->值 形式

属性和操作方法

  1. size属性:返回 Map 结构的成员总数
  2. set(key, value):更新键值对,返回Map对象
  3. get(key):读取key对应的键值
  4. has(key):查询Map对象是否存在指定的键值
  5. delete(key):删除一个键值,返回删除结果
  6. clear():清除所有成员

遍历方法

  • keys():返回键名的遍历器。
  • values():返回键值的遍历器。
  • entries():返回所有成员的遍历器。
  • forEach():遍历 Map 的所有成员。

与其他数据结构的互相转换

  • Map 转为数组:利用扩展运算符[ ... ]
  • 数组 转为 Map:利用Map构造函数实例化对象
  • Map 转为对象:直接转换,但键名必须为字符串
  • 对象转为 Map:直接转换

WeakMap

WeakSet类似

Proxy

  • 用于修改某些操作的默认行为,在语言层面作出修改
  • 相当于在某些对象外假设一层“拦截”,可以对访问对象操作进行过滤和改写

利用proxy构造函数可以实例化一个对象,对其进行代理。

1
var proxy = new Proxy(target, handler);

target参数表示所要拦截的目标对象,handler参数也是一个对象,用来定制拦截行为。


客官里面请~