ES6之?dāng)?shù)組的擴(kuò)展

Warren 發(fā)布于2019-08-22 17:03 / 1543人閱讀

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

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

主要講解:

擴(kuò)展運(yùn)算符...

Array.from()

Array.of()

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

1.擴(kuò)展運(yùn)算符... 用于將數(shù)組轉(zhuǎn)為逗號分隔的參數(shù)序列

如: ...[1,2,3] => 1,2,3 --只限一維轉(zhuǎn)換,這種轉(zhuǎn)換只有放進(jìn)函數(shù)中調(diào)用才有意義，不能多帶帶存在

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

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

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

應(yīng)用:
    i.數(shù)組的淺拷貝
        let arr = [12,34,56];

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

        arr2 == arr 
        //false

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

    iii.結(jié)合解構(gòu)賦值，生成剩余數(shù)組 -- 擴(kuò)展運(yùn)算符只能置于參數(shù)最后
        let [one,...rest] = [1,2,3,4,5];
        one // 1
        rest // [2,3,4,5]

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

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

2.Array.from()

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

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

//實(shí)現(xiàn)了Iterator接口的數(shù)據(jù)結(jié)構(gòu)
let str = "babe";
Array.from(str);
// ["b", "a", "b", "e"]
[...str]
// ["b", "a", "b", "e"]
//嗯，感覺現(xiàn)在JavaScript向著更幸福的方向發(fā)展了，條條大路通羅馬。

注意:
    Array.from()是一個很不嚴(yán)謹(jǐn)?shù)慕巧?，只要對象含有l(wèi)ength屬性，且值為正整數(shù)就能轉(zhuǎn)
    不保證轉(zhuǎn)出來的東西質(zhì)量是否符合要求。
    Array.from({user:"babe",length:5})
    // [undefined, undefined, undefined, undefined, undefined]
        
    Array.from()可接收第二個參數(shù)，用于對數(shù)組的每一項(xiàng)進(jìn)行處理并返回
    Array.from([1,2,3],x=>x*x)
    // [1, 4, 9]
        
    Array.from([1,2,3],x=>{x*x})
    //[undefined, undefined, undefined]  --切記處理函數(shù)中一定要返回
        
    Array.from()還可接收第三個參數(shù)，這樣在處理函數(shù)中就可以使用傳進(jìn)去的對象域中的值
    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()

用于將一組值轉(zhuǎn)換為數(shù)組，存在的意義是替代以構(gòu)造函數(shù)的形式創(chuàng)建數(shù)組，修復(fù)數(shù)組創(chuàng)建因參數(shù)不一致導(dǎo)致表現(xiàn)形式不同的偽bug.

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

//先進(jìn)改良方式
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方法用于查找第一條符合要求的數(shù)據(jù)，找到返回該數(shù)據(jù)，否則返回undefined; findIndex則用于找到第一條符合要求的數(shù)組位置，找到返回index,否則返回-1;----這兩個方法都可以使用indexOf替代，只是比indexOf更精細(xì)(可以查找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

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

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

云服務(wù)器 GPU云服務(wù)器 es6字符串?dāng)U展對象的擴(kuò)展云計(jì)算的擴(kuò)展服務(wù)器的擴(kuò)展

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/94815.html

發(fā)表評論

登陸后可評論

0條評論

Warren

男|高級講師

我要關(guān)注我要私信

TA的文章

2021愛智先行者—設(shè)備到來之前的先導(dǎo)篇

閱讀 1245·2021-11-24 09:39
【干貨】十分鐘讀懂瀏覽器渲染流程

閱讀 390·2019-08-30 14:12
(譯)原生CSS網(wǎng)格布局學(xué)習(xí)筆記

閱讀 2602·2019-08-30 13:10
SublimeText3系列（1）-安裝、設(shè)置、快捷鍵、常用插件

閱讀 2446·2019-08-30 12:44
花樣形狀 -- CSS

閱讀 972·2019-08-29 16:31
【只差一個小程序】介紹：簡介

閱讀 856·2019-08-29 13:10
XML基礎(chǔ)知識歸納

閱讀 2448·2019-08-27 10:57
尋找最長的單詞算法（JavaScript）

閱讀 3163·2019-08-26 13:57

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

ES6之?dāng)?shù)組的擴(kuò)展

相關(guān)文章

***ES6之數(shù)組的擴(kuò)展***

***ES6入門之對象的擴(kuò)展***

***ES6入門之對象的擴(kuò)展***

***ES6學(xué)習(xí)手稿之基本類型擴(kuò)展***

ES6入門之對象的新增方法

發(fā)表評論

0條評論

Warren

男|高級講師

TA的文章

2021愛智先行者—設(shè)備到來之前的先導(dǎo)篇

【干貨】十分鐘讀懂瀏覽器渲染流程

(譯)原生CSS網(wǎng)格布局學(xué)習(xí)筆記

SublimeText3系列（1）-安裝、設(shè)置、快捷鍵、常用插件

花樣形狀 -- CSS

【只差一個小程序】介紹：簡介

XML基礎(chǔ)知識歸納

尋找最長的單詞算法（JavaScript）

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

ES6之?dāng)?shù)組的擴(kuò)展

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！