es6中擴充運算子怎麼用

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 = &quot;china&quot;; const charts = [...title]; console.log(charts); // [ 'c', 'h', 'i', 'n', 'a' ]</pre> <p>进而可以简单进行字符串截取，如下：</p> <pre class="brush:php;toolbar:false">const title = &quot;china&quot;; const short = [...title]; short.length = 2; console.log(short.join(&quot;&quot;)); // 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="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/image/299/731/678/1665481190710066.png?x-oss-process=image/resize,p_40" class="lazy" 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中文網其他相關文章！