es6擴充運算子的用法：1、複製數組，語法「[...數組]」；2、合併數組，語法「[...數組1, ...數組2]」； 3.在數組中加入元素，語法「[...數組, '元素值']」；4、和Math物件一起使用，計算最大值、最小值或總和；5、向函數傳遞無限參數，語法「 const myFunc=(...args)=>{};”；6、將字串轉字元數組，語法“[...字串]”。
本教學操作環境：windows7系統、ECMAScript 6版、Dell G3電腦。
es6中擴充運算子介紹
#擴充運算子 … 是ES6中引入的，將可迭代物件展開到其單獨的元素中，所謂的可迭代對象就是任何能用for of循環進行遍歷的對象，例如：數組（數組常用方法）、字串、Map （悟透Map）、Set （Set 如何使用？）、DOM節點等。
它好比 rest 參數的逆運算，將一個陣列轉為用逗號分隔的參數序列。擴展運算子與正常的函數參數可以結合使用，後面也可以放置表達式，但如果後面是空數組，則不會產生任何效果。
let arr = []; arr.push(...[1,2,3,4,5]); console.log(arr); //[1,2,3,4,5] console.log(1, ...[2, 3, 4], 5) //1 2 3 4 5 console.log(...(1 > 0 ? ['a'] : [])); //a console.log([...[], 1]); //[1]
意義
替代函數的apply方法
由於擴充運算子可以展開數組，所以不再需要apply方法，將數組轉為函數的參數了。
擴充運算子（...）的10 種用法
1、複製數組
我們可以使用展開運算元複製數組，但要注意的是這是一個淺拷貝。
const arr1 = [1,2,3]; const arr2 = [...arr1]; console.log(arr2); // [ 1, 2, 3 ]
這樣我們就可以複製一個基本的數組，注意，它不適用於多層數組或帶有日期或函數的數組。
2、合併陣列
假設我們有兩個陣列想合併為一個，早期間我們可以使用concat方法，但現在可以使用展開運算元：
const arr1 = [1,2,3]; const arr2 = [4,5,6]; const arr3 = [...arr1, ...arr2]; console.log(arr3); // [ 1, 2, 3, 4, 5, 6 ]
我們也可以透過不同的排列方式來說明哪一個應該先出現。
const arr3 = [...arr2, ...arr1]; console.log(arr3); [4, 5, 6, 1, 2, 3];
此外，展開運算符號也適用多個陣列的合併：
const output = [...arr1, ...arr2, ...arr3, ...arr4];
3、新增元素##
let arr1 = ['this', 'is', 'an']; arr1 = [...arr1, 'array']; console.log(arr1); // [ 'this', 'is', 'an', 'array' ]
4、新增屬性
假設你有一個user 的對象，但它缺少一個age屬性。
const user = {
firstname: 'Chris',
lastname: 'Bongers'
};user物件新增age，我們可以再次利用展開運算元。
const output = {...user, age: 31};5、使用Math() 函數
假設我們有一個數字數組，我們想要得到這些數字中的最大值、最小值或者總和。const arr1 = [1, -1, 0, 5, 3];
Math.min 方法。
const arr1 = [1, -1, 0, 5, 3]; const min = Math.min(...arr1); console.log(min); // -1
const arr1 = [1, -1, 0, 5, 3]; const max = Math.max(...arr1); console.log(max); // 5
5，如果我們刪除5 ，它將返回3。
const arr1 = [1, -1, 0, 5, 3]; const max = Math.max(arr1); console.log(max); // NaN
NaN，因為JavaScript不知道陣列的最大值是什麼。
6、rest 參數
假設我們有一個函數，它有三個參數。const myFunc(x1, x2, x3) => {
console.log(x1);
console.log(x2);
console.log(x3);
}myFunc(1, 2, 3);
const arr1 = [1, 2, 3];
myFunc(...arr1); // 1 // 2 // 3
const myFunc = (x1, x2, x3) => {
console.log(x1);
console.log(x2);
console.log(x3);
};
const arr1 = [1, 2, 3];
myFunc(...arr1);
// 1
// 2
// 37、向函數傳遞無限參數
#假設我們有一個函數，它接受無限個參數，如下：const myFunc = (...args) => {
console.log(args);
};myFunc(1, 'a', new Date());
[
1,
'a',
Date {
__proto__: Date {}
}
]8、將nodeList 轉換為陣列
#假設我們使用了展開運算子來取得頁面上的所有p：
const el = [...document.querySelectorAll('p')]; console.log(el); // (3) [p, p, p]
p。
const el = [...document.querySelectorAll('p')];
el.forEach(item => {
console.log(item);
});
// <p></p>
// <p></p>
// <p></p>9、解構變數
#解構物件##假設我們有一個物件
user:<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">const user = {
firstname: &#39;Chris&#39;,
lastname: &#39;Bongers&#39;,
age: 31
};</pre><div class="contentsignin">登入後複製</div></div>現在，我們可以使用展開運算子將其分解為單一變數。
const {firstname, ...rest} = user;
console.log(firstname);
console.log(rest);
// 'Chris'
// { lastname: 'Bongers', age: 31 }這裡，我們解構了
user對象，並將 解构数组 10、展开字符串（字符串转字符数组） String 也是一个可迭代对象，所以也可以使用扩展运算符 ... 将其转为字符数组，如下： 进而可以简单进行字符串截取，如下： 11、数组去重 与 Set 一起使用消除数组的重复项，如下： 12、打印日志 在打印可迭代对象的时候，需要打印每一项可以使用扩展符，如下： 【相关推荐：web前端开发】 以上是es6中擴充運算子怎麼用的詳細內容。更多資訊請關注PHP中文網其他相關文章！firstname解構為firstname變量，將物件的其餘部分解構為rest變數。 const [currentMonth, ...others] = [7, 8, 9, 10, 11, 12];
console.log(currentMonth); // 7
console.log(others); // [ 8, 9, 10, 11, 12 ]
const title = "china";
const charts = [...title];
console.log(charts); // [ 'c', 'h', 'i', 'n', 'a' ]
const title = "china";
const short = [...title];
short.length = 2;
console.log(short.join("")); // chconst arrayNumbers = [1, 5, 9, 3, 5, 7, 10, 4, 5, 2, 5];
console.log(arrayNumbers);
const newNumbers = [...new Set(arrayNumbers)];
console.log(newNumbers); // [ 1, 5, 9, 3, 7, 10, 4, 2 ]
const years = [2018, 2019, 2020, 2021];
console.log(...years); // 2018 2019 2020 2021
