es6之后的新特性收集

2020-11-26  本文已影响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
上一篇 下一篇

猜你喜欢

热点阅读