ES6之數組的擴展

Warren 發布于2019-08-22 17:03 / 1535人閱讀

摘要：中對字符串函數對象數組等都進行了擴展，感覺目的呢就是完善一下所為外行人詬病的一些偽其實個人覺得不完美的才是真的美，什么東西都無懈可擊了就顯得不夠有趣了。

ES6中對字符串、函數、對象、數組等都進行了擴展，感覺目的呢就是完善一下JS所為外行人詬病的一些偽bug.其實個人覺得不完美的JS才是真的美，什么東西都無懈可擊了就顯得不夠有趣了。好了，接下來又要開始拾人牙慧了...

主要講解:

擴展運算符...

Array.from()

Array.of()

Array.prototype.find() 和 Array.prototype.findIndex() --常用

1.擴展運算符... 用于將數組轉為逗號分隔的參數序列

如: ...[1,2,3] => 1,2,3 --只限一維轉換,這種轉換只有放進函數中調用才有意義，不能多帶帶存在

基礎用法:
   function plus(x,y){
        return x+y;
    }

    plus(...[3,7]);
    //10
    plus(3,...[7])
    plus(...[3],7)
    //可以靈活的置于函數參數中任意位置，只要根據傳進的數據進行解析即可。
    
    //Array原生push方法(可向數組末尾添加一個或多個元素,順序添加，且不創建新數組，直接修改原數組)
    let arr = [1,2,3];
    arr.push(4,5); //直接傳參
    arr // [1,2,3,4,5]

    //使用擴展的方式:傳入一個數組，進行拼接
    arr.push(...[6,7,8]);
    arr //[1,2,3,4,5,6,7,8]

應用:
    i.數組的淺拷貝
        let arr = [12,34,56];

        let arr2 = [...arr];
        let [...arr3] = arr;
        arr2 // [12,34,56]
        arr3 // [12,34,56]

        arr2 == arr 
        //false

    ii.合并數組
        [...arr,...arr2,...arr3]
        //[12, 34, 56, 12, 34, 56, 12, 34, 56]

    iii.結合解構賦值，生成剩余數組 -- 擴展運算符只能置于參數最后
        let [one,...rest] = [1,2,3,4,5];
        one // 1
        rest // [2,3,4,5]

    iv. 擴展字符串成數組 --感覺這個好像沒啥用,"babe".split("")也可以
        [..."babe"]
        //["b", "a", "b", "e"]
        //不過阮老師的書上說擴展運算符的寫法可以識別四個字節的Unicode字符
        //有相關需求可以使用這種方式解剖字符串

    v. 實現了Iterator接口的對象均可以使用擴展運算符轉化成真正的數組(關于Iterator下次再寫)
        
        function convert2Arr(){
          return [...arguments];
        }
        
        let result = convert2Arr(1,2,3,4,5);
        result // [1,2,3,4,5]

2.Array.from()

用于將類數組對象、可遍歷的對象轉為真正的數組(類數組對象特征:屬性為非負整數、存在length屬性、length>=0)

//類數組對象
let obj = {
    0:"hello",
    1:"world",
    4:"outof bounds data",
    length:3   //因為length不能動態改變，隨意賦值，最后得到的數組長度就是其值
}
Array.from(obj);
// ["hello", "world", undefined]
//根據屬性名對應到數組的index,超過length部分舍棄。沒有對應的屬性，置為undefined

//實現了Iterator接口的數據結構
let str = "babe";
Array.from(str);
// ["b", "a", "b", "e"]
[...str]
// ["b", "a", "b", "e"]
//嗯，感覺現在JavaScript向著更幸福的方向發展了，條條大路通羅馬。

注意:
    Array.from()是一個很不嚴謹的角色，只要對象含有length屬性，且值為正整數就能轉
    不保證轉出來的東西質量是否符合要求。
    Array.from({user:"babe",length:5})
    // [undefined, undefined, undefined, undefined, undefined]
        
    Array.from()可接收第二個參數，用于對數組的每一項進行處理并返回
    Array.from([1,2,3],x=>x*x)
    // [1, 4, 9]
        
    Array.from([1,2,3],x=>{x*x})
    //[undefined, undefined, undefined]  --切記處理函數中一定要返回
        
    Array.from()還可接收第三個參數，這樣在處理函數中就可以使用傳進去的對象域中的值
    let that = {
        user:"babe"
    }
    let obj = {
        0:"babe",
        1:"zhangsan",
        2:"lisi",
        length:3
    }
    let result = Array.from(obj,(user) =>{
        if(user == that.user){
            return user;
        }

        return 0;
    },that);
    result //["babe", 0, 0]

3.Array.of()

用于將一組值轉換為數組，存在的意義是替代以構造函數的形式創建數組，修復數組創建因參數不一致導致表現形式不同的偽bug.

