ES6扩展运算符（...）的应用

扩展运算符在项目中的实际应用

1. 合并两个数组

let aArr = [1, 2, 3]
let bArr = [4, 5, 6]
let andArr = [...aArr, ...bArr]
console.log(andArr);
//  [1, 2, 3, 4, 5, 6]

这个在项目中经常遇到，例如，滚动加载的列表，需要把之前的数据和接口新返回的数据进行拼接。当然也可以使用concat()方法。

2. 用Math判断最大值最小值

let max = Math.max(...aArr)
let min = Math.min(...bArr)
console.log(max);
console.log(min);
// 3
// 4

3. 用于函数调用

function addFun(x, y) {
    return x + y
}
const numbers = [4, 5]
console.log(addFun(...numbers));
// 9

4. 扩展运算符和函数形参结合使用

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

当传入的参数不确定个数的时候，形参可以用扩展运算符接收

5. 克隆数组

const a1 = [1, 2];
const a2 = [...a1]; // 写法一
// const [...a2] = a1; // 写法二
// 修改a2的值时，不会影响a1

6. 与解构赋值结合

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]

7. 将字符串转化成数组

let str = "hello"
console.log([...str])
// ['h', 'e', 'l', 'l', 'o']

多说一句，也可以用Array.from将字符串转化成数组

console.log(Array.from(str))
// ['h', 'e', 'l', 'l', 'o']

8. 和map结合使用，把键和值转化成数组

let map = new Map([
  [1, 'one'],
  [2, 'two'],
  [3, 'three'],
]);

let arr = [...map.keys()]
console.log(arr);
// [1, 2, 3]

今天就到这里吧，上班摸鱼结束…