ES6 --- 解构赋值（数组，对象，函数）使用详解

news2025/7/16 3:34:55

解构赋值

JavaScript 中最常用的两种数据结构是 Object 和 Array。

  • 对象让我们能够创建通过键来存储数据项的单个实体。
  • 数组则让我们能够将数据收集到一个有序的集合中。

但是，当我们把它们传递给函数时，函数可能不需要整个对象/数组。它可能只需要对象/数组的一部分。

解构赋值 是一种特殊的语法，它使我们可以将数组或对象“拆包”至一系列变量中，因为有时这样更方便。

解构操作对那些具有很多参数和默认值等的函数也很奏效。我们马上会看到类似的例子。

数组解构

下面是一个将数组解构到变量中的例子：

// 我们有一个存放了名字和姓氏的数组
let arr = ["John", "Smith"]

// 解构赋值
// sets firstName = arr[0]
// and surname = arr[1]
let [firstName, surname] = arr;

alert(firstName); // John
alert(surname);  // Smith

现在我们就可以针对这些变量进行操作，而不是针对原来的数组元素。

当与 split 函数（或其他返回值是数组的函数）结合使用时，看起来就更优雅了：

let [firstName, surname] = "John Smith".split(' ');
alert(firstName); // John
alert(surname);  // Smith

正如我们所看到的，语法很简单。但是有几个需要注意的细节。让我们通过更多的例子来加深理解。

“解构”并不意味着“破坏”

这种语法叫做“解构赋值”，因为它通过将结构中的各元素复制到变量中来达到“解构”的目的。但数组本身是没有被修改的。

这只是下面这些代码的更精简的写法而已：

// let [firstName, surname] = arr;
let firstName = arr[0];
let surname = arr[1];

忽略使用逗号的元素

数组中不想要的元素也可以通过添加额外的逗号来把它丢弃：

// 不需要第二个元素
let [firstName, , title] = ["Julius", "Caesar", "Consul", "of the Roman Republic"];

alert( title ); // Consul

在上面的代码中，数组的第二个元素被跳过了，第三个元素被赋值给了 title 变量，数组中剩下的元素也都被跳过了（因为在这没有对应给它们的变量）。

等号右侧可以是任何可迭代对象

……实际上，我们可以将其与任何可迭代对象一起使用，而不仅限于数组：

let [a, b, c] = "abc"; // ["a", "b", "c"]
let [one, two, three] = new Set([1, 2, 3]);

这行得通，因为在内部，结构赋值是通过迭代右侧的值来完成工作的。这是一种用于对在 = 右侧的值上调用 for..of 并进行赋值的操作的语法糖。

赋值给等号左侧的任何内容

我们可以在等号左侧使用任何“可以被赋值的”东西。

例如，一个对象的属性：

let user = {};
[user.name, user.surname] = "John Smith".split(' ');

alert(user.name); // John
alert(user.surname); // Smith

与 .entries() 方法进行循环操作

在前面的章节中我们已经见过了 Object.entries(obj) 方法。

我们可以将 .entries() 方法与解构语法一同使用，来遍历一个对象的“键—值”对：

let user = {
  name: "John",
  age: 30
};

// 循环遍历键—值对
for (let [key, value] of Object.entries(user)) {
  alert(`${key}:${value}`); // name:John, then age:30
}

用于 Map 的类似的代码更简单，因为它是可迭代的：

let user = new Map();
user.set("name", "John");
user.set("age", "30");

// Map 是以 [key, value] 对的形式进行迭代的，非常便于解构
for (let [key, value] of user) {
  alert(`${key}:${value}`); // name:John, then age:30
}

交换变量值的技巧

有一个著名的使用结构赋值来交换两个变量的值的技巧：

let guest = "Jane";
let admin = "Pete";

// 让我们来交换变量的值：使得 guest = Pete，admin = Jane
[guest, admin] = [admin, guest];

