前言

JavaScript ES6新增了擴(kuò)展運(yùn)算符的語法，擴(kuò)展運(yùn)算符（spread）是三個(gè)點(diǎn)（…）。
該運(yùn)算符主要用于，將一個(gè)數(shù)組轉(zhuǎn)為用逗號(hào)分隔的參數(shù)序列, 通常用于函數(shù)的調(diào)用傳參,。

數(shù)組合并

把數(shù)組轉(zhuǎn)為分割的參數(shù)序列

let a = ["hello", "world", "yoyo"];
console.log(...a)  // hello world yoyo

可以用于2個(gè)數(shù)組的合并

let a = ["hello", "world", "yoyo"];
let b = [2, 3, 4]
c = [...a, ...b]
console.log(c)  // ['hello', 'world', 'yoyo', 2, 3, 4]

等價(jià)于concat（）方法合并

let a = ["hello", "world", "yoyo"];
let b = [2, 3, 4]
c = a.concat(b)
console.log(c)  // ['hello', 'world', 'yoyo', 2, 3, 4]

或者在a數(shù)組的基礎(chǔ)上push另外一個(gè)數(shù)組b

let a = ["hello", "world", "yoyo"];
let b = [2, 3, 4]
a.push(...b)
console.log(a)  // ['hello', 'world', 'yoyo', 2, 3, 4]

數(shù)組淺拷貝

可以用于克隆一個(gè)數(shù)組,，相當(dāng)于淺拷貝

let a = ["hello", "world", "yoyo"];
let b = [...a];   // 淺拷貝
console.log(b);   // ['hello', 'world', 'yoyo']

我們可以在a數(shù)組的基礎(chǔ)上重新得到一個(gè)新的數(shù)組

let a = ["hello", "world", "yoyo"];
let b = [...a, 'a', 'b'];   // 往后面添加新元素
console.log(b);   //  ['hello', 'world', 'yoyo', 'a', 'b']

let c = [1, 2, ...a];   // 往前面添加新元素
console.log(c);   // [1, 2, 'hello', 'world', 'yoyo']

let d = [1, 2, ...a, 'a', 'b'];   
console.log(d);  // [1, 2, 'hello', 'world', 'yoyo', 'a', 'b']

迭代器(Iterator)轉(zhuǎn)為數(shù)組

Map 遍歷的時(shí)候,，keys()方法返回 Map 對(duì)象中鍵的迭代器（ MapIterator）,。

let m = new Map();
m.set('user', 'yoyo');
m.set(1, 'hello');
m.set(2, 'world');
console.log(m.keys()); // MapIterator {'user', 1, 2}

如果我們希望得到一個(gè)數(shù)組['user’, 1, 2],可以用到擴(kuò)展運(yùn)算符(…)

let m = new Map();
m.set('user', 'yoyo');
m.set(1, 'hello');
m.set(2, 'world');

let keys = [...m.keys()]
console.log(keys); // ['user', 1, 2]

函數(shù) rest 參數(shù)

如果你能弄清楚python函數(shù)參數(shù) 里面的 *args 和 **kwargs ，那么*args 就相當(dāng)于 JavaScript里面的 rest 參數(shù) ...args,。

先看一段python的代碼關(guān)于*arg參數(shù)的使用

def func(a, *args):
    print(a)
    print(args)

func(1, 2, 3, 4)
# a 得到 1
# args 得到  (2, 3, 4)

接下來再回到JavaScript里面的 rest 參數(shù) ...args 就很好理解了

function func(a, ...args) {
    console.log(a);    // 1
    console.log(args);  // [2, 3, 4]
}

func(1, 2, 3, 4);

函數(shù)傳4個(gè)參數(shù),，那么a得到1，…args 得到多余的參數(shù)2,3,，4,這里的args是一個(gè)數(shù)組[2, 3, 4]

于是很好理解 rest 參數(shù)其實(shí)就是得到多余的參數(shù),，可以在函數(shù)參數(shù)里面定義一個(gè)不定長(zhǎng)參數(shù)。

當(dāng)函數(shù)的參數(shù)很長(zhǎng)時(shí),，我們可以把參數(shù)寫到一個(gè)數(shù)組arr,，傳參時(shí)候用...arr

function func(a, ...args) {
    console.log(a);    // 1
    console.log(args);  // [2, 3, 4]
}

arr = [2, 3, 4];
func(1, ...arr);

使用 rest 參數(shù)的時(shí)候需要注意順序，一定要放到函數(shù)的最后一個(gè)參數(shù)位置

字符串轉(zhuǎn)數(shù)字

可以用擴(kuò)展運(yùn)算符把一個(gè)字符串轉(zhuǎn)成數(shù)組

let a = 'hello';
let b = [...a];
console.log(b);   // ['h', 'e', 'l', 'l', 'o']

其作用相當(dāng)于遍歷了字符串,，生成一個(gè)數(shù)組

對(duì)象解構(gòu)賦值

在對(duì)象解構(gòu)賦值的時(shí)候也可以用到

const person = {
    name: 'yoyo',
    age: 20,
    address: function () {
       return "上海市"
    }
}
let {address, ...info} = person;
console.log(info);  // {name: 'yoyo', age: 20}

解構(gòu)賦值的時(shí)候 rest 參數(shù)的時(shí)候需要注意順序,，要放到最后面。