ES6數組 - 新增的創建數組的方法

e10101 發布于2019-08-26 10:28 / 2832人閱讀

摘要：它主要用在以類數組對象和可迭代對象為藍本，創建對應的數組。類數組對象我們最熟悉的類數組對象，應該就是的對象了。

在ES6之前，創建數組的方式有2種：
一: 通過數組字面量

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

二: 通過new Array()創建數組

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

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

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

當我們給new Array()傳遞單個數字參數時，這個數字不是作為數組元素，而是該數組的length屬性而存在，而數組本身則是一個空數組。
為了解決上面這個令人類沒有安全感的特性，ES6引入了Array.of()來解決這個問題：
三：Array.of()
顧名思義，of()方法就是以它接受到的參數作為元素來創造數組，上面我們說的單個數字參數的情況也同樣適用：

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還增加了一個Array.from()，也是用了創建一個數組。它主要用在以類數組對象和可迭代對象為藍本，創建對應的數組。

1: Array.from(類數組對象)

我們最熟悉的類數組對象，應該就是function的arguments對象了。接下來，我們看一個用Array.from()創建包含arguments元素的數組：

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(可迭代對象)

Array.from()也可以把一個可迭代對象轉換為數組：
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()的第二個參數
前面的例子，我們看到了一個類數組對象和可迭代對象作為Array.from()的第一個參數，從而創建出包含它們元素的數組。Array.from()的第二個參數是一個函數，這個函數用來將類數組對象和可迭代對象的元素進行某種變換后，再作為生出數組的元素，例如：

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

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

六： Array.from()的第三個參數
Array.from()還提供第三個參數可用，第三個參數用來指定在第二個參數所代表的回調函數的this的值，看一個例子：

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對象，且firstHelper對象也有diff屬性；但是我們通過給三個參數傳入secondHelper，從而使得在firstHelper.add()方法里的this值是secondHelper。

以上就是ES6新增的Array.of()和Array.from()方法，可以使得開發者用更少的代碼應對更多變的創建數組的場景。

GPU云服務器云服務器 js創建數組的方法 java數組新增方法判斷數組的方法定義數組的方法

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/106241.html

深入理解ES6（四）（數組的擴展）

摘要：例如，會刪除數組中的前兩項。插入的項數不必與刪除的項數相等。對數組進行遍歷循環，對數組中的每一項運行給定函數。判斷數組中是否存在滿足條件的項，只要有一項滿足條件，就會返回。深入理解ECMA2015（四） —— 數組的擴展一、JavaScript數組詳解回顧（ES6之前）（1）數組的創建使用 Array 構造函數： var arr1 = new Array(); //創建一個...

big_cat 2019-08-29 15:41 評論0 收藏0
Javascript內置對象新增接口列表

網上很少有提供不同版本接口對比的文章，所以自己總結一下。 Array Method Description Modify Version concat 連接多個數組，返回數組副本，參數可以為值或數組否 ES3 join 把數組元素組合為字符串否 ES3 pop 刪除并返回最后一個元素是 ES3 push 向數組末尾添加一個或多個值，返回數組長度是 ES3 reve...

xuhong 2019-08-21 17:02 評論0 收藏0
白話es6系列一：Array.of()和Array.from()

摘要：更重要的是，代碼意圖也直觀數組長度，每一項按照約定的規則進行初始化。上面代碼創建了一個長度為的數組其中的項為數字。的強大不止于此，它還能接受一個映射函數上面代碼中，被直接傳遞給方法，從而將它包含的值轉換成了數組。 es6新增了二種方法：Array.of()和Array.from()，它們有什么用途呢？在平時的開發中能給我們帶來什么方便呢？本篇將從一個創建數組的小問題開始，逐步揭開它們的...

newtrek 2019-08-23 15:36 評論0 收藏0
《深入理解ES6》筆記—— 改進數組的功能（10）

摘要：創建數組中創建數組的方式數組字面量一個數組。傳入一個回調函數，找到數組中符合當前搜索規則的第一個元素，返回它，并且終止搜索。用新元素替換掉數組內的元素，可以指定替換下標范圍。 ES5提供的數組已經很強大，但是ES6中繼續改進了一些，主要是增加了新的數組方法，所以這章的知識非常少。創建數組 ES5中創建數組的方式：數組字面量、new一個數組。 const arr1 = [] //數組字...

inapt 2019-08-20 18:25 評論0 收藏0