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