js中數組解構與對象解構示例代碼

更新時間：2023年09月18日 15:49:05 作者：她非來我家看貓

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

數組解構：

1.1：完全解構

代碼示例：

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

1.2：不完全解構

代碼示例：

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

1.3：解構失敗

代碼示例：

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

1.4：解構默認值

代碼示例：

  //默認值 (取不到值的時候，默認值生效)
         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.解構缺省
         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];//

對象解構：

對象的解構與數組有一個重要的不同。數組的元素是按次序排列的，而對象的屬性沒有次序。

通過屬性名來進行解析

語法：

let {屬性名:變量1,屬性名:變量2,...}=數據源

2.1：完全解構

代碼示例：

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

2.2：不完全解構

代碼示例：

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

2.3：解構失敗

代碼示例：

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

2.4：解構默認值

代碼示例：

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

2.5：使用場景

代碼示例：

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

到此這篇關于js中數組解構與對象解構的文章就介紹到這了,更多相關js數組解構與對象解構內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: