這篇文章主要講解了“ES6中的擴展運算符怎么使用”，文中的講解內(nèi)容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“ES6中的擴展運算符怎么使用”吧！

讓客戶滿意是我們工作的目標，不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價值的長期合作伙伴，公司提供的服務項目有：主機域名、網(wǎng)頁空間、營銷軟件、網(wǎng)站建設、康縣網(wǎng)站維護、網(wǎng)站推廣。

ES6的擴展運算符，它的語法很簡單，使用三個點號表示“...”?？梢詫⒁粋€數(shù)組轉(zhuǎn)為用逗號分隔的參數(shù)序列。

它將可迭代對象展開到其單獨的元素中，所謂的可迭代對象就是任何能用 for of 循環(huán)進行遍歷的對象，例如：數(shù)組、字符串、Map、Set、DOM節(jié)點等。

基礎語法

var array = [1,2,3,4];
console.log(...array);//1 2 3 4 
var str = "String";
console.log(...str);//S t r i n g

該運算符主要用于函數(shù)調(diào)用

function push(array, ...items) {
  array.push(...items);
}
function add(x, y) {
  return x + y;
}
const numbers = [4, 38];
add(...numbers) // 42

上面代碼中，array.push(...items)和add(...numbers)這兩行，都是函數(shù)的調(diào)用，它們都使用了擴展運算符。該運算符將一個數(shù)組，變?yōu)閰?shù)序列。

擴展運算符后面還可以放置表達式

const arr = [
  ...(x > 0 ? ['a'] : []),
  'b',
];

如果擴展運算符后面是一個空數(shù)組，則不產(chǎn)生任何效果。

[...[], 1]
// [1]

擴展運算符還有許多用法...

一、 替代數(shù)組的 apply 方法

使用 Math.max() 函數(shù)來獲取最大值的用法是：

const m = Math.max(1, 2, 3); //結(jié)果為3

使用 apply 方法結(jié)合 Math.max():

但如果要計算數(shù)組里的最大值，顯然數(shù)組是不能直接作為 Math.max() 的參數(shù)，我們需要把它展開。在ES6之前，我們也是需要結(jié)合apply來處理：

var arr = [2, 4, 8, 6, 0];
function max(arr) {
 return Math.max.apply(null, arr);
}

console.log(max(arr));

ES6使用擴展運算符(...)就很簡單就可以展開，上面的例子變?yōu)椋?/p>

var arr = [2, 4, 8, 6, 0];
console.log(Math.max(...arr));  // 3

二、擴展運算符的應用

1. 合并數(shù)組

擴展運算符給了我們?nèi)碌暮喜?shù)組的方法

// ES5 apply 寫法
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
Array.prototype.push.apply(arr1, arr2);
//arr1   [0, 1, 2, 3, 4, 5]

使用擴展運算符就可以很簡單地把數(shù)組展開為參數(shù)列表

const a1 = [{ foo: 1 }];
const a2 = [{ bar: 2 }];
const a3 = a1.concat(a2);
const a4 = [...a1, ...a2];
a3[0] === a1[0] // true
a4[0] === a1[0] // true

上面代碼中，a3和a4是用兩種不同方法合并而成的新數(shù)組，但是它們的成員都是對原數(shù)組成員的引用，這就是淺拷貝。如果修改了引用指向的值，會同步反映到新數(shù)組。

注意：這兩種方法都是淺拷貝，使用的時候需要注意。

2. 拷貝數(shù)組

數(shù)組是復合的數(shù)據(jù)類型，直接復制的話，只是復制了指向底層數(shù)據(jù)結(jié)構(gòu)的指針，而不是克隆一個全新的數(shù)組。

ES5 只能用變通方法來復制數(shù)組。

const a1 = [1, 2];
const a2 = a1.concat();
a2[0] = 2;
a1 // [1, 2]

上面代碼中，a1會返回原數(shù)組的克隆，再修改a2就不會對a1產(chǎn)生影響。

擴展運算符提供了復制數(shù)組的簡便寫法。

