快捷導(dǎo)航

js中數(shù)組解構(gòu)與對(duì)象解構(gòu)示例代碼

更新時(shí)間：2023年09月18日 15:49:05 作者：她非來(lái)我家看貓

數(shù)組解構(gòu)是一種在 JavaScript 中從數(shù)組中提取值并將它們分配給變量的方式,在數(shù)組解構(gòu)中分為完全解構(gòu),不完全解構(gòu),解構(gòu)失敗以及解構(gòu)默認(rèn)值,這篇文章主要介紹了js中數(shù)組解構(gòu)與對(duì)象解構(gòu),需要的朋友可以參考下

數(shù)組解構(gòu)：

1.1：完全解構(gòu)

代碼示例：

//1.完全解構(gòu)  變量個(gè)數(shù)與數(shù)據(jù)個(gè)數(shù)一致
        let [a, b, c] = arr;
         let [a1, a2] = ["hello", "wolrd"]
        console.log(a1, a2);

1.2：不完全解構(gòu)

代碼示例：

        //2.不完全解構(gòu)(變量個(gè)數(shù)小于數(shù)據(jù)個(gè)數(shù))
         let [a, b] = [10, 20, 30, 40]
         console.log(a,b);

1.3：解構(gòu)失敗

代碼示例：

  //3.解構(gòu)失敗 (變量個(gè)數(shù)大于數(shù)據(jù)個(gè)數(shù))
        let [a, b, c] = [10, 100]
        console.log(a,b,c)

1.4：解構(gòu)默認(rèn)值

代碼示例：

  //默認(rèn)值 (取不到值的時(shí)候，默認(rèn)值生效)
         let [a = 0, b = 0, c = 0, d = 0] = [10, 20, 30]
         console.log(a + b + c + d);
         console.log(a, b, c, d);
         let [a = 0, b = 0, c = 0, d = undefined] = [1, 2, undefined]
         console.log(a, b, c, d);

1.5：其他情況

代碼示例：

//4.解構(gòu)缺省
         let [, , , a, , b] = [10, 20, 'true', '(*^▽^*)', 200, '難過(?﹏?)'];
         console.log(a);
         console.log(b);
        //其它情況
         let [, , , a] = [10, 20, ['hello', 'world'], ['小紅']]
         let [a1] = a;
         let [, , , [a]] = [10, 20, ['hello', 'world'], ['小紅']]
         let [[[[a]]]] = [[[[10]], ['哈哈哈']], 100, 200];//

對(duì)象解構(gòu)：

對(duì)象的解構(gòu)與數(shù)組有一個(gè)重要的不同。數(shù)組的元素是按次序排列的，而對(duì)象的屬性沒有次序。

通過屬性名來(lái)進(jìn)行解析

語(yǔ)法：

let {屬性名:變量1,屬性名:變量2,...}=數(shù)據(jù)源

2.1：完全解構(gòu)

代碼示例：

   //1.完全解構(gòu)
         let { name: sName, age: sAge, attr: att } = obj;
         console.log(sName, sAge, att);

2.2：不完全解構(gòu)

代碼示例：

//2.不完全解構(gòu)
         let {name:sName}=obj;
         console.log(sName);

2.3：解構(gòu)失敗

代碼示例：

 //3.解構(gòu)失敗
         let { no: id, name: sName } = obj;
         console.log(id, sName);
         console.log('hello');
         console.log('world');
         console.log('哈哈哈');

2.4：解構(gòu)默認(rèn)值

代碼示例：

 //4.解構(gòu)默認(rèn)值
        let {
            name: sName = "張三",
            age: sAge = 0,
            no:id='10001'
        } = obj;
        console.log(sName,sAge);
        console.log(id);

2.5：使用場(chǎng)景

代碼示例：

 let rst = {
            code: 200,
            msg: "用戶信息",
            data: [
                { id: 1, title: "測(cè)試賬號(hào)", token: "lsajfdlasfjdaslfdjasfd89dfa7sf9dasdfasdf" }
            ]
        }
        let { code, data = [] } = rst;

到此這篇關(guān)于js中數(shù)組解構(gòu)與對(duì)象解構(gòu)的文章就介紹到這了,更多相關(guān)js數(shù)組解構(gòu)與對(duì)象解構(gòu)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: