JS 學習ES6之 陣列的擴充套件

2021-08-20 11:42:32 字數 2017 閱讀 3989

擴充套件運算子(spread)是三個點(…)。它好比 rest 引數的逆運算,將乙個陣列轉為用逗號分隔的引數序列。

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

// 1 2 3

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

// 1 2 3 4 5

// es5寫法

function

f(x, y, z){}

var args = [0,1,2];

//es6寫法

function

f(x, y, z){}

var args = [0,1,2];

f(...args);

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

[...'hello'] // ['h', 'e', 'l', 'l', 'o']
array.from()方法可以將兩類物件轉為真正的陣列:類似陣列的物件和可遍歷(iterable)的物件(包括 es6 新增的資料結構 set 和 map)。實際應用中,常見的類似陣列的物件是 dom 操作返回的nodelist集合,以及函式內部的arguments物件。任何有length屬性的物件,都可以通過array.from()方法轉為陣列,而此時擴充套件運算子就無法轉換了。

let arraylike = ;

// es5的寫法

var arr1 = .slice.call(arraylike);

// ['a', 'b', 'c']

// es6 的寫法

var arr2 = array.from(arraylike);

// ['a', 'b', 'c']

只要是部署了iterator介面的資料結構,array.from都能將其轉為陣列。

array.from('hello'); // // ['h', 'e', 'l', 'l', 'o']

let namesset = new set(['a', 'b', 'c']);

array.from(namesset); // ['a', 'b']

array.from還可以接受第二個引數,作用類似於陣列的 map 方法,用來對每個元素進行處理,將處理後的值放入返回的陣列。

array.from(arraylike, x => x * x);

// 等同於

array.from(arraylike).map(x => x * x);

array.from([1, 2, 3], x => x * x); // [1, 4, 9]

array.of()方法用於將一組值,轉換為陣列。

array.of(1, 2, 3); // [1, 2, 3]

array.of(4); // [4]

// 比較

array(4); // [ , , , ]

array.of() //

[1, 4, -5, 10].find(function

(value, index, arr)); // -5

[1, 4, -5, 10].findindex(function

(value, index, arr)); // 2

indexof方法無法識別陣列的nan成員,但是findindex方法可以借助object.is方法做到。

[nan].indexof(nan); // -1

[nan].findindex(y => object.is(nan, y));

ES6學習之陣列擴充套件

擴充套件運算子 將陣列分割為用逗號分割的引數序列 console.log 1,2,3 1 2 3 function test x,y,z var arg 1,2,3 null,arg 1 2 3 test arg 1 2 3 擴充套件運算子的應用 const a 1,2 複製陣列a const b ...

ES6之陣列的擴充套件

es6在陣列方面增加了一些方法和原型屬性,有些還是蠻有用的。擴充套件運算子 把陣列或者類陣列轉成用逗號隔開的引數 把類陣列轉成陣列,有限制 類陣列就是有長度的變數 var str wade console.log str w a d e 把陣列轉成用逗號隔開的引數序列 var arr 1,2,3 c...

ES6學習筆記之陣列的擴充套件

擴充套件運算子 spread 是三個點 將乙個陣列轉為用逗號分隔的引數序列。console.log 1,2,3 1 2 3const arr1 1,2,3,4,5 const arr2 arr1 arr2 0 666 console.log arr2 arr2 666,2,3,4,5 console...