<span id="ld197"><th id="ld197"><progress id="ld197"></progress></th></span>
<menuitem id="ld197"></menuitem>

    <dl id="ld197"></dl>

    <track id="ld197"><big id="ld197"><big id="ld197"></big></big></track><noframes id="ld197"><dfn id="ld197"><address id="ld197"></address></dfn>

    <output id="ld197"></output>
    <var id="ld197"><noframes id="ld197">
      <dfn id="ld197"><nobr id="ld197"><sub id="ld197"></sub></nobr></dfn>
          <b id="ld197"><form id="ld197"><delect id="ld197"></delect></form></b>

                當前位置:首頁 > 安卓源碼 > 技術博客 >

                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()方法,F在,為什么不看另一個例子,您不覺得嗎?而且,為什么不把它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']);

                同樣,這是一個簡單易懂的示例,F在,讓我們提高一個檔次。并且,讓我們更多地關注的第一個參數,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超碰,国产福利第一视频在线播放,大陆国产国语对白视频,亚洲香蕉网久久综合影院