当前位置: 首页 > news >正文

【JS 解构赋值】

JS 解构赋值是 ES6 中一种简洁、高效的赋值方式,它可以将数组和对象中的值拆分出来并赋值给变量。

解构赋值

    • 解构数组
    • 解构对象
    • 嵌套解构
    • 结语

解构数组

解构数组时,需要使用方括号 [] 包围变量名,并用逗号 , 将变量名隔开。

let [a, b, c] = [1, 2, 3];
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

我们还可以通过解构来交换变量值。

let a = 1, b = 2;
[a, b] = [b, a];
console.log(a, b); // 2, 1

如果数组中元素不够用来解构,未赋值的变量会被赋值为 undefined

let [a, b, c, d] = [1, 2, 3];
console.log(a, b, c, d); // 1, 2, 3, undefined

我们可以通过给变量指定默认值来避免变量值为 undefined

let [a = 1, b = 2, c = 3, d = 4] = [1, 2, 3];
console.log(a, b, c, d); // 1, 2, 3, 4

也可以使用 ... 运算符将剩余的数组元素赋值给一个数组。(...展开运算符)

let [a, ...rest] = [1, 2, 3, 4];
console.log(a); // 1
console.log(rest); // [2, 3, 4]

解构对象

解构对象时,需要使用花括号 {} 包围变量名,并使用冒号 : 将变量名与对象属性名对应。

let {name, age} = {name: "Tom", age: 18};
console.log(name); // Tom
console.log(age); // 18

如果对象中没有对应的属性,未赋值的变量会被赋值为 undefined

let {name, age, gender} = {name: "Tom", age: 18};
console.log(name, age, gender); // Tom, 18, undefined

我们也可以通过给变量指定默认值来避免变量为 undefined

let {name = "Tom", age = 18, gender = "male"} = {name: "Jerry", age: 20};
console.log(name, age, gender); // Jerry, 20, male

还可以使用别名给变量指定不同的名字。

let {name: n, age: a} = {name: "Tom", age: 18};
console.log(n, a); // Tom, 18

嵌套解构

我们还可以使用嵌套解构来解构数组和对象中的属性。

let {name, age, hobby: [h1, h2]} = {name: "Tom", age: 18, hobby: ["reading", "running"]};
console.log(name, age, h1, h2); // Tom, 18, reading, running

注意,如果要解构对象中的属性,需要将对象用括号 ( ) 包围。

let obj = {name: "Tom", age: 18, hobby: ["reading", "running"]};
let {name, age, hobby: [h1, h2]} = obj;
console.log(name, age, h1, h2); // Tom, 18, reading, running

解构数组中的元素也可以是对象。

let [{name, age}, {hobby}] = [{name: "Tom", age: 18}, {hobby: ["reading", "running"]}];
console.log(name, age, hobby); // Tom, 18, ["reading", "running"]

结语

通过解构赋值,我们可以快速方便地取出数组和对象中的值并赋值给变量。它可以极大地提高我们的开发效率和代码的可读性。

http://www.lryc.cn/news/112195.html

相关文章:

  • Vue3状态管理库Pinia——自定义持久化插件
  • il汇编整数相加
  • RabbitMQ 事务
  • vue前端 让年月日 加上23:59:59
  • 【雕爷学编程】Arduino动手做(186)---WeMos ESP32开发板8
  • STM32--综述
  • Linux学习之sed、awk和vim的差异
  • MacOS上配置docker国内镜像仓库地址
  • 全志F1C200S嵌入式驱动开发(soc系统集成)
  • React路由5版本
  • 6.4.3 1x1卷积层
  • [CKA]考试之检查可用节点数量
  • 备考错题知识点总结
  • 初识Flask:Python轻量级Web框架入门教程
  • 【BASH】回顾与知识点梳理(七)
  • Python实现对IP网段的快速检测
  • 伪操作、C和汇编、ATPCS协议
  • OPENCV C++(五)滤波函数+sobel边缘检测+人脸磨皮mask
  • 20天突破英语四级高频词汇——第②天
  • 【Python 学习】第一个python案例
  • 【C#学习笔记】值类型(2)
  • 【设计模式】-建造者模式
  • 【N32L40X】学习笔记14-在RT-thread系统中读取eeprom数据
  • Python OpenCV读取并显示USB UVC摄像头
  • 针对高可靠性和高性能优化的1200V碳化硅沟道MOSFET
  • 在服务器上搭建gitlab
  • Amazon Aurora Serverless v2 正式发布:针对要求苛刻的工作负载的即时扩展
  • nginx的优化和防盗链 重要!!!
  • 十五.redis缓存穿透,击穿,雪崩
  • Spring源码——初识Spring容器