//拷貝數(shù)組
var array0 = [1,2,3];
var array1 = [...array0];
console.log(array1);//[1, 2, 3]

//拷貝數(shù)組
var obj = {
    age:1,
    name:"lis",
    arr:{
        a1:[1,2]
    }
}
var obj2  = {...obj};
console.log(obj2);//{age: 1, name: "lis", arr: {…}}

記住：數(shù)組仍通過指針得到，所以我們并沒有復制數(shù)組本身，我們復制的只是一個新的指針。

3. 將偽數(shù)組轉(zhuǎn)換為數(shù)組

NodeList 對象是節(jié)點的集合，通常是由屬性，如 Node.childNodes 和方法，如 document.querySelectorAll 返回的。

像 NodeList 和 arguments 這種偽數(shù)組，類似于數(shù)組，但不是數(shù)組，沒有 Array 的所有方法，例如find、map、filter 等，但是可以使用 forEach() 來迭代

可以通過擴展運算符將其轉(zhuǎn)為數(shù)組，如下：

const nodeList = document.querySelectorAll(".row");
const nodeArray = [...nodeList];
console.log(nodeList);
console.log(nodeArray);

注意：使用擴展運算符將偽數(shù)組轉(zhuǎn)換為數(shù)組有局限性，這個類數(shù)組必須得有默認的迭代器且偽可遍歷的

4.與解構(gòu)賦值結(jié)合

擴展運算符可以與解構(gòu)賦值結(jié)合起來，用于生成數(shù)組

// ES5
a = list[0], rest = list.slice(1)
// ES6
[a, ...rest] = list

下面是另外一些例子：

const [first, ...rest] = [1, 2, 3, 4, 5];
first // 1
rest  // [2, 3, 4, 5]
const [first, ...rest] = [];
first // undefined
rest  // []
const [first, ...rest] = ["foo"];
first  // "foo"
rest   // []

注意：如果將擴展運算符用于數(shù)組賦值，只能放在參數(shù)的最后一位，否則會報錯。

const [...butLast, last] = [1, 2, 3, 4, 5];
//  報錯
const [first, ...middle, last] = [1, 2, 3, 4, 5];
//  報錯

5. 字符串

ES6的擴展語法可以很簡單的把一個字符串分割為單獨字符的數(shù)組：

[...'hello']
// [ "h", "e", "l", "l", "o" ]

6.Map 和 Set 結(jié)構(gòu)，Generator 函數(shù)

擴展運算符內(nèi)部調(diào)用的是數(shù)據(jù)結(jié)構(gòu)的 Iterator 接口，因此只要具有 Iterator 接口的對象，都可以使用擴展運算符，比如 Map 結(jié)構(gòu)。

let map = new Map([
  [1, 'one'],
  [2, 'two'],
  [3, 'three'],
]);
let arr = [...map.keys()]; // [1, 2, 3]

Generator 函數(shù)運行后，返回一個遍歷器對象，因此也可以使用擴展運算符。

var go = function*(){
yield 1;
yield 2;
yield 3;
};
[...go()] // [1, 2, 3]

上面代碼中，變量go是一個 Generator 函數(shù)，執(zhí)行后返回的是一個遍歷器對象，對這個遍歷器對象執(zhí)行擴展運算符，就會將內(nèi)部遍歷得到的值，轉(zhuǎn)為一個數(shù)組。

如果對沒有 Iterator 接口的對象，使用擴展運算符，將會報錯。

const obj = {a: 1, b: 2};
let arr = [...obj]; // TypeError: Cannot spread non-iterable object

感謝各位的閱讀，以上就是“ES6中的擴展運算符怎么使用”的內(nèi)容了，經(jīng)過本文的學習后，相信大家對ES6中的擴展運算符怎么使用這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！

文章標題：ES6中的擴展運算符怎么使用
分享URL：http://chinadenli.net/article12/gisodc.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站內(nèi)鏈、自適應網(wǎng)站、網(wǎng)站建設、、網(wǎng)站收錄、網(wǎng)站改版

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)