JS解构赋值

铃铃阙晨

已于 2023-12-01 20:59:15 修改

阅读量112

点赞数

文章标签： javascript 前端开发语言

于 2023-12-01 20:57:12 首次发布

本文链接：https://blog.csdn.net/weixin_68008943/article/details/134741993

版权

本文介绍了JavaScript中的数组解构和对象解构的基本语法，包括变量匹配、剩余参数、多维数组以及防止undefined的情况。同时，展示了这两种解构在交换变量、修改变量名、处理多级对象等方面的应用实例。

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

🤺作者简介：前端新人小白

🏡博客首页：我的学习笔记

🧗‍♀️近期目标：深入学习三剑客

⛳数组解构

数组解构是将数组单元值快速批量赋值给一系列变量的简洁语法

基本语法

赋值运算符 = 左边的[]用于批量声明变量，右侧数组的单元值将被赋值给左侧的变量
变量的顺序对应数组单元值的位置依次进行赋值操作

  //普通的数组
  const arr = [1, 2, 3]
  // 批量声明变量a b c
  // 同时将数组单元值 1 2 3 依次赋值给变量 a b c
  const [a, b, c] = arr
  // const [a, b, c] = [1, 2, 3]
  console.log(a)  // 1
  console.log(b)  // 2
  console.log(c)  // 3

不同情况

1.变量多单元值少

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

2.变量少,单元值多

  const [a, b] = [1, 2, 3]
  console.log(a)  // 1
  console.log(b)  // 2

3.剩余参数变量少, 单元值多

  const [a, b, ...c] = [1, 2, 3, 4]
  console.log(a)  // 1
  console.log(b)  // 2
  console.log(c)  // [3,4] 真数组

4.防止undefined 传递

  const [a = 0, b = 0] = [1,]
  console.log(a) // 1
  console.log(b) // 0

5.按需导入

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

6.支持多维数组

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

应用场景

交换变量

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

⛳对象解构

对象解构是将对象属性和方法快速批量赋值给一系列变量的简洁语法

基本语法

赋值运算符 = 左侧的{}用于批量声明变量，右侧对象的属性值将被赋值给左侧的变量
对象属性的值将被赋值给与属性名相同的变量
注意解构的变量名不要和外面的变量名冲突否则报错
对象中找不到与变量名一致的属性时变量值为undefined

  const obj = {
    name: '小铃',
    age: 18
  }
  const { name, age} = obj
  // 等价于
  // const name = obj.name
  // const age - obj.age

  console.log(name)  //小铃
  console.log(age)  //18

给新的变量名赋值

可以从一个对象中提取变量并同时修改新的变量名

冒号表示 “什么值：赋值给谁”

  const { name: username, age } = { name: '小铃', age: 18 }

  console.log(username)  //小铃
  console.log(age)  //18

解构数组对象

  const student = [
    {
      name: '小铃',
      age: 18
    }
  ]
  const [{ name, age }] = student
  console.log(name)  //小铃
  console.log(age)  //18

多级对象解构

  const pig = {
    name: '佩奇',
    family: {
      mother: '猪妈妈',
      father: '猪妈妈',
      sister: '乔治',
    },
    age: 6
  }
  const { name, family: { mother, father, sister }} = pig

  console.log(name)  //佩奇
  console.log(mother)  //猪妈妈
  console.log(father)  //猪爸爸
  console.log(sister)  //乔治

  const person = [{
    name: '佩奇',
    family: {
      mother: '猪妈妈',
      father: '猪妈妈',
      sister: '乔治',
    },
    age: 6
  }]
  const [{ name, family: { mother, father, sister }}] = pig

  console.log(name)  //佩奇
  console.log(mother)  //猪妈妈
  console.log(father)  //猪爸爸
  console.log(sister)  //乔治