国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

深入理解ES6筆記(十)增強的數組功能

pekonchan / 2277人閱讀

摘要:在可迭代對象上使用所有數組上的新方法與方法與方法均接受兩個參數一個回調函數一個可選值用于指定回調函數內部的。回調函數可接收三個參數數組的某個元素該元素對應的索引位置以及該數組自身。

主要知識點:創建數組、數組上的新方法、類型化數組

《深入理解ES6》筆記 目錄

創建數組

ES5中創建數組的方式:數組字面量、new一個數組。

const arr1 = [] //數組字面量
const arr2 = new Array() //new構建

ES6創建數組:Array.of()、Array.from()

Array.of() 方法

調用 new Array() 構造器時,根據傳入參數的類型與數量的不同,實際上會導致一些不同的結果:

let items = new Array(2);
console.log(items.length); // 2
console.log(items[0]); // undefined
console.log(items[1]); // undefined
items = new Array("2");
console.log(items.length); // 1
console.log(items[0]); // "2"
items = new Array(1, 2);
console.log(items.length); // 2
console.log(items[0]); // 1
console.log(items[1]); // 2
items = new Array(3, "2");
console.log(items.length); // 2
console.log(items[0]); // 3
console.log(items[1]); // "2"

ES6 引入了 Array.of() 方法來解決這個怪異問題:
Array.of() 方法創建一個包含所有傳入參數的數組,而不管參數的數量與類型:

let items = Array.of(1, 2);
console.log(items.length); // 2
console.log(items[0]); // 1
console.log(items[1]); // 2
items = Array.of(2);
console.log(items.length); // 1
console.log(items[0]); // 2
items = Array.of("2");
console.log(items.length); // 1
console.log(items[0]); // "2"
Array.from() 方法

Array.from()是將類數組轉換成數組。
ES5 中,將非數組對象轉換為真正的數組需要編寫一個函數,類似下面這樣:

function makeArray(arrayLike) {
    var result = [];
    for (var i = 0, len = arrayLike.length; i < len; i++) {
        result.push(arrayLike[i]);
    }
    return result;
}
function doSomething() {
    var args = makeArray(arguments);
    // 使用 args
}

也可以調用數組原生的 slice() 方法來減少代碼量,就像這樣:

function makeArray(arrayLike) {
    return Array.prototype.slice.call(arrayLike);
}
function doSomething() {
    var args = makeArray(arguments);
    // 使用 args
}

Array.from()是將類數組轉換成數組:

function doSomething() {
    var args = Array.from(arguments);
    // 使用 args
}
映射轉換

Array.from(arg1, arg2),我們可以給該方法提供2個參數,第二個參數作為第一個參數的轉換:

function translate() {
    return Array.from(arguments, (value) => value + 1);
}
let numbers = translate(1, 2, 3);
console.log(numbers); // 2,3,4

Array.from還可以設置第三個參數,指定this。

let helper = {
    diff: 1,
    add(value) {
        return value + this.diff;
    }
};
function translate() {
    return Array.from(arguments, helper.add, helper);
}
let numbers = translate(1, 2, 3);
console.log(numbers); // 2,3,4
在可迭代對象上使用
let numbers = {
    *[Symbol.iterator]() {
        yield 1;
        yield 2;
        yield 3;
    }
};
let numbers2 = Array.from(numbers, (value) => value + 1);
console.log(numbers2); // 2,3,4
所有數組上的新方法 find() 與 findIndex() 方法

find() 與 findIndex() 方法均接受兩個參數:一個回調函數、一個可選值用于指定回調函數內部的 this 。
回調函數可接收三個參數:數組的某個元素、該元素對應的索引位置、以及該數組自身。
二者唯一的區別是: find() 方法會返回匹配的值,而 findIndex() 方法則會返回匹配位置的索引。

let numbers = [25, 30, 35, 40, 45];
console.log(numbers.find(n => n > 33)); // 35
console.log(numbers.findIndex(n => n > 33)); // 2
fill() 方法

用新元素替換掉數組內的元素,可以指定替換下標范圍:arr.fill(value, start, end)

let numbers = [1, 2, 3, 4];
numbers.fill(1);
console.log(numbers.toString()); // 1,1,1,1
let numbers = [1, 2, 3, 4];
numbers.fill(1, 2);
console.log(numbers.toString()); // 1,2,1,1
numbers.fill(0, 1, 3);
console.log(numbers.toString()); // 1,0,0,1
copyWithin() 方法

選擇數組的某個下標,從該位置開始復制數組元素,默認從0開始復制。也可以指定要復制的元素范圍:

let numbers = [1, 2, 3, 4];
// 從索引 2 的位置開始粘貼
// 從數組索引 0 的位置開始復制數據
numbers.copyWithin(2, 0);
console.log(numbers.toString()); // 1,2,1,2

let numbers = [1, 2, 3, 4];
// 從索引 2 的位置開始粘貼
// 從數組索引 0 的位置開始復制數據
// 在遇到索引 1 時停止復制
numbers.copyWithin(2, 0, 1);
console.log(numbers.toString()); // 1,2,1,4

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

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

相關文章

  • 深入理解ES6筆記——擴展對象功能性(4)

    摘要:將對象的屬性拷貝到了對象,合并成一個新的對象。而這種行為也是新增的標準。總結本章講解了對象字面量語法拓展,新增方法,允許重復的對象字面量屬性,自有枚舉屬性排序,增強對象原型,明確了方法的定義。但是,就算把全部新增的功能記住也不是難事。 變量功能被加強了、函數功能被加強了,那么作為JavaScript中最普遍的對象,不加強對得起觀眾嗎? 對象類別 在ES6中,對象分為下面幾種叫法。(不需...

    baihe 評論0 收藏0
  • 深入理解ES6筆記—— 改進數組功能(10)

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

    inapt 評論0 收藏0
  • 深入理解ES6筆記——導讀

    摘要:最近買了深入理解的書籍來看,為什么學習這么久還要買這本書呢主要是看到核心團隊成員及的創造者為本書做了序,作為一個粉絲,還是挺看好這本書能給我帶來一個新的升華,而且本書的作者也非常厲害。 使用ES6開發已經有1年多了,以前看的是阮一峰老師的ES6教程,也看過MDN文檔的ES6語法介紹。 最近買了《深入理解ES6》的書籍來看,為什么學習ES6這么久還要買這本書呢?主要是看到Daniel A...

    Godtoy 評論0 收藏0

發表評論

0條評論

pekonchan

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<