1、拓展運算子

陣列的拓展運算子為三個點(…)，它的作用是將數中的值轉為用逗號隔開的引數序列。

1.1

function fn (a,b) {

	console.log(a) //1
	console.log(b) //2
}

let arr = [1,2];

fn(…arr); //fn(…arr)其實等於fn(1,2)

1.2

let arr = [3,4];

let newArr = [1,2,...arr,5,6];

console.log(newArr)  //[1, 2, 3, 4, 5, 6]

1.3

let arr1 = [3,4];
let arr2 = ['a','b'];
 

拓展運算子後面還可以放表示式

let newArr = [1,2,...(false ? arr1:arr2),5,6];

console.log(newArr)  //[1, 2, "a", "b", 5, 6]

1.4、使用push方法的時候，可以方便地新增多個值。

let arr1 = [1,2]

let arr2 = [3,4,5,6]

arr1.push(...arr2)

console.log(arr1) //[1, 2, 3, 4, 5, 6]

1.5、對陣列進行淺複製

let arr1 = [1,2,3]
let arr2 = [...arr1]

console.log(arr1) //[1, 2, 3]
 

同樣的，這種方法也使用與合併陣列

1.6 配合解構賦值

let [age,...arr] = [1,2,3,4,5]

console.log(age) //1
console.log(arr) //[2, 3, 4, 5]

注意…arr只能放在最後以為，否則會報錯。

1.7、將字串轉為陣列

var str = 'abcde';
console.log([...str]) //["a", "b", "c", "d", "e"]

2、Array.from方法

from方法可以將類似陣列的物件，和可遍歷的物件轉為真正的陣列。

比如NodeList集合還有arguments，都是類似陣列的陣列。不能直接使用陣列的push等方法。

var arr = document.getElementsByTagName('div');

function fn () {
	console.log(arguments.push) //undefined
}

fn()

console.log(arr.push) //undefined

這種情況下，可使用from方法將它們轉為真正的陣列再呼叫方法。

var arr = document.getElementsByTagName('div');

function fn () {
	console.log(Array.from(arguments).push) //function
}

fn()

console.log(Array.from(arr).push) //function

2.1 from方法的第二個引數

from方法的第二個引數接收一個函式，可用來遍歷陣列中的元素。

let arr = [1,2,3,4];

let newArr = Array.from(arr, val => ++val)

console.log(newArr) //[2, 3, 4, 5]