JavaScript 擴(kuò)展運(yùn)算符用法實(shí)例小結(jié)【基于ES6】

本文實(shí)例講述了JavaScript 擴(kuò)展運(yùn)算符用法。分享給大家供大家參考，具體如下：

擴(kuò)展運(yùn)算符格式

擴(kuò)展運(yùn)算符格式很簡(jiǎn)單，就是三個(gè)點(diǎn)(…)

重點(diǎn)：需要ES6 語(yǔ)法支持

擴(kuò)展運(yùn)算符作用？？？

擴(kuò)展運(yùn)算符允許一個(gè)表達(dá)式在期望多個(gè)參數(shù)（用于函數(shù)調(diào)用）或多個(gè)元素（用于數(shù)組字面量）或多個(gè)變量（用于解構(gòu)賦值）的位置擴(kuò)展。

1、將一個(gè)數(shù)組放入另一個(gè)數(shù)組中

下面開(kāi)始通過(guò)四個(gè)例子來(lái)深刻理解擴(kuò)展運(yùn)算符

①. 創(chuàng)建一個(gè)數(shù)組middle
②. 創(chuàng)建第二個(gè)包含middle的數(shù)組
③. 輸出結(jié)果

var middle = [3, 4];
var arr = [1, 2, middle, 5, 6];
console.log(arr);
// [1, 2, [3, 4], 5, 6]

在上例中，沒(méi)有使用擴(kuò)展運(yùn)算符。middle作為數(shù)組放入另一個(gè)數(shù)組中

2、如果想讓輸出結(jié)果只有一個(gè)數(shù)組？？？

這時(shí)候就用到擴(kuò)展運(yùn)算符，看下面例子，除了使用擴(kuò)展運(yùn)算符其他都與上面例子相同。

var middle = [3, 4];
var arr = [1, 2, ...middle, 5, 6];
console.log(arr);
// [1, 2, 3, 4, 5, 6]

當(dāng)創(chuàng)建數(shù)組arr和使用在middle數(shù)組上使用擴(kuò)展運(yùn)算符時(shí)，不是將middle數(shù)組直接插入到arr中，而是將middle數(shù)組擴(kuò)展，然后將元素插入到arr中。

3、復(fù)制數(shù)組

slice()是JavaScript數(shù)組的方法，作用是復(fù)制數(shù)組。我們同樣可以使用擴(kuò)展運(yùn)算符復(fù)制數(shù)組。

var arr = ['a', 'b', 'c'];
var arr2 = [...arr];
console.log(arr2);
// ['a', 'b', 'c']

arr數(shù)組中的元素?cái)U(kuò)展成為單獨(dú)元素被分配到arr2中?，F(xiàn)在可以隨意改變arr2數(shù)組，且都不會(huì)對(duì)源數(shù)組arr產(chǎn)生影響

這是因?yàn)?，arr數(shù)組值被擴(kuò)展后添加到arr2數(shù)組中，我們?cè)O(shè)置arr2等于arr的值，而不是其本身。我們可以關(guān)注沒(méi)有擴(kuò)展運(yùn)算符時(shí)發(fā)生事情，就能理解了。

如果創(chuàng)建數(shù)組然后設(shè)置另一個(gè)數(shù)組等于其本身，如下：

var arr = ['a', 'b', 'c'];
var arr2 = arr;
console.log(arr2);
// ['a', 'b', 'c']

現(xiàn)在我們將arr2數(shù)組賦值給arr數(shù)組，這意味著只要改變arr2，arr數(shù)組就會(huì)發(fā)生變化。

arr2.push('d');
console.log(arr2);
// ['a', 'b', 'c', 'd']
console.log(arr);
// ['a', 'b', 'c', 'd']

4、拼接數(shù)組

使用擴(kuò)展運(yùn)算符可以代替concat()來(lái)拼接數(shù)組。

var arr = ['a', 'b', 'c'];
var arr2 = ['d', 'e', 'f'];
arr1 = arr.concat(arr2);
console.log(arr);
// ['a', 'b', 'c', 'd', 'e', 'f']

使用擴(kuò)展運(yùn)算符

var arr = ['a', 'b', 'c'];
var arr2 = ['d', 'e', 'f'];
arr = [...arr, ...arr2];
console.log(arr);
// ['a', 'b', 'c', 'd', 'e', 'f']

5、Math

也可以使用math函數(shù)連同擴(kuò)展運(yùn)算符。如這個(gè)例子中，將使用Math.max()

Math.max()將返回一組數(shù)最大值。
Math.max();
// -Infinity
Math.max(1, 2, 3);
// 3
Math.max(100, 3, 4);
// 100

在沒(méi)有擴(kuò)展運(yùn)算符，在數(shù)組上使用Math.max()最容易方法就是使用.apply()。

var arr = [2, 4, 8, 6, 0];
function max(arr) {
 return Math.max.apply(null, arr);
}
console.log(max(arr));
// 8

現(xiàn)在看看使用擴(kuò)展運(yùn)算符做同樣事情。只需要兩行代碼就可以做到同樣效果。

var arr = [2, 4, 8, 6, 0];
var max = Math.max(...arr);
console.log(max);
// 8

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

使用擴(kuò)展運(yùn)算符將字符串轉(zhuǎn)換為數(shù)組。

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

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼運(yùn)行效果。

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專(zhuān)題：《JavaScript數(shù)組操作技巧總結(jié)》、《JavaScript排序算法總結(jié)》、《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》及《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。