常用的ES6优化升级内容

一、let 和 const 命令

let具有自己的块级作用域,且修复了var声明带来的变量提升问题。使用const声明常量,是不可更改的。

二、对String字符串类型做的常用升级优化

  • 模板字符串(``)
  • 在String的原型上新增includes()方法,取代传统的indexof,语义更清晰
  • 另外还新增了startsWith(), endsWith(), padStart(),padEnd(),repeat()等方法
  • 1、startsWith: str.startsWith(searchString[, position])*
    以什么开头,接受两个参数,一个是要搜索的字符串,第二个是搜索开始的位置,默认为0,找到为true,否则为fasle。
  • 2、endsWith:str.endsWith(searchString[, length])*
    以什么结尾,第一个参数也是搜索的字符串,第二个则是被搜索的字符串长度,默认是str.length
  • 3、padStart:str.padStart(targetLength [, padString])*
    在原字符串开头填充字符串,直到达到目标长度
    第一个参数是目标长度,第二个参数是填充字符串,如果字符串太长,则保留左侧
  • 4、padEnd:str.padEnd(targetLength [, padString])*
    在原字符串末尾填充指定字符串,直到目标长度。与padStart参数相同
  • 5、str.repeat(count)*
    repeat() 构造并返回一个新字符串,该字符串包含被连接在一起的指定数量的字符串的副本。
    count:重复的次数,表示新构造的字符串中重复了多少遍原字符串。

    三、对Array数组类型做的常用升级优化

  • 数组解构赋值:
    let [a,b,c] = [1,2,3]
  • 扩展运算符:
    1
    2
    let a = [1,2,3];
    let b = [...a]
  • find和findIndex方法
    1、find:数组实例find方法,它可接收一个回调函数作为参数,该回调函数可传3个参数分别是当前值、当前位置、原数组。
    [1,2,3].find((value, index, arr) => value > 1)
    执行结果会返回符合条件的首个成员,若没有符合的则返回undefined
    2、findIndex:与find使用方法类似,不同的是返回符合条件成员位置,没有符合则返回-1

这两个方法都可以发现NaN,弥补了数组的IndexOf方法的不足。

1
2
3
[NaN].indexOf(NaN) // -1
[NaN].find(x => Object.is(NaN, x)) // NaN
[NaN].findIndex(x => Object.is(NaN, x)) //0
  • copyWithin
    方法浅复制数组的一部分到同一数组中的另一个位置,并返回它,不会改变原数组的长度。
    arr.copyWithin(target[, start[, end]])
    可传如三个参数:
    1、target表示目标位置,从这个位置开始复制并替换,如果是负数则从尾部开始算,如果target大于arr.length,则不拷贝,若target在start后面,那么复制序列会被修改以符合arr.length
    2、start表示开始复制元素的起始位置,负数表示从末尾开始算,若不穿start,将从0开始复制
    3、end表示开始复制元素的结束位置,会拷贝到这个位置,但不包括它,如果是负数,则是从末尾开始算。若不传将复制到数组结尾(默认是arr.length)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    // 例子
    [1, 2, 3, 4, 5].copyWithin(-2)
    // [1, 2, 3, 1, 2]

    [1, 2, 3, 4, 5].copyWithin(0, 3)
    // [4, 5, 3, 4, 5]

    [1, 2, 3, 4, 5].copyWithin(0, 3, 4)
    // [4, 2, 3, 4, 5]

    [1, 2, 3, 4, 5].copyWithin(-2, -3, -1)
    // [1, 2, 3, 3, 4]
  • includes
    arr.includes(valueToFind[, fromIndex])

valueToFind: 需要查找的元素
fromIndex:从fromIndex索引开始查找,可以是负数,表示从末尾开始
若着找到对应元素,则返回true,否则返回false
[1,2,3].includes(1) // true

  • fill
    fill()方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。
    arr.fill(value[, start[, end]])
    value: 填充的值
    start:起始位置索引,默认为0
    end:结束位置所以,默认是数组长度
    [1,2,3].fill(6,1) // [1, 6, 6]

  • flat
    flat() 方法会按照一个可指定的深度递归遍历数组,并将所有元素与遍历到的子数组中的元素合并为一个新数组返回
    var newArray = arr.flat([depth])
    depth: 指定要提取嵌套数组的结构深度,默认值为 1

    1
    [1,2,[3,4,[5,6]]].flat(2) // [1,2,3,4,5,6]

    四、对Number数字类型做的常用升级优化

  • Number原型上新增isFinite(),isNaN()方法,用于优化传统的全局isFinite(), isNaN(),会把非数值类型转为Number类型再判断,而ES6中不会转化类型。分别用于检测数值是否有限、是否是NaN。

  • Math对象上新增Math.cbrt(),trunc(),hypot()等科学计数法运算方法

五、对Object类型做的常用升级优化

  • 对象属性变量式声明

如果对象属性的值的一个变量,且键值相同,则可省略值的书写

1
2
3
let { a,b,c } = obj
let newObj = {a:a,b:b} //等价于下面的式子
let newObj = {a,b}

方法也可以简化为:

1
2
3
4
5
let obj = {
fn() {

}
}
  • 对象解构赋值
    let { a,b } = { a:1, b:2 }
  • 对象扩展运算符
1
2
3
let { a,...rest } = {a:1, b:2, c:3 } // rest = { b:2, c:3 }
let obj1 = { a:1, b:2 }
let obj2 = {...obj1, c: 3}
  • super 关键字:ES6在Class类里新增了类似this的关键字super。同this总是指向当前函数所在的对象不同,super关键字总是指向当前函数所在对象的原型对象。
  • 在Object原型上新增is()方法,修复了‘===’ 无法比较NaN
  • 新增assign()方法,用于对象新增属性或者对象的合并。
    1
    2
    3
    let obj1 = {a: 1, b:2 }
    let obj2 = {c: 3, d: 4 }
    Object.assign(obj1, obj2) /// { a:1,b:2,c:3,d:4 }
    Object.assign(target, ...sources)
    将所有可枚举属性的值从一个或多个源对象分配到目标对象。它将返回目标对象。
    target是目标对象,将sources源对象分配到该目标对象中。
  • 在Object原型上新增了getPrototypeOf()和setPrototypeOf()方法,用来获取或设置当前对象的prototype对象。
  • 在Object原型上还新增了Object.keys(),Object.values(),Object.entries()方法,用来获取对象的所有键、所有值和所有键值对数组。

六、对Function函数类型做的常用升级优化

  • 箭头函数
    改变了this的指向,为函数定义时所在的对象,而不是执行时。
  • 函数默认赋值
    1
    function fn(a = 1, b) {}

参考链接