【ES6入門02】：解構(gòu)賦值

CloudwiseAPM 發(fā)布于2019-08-23 12:25 / 2192人閱讀

摘要：數(shù)組解構(gòu)賦值基本用法設(shè)置默認(rèn)值變量交換函數(shù)返回結(jié)果賦值忽略某些返回值，只取需要的函數(shù)返回結(jié)果不確定，只關(guān)心第個(gè)，剩余的賦值到一個(gè)數(shù)組對(duì)象解構(gòu)賦值基本用法變量名要和屬性名一致對(duì)應(yīng)，變量名等于屬性名左側(cè)是一個(gè)對(duì)象，右側(cè)也是一個(gè)對(duì)象設(shè)置默認(rèn)值數(shù)據(jù)

數(shù)組解構(gòu)賦值

1.基本用法

{
    let a,b;
    [a,b] = [1,2];
    console.log(a, b); // 1 2
}
{
    let a,b,c;
    [a,b,...c] = [1,2,3,4,5,6];
    console.log(a, b, c); // 1 2 [3,4,5,6]
}
{
    let a,b,c;
    [a,b,c=3] = [1,2];  // 設(shè)置默認(rèn)值
    console.log(a, b, c); // 1 2 3
}

2.變量交換

{
    let a = 1;
    let b = 2;
    [a, b] = [b, a];
    console.log(a, b); // 2 1
}

3.函數(shù)返回結(jié)果賦值

{
    function f() {
        return [true, false];
    }
    let a,b;
    [a, b] = f();
    console.log(a, b); // true false
}

4.忽略某些返回值，只取需要的

{
    function f() {
        return [1,2,3,4,5];
    }
    let a,b;
    [a,,,b] = f();
    console.log(a, b); // 1 4
}

5.函數(shù)返回結(jié)果不確定，只關(guān)心第n個(gè)，剩余的賦值到一個(gè)數(shù)組

{
    function f() {
        return [1,2,3,4,5];
    }
    let a,b;
    [a,...b] = f();
    console.log(a, b); // 1 [2,3,4,5]
}

對(duì)象解構(gòu)賦值

1.基本用法

{
    let obj = {p: 42, q: true};
    // 變量名要和屬性名一致對(duì)應(yīng)，變量名等于屬性名
    // 左側(cè)是一個(gè)對(duì)象，右側(cè)也是一個(gè)對(duì)象
    let {p, q} = obj;
    console.log(p, q); // 42 true
}
{
    let {a=10, b=5} = {a:3}; // 設(shè)置默認(rèn)值
    console.log(a, b); // 3 5
}

2.json數(shù)據(jù)的解構(gòu)賦值

{
    let data = {
        title: "hahaha",
        test: [
            {
                title: "yoyoyo",
                desc: "description"
            }
        ]
    };
    let {title: mainTitle, test: [{title: subTitle}]} = data;
    console.log(mainTitle, subTitle); // hahaha yoyoyo
}

云服務(wù)器 GPU云服務(wù)器解構(gòu)賦值 ES6入門對(duì)象解構(gòu) 解構(gòu)函數(shù)

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/98475.html

相關(guān)文章

ES6學(xué)習(xí)摘要（02）（新人學(xué)習(xí)）

摘要：默認(rèn)值同時(shí)，對(duì)象解構(gòu)賦值也允許設(shè)置默認(rèn)值，默認(rèn)值生效的判斷條件同數(shù)組，只有在對(duì)應(yīng)值嚴(yán)格等于時(shí)會(huì)生效。報(bào)錯(cuò)如果要將一個(gè)已經(jīng)聲明的變量用于解構(gòu)賦值，必須非常小心。的規(guī)則是，只要有可能導(dǎo)致解構(gòu)的歧義，就不得使用圓括號(hào)。 ECMAScript6/ES6 入門 let和const命令四、變量的解構(gòu)賦值在ES6之前，數(shù)組和對(duì)象屬性賦值只能直接指定固定值，ES6 允許按照一定模式，從數(shù)組和對(duì)象中...

Jonathan Shieber 2019-08-22 13:40 評(píng)論0 收藏0
ES6入門之變量的解構(gòu)賦值

摘要：數(shù)組的解構(gòu)賦值基本用法允許按照一定模式，從數(shù)組和對(duì)象中提取值，對(duì)變量進(jìn)行賦值，這被稱為結(jié)構(gòu)。如下以上都會(huì)報(bào)錯(cuò)但是如果左邊為數(shù)組，右邊為字符串，將會(huì)取字符串的第一個(gè)下標(biāo)的值對(duì)于結(jié)構(gòu)，同樣可以使用數(shù)組的解構(gòu)賦值。 showImg(https://segmentfault.com/img/remote/1460000018826068); 數(shù)組的解構(gòu)賦值基本用法 ES6 允許按照一定模式...

gityuan 2019-08-23 16:51 評(píng)論0 收藏0
新手快速學(xué)習(xí)ES6語法,用最快的速度入門ES6就看這里

摘要：的作用域與命令相同只在聲明所在的塊級(jí)作用域內(nèi)有效。數(shù)值和布爾值的解構(gòu)賦值解構(gòu)賦值時(shí)，如果等號(hào)右邊是數(shù)值和布爾值，則會(huì)先轉(zhuǎn)為對(duì)象。上面代碼中，數(shù)值和布爾值的包裝對(duì)象都有屬性，因此變量都能取到值。默認(rèn)值解構(gòu)賦值允許指定默認(rèn)值。最近正在學(xué)習(xí)ES6,對(duì)于ES6的語法有一些自己的理解, 想寫這篇文章幫助跟我一樣的新手快速入門ES6而不至于連代碼都看不懂. 至于開發(fā)環(huán)境的搭建什么...

vspiders 2019-08-20 16:50 評(píng)論0 收藏0
es6知識(shí)點(diǎn)總結(jié)（一）

摘要：知識(shí)點(diǎn)總結(jié)一，，能重復(fù)聲明，有前置功能。淺拷貝一個(gè)數(shù)組設(shè)置原型。永遠(yuǎn)是唯一的，不可能和別的重復(fù)，可以阻止對(duì)象的屬性被篡改前面不能使用操作符。和的區(qū)別鍵名可以是任何數(shù)據(jù)類型初始化的時(shí)候必須一次性指定鍵名和鍵值。 es6知識(shí)點(diǎn)總結(jié)（一） let，var，const var：能重復(fù)聲明，有前置功能。 let：有塊級(jí)作用域，沒有前置功能，不能重復(fù)聲明。 const：有塊級(jí)作用域，用來聲明常量(...

HelKyle 2019-08-20 18:03 評(píng)論0 收藏0
ES6知識(shí)拾遺，再讀ES6入門書籍總匯

摘要：凍結(jié)對(duì)象未定義就聲明的變量會(huì)默認(rèn)為全局的變量，的變量都?xì)w所有，命令命令命令聲明的全局變量，不屬于頂層對(duì)象的屬性即不會(huì)歸所有總結(jié)的六種聲明變量注意在瀏覽器環(huán)境指的是對(duì)象，在指的是對(duì)象。參數(shù)搭配的變量是一個(gè)數(shù)組，該變量將多余的參數(shù)放入數(shù)組中。 1.var,let,const區(qū)別答：(1).var有變量聲明提升，let&&const沒有，這樣導(dǎo)致了let,const必須聲明后才可以訪問...

thekingisalwaysluc 2019-08-23 18:30 評(píng)論0 收藏0