Fork me on GitHub

ES2019

发表于 | 分类于 ， | | 阅读次数:

Array.flat(depth)

递归平铺多维数组，depth指定嵌套数组中的结构深度，也就是指定的递归层级，默认是 1。此方法并不修改原数组，而是返回一个新的数组。

之前如果我们想平铺数组可以这样做：

1
const flatten = arr => arr.reduce((flat, next) => flat.concat(Array.isArray(next) ? flatten(next) : next), [])

或者利用展开运算符，但只适用于二维数组，不过可以通过递归平铺任意维度的数组：

1
2
3
4
5
6
7
8
function flattenArray(arr) {
    const flattened = [].concat(...arr)
    return flattened.some(item => Array.isArray(item))
    ? flattenArray(flattened) 
    : flattened
}
const arr = [11, [22, 33], [44, [55, 66, [77, [88]], 99]]]
const flatArr = flattenArray(arr) // => [11, 22, 33, 44, 55, 66, 77, 88, 99]

现在我们可以直接使用：

1
2
3
4
5
6
7
8
const arr1 = [1, 2, [3, 4]]
arr1.flat() // [1, 2, 3, 4]
const arr2 = [1, 2, [3, 4, [5, 6]]]

arr2.flat(2) // [1, 2, 3, 4, 5, 6]
const arr3 = [1, 2, [3, 4, [5, 6, [7, 8]]]]

arr3.flat(Infinity) // [1, 2, 3, 4, 5, 6, 7, 8]

如果数组中有空值，则会在平铺后移除：

1
2
const arr4 = [1, 2, , 4, 5]
arr4.flat() // [1, 2, 4, 5]

Array.flatMap()

结合了map方法和Array.flat()方法，若map返回多维数组，会对该数组进行depth为 1 的平铺：

1
2
3
4
const arr1 = [1, 2, 3]

arr1.map(x => [x * 4]) // [[4], [8], [12]]
arr1.flatMap(x => [x * 4]) // [4, 8, 12]

可以这样使用:

1
2
3
4
const sentence = ['This is a', 'regular', 'sentence']

sentence.map(x => x.split(' ')) // [['This','is','a'],['regular'],['sentence']]
sentence.flatMap(x => x.split(' ')) // ['This','is','a','regular', 'sentence']

String.trimStart() 和 String.trimEnd()

已有的String.Trim()会去除字符串前后的空格。而现在可以指定只移除一侧的空格：

1
2
3
4
5
const test = 'hello'

test.trim() // 'hello'
test.trimStart() // 'hello '
test.trimEnd() // ' hello'

Object.fromEntries

将键值对数组转化为对象。是Object.Entries的反操作：

1
2
3
4
const obj = { prop1: 2, prop2: 10, prop3: 15 }                                   
let array = Object.entries(obj) // [['prop1', 2], ['prop2', 10], ['prop3', 15]]
array = array.map(([key, value]) => [key, Math.pow(value, 2)]) // [['prop1', 4], ['prop2', 100], ['prop3', 225]]
const newObj = Object.fromEntries(array) // {prop1: 4, prop2: 100, prop3: 225}

Optional Catch Binding

可省略catch的参数：

1
2
3
4
5
6
7
8
9
10
11
try {
    //...
} catch (er) {
    //handle error with parameter er
}

try {
    //...
} catch {
    //handle error without parameter
}

Symbol.description

可通过新增的description属性读取Symbol的描述，在之前需要通过toString()将Symbol显式转为字符串：

1
2
3
const testSymbol = Symbol('Desc')

testSymbol.description // 'Desc'

Function.toString()

返回表示函数源代码的字符串（包括空格和逗号）。之前调用该方法：

1
2
3
function /* foo comment */ foo() {}

foo.toString() // 'function foo() {}'

现在的话：

1
foo.toString(); // 'function /* foo comment */ foo() {}'