扩展运算符在项目中的实际应用
- 合并两个数组
let aArr = [1, 2, 3]
let bArr = [4, 5, 6]
let andArr = [...aArr, ...bArr]
console.log(andArr);
// [1, 2, 3, 4, 5, 6]
这个在项目中经常遇到,例如,滚动加载的列表,需要把之前的数据和接口新返回的数据进行拼接。当然也可以使用concat()方法。
- 用Math判断最大值最小值
let max = Math.max(...aArr)
let min = Math.min(...bArr)
console.log(max);
console.log(min);
// 3
// 4
- 用于函数调用
function addFun(x, y) {
return x + y
}
const numbers = [4, 5]
console.log(addFun(...numbers));
// 9
- 扩展运算符和函数形参结合使用
function f(v, w, x, ...y) {
console.log(v);
console.log(w);
console.log(x);
console.log(...y);
}
f(-1, 0, 1, 2, 3, 4);
// -1
// 0
// 1
// 2 3 4
当传入的参数不确定个数的时候,形参可以用扩展运算符接收
- 克隆数组
const a1 = [1, 2];
const a2 = [...a1]; // 写法一
// const [...a2] = a1; // 写法二
// 修改a2的值时,不会影响a1
- 与解构赋值结合
let list = [0, 1, 2, 3, 4, 5]
// ES5
// let a = list[0], rest = list.slice(1)
// ES6
let [a, ...rest] = list
console.log(a)
console.log(rest)
// 0
// [1, 2, 3, 4, 5]
- 将字符串转化成数组
let str = "hello"
console.log([...str])
// ['h', 'e', 'l', 'l', 'o']
多说一句,也可以用Array.from将字符串转化成数组
console.log(Array.from(str))
// ['h', 'e', 'l', 'l', 'o']
- 和map结合使用,把键和值转化成数组
let map = new Map([
[1, 'one'],
[2, 'two'],
[3, 'three'],
]);
let arr = [...map.keys()]
console.log(arr);
// [1, 2, 3]
今天就到这里吧,上班摸鱼结束…