es6擴充套件運算子三個點(...)

1 含義

擴充套件運算子（ spread ）是三個點（...）。它好比 rest 引數的逆運算，將一個數組轉為用逗號分隔的引數序列。

[javascript] view plain copy

console.log(...[1, 2, 3])
// 1 2 3
console.log(1, ...[2, 3, 4], 5)
// 1 2 3 4 5
[...document.querySelectorAll('div')]
// [<div>, <div>, <div>]

該運算子主要用於函式呼叫。
[javascript]

view plain copy

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

上面程式碼中，array.push(...items)和add(...numbers)這兩行，都是函式的呼叫，它們的都使用了擴充套件運算子。該運算子將一個數組，變為引數序列。

擴充套件運算子與正常的函式引數可以結合使用，非常靈活。

[javascript]

view plain copy

function f(v, w, x, y, z) { }
var args = [0, 1];
f(-1, ...args, 2, ...[3]);

2 替代陣列的 apply 方法

由於擴充套件運算子可以展開陣列，所以不再需要apply方法，將陣列轉為函式的引數了。

[javascript] view plain copy

// ES5 的寫法
function f(x, y, z) {
// ...
}
var args = [0, 1, 2];
f.apply(null, args);
// ES6 的寫法
function f(x, y, z) {
// ...
}
var args = [0, 1, 2];
f(...args);

下面是擴充套件運算子取代apply方法的一個實際的例子，應用Math.max方法，簡化求出一個數組最大元素的寫法。 [javascript] view plain copy

// ES5 的寫法
Math.max.apply(null, [14, 3, 77])
// ES6 的寫法
Math.max(...[14, 3, 77])
// 等同於
Math.max(14, 3, 77);

上面程式碼表示，由於 JavaScript 不提供求陣列最大元素的函式，所以只能套用Math.max函式，將陣列轉為一個引數序列，然後求最大值。有了擴充套件運算子以後，就可以直接用Math.max了。

另一個例子是通過push函式，將一個數組新增到另一個數組的尾部。

[javascript] view plain copy

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

上面程式碼的 ES5 寫法中，push方法的引數不能是陣列，所以只好通過apply方法變通使用push方法。有了擴充套件運算子，就可以直接將陣列傳入push方法。
下面是另外一個例子。

[javascript] view plain copy

// ES5
new (Date.bind.apply(Date, [null, 2015, 1, 1]))
// ES6
new Date(...[2015, 1, 1]);

3 擴充套件運算子的應用

（ 1 ）合併陣列

擴充套件運算子提供了數組合並的新寫法。

[javascript] view plain copy

// ES5
[1, 2].concat(more)
// ES6
[1, 2, ...more]
var arr1 = ['a', 'b'];
var arr2 = ['c'];
var arr3 = ['d', 'e'];
// ES5 的合併陣列
arr1.concat(arr2, arr3);
// [ 'a', 'b', 'c', 'd', 'e' ]
// ES6 的合併陣列
[...arr1, ...arr2, ...arr3]
// [ 'a', 'b', 'c', 'd', 'e' ]

（ 2 ）與解構賦值結合

擴充套件運算子可以與解構賦值結合起來，用於生成陣列。

[javascript] view plain copy

// 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 // []

如果將擴充套件運算子用於陣列賦值，只能放在引數的最後一位，否則會報錯。 [javascript] view plain copy

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

（ 3 ）函式的返回值

JavaScript 的函式只能返回一個值，如果需要返回多個值，只能返回陣列或物件。擴充套件運算子提供瞭解決這個問題的一種變通方法。

[javascript] view plain copy

var dateFields = readDateFields(database);
var d = new Date(...dateFields);

上面程式碼從資料庫取出一行資料，通過擴充套件運算子，直接將其傳入建構函式Date。

（ 4 ）字串

擴充套件運算子還可以將字串轉為真正的陣列。

[javascript] view plain copy

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

上面的寫法，有一個重要的好處，那就是能夠正確識別 32 位的 Unicode 字元。 [javascript] view plain copy

'x\uD83D\uDE80y'.length // 4

相關推薦

es6 擴充套件運算子三個點（...）的用法及總結

不明白的： 1.0 apply() 2.0 合併陣列的幾種方法（Array.prototype.push.apply(arr1,arr2)）//不理解 3.0 Iterator 介面的物件 4.0 Map 和 Set 結構， Generator 函式 1.0 含義擴充

ES2015/ES6 擴充套件運算子三個點（...）

1 含義擴充套件運算子（ spread ）是三個點（...）。它好比 rest 引數的逆運算，將一個數組轉為用逗號分隔的引數序列。 console.log(...[1, 2, 3]) // 1 2 3 console.log(1, ...[2, 3, 4], 5)

es6擴充套件運算子三個點(...)

1 含義擴充套件運算子（ spread ）是三個點（...）。它好比 rest 引數的逆運算，將一個數組轉為用逗號分隔的引數序列。 [javascript] view plain copy console.log(...[1, 2, 3]) /

es6之擴充套件運算子三個點（...）

es6之擴充套件運算子三個點（…）物件的擴充套件運算子理解物件的擴充套件運算子其實很簡單，只要記住一句話就可以：物件中的擴充套件運算子(...)用於取出引數物件中的所有可遍歷屬性，拷貝到當前物件之中 let bar = { a: 1, b: 2 }

