ES6（二）解构赋值

最新推荐文章于 2025-04-12 12:23:33 发布

半糖冰

最新推荐文章于 2025-04-12 12:23:33 发布

阅读量3.5k

点赞数 4

分类专栏： ES6 travel 文章标签： javascript 前端 es6 1024程序员节

本文链接：https://blog.youkuaiyun.com/weixin_57269725/article/details/120922943

版权

ES6 travel 专栏收录该内容

11 篇文章

订阅专栏

本文详细介绍了ES6中的解构赋值，包括数组和对象的解构赋值，涵盖基本类型、可嵌套、可忽略、不完全解构、剩余运算符和默认值等常见类型，并通过实例进行验证，帮助读者深入掌握这一特性。

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

前言

在ES5（也就是我们之前所学的javascript基础）中，在数组取值的时候我们如果要取全部（n个）值，就相对应的要声明n个变量，看以下代码：

 {
            let array = [1,2,3];
            console.log(array[0]);
            console.log(array[1]);
            console.log(array[2]);    //声明三次变量才可以取出来
        }

这样看起来是不是很！麻！烦！？能不能一条语句解决呢？于是，ES6给我们带来了“解构赋值”

一、解构赋值

原理：(以数组为例)

数组解构允许我们按照一一对应的关系从数组中提取值，赋值给变量。

语法：

let关键字＋[ ]（中括号：关键符号，代表解构，里面存放变量）= 数组（也可以是数组名）；

举个栗子~

let array = [1,2,3];  
    //一个数组
let [a,b,c] = array;
    //解构符号内声明三个变量，对应array数组中的三个值

要点注意！！一定要用let关键字！！

现在来验证一下结果~

 {
        let array = [1,2,3];  //一个数组
        let [a,b,c] = array;  //解构符号内声明三个变量，对应array数组中的三个值
        console.log(a);
        console.log(b);
        console.log(c);
        }

二、数组解构赋值的常见类型

基本类型

上面例子就是啦~

可嵌套类型

 let [a, [[b], c]] = [1, [[2], 3]];
      // a = 1
      // b = 2
      // c = 3

可忽略类型

      let [a, , b] = [1, 2, 3];
      // a = 1
      // b = 3

不完全解构

      let [a , b] = [1];
      // a = 1
      //b = undefined

剩余运算符

      let [a, ...b] = [1, 2, 3];
      //a = 1
      //b = [2, 3]

解构默认值

     let [a = 2] = [undefined]; 
      // a = 2 其中2为默认值，只有当解构模式有匹配结果，
      //且匹配结果是 undefined 时，才会触发默认值作为返回结果

三、对象解构

原理：

对象解构允许我们使用变量名匹配对象的属性，匹配成功，将把对象属性值赋值给变量。
通俗理解：实际上就是对象的属性匹配，如果对象中的属性与解构符号中的
变量名匹配，则将属性值赋值给变量，也是一一对应的关系。

语法：

let关键字＋{变量名1}（大括号：关键符号，代表解构，里面存放变量）= {属性名1：属性值}（也可以是对象名）;

举个栗子~

let obj = {name: '凤求凰'，age: '未知', sex: '男'}；
//对象及对象中的三个属性
let {name, age, sex} = obj；
//三个解构变量与obj对象中的三个属性名一一匹配

要点注意！！一定要用let关键字！！

结果验证

{
            let obj = {name: '凤求凰', age: '未知', sex: '男'};
            //对象及对象中的三个属性
            let {name, age, sex} = obj;
            //三个解构变量与obj对象中的三个属性名一一匹配
            console.log(name);
            console.log(age);
            console.log(sex);
        }

四、对象解构第二种写法

原理：

对象解构允许我们用书写对象属性的方式书写解构变量，其属性值就是变量名

语法：

let关键字＋{属性名：变量名}= 对象{属性名：属性值}（也可以是对象名）

要注意！解构符号里的属性名一定要绝对匹配于对象中的属性名！！！！！！！

举个栗子~

结果验证

 {
            let obj = {name: '凤求凰', age: '未知', sex: '男'};
            let {name: MyName, age: MyAge, sex:TheSex} = obj;
            console.log(MyName);
            console.log(MyAge);
            console.log(TheSex);
        }

五、对象解构赋值的常见类型

基本类型

上面例子就是~

可嵌套类型

语法同基本类型相似，记住嵌套部分依旧用中括号，对象属性用大括号包裹

 {
            let obj = {name: ['凤求凰', {age: '未知', sex: '男'}]};
            let {name:[Myname, {age}, {sex}]} = obj;
            //Myname = 凤求凰
            //age = 未知
            //sex = 男
        }

忽略类型

 {
            let obj = {name: ['凤求凰', {age: '未知'}]};
            let {name:[Myname, { }]} = obj;
            //Myname = 凤求凰
        }

不完全解构类型

 {
            let obj = {name: ['凤求凰', {age: '未知'}]};
            let {name:[Myname, {age}, add]} = obj;
            //Myname = 凤求凰
            //age = 未知
            //add = undefined
        }

剩余运算符类型

 {
            let {name, ...ect} = {name: '凤求凰', age: '未知', sex: '男'};
            //Myname = 凤求凰
            //age: "未知",sex: "男"[[Prototype]]: Object
        }

解构默认值

 {
            let {name: Myname = '凤凰于飞', age :MyAge = 20''} = {name: '凤求凰'};
            //Myname = 凤求凰
            //MyAge = 20
        }

结束语

希望本篇文章可以帮到求知若渴的众多同学吖~
若能帮到也欢迎点赞、收藏、关注我，后续也会持续发布新文章，祝大家学有所成！
欢迎各位前端大佬留言讨论指教！小糖谢谢各位啦~❤ ❤ ❤ ❤