//原始方式
new Array()
// []
new Array(2)
// [empty × 2]
new Array(1,2,3,4,5)
// [1, 2, 3, 4, 5]

//先進改良方式
Array.of();
// []
Array.of(2);
// [2]
Array.of(1,2,3,4,5);
// [1, 2, 3, 4, 5]

4.Array.prototype.find() 和 Array.prototype.findIndex()方法 --常用

find方法用于查找第一條符合要求的數據，找到返回該數據，否則返回undefined; findIndex則用于找到第一條符合要求的數組位置，找到返回index,否則返回-1;----這兩個方法都可以使用indexOf替代，只是比indexOf更精細(可以查找NaN所在位置)

let result = [
    {extractId:1,sec:"Fi900"},
    {extractId:2,sec:"Fi901"},
    {extractId:3,sec:"Fi902"},
    {extractId:4,sec:"Fj900"},
    {extractId:5,sec:"Fj901"}
];

result.find(obj => obj.sec == "Fi902")
// {extractId: 3, sec: "Fi902"}
result.findIndex(obj => obj.sec == "Fi902")
// 2

//這個還要記住一個處理函數的接收參數順序，依次為:當前值、當前位置、原始數組
result.find((val,index,arr)=>{...});
result.findIndex((val,index,arr)=>{});
//此兩個方法均可接收第二個參數，傳進去一個作用域對象,然后在處理函數中可以使用傳入的對象
let scope = {extractId:2};
result.findIndex(item=>item.extractId == scope.extractId,scope);
// 1

今天就先寫到這里了(每次都有點虎頭蛇尾，介紹的也只是我感興趣的點，以后盡量全，然后有側重點)，如果bug請指正Thanks?(?ω?)?

云服務器 GPU云服務器 es6字符串擴展對象的擴展云計算的擴展服務器的擴展

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

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

ES6之數組的擴展

摘要：它的參數是一個回調函數，所有數組成員依次執行該回調函數，直到找出第一個返回值為的成員，然后返回該成員。上面代碼中，方法的回調函數可以接受三個參數，依次為當前的值當前的位置和原數組。數組的擴展展開運算符展開運算符（用三個連續的點 ( ... ) 表示）是 ES6 中的新概念，使你能夠將字面量對象展開為多個元素。合并數組展開運算符的一個用途是結合數組。如果你需要結合多個數組，在...

paney129 2019-08-21 18:39 評論0 收藏0
ES6入門之對象的擴展

摘要：循環遍歷對象自身的和繼承的可枚舉屬性不含屬性。返回一個數組，包含對象自身的所有屬性的鍵名。目前，只有對象方法的簡寫法可以讓引擎確認，定義的是對象的方法。showImg(https://user-gold-cdn.xitu.io/2019/5/21/16ada8456223b0e1); 1. 屬性的簡潔表示法在ES6中允許直接寫入變量和函數，作為對象的屬性和方法，使得代碼的書寫更為簡潔。...

RiverLi 2019-05-23 11:58 評論0 收藏0
ES6入門之對象的擴展

摘要：屬性的簡潔表示法在中允許直接寫入變量和函數，作為對象的屬性和方法，使得代碼的書寫更為簡潔。循環遍歷對象自身的和繼承的可枚舉屬性不含屬性。返回一個數組，包含對象自身的所有屬性的鍵名。 showImg(https://segmentfault.com/img/remote/1460000019259004?w=1282&h=1920); 1. 屬性的簡潔表示法在ES6中允許直接寫入變量...

AWang 2019-08-26 13:53 評論0 收藏0
ES6學習手稿之基本類型擴展

摘要：它是一個通用標準，奠定了的基本語法。年月發布了的第一個版本，正式名稱就是標準簡稱。結語的基本擴展還有一些沒有在這里詳細介紹。前言 ES6標準以及頒布兩年了，但是，好像還沒有完全走進我們的日常開發。這篇文章從ES6的基本類型擴展入手，逐步展開對ES6的介紹。 ECMAScript和JavaScript JavaScript是由Netscape創造的，該公司1996年11月將JavaSc...

tommego 2019-08-21 18:25 評論0 收藏0
ES6入門之對象的新增方法

showImg(https://user-gold-cdn.xitu.io/2019/5/22/16adcec448a45d82); 1. Object.is() 用來解決在ES5中兩種相等運算符的缺點。用來比較兩個值是否嚴格相等，行為和（===）基本一致。在ES5中判斷兩個值是否相等，只能用（==）相等運算符和（===）嚴格相等運算符，但是這兩貨都有缺點，前者兩邊的值都會轉換數據類型，...

zhou_you 2019-05-22 19:25 評論0 收藏0