本文實例講述了JavaScript 擴展運算符用法。分享給大家供大家參考，具體如下：
擴展運算符格式
擴展運算符格式很簡單，就是三個點(…)
重點：需要ES6 語法支持
擴展運算符作用？？？
擴展運算符允許一個表達式在期望多個參數（用于函數調用）或多個元素（用于數組字面量）或多個變量（用于解構賦值）的位置擴展。
1、將一個數組放入另一個數組中
下面開始通過四個例子來深刻理解擴展運算符
①. 創建一個數組middle
②. 創建第二個包含middle的數組
③. 輸出結果
var middle = [3, 4];var arr = [1, 2, middle, 5, 6];console.log(arr);// [1, 2, [3, 4], 5, 6]
在上例中，沒有使用擴展運算符。middle作為數組放入另一個數組中
2、如果想讓輸出結果只有一個數組？？？
這時候就用到擴展運算符，看下面例子，除了使用擴展運算符其他都與上面例子相同。
var middle = [3, 4];var arr = [1, 2, ...middle, 5, 6];console.log(arr);// [1, 2, 3, 4, 5, 6]
當創建數組arr和使用在middle數組上使用擴展運算符時，不是將middle數組直接插入到arr中，而是將middle數組擴展，然后將元素插入到arr中。
3、復制數組
slice()是JavaScript數組的方法，作用是復制數組。我們同樣可以使用擴展運算符復制數組。
var arr = ['a', 'b', 'c'];var arr2 = [...arr];console.log(arr2);// ['a', 'b', 'c']
arr數組中的元素擴展成為單獨元素被分配到arr2中。現在可以隨意改變arr2數組，且都不會對源數組arr產生影響
這是因為，arr數組值被擴展后添加到arr2數組中，我們設置arr2等于arr的值，而不是其本身。我們可以關注沒有擴展運算符時發生事情，就能理解了。
如果創建數組然后設置另一個數組等于其本身，如下：
var arr = ['a', 'b', 'c'];var arr2 = arr;console.log(arr2);// ['a', 'b', 'c']
現在我們將arr2數組賦值給arr數組，這意味著只要改變arr2，arr數組就會發生變化。
arr2.push('d');console.log(arr2);// ['a', 'b', 'c', 'd']console.log(arr);// ['a', 'b', 'c', 'd']4、拼接數組
使用擴展運算符可以代替concat()來拼接數組。
var arr = ['a', 'b', 'c'];var arr2 = ['d', 'e', 'f'];arr1 = arr.concat(arr2);console.log(arr);// ['a', 'b', 'c', 'd', 'e', 'f']
使用擴展運算符
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函數連同擴展運算符。如這個例子中，將使用Math.max()
Math.max()將返回一組數最大值。Math.max();// -InfinityMath.max(1, 2, 3);// 3Math.max(100, 3, 4);// 100
在沒有擴展運算符，在數組上使用Math.max()最容易方法就是使用.apply()。
var arr = [2, 4, 8, 6, 0];function max(arr) { return Math.max.apply(null, arr);}console.log(max(arr));// 8現在看看使用擴展運算符做同樣事情。只需要兩行代碼就可以做到同樣效果。
var arr = [2, 4, 8, 6, 0];var max = Math.max(...arr);console.log(max);// 8
6、字符串轉數組
使用擴展運算符將字符串轉換為數組。
var str = "hello";var chars = [...str];console.log(chars);// ['h', 'e',' l',' l', 'o']
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.VeVB.COm/code/HtmlJsRun測試上述代碼運行效果。
更多關于JavaScript相關內容感興趣的讀者可查看本站專題：《JavaScript數組操作技巧總結》、《JavaScript排序算法總結》、《JavaScript數學運算用法總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》、《JavaScript查找算法技巧總結》及《JavaScript錯誤與調試技巧總結》
希望本文所述對大家JavaScript程序設計有所幫助。
新聞熱點
疑難解答
