es6语法解构赋值以及解构赋值作用

小白蛋挞

已于 2022-05-28 16:08:23 修改

阅读量322

点赞数

分类专栏： es6 文章标签： javascript 前端 vue.js

于 2022-05-28 16:08:05 首次发布

本文链接：https://blog.csdn.net/m0_61547956/article/details/125019142

版权

本文介绍了ES6的解构赋值特性，包括对对象和数组的解构，以及解构赋值在交换变量值、函数返回多值和函数参数等方面的作用。通过示例展示了如何更方便地操作变量和处理函数返回值。

摘要由CSDN通过智能技术生成

1、对对象的解构

 let person = {
                name: 'xiaoliang',
                age: 18,
                hobby: 'sing'
            }
            // es5
            // let name = person.name;
            // let age = person.age;

es6

  let {
            // name,不完全解构
            age,
            hobby,
        } = person
        console.log(age, hobby);
        let {
            name,
            ...res //剩余参数
        } = person
        console.log(res); // 用对象包裹起来了


 //默认值
        let {
            a,
            b = 20
        } = {
            a: 30
        }
        console.log(a);

2、对数组的解构

 let arr = [1, 2, 3];
        let [m, n] = arr;
        console.log(m, n);
        // 可嵌套
        let [i, [j, l],
            [k]
        ] = [1, [2, 5],
            [3]