JavaScript数组与对象解构详解:完全、部分、默认值及失败处理

作者:闭包旅人时间:2026-10-31 06:18:13浏览:239

本文详细解析JavaScript中的数组与对象解构语法。涵盖完全解构、不完全解构、解构失败及默认值设置四种情况,并通过具体代码示例展示如何处理变量个数不匹配、嵌套结构及属性重命名,帮助开发者掌握高效的数据提取技巧。

数组解构是 JavaScript 提供的一种从数组中提取值并赋值给变量的语法机制,能够将数组元素便捷地分解为独立的变量。

数组具有有序性和索引特性,这是进行解构操作的基础。

在数组解构的应用场景中,主要涉及完全解构、不完全解构、解构失败以及设置默认值这几种情况。

数组解构

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;

至此,关于 JavaScript 中数组与对象解构的介绍已完成,更多相关内容可参考本站过往文章或继续浏览后续内容,感谢支持。

作者最新文章