alert(`${guest} ${admin}`); // Pete Jane（成功交换！）

这里我们创建了一个由两个变量组成的临时数组，并且立即以交换了的顺序对其进行了解构。

我们可以用这种方式交换两个以上的变量。

其余的 ‘…’

通常，如果数组比左边的列表长，那么“其余”的数组项会被省略。

例如，这里只取了两项，其余的就被忽略了：

let [name1, name2] = ["Julius", "Caesar", "Consul", "of the Roman Republic"];

alert(name1); // Julius
alert(name2); // Caesar
// 其余数组项未被分配到任何地方

如果我们还想收集其余的数组项 —— 我们可以使用三个点 "..." 来再加一个参数以获取“其余”数组项：

let [name1, name2, ...rest] = ["Julius", "Caesar", "Consul", "of the Roman Republic"];

// rest 是包含从第三项开始的其余数组项的数组
alert(rest[0]); // Consul
alert(rest[1]); // of the Roman Republic
alert(rest.length); // 2

rest 的值就是数组中剩下的元素组成的数组。

不一定要使用变量名 rest，我们也可以使用任何其他的变量名，只要确保它前面有三个点，并且在解构赋值的最后一个参数位置上就行了。

let [name1, name2, ...titles] = ["Julius", "Caesar", "Consul", "of the Roman Republic"];
// 现在 titles = ["Consul", "of the Roman Republic"]

默认值

如果数组比左边的变量列表短，这里也不会出现报错。缺少的值被认为是 undefined：

let [firstName, surname] = [];

alert(firstName); // undefined
alert(surname); // undefined

如果我们想要一个“默认”值给未赋值的变量，我们可以使用 = 来提供：

// 默认值
let [name = "Guest", surname = "Anonymous"] = ["Julius"];

alert(name);    // Julius（来自数组的值）
alert(surname); // Anonymous（默认值被使用了）

默认值可以是更加复杂的表达式甚至可以是函数调用，这些表达式或函数只会在这个变量未被赋值的时候才会被计算。

举个例子，我们使用了 prompt 函数来提供两个默认值：

// 只会提示输入姓氏
let [name = prompt('name?'), surname = prompt('surname?')] = ["Julius"];

alert(name);    // Julius（来自数组）
alert(surname); // 你输入的值

请注意：prompt 将仅针对缺失值（surname）运行。

对象解构

解构赋值同样适用于对象。

基本语法是：

let {var1, var2} = {var1:…, var2:…}

在等号右侧应该有一个已经存在的对象，我们想把它拆分到变量中。等号左侧包含了对象相应属性的一个类对象“模式（pattern）”。在最简单的情况下，等号左侧的就是 {...} 中的变量名列表。

举个例子：

let options = {
  title: "Menu",
  width: 100,
  height: 200
};

let {title, width, height} = options;

alert(title);  // Menu
alert(width);  // 100
alert(height); // 200

属性 options.title、options.width 和 options.height 值被赋给了对应的变量。

变量的顺序并不重要，下面这个代码也奏效：

// 改变 let {...} 中元素的顺序
let {height, width, title} = { title: "Menu", height: 200, width: 100 }

等号左侧的模式（pattern）可以更加复杂，并且指定了属性和变量之间的映射关系。

如果我们想把一个属性赋值给另一个名字的变量，比如把 options.width 属性赋值给名为 w 的变量，那么我们可以使用冒号来设置变量名称：

let options = {
  title: "Menu",
  width: 100,
  height: 200
};

// { sourceProperty: targetVariable }
let {width: w, height: h, title} = options;

// width -> w
// height -> h
// title -> title

alert(title);  // Menu
alert(w);      // 100
alert(h);      // 200

冒号表示“什么值：赋值给谁”。上面的例子中，属性 width 被赋值给了 w，属性 height 被赋值给了 h，属性 title 被赋值给了同名变量。

对于可能缺失的属性，我们可以使用 "=" 设置默认值，如下所示：

