ES6之解构函数

最新推荐文章于 2025-03-10 09:43:55 发布

不知言

最新推荐文章于 2025-03-10 09:43:55 发布

阅读量990

点赞数 3

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.youkuaiyun.com/WangYanWenXin/article/details/124344868

版权

JavaScript 专栏收录该内容

16 篇文章

订阅专栏

本文详细介绍了JavaScript中的对象解构、数组解构以及混合解构的用法，包括根据key检索对象属性、根据索引检索数组元素、默认值设定、嵌套解构、值交换、剩余项处理等。同时展示了如何在实际场景中结合数组和对象进行混合解构，以提升代码的简洁性和可读性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

对象解构-根据key检索取值

    let demo = {
        name: 'dao',
        value: 0
    }
    // 基础用法
    let { name, value } = demo;
    console.log(name);
    console.log(value);
    
    // 赋值用法
    let { name: localName } = demo;
    console.log(localName);
    
    // 默认值,在demo中找不到时，默认赋值为0
    let { type: localType = 0 } = demo;
    
    // 嵌套解构
    let node = {
        parent: {
            child: {
                name: 'dom',
                value: 'class'
            }
        }
    }
    let { parent: { child } } = node;
    console.log(child.name);
    console.log(child.value);

数组解构-根据位置(索引)检索取值

    let demo = ['red', 'green', 'blue'];
    // 取值和默认值
    let [, second,,four = 'yellow'] = demo;
    console.log(second);
    console.log(four);
    
    // 值交换
    let x = 1;
    let y = 2;
    [x, y] = [y, x];
    console.log(x);
    console.log(y);
    
    // 嵌套数组
    let node = [[...demo], [1, 2, 3]];
    let [[a], [b]] = node;
    console.log(a);
    console.log(b);
    
    // 剩余项
    let [first, ...rest] = demo;
    console.log(first);     
    console.log(rest.length);
    console.log(rest[0]);

混合解构

    // 在以上的基础上，对数组与对象的复合数据结构进行结构
    let node = {
        parent: {
            child: {
                name: 'dom',
                value: 'class'
            }
        },
        type: [1, 2, 3]
    }
    let { parent: { chilid }, type: [first] } = node;
    console.log(child.name);
    console.log(first);