• <label id="qwa2y"></label><kbd id="qwa2y"><option id="qwa2y"></option></kbd>
  • <u id="qwa2y"></u>
    當前位置:首頁 > 安卓源碼 > 技術博客 >

    ES6新數組方法ES6不同數組方法的討論

    時間:2020-09-14 15:37 來源:互聯網 作者:源碼搜藏 瀏覽: 收藏 挑錯 推薦 打印

    ES6不同的Array方法的演練,討論了它提供的功能。 此外,我們將回答:為什么要將這些方法添加到語言中并解決該問題? 介紹 ES6發布后,我發現許多開發人員仍然不知道該 Array 對象 添加的功能 。 因此,我決定為我們創建這篇文章以傳播信息,許多人將從中受
    ES6不同的Array方法的演練,討論了它提供的功能。此外,我們將回答:“為什么要將這些方法添加到語言中并解決該問題?”

    介紹

    ES6發布后,我發現許多開發人員仍然不知道該Array對象添加的功能。因此,我決定為我們創建這篇文章以傳播信息,許多人將從中受益。

    背景

    本文不是關于JavaScript數組的介紹,而是更多有關檢查JavaScript Array對象中新添加的功能的內容。如果您是初學者,建議您進行Google搜索。而且,在我看來,這些附加功能有一個目標,那就是在使用數組時使我們的生活更輕松并提高生產力。最后,如果您對數組有很好的了解,則可以輕松閱讀本文。

    ECMAScript 6增強型陣列

    如前所述,ECMAScript 6(ES6)已向全局Array對象添加了新方法。因此,我們將討論以下方法:

    • Array.from()
    • Array.of()
    • copyWithin()
    • fill()
    • find()
    • findIndex()

    要指出的另一件事情,我們不打算處理這些方法,如entries(),values()和keys()因為我寫關于他們在這里

    因此,讓我們開始吧。我希望你很興奮。

    Array.from()方法

    這是一種從可迭代對象static返回新Array實例的方法。但是,您也可以在第一個參數中傳遞“ 類似數組的對象 ”。如果您還沒有聽說過,將在本節中進行討論。

    句法

    隱藏   復制代碼
    //syntax 
    //Array.from(arrayLike[, mapFn[, thisArg]]);

    參量

    • arrayLike –是可迭代對象的引用。
    • mapFn –是可選的,并充當稱為map-function的回調。
    • thisArg–也是可選的,并且是thismap函數內部的值。

    隱藏   復制代碼
    let result = 
    Array.from('JavaScript', (val, indx) => `[${indx}]` + "=>" + val.toUpperCase());
    
    console.log(result);

    輸出量

    ES6新數組方法ES6不同數組方法的討論

    如您所見,上面的示例很簡單(易于理解)。

    地圖功能

    第二個參數(mapFn)(如果提供)是映射回調。調用時,它將每個值從源轉換為返回的目標。這類似于Array.prototype.map()方法。現在,為什么不看另一個例子,您不覺得嗎?而且,為什么不把它Array.from()放在里面呢Object。為了讓我們來看看如何映射回調函數和3 次參數this的行為。

    隱藏   復制代碼
    const manager = {
      isBadManager: true,
      doBadStuff: function (items) {
        return Array.from(items, function (val, indx) {
    
          if (this.isBadManager) {
            console.log(`${indx + 1}. ${val[0].toUpperCase()}${val.substr(1)}`);
          }
        }, this);
      }
    }
    
    /**
     * Output:
     *  1. That's my idea
     *  2. Micromanage
     */
    manager.doBadStuff(['that\'s my idea','micromanage']);

    同樣,這是一個簡單易懂的示例。現在,讓我們提高一個檔次。并且,讓我們更多地關注的第一個參數,Array.map()它是類似數組的對象(arrayLike)。

    什么是類似數組的對象?

    通常,您會在JavaScript中遇到一些看起來像數組的對象,通常稱為“ 類似數組的對象 ”。困惑?不用了 它Object的長度屬性為非負整數,并且具有一些索引屬性。

    讓我們看下面的例子:

    隱藏   復制代碼
    let arrLike1 = {
      length: 3,
      0: "Jin",
      1: "Vincent",
      2: "Necesario"
    };

    而已?是! 現在,讓我們看一下如何使用將arrLike1變量轉換為實數。ArrayArray.from()

    隱藏   復制代碼
    let resultArray2 = Array.from(arrLike1);
    
    console.log(resultArray2); 
    //output: ["Jin", "Vincent", "Necesario"]

    節點列表

    A NodeList是類數組對象的另一個示例。甚至我也掙扎著NodeList。我以為是數組,但不是。NodeList和Arrays 完全不同的東西。

    好,那是NodeList什么?甲NodeList目的是集合DOM這是從所提取的節點HTML使用瀏覽器時文件API諸如querySelector()和/或querySelectorAll()。

    現在,我們有一個想法,什么NodeList是,讓我們嘗試將轉換NodeList到Array與使用Array.from()。

    隱藏   復制代碼
    <!-- this is the html file -->
    <body>
        <div>
            <p>Hello World 1</p>
            <p>Hello World 2</p>
            <p>Hello World 3</p>
        </div>
    </body>
    隱藏   收縮 ES6新數組方法ES6不同數組方法的討論   復制代碼
    /**
     * Start of NodeList
     * In this code sample we will see what a NodeList is. 
     * Here are some facts about NodeList. 
     * 
     * 1. NodeList aren't arrays. 
     * 2. NodeList does have a length property
     * 3. NodeList does have indexed property
     * 4. Therefore, we can conclude that a NodeList does look like
     *    an Array-like object.
     * 5. We can convert NodeList into an array with the use of Array.from()
     */
    window.addEventListener("DOMContentLoaded", function (event) { 
    
      let elements = document.querySelectorAll("div p");
    
      console.log(elements); //output: NodeList(3) [p, p, p]
    
      //this proves that NodeList does have a length property
      console.log(elements.length) //output: 3
    
      console.log(typeof (elements)); //output: object
      
      //this proves that the return of querySelectorAll method is a NodeList
      console.log(elements instanceof NodeList); //output: true
    
      //this proves that NodeList aren't arrays
      console.log(elements instanceof Array); //output: false
    
      let arrayParagraphs = Array.from(elements);
    
      console.log(arrayParagraphs); //output: Array(3)
    
    });
     /**
      * End of NodeList
      */

    輸出量

    ES6新數組方法ES6不同數組方法的討論

    既然我們熟悉了類似數組的對象,并且已經了解了如何將其轉換為真實的數組。我們需要了解的下一個概念是如何避免空插槽。

    避免空插槽

    空插槽?這些是什么?基本上,當您創建一定長度的Array而不指定每個索引的值時,您將擁有一個空索引,也稱為一個空slot。

    讓我們看下面的例子:

    隱藏   復制代碼
    const arrWithEmptySlots = [];
    arrWithEmptySlots.length = 5;
    arrWithEmptySlots[0] = "Jin";
    
    //output ["Jin", empty × 4]
    console.log(arrWithEmptySlots);

    輸出:

    ES6新數組方法ES6不同數組方法的討論

    如何檢查空插槽?

    我們可以使用in運算符來檢查數組是否具有鍵。此外,它返回一個boolean值,false為空時隙,但true用于與值槽,包括undefined值。

    讓我們看下面的例子:

    隱藏   復制代碼
    const arrWithEmptySlots = [];
    arrWithEmptySlots.length = 3;
    arrWithEmptySlots[0] = undefined;
    arrWithEmptySlots[1] = "Jin";
    
    console.log(0 in arrWithEmptySlots);//true
    console.log(1 in arrWithEmptySlots);//true
    console.log(2 in arrWithEmptySlots);//false
    console.log(3 in arrWithEmptySlots);//false
    
    /**
     * output:
     * 0
     * 1
     */
    for (let slot in arrWithEmptySlots) {
      console.log(slot);
    }

    這個空插槽與Array.from()方法有什么關系?如果您想生成一個Array初始化為一定長度而沒有空插槽的初始化方法,則Array.from()可以解決該問題。

    讓我們看下面的例子:

    隱藏   復制代碼
    const arrayWithEmptySlots_2 = [];
    arrayWithEmptySlots_2.length = 5;
    
    const results = Array.from(arrayWithEmptySlots_2);
    
    //output: [undefined, undefined, undefined, undefined, undefined]
    console.log(results);

    在我們進入下一部分之前。然后我們可以得出結論,Array.from()不僅Array從可迭代對象創建新實例。它還接受一個“ 類似數組的對象 ”,該對象將被轉換為實數,Array并幫助我們(JavaScript程序員)避免出現空槽。

    Array.of()方法

    通常,每個人都知道Array構造函數是用來創建Array對象的。此外,Array.of()方法是Array構造方法的替代方法,本節將介紹原因。

    句法

    隱藏   復制代碼
    //syntax
    //Array.of([]);

    參量

    • [] –用于創建數組的元素

    讓我們看下面的一些例子:

    • 創建一個新的Array構造函數并傳遞多個參數。
    隱藏   復制代碼
    let cars = new Array("Toyota", "Mitsubishi", "Nissan", "Honda");
    
    //output: 4
    console.log(cars.length); 
    //output: Toyota Mitsubishi Nissan Honda
    console.log(...cars); 
    
    let customers = new Array({ name: "Jin" }, { name: "Vincent" }, { name: "Necesario" });
    
    //output: 3
    console.log(customers.length); 
    //output: {name: "Jin"} {name: "Vincent"} {name: "Necesario"}
    console.log(...customers); 
    
    let luckyNumbers = new Array(23, 29, 32);
    
    //output: 3
    console.log(luckyNumbers.length);
    //output: 23 29 32
    console.log(...luckyNumbers);

    到目前為止,一切都很好。讓我們轉到下一個示例。

    • 創建一個新的Array構造函數并傳遞一個參數。并且,讓我們看到故障。
    隱藏   復制代碼
    let car = new Array("Toyota");
    //still works.
    console.log(car); 
    
    let customer = new Array({name: "Jin"})
     //still works.
    console.log(customer);
    
    let luckyNumber = new Array(23);
    //glitch
    //output: 23
    //23 in length????
    console.log(luckyNumber.length); 
    
    //another glitch
    //output:  [empty × 23]
    console.log(luckyNumber); 

    小故障?

    你發現差異了嗎?讓我們以luckyNumber變量為例,與變量car和比較,結果不同customer。請記住,當您傳遞一個帶有數字值的參數時。它正在創建一個空數組,其length屬性等于該數字,并根據length屬性產生空插槽。這是小故障嗎?也許是或否。為了避免出現此問題,我們可以使用該Array.of()方法。

    讓我們看下面的例子:

    隱藏   復制代碼
    let superLuckyNumber = Array.of(23);
    console.log(superLuckyNumber); //output: [23]

    因此,Array.of()引入了解決該問題的方法。在評論部分讓我知道您的想法。提前致謝。

    copyWithin()方法

    該copyWithin()方法用于將數組的值序列復制到數組中的其他位置。

    句法

    隱藏   復制代碼
    //syntax
    //[].copyWithin(target, start, end);

    參量

    • target –將元素復制到的索引
    • start –可選,這是從其開始復制的索引位置
    • end –可選,這是實際結束復制元素的索引

    如果起始索引為負,則將其視為數組長度加上起始索引([].length + start)。與結束索引([].length + end)相同。

    讓我們看下面的例子:

    隱藏   復制代碼
    let presidents1 = ["Donald Trump", "Barack Obama", "George Bush", "Bill Clinton"];
    let presidents2 =  ["George H. W. Bush", "Ronald Reagan", "Jimmy Carter", "General Ford"];
    
    //let's copy to index 0 from index 1
    //let's replace Donald Trump with Barack Obama
    //output: ["Barack Obama", "George Bush", "Bill Clinton", "Bill Clinton"]
    console.log(presidents1.copyWithin(0, 1));
    
    //let's copy to index 1 from index 2
    //, let's replace Ronald Reagan with Jimmy Carter up to 3rd index. 
    //Up to 2nd index only excluding 3rd index.
    //output: ["George H. W. Bush", "Jimmy Carter", "Jimmy Carter", "General Ford"]
    console.log(presidents2.copyWithin(1, 2, 3));

    簡單明了(易于遵循)不是嗎?讓我們進入下一部分。

    fill()方法

    該fill方法實際上使用給定填充(全部或部分)從start索引到end索引的Array的所有元素value。此外,startand end索引是可選的;因此,如果未提供它們,則整個Array字段將由您傳遞的值填充。

    句法

    隱藏   復制代碼
    //syntax
    //[].fill(value, start, end);

    參量

    • value –填充數組的值
    • start –可選,是開始索引
    • end –可選,是結束索引

    如果您已經看到Array構造函數的問題。同樣,我們可以使用此方法為數組的所有空插槽設置值。只要目標是初始化具有定義的長度且沒有空插槽的數組,就可以執行此操作。

    讓我們看下面的例子:

    隱藏   復制代碼
    let arryLenOf5 = new Array(5).fill(undefined);
    
    //output: (5)[undefined, undefined, undefined, undefined, undefined]
    console.log(arryLenOf5);
    
    let arryLenOf3 = new Array(3).fill(0);
    
    //output: (3) [0, 0, 0]
    console.log(arryLenOf3);

    讓我們再次看一些例子:

    隱藏   復制代碼
    //fills the entire array
    console.log([29, 23, 5, 26, 16, 21].fill(29)); 
    //output: [29, 29, 29, 29, 29, 29]
    
    //fills the entire array starting at index 1
    console.log([29, 23, 5, 26, 16, 21].fill(30, 1)); 
    //output: [29, 30, 30, 30, 30, 30]
    
    //fills the entire array starting at index 1 and ends at 5th position.
    console.log([29, 23, 5, 26, 16, 21].fill(31, 2, 5)); 
    //output: [29, 23, 31, 31, 31, 21]

    如果起始索引為負,則將其視為數組長度加上起始索引([].length + start)。與結束索引([].length + end)相同。

    隱藏   復制代碼
    //fills the entire array starting at index ([].length -2) = 4th index.
    console.log([29, 23, 5, 26, 16, 21].fill(31, -2)); 
    //output: [29, 23, 5, 26, 31, 31]
    
    //fills the entire array starting at [1] index ends to ([].length -2) = 4th position.
    console.log([29, 23, 5, 26, 16, 21].fill(31, 1, -2)); 
    //output: [29, 31, 31, 31, 16, 21]

    簡單明了(易于遵循)不是嗎?讓我們進入下一部分。

    find()方法

    在深入研究該find()方法之前,我們將先退一步。并回答:“它真正解決了什么?”

    句法

    隱藏   復制代碼
    //syntax
    //[].find(callback(element,index,array), thisArg);

    參量

    • callback –對數組中的每個值執行的回調函數
    • thisArg–是可選的,Object用作this回調內部

    indexOf方法

    通常,在中搜索值時首先想到Array的是indexOf() 方法的使用。

    讓我們看下面的例子:

    隱藏   復制代碼
    let nums = [9, 8, 7, 6, 5, 4, 3, 2, 1];
    
    console.log(nums.indexOf(9)); //output: 0;
    console.log((nums.indexOf(7) !== -1)); //output: true
    console.log((nums.indexOf("9") == 0)); //output: false
    console.log((nums.indexOf("Jin Vincent Necesario") !== -1)); //output: false

    但是,有時程序員會忘記此方法需要嚴格的比較。我認為,這就是他們(程序員)使用該some()方法的原因。

    some()方法

    此方法通過為每個元素調用一個函數回調來起作用,直到一個返回a true 或truthyvalue,最后停止。

    好處是您可以控制值的比較,與indexOf() 方法不同。

    讓我們看下面的例子:

    隱藏   復制代碼
    let nums = [9, 8, 7, 6, 5, 4, 3, 2, 1];
    console.log(nums.some((num) => num == "9")); //output: true
    console.log(nums.some((num) => num === "9")); //output: false

    現在,關于其缺點some()的方法是,你只能得到boolean價值true或者false,如果配合適當的值被發現,但不是實際的值相匹配的內容。

    什么find()方法可以解決?

    該find()方法解決了該問題。它的工作原理與some()方法相同,不同之處在于一旦回調返回其值,Array 則返回實際值。因此,find()method返回一個Array元素。僅當滿足所提供的條件時,該表達式才會傳遞給回調函數。否則,返回undefined。

    讓我們看下面的例子:

    隱藏   復制代碼
    let nums = [9, 8, 7, 6, 5, 4, 3, 2, 1];
    console.log(nums.find((num) => num == "9")); //output: 9
    console.log(nums.find((num) => num === "9"));//output: undefined

    為什么沒有另一個帶有完整參數的示例?

    隱藏   復制代碼
    let num = 5;
    let nums = [9, 8, 7, 6, 5, 4, 3, 2, 1];
    let result = nums.find(function (value, index, array) {
    
      //just shows the values to the console window.
      console.log(`The num[${index}] is equal to ${value} ${this}`);
    
      return value === parseInt(this);
    }, num);
    
    console.log(result); //output: 5

    findIndex()方法

    最后,解決的最后方法。這幾乎類似于該find()方法。但是,它返回數組元素的索引,而不是元素本身。

    句法

    隱藏   復制代碼
    //syntax
    //[].findIndex(callback(element,index,array), thisArg);

    參量

    • callback–對數組中的每個值執行直到函數返回的回調函數true。否則,undefined表示未找到該元素。
    • thisArg –是可選的

    回到該indexOf()方法,我們已經看到無法控制其匹配邏輯。這樣,findIndex()節省了一天。

    讓我們看下面的例子:

    隱藏   復制代碼
    let num = 5;
    let nums = [9, 8, 7, 6, 5, 4, 3, 2, 1];
    let result = nums.findIndex(function (value, index, array) {
    
      //just shows the values to the console window.
      console.log(`The num[${index}] is equal to ${value} ${this}`);
    
      return value === parseInt(this);
    }, num);
    
    console.log(result); //output: 4

    似乎是一個簡單的例子。而且,因為我們對find()方法有很好的了解,并且顯示了它們的相似性。讓我們舉另一個例子,其中搜索看起來像是自定義搜索。

    隱藏   復制代碼
    const houses = [
      { length: 22,  width: 288,  measurement: 'ft' },
      { length: 182, width: 532,  measurement: 'ft' },
      { length: 12,  width: 152,  measurement: 'ft' },
      { length: 20,  width: 30,   measurement: 'ft' },
      { length: 12,  width: 152,  measurement: 'ft' }];
    
    let indexResult = houses.findIndex((house) => (house.length * house.width) === 600);
    
    console.log(indexResult); //output: 3

    什么時候使用find()和findIndex()方法?

    • 不要像對待findIndex(方法那樣對待)方法indexOf() ,因為我們有some()方法可以返回所需的布爾值。
    • 不要使用findIndex()method獲取匹配的值,因為這就是該find()方法的目的。
    • indexOf()如果需要嚴格匹配,請使用方法。
    • findIndex()如果需要更自定義的匹配項的索引,請使用。

    摘要

    在本文中,我們學習Array了JavaScript(ES6)語言的新方法。此外,我們已經解決了這些方法的工作原理,為什么要添加呢?它解決了什么問題/問題?總的來說,我們已經看到了這些方法的歷史和好處。希望您喜歡我喜歡寫這篇文章。敬請期待更多。直到下次,編程愉快!

    請不要忘記關注,添加書簽,贊和/或評論。干杯! 并感謝您的閱讀!


    ES6新數組方法ES6不同數組方法的討論 轉載http://www.hxslwl.com/appboke/52394.html

    技術博客閱讀排行

    最新文章

    久久人人97超碰人人澡,久久人人97超碰人人澡苹果,久久人人97超碰