美文网首页
es6之后的新特性收集

es6之后的新特性收集

作者: 次世代书虫 | 来源:发表于2020-11-26 10:56 被阅读0次

    Array.prototype.includes

    数组是否包含指定的值,例如:

    [1,2,3].includes(1) // true
    

    Math.pow函数简写模式**

    例如:

    Math.pow(10, 2) === 10**2 // true
    

    Object.values

    类似于Object.keys,不同的是将值变成数组,例如:

    Object.values({a: 1, b: 2}) // [1, 2]
    

    Object.entries

    将对象的key和value成对变成数组。例如:

    Object.entries({a: 1, b: 2}) // [['a', 1], ['b', 2]]
    

    技巧示范:对象转换为下拉框的可选项:

    Object.entries({a: 1, b: 2}).map(r=>({value: r[0], label: r[1]}))
    // 输出[{value: 'a', label: 1}, {value: 'b', label: 2}]
    

    String.prototype.padStart/padEnd

    字符串左补齐和右补齐,例:

    '3'.padStart(2, '0') === '03' // true
    

    Rest & Spread

    剩余和扩展运算符,例:

    const {a, ...rest} = {a: 1, b: 2, c: 3} // rest = {b: 2, c: 3}
    const obj = {a: 4, ...rest} // {a: 4, b: 2, c: 3}
    

    Array.prototype.flat/flatMap

    数组打平和数组打平映射,例:

    [1, [2], [3]].flat() // [1,2,3]
    [1, [2], [3, [4]]].flat(2) // [1,2,3,4]
    [1, [2], [3]].flatMap((x)=>x*x) // [1, 4, 9]
    [1, [2], [3]].flatMap((x)=>[x*x]) // [1, 4, 9]
    

    结果表明flatMap将运算前的数组打平,运算后的结果再打平,并且flatMap只能打平一层,而flat可以指定打平n层

    可选链运算符?

    对象引用值链路中任意一个对象为空则返回undefined而不是报错
    例:

    const age = user?.info?.age // undefined
    

    空值合并运算符??

    当运算结果为空值(null或undefined),采用给出的备选值。与 || 运算符类似,差异在于对0, '' 等值的运算结果不同
    例:

    const age = user?.info?.age ?? 18 // 18
    

    相关文章

      网友评论

          本文标题:es6之后的新特性收集

          本文链接:https://www.haomeiwen.com/subject/sjraiktx.html