首頁  >  文章  >  web前端  >  es6中擴充運算子怎麼用

es6中擴充運算子怎麼用

青灯夜游
青灯夜游原創
2022-10-11 17:55:131876瀏覽

es6擴充運算子的用法:1、複製數組,語法「[...數組]」;2、合併數組,語法「[...數組1, ...數組2]」; 3.在數組中加入元素,語法「[...數組, '元素值']」;4、和Math物件一起使用,計算最大值、最小值或總和;5、向函數傳遞無限參數,語法「 const myFunc=(...args)=>{};”;6、將字串轉字元數組,語法“[...字串]”。

es6中擴充運算子怎麼用

本教學操作環境: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="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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn