学习记录——ES6语法(2):解构赋值(数组解构、对象解构)

本文介绍ES6中数组和对象的解构赋值方法,包括基本语法、变量赋值及对象属性匹配等内容。

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

解构赋值
ES6中允许从数组中提取值,按照对应位置,对变量赋值。
对象也可以实现解构。

数组解构

let arr = [1, 2, 3]
let [a, b, c] = arr

或者
//数组解构允许我们按照一一对应的关系从数组中提取值,然后将值赋值给变量
let [a, b, c] = [1, 2, 3];

console.log(a);
console.log(b);
console.log(c);

数组解构允许我们按照一一对应的关系从数组中提取值(严格按照顺序来),然后将值赋值给变量

  • 等号右边是数组 数组中有3个值

  • 等号左边不是数组 代表解构 中括号里写的实际是变量的名字 代表从数组当中提取值

  • 中括号中的变量和右边数组中的值 实际上是一一对应的关系
    比如 a变量的值是1 b=2 c=3

  • 中括号前面的let代表 中括号中的变量是使用let关键字声明的

如果变量的数量 和 值的数量 不一致 值会变为undefined

    //如果变量的数量 和 值的数量 不一致 值会变为undefined
    //let [foo] = [];
    //console.log(foo);//undefined

    let [bar, foo] = [1];
    console.log(bar); //1
    console.log(foo); //undefined

对象解构

数组的元素是按次序排列的,变量的取值由它的位置决定。而对象的属性没有次序,变量必须与属性同名,才能取到正确的值

   //对象解构允许我们使用变量的名字匹配对象的属性 匹配成功 将对象属性的值赋值给变量
    let person = {
        name: 'user',
        age: 20
    };
    let {
        name,
        age
    } = person;
    console.log(name); //user
    console.log(age); //20

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

  • 对象解构 在等号的左边用大括号{ }表示,大括号中依然写的是变量的名字
  • 在等号的右边 要写具体被解构的对象
  • 对象解构 实际上是属性匹配 变量的名字匹配对象中属性的名字
  • 如果匹配成功 就将对象中属性的值 赋值给变量
    另一种写法
    在对象的解构语法中,等号左侧大括号里的语法可以写成和对象一样
    在这种情况下,大括号里,冒号左边的属性 用来匹配 对象当中的属性
    冒号右边的才是真正的变量
    如果属性匹配成功 则将对象中属性对应的值 赋值给左侧的变量
    let {
        name: myName,
        age: myAge
    } = person;
    console.log(myName); //user
    console.log(myAge); //20
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值