一、...运算符高级用法
我们应该都知道,当需要进行对象或者数组的解构赋值时,可以使用...
运算符进行操作,那么以下的一些解构赋值高级用法,你是否已经知道并运用到实际项目中了呢?
1.1 解构对象剩余值
const obj = {
a: 1,
b: 2,
c: 3,
d: 4
}
const { a, b, ...restObj } = obj
console.log(restObj) // { c: 3, d: 4 }
// ×错误用法
const { ...restObj1, a1, b1 } = obj
// error: A rest element must be last in a destructuring pattern.
// rest元素必须位于解构模式的最后。
以上例子的解构剩余值属性名必须位于所有解构属性的最后位置,否则将报错。下文解构的例子也同样适应。
1.2 对象解构属性值赋值给已存在属性
const o = {a: 1, b: 2};
const p = { a: 'a', b: 'b' };
// 回顾正常解构对象的属性a,b; 赋值给const定义的变量a1,b1
const { a: a1, b: b1 } = o;
console.log(a1, b1); // 1 2
// 解构对象o的属性a,b; 赋值给对象p的属性a,b
({a: p.a, b: p.b} = o);
console.log(p); // {a: 1, b: 2}
由于{}
前没有使用const/let/var
来定义变量,所以需要使用()
包括解构语句使其成为一个整体,避免{}
被认为是一个块级作用域导致的语法错误。
1.3 解构数组剩余值
const arr = [1, 2, 3, 4]
const [a1, b1, ...restArr] = arr
console.log(restArr) // [3, 4]
1.4 数组解构属性值赋值给已存在属性
// 数组解构属性值赋值给已存在属性
const arr = [1, 2];
// 交换数组元素
[arr[1], arr[0]] = [...arr];
console.log(arr); // [2, 1]
1.5 解构方法参数的剩余值
// 解构方法参数的剩余值
function foo(a, b, ...restArgs) {
console.log(restArgs)
}
foo(1, 2, 3, 4) // [3, 4]
需要注意,以上剩余参数名必须写在其他参数的最后。
二、使用Symbol
模拟定义对象的私有属性
当你需要为一个对象定义一个唯一的属性或者不可迭代的属性时,可以使用Symbol
作为对象的属性名。
const obj = { a: 1, b: 2 }
const a = Symbol('a')
const b = Symbol('b')
const c = Symbol('a')
const d = Symbol('a')
obj[a] = 'a'
obj[b] = 'b'
obj[c] = 'c'
console.log(obj) // {a: 1, b: 2, Symbol(a): 'a', Symbol(b): 'b', Symbol(a): 'c'}
console.log(obj[a]) // a
console.log(obj[b]) // b
console.log(obj[c]) // c
console.log(obj[d]) // undefined
以上通过Symbol
定义的属性是不可迭代的
// for...in循环只遍历对象自身的和继承的可枚举属性
for(let key in obj) {
console.log(key) // a b
}
console.log(Object.keys(obj)) // [ 'a', 'b' ]
只能迭代到obj
对象的普通属性a
,b
,其他Symbol属性
无法迭代。
三、使用for...of和for...in遍历数组元素和索引
当我们只需遍历数组中的值或者索引时,可以使用for...of
或者for...in
来快速简洁地遍历数组。
const arr = ['a', 'b', 'c']
// 遍历数组的元素
for(let value of arr) {
console.log(value) // a b c
}
// 遍历数组的索引
for(let key in arr) {
console.log(key) // 0 1 2
}
四、at()方法取数组的倒数值
数组Array
原型上的at()
方法可接收负数索引,来取数组中指定的倒数索引的值。
const arr = [1, 2, 3, 4, 5]
console.log(arr.at(-1)) // 5
console.log(arr.at(-2)) // 4
console.log(arr.at(-10)) // undefined
五、flat()数组扁平化方法
flat()
是Array
原型上的一个方法,该方法创建一个新的数组,并根据指定深度递归地将所有子数组元素拼接到新的数组中。
const arr1 = [1, [2, [3, [4, [5]]]]]
// 默认只展开一层
console.log(arr1.flat()) // [1, 2, [3, [4, [5]]]]
// 展开两层
console.log(arr1.flat(2)) // [1, 2, 3, [4, [5]]]
// 展开所有层
console.log(arr1.flat(Infinity)) // [1, 2, 3, 4, 5]