JavaScript学习笔记——10、解构赋值

最新推荐文章于 2025-11-24 03:12:01 发布

原创最新推荐文章于 2025-11-24 03:12:01 发布 · 165 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #学习 #笔记 #解构

H5 专栏收录该内容

46 篇文章

订阅专栏

大家好，我是阿赵。继续学习JavaScript，这次学习一下解构赋值。

一、数组解构

将数组的单元值快速批量赋值给一系列的变量的简洁语法。
例子：

  const arr = [1, 2, 3, 4, 5];
  const [a, b, c, d, e] = arr;
  console.log(a, b, c, d, e);

结果：
在这里插入图片描述

也可以这样用：

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

结果：
在这里插入图片描述

两个变量的值就交互了。
在使用数组解构的时候，需要注意几点：

数组开头的，特别是前面有语句的时候，一定注意前面的语句要加分号结尾
变量多，单元值少的情况，后面不够分的变量，值是undefined。

比如：
      const arr = [1, 2, 3];
      const [a, b, c, d, e] = arr;
      console.log(a, b, c, d, e);

在这里插入图片描述

如果想防止有undefined的传递单元值情况，可以设置默认值，比如：

  const arr = [1, 2];
  const [a = 0, b = 0, c = 0, d = 0, e = 0] = arr;
  console.log(a, b, c, d, e);

结果：
在这里插入图片描述

如果单元值多变量少，则会忽略后面的值

  const arr = [1, 2, 3, 4, 5, 6];
  const [a, b, c] = arr;
  console.log(a, b, c);

结果：
在这里插入图片描述

多维数组的支持
例子：

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

结果：
在这里插入图片描述

二、对象解构

将对象的属性方法快速批量的赋值给一系列的变量的简洁写法。
例子：

  const player =
  {
    name: "阿赵",
    age: 18,
    sex: "男"
  }
  const { name, age, sex } = player;
  console.log(name, age, sex);

对象的属性值将被赋值给与属性名相同的变量。注意解构的变量名不要和外面的变量名冲突。如果对象中找不到变量名一致的属性时，变量值为undefined
如果想给解构后的变量改名字，可以这样：

  const player =
  {
    name: "阿赵",
    age: 18,
    sex: "男"
  }
  const { name: xname, age, sex } = player;
  console.log(xname, age, sex);

通过

name: xname

的写法，把原来对象中的name属性，赋值给了新的变量xname。
多级对象解构：

  const player =
  {
    name: "阿赵",
    age: 18,
    sex: "男",
    family: {
      father: "赵父",
      mother: "赵母",
      brother: "赵弟"
    }
  }
  const { name, family: { father, mother, brother } } = player;
  console.log(name, father, mother, brother);