vue知識點總結 --- 擴充套件運算子 … (三個點)

擴充套件運算子 … (三個點) 運算元組 ...[1,2,3] => 1,2,3 與解構賦值結合 var [a, ...arr] = [1,2,3,4,5] a => 1 arr => [2,3,4,5] var [a, ...

從零開始學_JavaScript_系列（41）——物件的擴充套件（4）擴充套件運算子三個點...

0、一句話總結屬性名，以及是屬性的函式的簡潔寫法，寫起來簡單易閱讀屬性名可以用變數字串拼接起來（話說以前也有吧？）函式都有name屬性，但set和get也要加字首 Object.is判斷兩個變數是否相等 Obje

ES6從入門到進階第四節箭頭函式三個點運算子 ...

<!DOCTYPE html> <html> <head> <title>函式</title> </head> <body> <script type="text/javascr

記錄一下ES6擴充套件運算子（三點運算子）...的用法

該記錄源於segmentfaul網友的評論，特意感謝！ ...運算子用於運算元組，有兩種層面 1. 第一個叫做展開運算子(spread operator)，作用是和字面意思一樣，就是把東西展開。可以用在array和object上都行。比如: let a = [1,2,

vuex的輔助函式mapState前面的那三個點--物件展開運算子

關於mapState，官方文件的說法：當一個元件需要獲取多個狀態時候，將這些狀態都宣告為計算屬性會有些重複和冗餘。為了解決這個問題，我們可以使用 mapState 輔助函式幫助我們生成計算屬性，讓你少按幾次鍵： mapState 函式返回的是一個

javascript ES6 新特性之擴展運算符三個點 ...

pan ret tar nta 枚舉 bject 返回值多個 object 對於 ES6 新特性中的 ... 可以簡單的理解為下面一句話就可以了：對象中的擴展運算符(...)用於取出參數對象中的所有可遍歷屬性，拷貝到當前對象之中作用類似於 Object.

es6之擴展運算符三個點（...）

結構所有數據類型 edi nts ket ... 分別是是個對象的擴展運算符理解對象的擴展運算符其實很簡單，只要記住一句話就可以：對象中的擴展運算符(...)用於取出參數對象中的所有可遍歷屬性，拷貝到當前對象之中 let bar = { a: 1,

C語言中可變參數的函數（三個點，“...”）

stdarg url title amp 至少關閉 .com temp () C語言中可變參數的函數（三個點，“...”）　　本文主要介紹va_start和va_end的使用及原理。　　在以前的一篇帖子Format MessageBox 詳解中曾使用到va_st

文字溢出時，實現在末尾顯示三個點省略效果

png code nowrap -o .com 會有 mage order ips 有時我們會有這樣的需求：當文本內容較多，寬度超出父容器時，就在最後顯示三個點，代表還有東西被折疊起來了。如下圖具體實現 HTML 如下 1 <div> 2 <

numpy_數組（三個點，無冒號，單冒號，雙冒號）

num span ... pre style IV AR color col import numpy >>> a = numpy.array([[1,2,3,4,5],[6,7,8,9,10],[1,2,3,4,5],[6,7,8,9,10]]) &g

給出面積，求三角形的任意三個點，gcd 用來約分

面積 www. a* 條件 span char 都是 pro nbsp http://codeforces.com/contest/1058/problem/D 條件 1. 給出面積m*n/k 2. 0≤x1,x2,x3≤n 0≤y1,y2,y3≤m 3

如何在CAD中使用三個點繪制弧？

一個 blog htm 一個點 type ges 回車 51cto 你們如何在CAD中使用三個點繪制弧？大家都知道在建築設計師們在設計CAD工程圖的時候，會經常使用到許多的圖紙，比如說需要使用到三個點來繪制弧，因為一張完美的CAD圖紙是需要許多時間來完成的，但是如何在CA

css樣式--超出三個點，以及換行

1.超出一定寬度後，超出部分用 ...表示 display: -webkit-box; /** 將物件作為伸縮盒子模型顯示 **/ -webkit-box-orient: vertical; /** 設定或檢索伸縮盒物件的子元素的排列方式 **/ -webkit-line-clamp: 2; /

es6 擴充套件運算子和rest運算子

物件擴充套件運算子（…）：當編寫一個方法時，我們允許它傳入的引數是不確定的。這時候可以使用物件擴充套件運算子來作引數，看一個簡單的列子： function leiy(...arg){ console.log(arg[0]); console.log(arg[1]); console.lo

小程式學習--ES6擴充套件運算子的用法

看下這段JS程式碼,請求到資料之後,在前端渲染頁面都是需要寫上字首, 比如我這個程式碼中的字首是classic,所以在渲染的時候,都需要寫上classic.欄位名 onLoad: function (options) { classicModel.getLatest((res)

ES6 擴充套件運算子的應用

（1）複製陣列陣列是複合的資料型別，直接複製的話，只是複製了指向底層資料結構的指標，而不是克隆一個全新的陣列。 //複製陣列 const a1 = [1,2]; const a2 = a1; a2[0] = 3; console.log(a1)

es6擴充套件運算子 三個點(...)

相關推薦

es6擴充套件運算子三個點(...)