JavaScript - ES6的新增语法 - 解构赋值

最新推荐文章于 2023-10-10 20:46:26 发布

Codefreyy

最新推荐文章于 2023-10-10 20:46:26 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏：知识笔记文章标签： javascript 前端 es6 ecmascript

本文链接：https://blog.csdn.net/godfreyyyy/article/details/123934747

知识笔记专栏收录该内容

10 篇文章

订阅专栏

本文介绍了JavaScript中的解构赋值，包括数组和对象的解构。通过实例展示了如何从数组中按位置提取值并赋值给变量，以及如何通过变量匹配对象的属性进行赋值。当解构不完全匹配时，未匹配到的变量将为undefined。此外，还演示了对象解构的两种写法，包括直接赋值和使用别名的方式。解构赋值是提升代码可读性和效率的重要技巧。

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

解构赋值

1、数组解构

从数组中提取值，按照对应位置，对变量赋值。

//一一对应时
        let [a, b, c] = [1, 2, 3];
        console.log(a);  //1
        console.log(b);  //2
        console.log(c);  //3
//如果不一一对应时，解构不成功，剩下变量的值为undefined
        let [a, b, c, d] = [1, 2, 3];
        console.log(a);  //1
        console.log(b);  //2
        console.log(c);  //3
        console.log(d);  //undefined

2、对象解构

对象解构允许我们使用变量的名字匹配对象的属性，匹配成功将对象属性的值赋值给变量

//写法1 
  let person = {name:'Alieen Gu',age:'18'}; //先准备好被解构的对象
  let {name,age} = person; //等号左边是被解构的属性， 等号右边是具体的被解构的对象。
  console.log(name);
  console.log(age);

 //写法2
        let{name:myName, age:myAge} = person;  //myName 和 myAge属于别名
        console.log(myName);
        console.log(myAge);