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 // 3
7、向函數傳遞無限參數
#假設我們有一個函數,它接受無限個參數,如下: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]在這裡可以看到我們從dom中得到了3個
p。
const el = [...document.querySelectorAll('p')]; el.forEach(item => { console.log(item); }); // <p></p> // <p></p> // <p></p>
9、解構變數
#解構物件##假設我們有一個物件
user:<pre class="brush:php;toolbar:false">const user = {
firstname: 'Chris',
lastname: 'Bongers',
age: 31
};</pre>
現在,我們可以使用展開運算子將其分解為單一變數。
const {firstname, ...rest} = user; console.log(firstname); console.log(rest); // 'Chris' // { lastname: 'Bongers', age: 31 }
這裡,我們解構了
user對象,並將firstname
解構為firstname
變量,將物件的其餘部分解構為rest
變數。 <p><strong>解构数组</strong></p><pre class="brush:php;toolbar:false">const [currentMonth, ...others] = [7, 8, 9, 10, 11, 12];
console.log(currentMonth); // 7
console.log(others); // [ 8, 9, 10, 11, 12 ]</pre><p><span style="font-size: 18px;"><strong>10、展开字符串(字符串转字符数组)</strong></span></p>
<p>String 也是一个可迭代对象,所以也可以使用扩展运算符 ... 将其转为字符数组,如下:</p>
<pre class="brush:php;toolbar:false">const title = "china";
const charts = [...title];
console.log(charts); // [ 'c', 'h', 'i', 'n', 'a' ]</pre>
<p>进而可以简单进行字符串截取,如下:</p>
<pre class="brush:php;toolbar:false">const title = "china";
const short = [...title];
short.length = 2;
console.log(short.join("")); // ch</pre>
<p><span style="font-size: 18px;"><strong>11、数组去重</strong></span></p>
<p>与 Set 一起使用消除数组的重复项,如下:</p><pre class="brush:php;toolbar:false">const 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 ]</pre><p><img src="https://img.php.cn/upload/image/299/731/678/1665481190710066.png" title="1665481190710066.png" alt="es6中擴充運算子怎麼用"></p>
<p><strong><span style="font-size: 18px;">12、打印日志</span></strong></p>
<p>在打印可迭代对象的时候,需要打印每一项可以使用扩展符,如下:</p><pre class="brush:php;toolbar:false">const years = [2018, 2019, 2020, 2021];
console.log(...years); // 2018 2019 2020 2021</pre><p>【相关推荐:<a href="https://www.php.cn/course/list/1.html" target="_blank" textvalue="web前端开发">web前端开发</a>】</p>
以上是es6中擴充運算子怎麼用的詳細內容。更多資訊請關注PHP中文網其他相關文章!