let options = {
  title: "Menu"
};

let {width = 100, height = 200, title} = options;

alert(title);  // Menu
alert(width);  // 100
alert(height); // 200

就像数组或函数参数一样，默认值可以是任意表达式甚至可以是函数调用。它们只会在未提供对应的值时才会被计算/调用。

在下面的代码中，prompt 提示输入 width 值，但不会提示输入 title 值：

let options = {
  title: "Menu"
};

let {width = prompt("width?"), title = prompt("title?")} = options;

alert(title);  // Menu
alert(width);  // (prompt 的返回值)

我们还可以将冒号和等号结合起来：

let options = {
  title: "Menu"
};

let {width: w = 100, height: h = 200, title} = options;

alert(title);  // Menu
alert(w);      // 100
alert(h);      // 200

如果我们有一个具有很多属性的复杂对象，那么我们可以只提取所需的内容：

let options = {
  title: "Menu",
  width: 100,
  height: 200
};

// 仅提取 title 作为变量
let { title } = options;

alert(title); // Menu

剩余模式（pattern）"…"

如果对象拥有的属性数量比我们提供的变量数量还多，该怎么办？我们可以只取其中的某一些属性，然后把“剩余的”赋值到其他地方吗？

我们可以使用剩余模式（pattern），就像我们对数组那样。一些较旧的浏览器不支持此功能（例如，使用 Babel 对其进行填充），但可以在现代浏览器中使用。

看起来就像这样：

let options = {
  title: "Menu",
  height: 200,
  width: 100
};

// title = 名为 title 的属性
// rest = 存有剩余属性的对象
let {title, ...rest} = options;

// 现在 title="Menu", rest={height: 200, width: 100}
alert(rest.height);  // 200
alert(rest.width);   // 100

不使用 let 时的陷阱

在上面的示例中，变量都是在赋值中通过正确方式声明的：let {…} = {…}。当然，我们也可以使用已有的变量，而不用 let，但这里有一个陷阱。

以下代码无法正常运行：

let title, width, height;

// 这一行发生了错误
{title, width, height} = {title: "Menu", width: 200, height: 100};

问题在于 JavaScript 把主代码流（即不在其他表达式中）的 {...} 当做一个代码块。这样的代码块可以用于对语句分组，如下所示：

{
  // 一个代码块
  let message = "Hello";
  // ...
  alert( message );
}

因此，这里 JavaScript 假定我们有一个代码块，这就是报错的原因。我们需要解构它。

为了告诉 JavaScript 这不是一个代码块，我们可以把整个赋值表达式用括号 (...) 包起来：

let title, width, height;

// 现在就可以了
({title, width, height} = {title: "Menu", width: 200, height: 100});

alert( title ); // Menu

嵌套解构

如果一个对象或数组嵌套了其他的对象和数组，我们可以在等号左侧使用更复杂的模式（pattern）来提取更深层的数据。

在下面的代码中，options 的属性 size 是另一个对象，属性 items 是另一个数组。赋值语句中等号左侧的模式（pattern）具有相同的结构以从中提取值：

let options = {
  size: {
    width: 100,
    height: 200
  },
  items: ["Cake", "Donut"],
  extra: true
};

// 为了清晰起见，解构赋值语句被写成多行的形式
let {
  size: { // 把 size 赋值到这里
    width,
    height
  },
  items: [item1, item2], // 把 items 赋值到这里
  title = "Menu" // 在对象中不存在（使用默认值）
} = options;

alert(title);  // Menu
alert(width);  // 100
alert(height); // 200
alert(item1);  // Cake
alert(item2);  // Donut

对象 options 的所有属性，除了 extra 属性在等号左侧不存在，都被赋值给了对应的变量：

image-20220223181220826

最终，我们得到了 width、height、item1、item2 和具有默认值的 title 变量。

注意，size 和 items 没有对应的变量，因为我们取的是它们的内容。

智能函数参数

