ES6 新增的創(chuàng)建數(shù)組的方法(小結(jié))

更新時(shí)間：2019年08月01日 10:16:47 作者：nanaistaken

這篇文章主要介紹了ES6 新增的創(chuàng)建數(shù)組的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

在ES6之前，創(chuàng)建數(shù)組的方式有2種：

一: 通過(guò)數(shù)組字面量

let array = [1,2,3];
console.log(array);//[1,2,3]

二: 通過(guò)new Array()創(chuàng)建數(shù)組

let array = new Array(1, 2, 3);
console.log(array); //[1,2,3]

在大多數(shù)情況下new Array()運(yùn)行良好：

let array = new Array(1, 2);
console.log(array.length); //2
console.log(array[0]); //1
console.log(array[1]); //2

array = new Array('a');
console.log(array.length); //1
console.log(array[0]);//'a'

array = new Array(1, 'a');
console.log(array.length); // 2
console.log(array[0]);//1
console.log(array[1]);//'a'

但是new Array()有一種詭異的情況：

let array = new Array(2);
console.log(array[0]); // undefined
console.log(array[1]);// undefined
console.log(array.length); // 2

當(dāng)我們給new Array()傳遞單個(gè)數(shù)字參數(shù)時(shí)，這個(gè)數(shù)字不是作為數(shù)組元素，而是該數(shù)組的length屬性而存在，而數(shù)組本身則是一個(gè)空數(shù)組。

為了解決上面這個(gè)令人類沒(méi)有安全感的特性，ES6引入了Array.of()來(lái)解決這個(gè)問(wèn)題：

三：Array.of()

顧名思義，of()方法就是以它接受到的參數(shù)作為元素來(lái)創(chuàng)造數(shù)組，上面我們說(shuō)的單個(gè)數(shù)字參數(shù)的情況也同樣適用：

let array = Array.of(3);
console.log(array.length); // 1
console.log(array[0]); // 3

array = Array.of(1, 2);
console.log(array.length);// 2
console.log(array[0]); // 1
console.log(array[1]);// 2

array = Array.of('a');
console.log(array.length);// 1
console.log(array[0]);// 'a'

array = Array.of(1, 'a');
console.log(array.length); // 2
console.log(array[0]);// 1
console.log(array[1]);// 'a'

四：Array.from()

ES6還增加了一個(gè)Array.from()，也是用了創(chuàng)建一個(gè)數(shù)組。它主要用在以類數(shù)組對(duì)象和可迭代對(duì)象為藍(lán)本，創(chuàng)建對(duì)應(yīng)的數(shù)組。

1: Array.from(類數(shù)組對(duì)象)

我們最熟悉的類數(shù)組對(duì)象，應(yīng)該就是function的arguments對(duì)象了。接下來(lái)，我們看一個(gè)用Array.from()創(chuàng)建包含arguments元素的數(shù)組：

function createArrayFrom() {
  console.log(arguments instanceof Array); // false
  return Array.from(arguments);
}

let array = createArrayFrom(1, 2, 3);
console.log(array instanceof Array); // true
console.log(array.length); //3
console.log(array[0]);//1
console.log(array[1]);//2
console.log(array[2]);//3
console.log(array.indexOf(2)); //1

2: Array.from(可迭代對(duì)象)

Array.from()也可以把一個(gè)可迭代對(duì)象轉(zhuǎn)換為數(shù)組：

let iteratorObject = {
  *[Symbol.iterator](){
    yield 1;
    yield 2;
    yield 3;
  }
};
let array = Array.from(iteratorObject);
console.log(array instanceof Array); // true
console.log(array.length); // 3
console.log(array[0]); // 1

五：Array.from()的第二個(gè)參數(shù)

前面的例子，我們看到了一個(gè)類數(shù)組對(duì)象和可迭代對(duì)象作為Array.from()的第一個(gè)參數(shù)，從而創(chuàng)建出包含它們?cè)氐臄?shù)組。Array.from()的第二個(gè)參數(shù)是一個(gè)函數(shù)，這個(gè)函數(shù)用來(lái)將類數(shù)組對(duì)象和可迭代對(duì)象的元素進(jìn)行某種變換后，再作為生出數(shù)組的元素，例如：

let iteratorObject = {
  *[Symbol.iterator](){
    yield 1;
    yield 2;
    yield 3;
  }
};
let array = Array.from(iteratorObject, (item)=>{return item + 1});
console.log(array[0]); //2
console.log(array[1]); //3
console.log(array[2]); //4

這個(gè)例子里，我們提供了把每個(gè)元素值加一的變換，所以原本的1，2，3，置換到新的數(shù)組之后，元素是2，3，4。

六： Array.from()的第三個(gè)參數(shù)

Array.from()還提供第三個(gè)參數(shù)可用，第三個(gè)參數(shù)用來(lái)指定this的值，如果在整個(gè)方法的調(diào)用中有用到this 的話，看一個(gè)例子：

let firstHelper = {
  diff: 1,
  add(value){
    return value + this.diff;
  }
};
let secondHelper = {
  diff: 2
};
function createArrayFrom() {
  return Array.from(arguments, firstHelper.add, secondHelper);
}

let array = createArrayFrom(1, 2, 3);
console.log(array); //[3, 4, 5]

上面的例子里面，我們的在add()方法里面使用了this(這行代碼：value + this.diff)，并且add()定義在firstHelper對(duì)象，且firstHelper對(duì)象也有diff屬性，但是我們的第三個(gè)參數(shù)傳入的是secondHelper，所以在firstHelper.add()方法里的this值是secondHelper。

以上就是ES6新增的Array.of()和Array.from()方法，可以使得開(kāi)發(fā)者用更少的代碼應(yīng)對(duì)更多變的創(chuàng)建數(shù)組的場(chǎng)景。

您可能感興趣的文章: