ES6 拓展運算子 三個點

【...】拓展運算子是什麼？

es6中引入擴充套件運算子（...），它用於把乙個陣列轉化為用逗號分隔的引數序列，它常用在不定引數個數時的函式呼叫，陣列合併等情形。因為typescript是es6的超集，所以typescript也支援擴充套件運算子。

【...】用在什麼地方？

1、可變引數個數的函式呼叫

function

push(array, ...items) 
function
add(...vals)
return
sum;
}let arr = [1,2,3,4,5,6];
let sum =add(...arr);
console.log(sum); 
//21

2、更便捷的陣列合併

let arr1 = [1,2];

let arr2 = [5,6];
let newarr = [20];
//es5 舊寫法
newarr = newarr.concat(arr1).concat(arr2); //
[20,1,2,5,6]
console.log(newarr);
//es6 使用擴充套件運算子
newarr = [20,...arr1,...arr2]; //
[20,1,2,5,6]
console.log(newarr);

//

es5 的寫法 
function
f(x, y, z) 
var args = [0, 1, 2]; 
null
, args); 
//es6 的寫法 
function
f(x, y, z) 
var args = [0, 1, 2]; 
f(...args);

4、求最大值math.max()

//

es5 的寫法 
//es6 的寫法 
math.max(...[14, 3, 77]) 
//等同於 
math.max(14, 3, 77);

通過push函式，將乙個陣列新增到另乙個陣列的尾部

//

es5 的寫法 
var arr1 = [0, 1, 2]; 
var arr2 = [3, 4, 5]; 
//es6 的寫法 
var arr1 = [0, 1, 2]; 
var arr2 = [3, 4, 5]; 
arr1.push(...arr2);

新建date型別

//

es5 
//es6 
new date(...[2015, 1, 1]);

與解構賦值結合，生成新陣列

//

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

將字串轉為真正的陣列

[...'hello']  

//[ "h", "e", "l", "l", "o" ]

將實現了 iterator 介面的物件轉為陣列

var nodelist = document.queryselectorall('div');  

var array = [...nodelist];

ES6 拓展運算子 三個點

es6中引入擴充套件運算子 它用於把乙個陣列轉化為用逗號分隔的引數序列，它常用在不定引數個數時的函式呼叫，陣列合併等情形。因為typescript是es6的超集，所以typescript也支援擴充套件運算子。1 可變引數個數的函式呼叫function push array,items functio...

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

看了阮大大的文章，發現很多都有運算子 暫且叫運算子 三個點點。於是查了一下。其實看起來這樣用也很6 乾貨如下 表面意思 擴充套件運算子 spread 是三個點 它好比 rest 引數的逆運算，將乙個陣列轉為用逗號分隔的引數序列。該運算子主要用於函式呼叫。function push array,ite...

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

擴充套件運算子 spread 是三個點 它好比 rest 引數的逆運算，將乙個陣列轉為用逗號分隔的引數序列。console.log 1,2,3 1 2 3 console.log 1,2,3,4 5 1 2 3 4 5 document.queryselectorall div 該運算子主要用於函式...