有时，一个函数有很多参数，其中大部分的参数都是可选的。对用户界面来说更是如此。想象一个创建菜单的函数。它可能具有宽度参数，高度参数，标题参数和项目列表等。

下面是实现这种函数的一个很不好的写法：

function showMenu(title = "Untitled", width = 200, height = 100, items = []) {
  // ...
}

在实际开发中存在一个问题就是你怎么记得住这么多参数的顺序。通常集成开发环境工具（IDE）会尽力帮助我们，特别是当代码有良好的文档注释的时候，但是…… 另一个问题就是，当大部分的参数采用默认值就好的情况下，怎么调用这个函数。

难道像这样？

// 在采用默认值就可以的位置设置 undefined
showMenu("My Menu", undefined, undefined, ["Item1", "Item2"])

这太难看了。而且，当我们处理更多参数的时候可读性会变得很差。

解构赋值语法前来救援！

我们可以把所有参数当作一个对象来传递，然后函数马上把这个对象解构成多个变量：

// 我们传递一个对象给函数
let options = {
  title: "My menu",
  items: ["Item1", "Item2"]
};

// ……然后函数马上把对象展开成变量
function showMenu({title = "Untitled", width = 200, height = 100, items = []}) {
  // title, items – 提取于 options，
  // width, height – 使用默认值
  alert( `${title} ${width} ${height}` ); // My Menu 200 100
  alert( items ); // Item1, Item2
}

showMenu(options);

我们同样可以使用带有嵌套对象和冒号映射的更加复杂的解构：

let options = {
  title: "My menu",
  items: ["Item1", "Item2"]
};

function showMenu({
  title = "Untitled",
  width: w = 100,  // width goes to w
  height: h = 200, // height goes to h
  items: [item1, item2] // items first element goes to item1, second to item2
}) {
  alert( `${title} ${w} ${h}` ); // My Menu 100 200
  alert( item1 ); // Item1
  alert( item2 ); // Item2
}

showMenu(options);

完整语法和解构赋值是一样的：

function({
  incomingProperty: varName = defaultValue
  ...
})

对于参数对象，属性 incomingProperty 对应的变量是 varName，默认值是 defaultValue。

请注意，这种解构假定了 showMenu() 函数确实存在参数。如果我们想让所有的参数都使用默认值，那我们应该传递一个空对象：

showMenu({}); // 不错，所有值都取默认值

showMenu(); // 这样会导致错误

我们可以通过指定空对象 {} 为整个参数对象的默认值来解决这个问题：

function showMenu({ title = "Menu", width = 100, height = 200 } = {}) {
  alert( `${title} ${width} ${height}` );
}

showMenu(); // Menu 100 200

在上面的代码中，整个参数对象的默认是 {}，因此总会有内容可以用来解构。

总结

  • 解构赋值可以立即将一个对象或数组映射到多个变量上。

  • 解构对象的完整语法：

    let {prop : varName = default, ...rest} = object

    这表示属性 prop 会被赋值给变量 varName，如果没有这个属性的话，就会使用默认值 default。

    没有对应映射的对象属性会被复制到 rest 对象。

  • 解构数组的完整语法：

    let [item1 = default, item2, ...rest] = array

    数组的第一个元素被赋值给 item1，第二个元素被赋值给 item2，剩下的所有元素被复制到另一个数组 rest。

  • 从嵌套数组/对象中提取数据也是可以的，此时等号左侧必须和等号右侧有相同的结构。

引用地址：解构赋值

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/407056.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

[Vue warn]: Error in v-on handler: “TypeError: Cannot read properties of undefined (reading ‘$refs‘)

[Vue warn]: Error in v-on handler: “TypeError: Cannot read properties of undefined (reading ‘$refs‘)

报错：[Vue warn]: Error in v-on handler: "TypeError: Cannot read properties of undefined (reading $refs)" 背景：1.在做vue项目时，在功能弹框中，想实现新增内容。 2. 报错原因是要触发menuCheckall组件后&#xff…
阅读更多...
background-image使用

background-image使用

目录 background-image: url(" ")； background-repeat属性（背景平铺） background-size属性（设置背景图片大小） background-position属性（背景图片位置） 1.background-image: url…
阅读更多...
Vue中 Vue-Baidu-Map基本使用

Vue中 Vue-Baidu-Map基本使用

前言 但我们遇到一项新技术或者没有写过的东西为了不走弯路我们只能先去模仿或者看官方文档 Vue这个框架相信大家都熟悉，只要是需要用的第三方平台它一般都会进行集成，比如Vue-Baidu-map 为什么有百度原生api为什么还需要插件，因为使用插件…
阅读更多...
ref 引用(vue获取DOM元素）

ref 引用(vue获取DOM元素）

ref 引用 jquery 牛逼 简化了程序员操作DOM的过程 vue 优势： MVVM 在 vue 中，程序员不需要操作DOM。只需要把数据维护好！(数据驱动视图) 结论：在 vue 项目，强烈不建议大家安装和使用jQuery！！&am…
阅读更多...
CORS错误是什么如何解决?

CORS错误是什么如何解决?

通过http://localhost访问服务端时,出现CROS错误是什么问题该如何解决呢? 发生ajax跨域问题的原因：(三个原因同时满足才可能产生跨域问题) (1)浏览器限制 发生ajax跨域的问题的时候后端是正常执行的，从后台打印的日志可以看出，而且后台也会…
阅读更多...
前端布局小案例，如何创建漂亮的毛玻璃输入表单卡片效果

前端布局小案例，如何创建漂亮的毛玻璃输入表单卡片效果

在当今互联网时代，用户体验是至关重要的。当我们在设计网站或应用程序时，一个漂亮、吸引人的界面往往是吸引用户并提高用户满意度的关键因素之一。而一个好看的表单则可以提高用户提交的意愿和效率。本文将介绍如何使用HTML和CSS创建一个漂亮的毛玻璃输入…
阅读更多...
vue3 响应式对象的 api 详解

vue3 响应式对象的 api 详解

文章目录Ⅰ. ref、reactive ( 递归监听 )Ⅱ. isRef、isReactive ( 判断 )Ⅲ. toRef 和 toRefs ( 解构 )Ⅳ. toRaw 、 markRaw ( 解除代理)Ⅴ. unref ( 拷贝 )Ⅵ. shallowRef 、shallowReactive（ 非递归监听 ）Ⅶ. triggerRef （强制更新&#x…
阅读更多...
使用小程序制作一个老照片修复工具，让追忆时光触手可及

使用小程序制作一个老照片修复工具，让追忆时光触手可及

一、文章前言二、准备流程三、开发步骤四、完整代码一、文章前言 此文主要通过小程序来制作一个照片修复工具，实现黑白图片上色及图像效果增强等功能。 二、准备流程 2.1、注册百度开放平台及微信公众平台账号。 2.2、下载及安装微信Web开发者工具。 2.3、如需通过SDK调用及需…
阅读更多...
LVGL V8应用——通过按键切换页面

LVGL V8应用——通过按键切换页面

一、按键切换对象 程序 全局变量 static lv_obj_t *contanier1 NULL; static lv_obj_t *contanier2 NULL;按钮对应回调函数，实现容器的切换 static void win_btn_event_callback1(lv_event_t* e) {lv_event_code_t code lv_event_get_code(e);if (code LV_EVE…
阅读更多...
猿创征文｜前端到全栈，一名 IT 初学者的学习与成长之路

猿创征文｜前端到全栈，一名 IT 初学者的学习与成长之路

目录导读写在前面创作之路❤ 前端开发工程师知识体系❤ Vue&React 开发框架❤ 前端开发实战❤ Linux&云原生小马技术栈❤ 主打技术专栏❤ 其他专栏(实用干货)❤ 技术栈词云学习与成长总结写在前面 2021 年 7 月 18 日我在 CSDN 发布了第一篇技术文章，距现在…
阅读更多...
如何用html制作一个简单的网页

如何用html制作一个简单的网页

哈喽，大家好！我是小张。大家在浏览网页的时候有没有好奇过这个网页是怎么制作，其实只是制作一个简单的网页是很简单的。今天我就教一下大家如何用HTML制作一个简单的网页。 了解html 1. 学习html之前先要知道html是什么 HTML的全称为超文本标…
阅读更多...
查看Chrome浏览器版本及下载对应的webdriver，并下载安装

查看Chrome浏览器版本及下载对应的webdriver，并下载安装

查看Chrome浏览器版本及下载对应的webdriver，并下载 文章目录查看Chrome浏览器版本及下载对应的webdriver，并下载一，查看自己电脑的Chrome的版本二，webdriver的对应版本三，安装一，查看自己电脑的Chrome的版…
阅读更多...
nvm介绍、安装、报错处理以及使用

nvm介绍、安装、报错处理以及使用

前言 工作中我们偶尔可能同时在进行多个项目开发，而多个不同的项目所使用的 node 版本又是不一样的，在这种情况下，对于维护多个版本的node 将会是一件非常麻烦的事情，因为需要操作做卸载安装操作，而nvm 就是为解决这个…
阅读更多...
关于Vue3的defineProps用法

关于Vue3的defineProps用法

之前只是单纯的会用，因为vue关于父子组件通讯差别有一点点大。 1.在父组件内传递变量的时候，需要加冒号:，否则你就只是单纯的传递了一个字符串而已。 2.在子组件里不需要引入defineProps就可调用该函数去接收父组件传来的属性。 我个人在这里…
阅读更多...
axios基本使用及跨域问题详解

axios基本使用及跨域问题详解

前端请求自然也发展迅速，从原生的XHR到jquery ajax，再到现在的axios和fetch。axios（ https://axios-http.com/zh/ ）是Vue推荐的http库，这个还是要了解一点的。 安装 $ npm install axios基本使用的例子 1、在main.j…
阅读更多...
Vue项目：学生管理系统

Vue项目：学生管理系统

💂 个人主页: 陶然同学🤟 版权: 本文由【陶然同学】原创、在CSDN首发、需要转载请联系博主💬 如果文章对你有帮助、欢迎关注、点赞、收藏(一键三连)和订阅专栏哦💅 想寻找共同成长的小伙伴，请点击【Java全栈开发社区】…
阅读更多...
Nginx的安装配置教程

Nginx的安装配置教程

一、Nginx的下载与安装 Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件（IMAP/POP3）代理服务器。其特点是占有内存少，并发能力强，事实上nginx的并发能力在同类型的网页服务器中表现较好 1.下载 在Nginx的官网的下载页面…
阅读更多...
JavaScript-匿名函数

JavaScript-匿名函数

什么是匿名函数 1、匿名函数,即没有名称的函数 2、如果单独只写一个匿名函数，此时是不符合语法要求的 会报错。需要给 匿名函数包裹一个括号，使之成为表达式。 3、被小括号包裹的内容会被js识别为一个函数表达式 如何执行和使用匿名函数？ …
阅读更多...
前端直传阿里云OSS

前端直传阿里云OSS

阿里云对象存储服务（Object Storage Service，简称OSS），是阿里云对外提供的海量、安全、低成本、高可靠的云存储服务。 目前通过Web端直传文件（Object）到OSS，有两种方案： 一、利用OSS…
阅读更多...
web渗透之文件上传漏洞

web渗透之文件上传漏洞

目录一、原理二、利用方式三、文件上传的风险处四、文件上传漏洞的危害五、文件上传漏洞常见的绕过方式1、前端绕过检测2、mime类型检测绕过3、黑名单绕过（1）、相似扩展名（2）、apache配置文件（3）、大小写绕…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023