【ES6语法学习】解构赋值

news2025/1/17 0:50:50

在这里插入图片描述

文章目录

  • 引言
  • 一、什么是解构赋值
    • 1.1什么是解构赋值
    • 1.2 数组的解构赋值
      • 1.2.1 基本用法
      • 1.2.2 默认值
      • 1.2.3 剩余参数
    • 1.3 对象的解构赋值
      • 1.3.1 基本用法
      • 1.3.2 默认值
      • 1.3.2 剩余参数
    • 1.4 字符串的解构赋值
    • 1.5 函数参数的解构赋值
  • 二、解构赋值的优势和应用场景
    • 2.1 代码简化和可读性提高
    • 2.2 交换变量值
    • 2.3 函数返回多个值
    • 2.4 函数参数的处理
    • 2.5 遍历数据结构
  • 三、注意事项和常见问题
    • 3.1 嵌套解构赋值
    • 3.2 数组和对象的区别
  • 四、解构赋值的扩展应用
    • 4.1 从函数体中返回一个对象
    • 4.2 JSON数据的解构赋值
    • 4.3 Promise的解构赋值
  • 五、总结

引言

一、什么是解构赋值

1.1什么是解构赋值

  ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构。解构赋值是一种从数组或对象中提取值并赋给变量的语法,它可以简化代码,使得对多个变量的赋值更加便捷和直观。而且可以减少冗余代码,提高代码的可读性和可维护性。

在这里插入图片描述

数组解构赋值的语法使用方括号 [] 来表示要解构的数组,然后通过等号(=)将解构的值赋给变量。

1.2 数组的解构赋值

1.2.1 基本用法

  数组解构赋值允许我们通过类似于数组字面量的语法,将数组中的元素解构到多个变量中。在数组解构赋值中,我们可以使用方括号 [] 来表示数组,通过将变量放在方括号中,就可以将数组中对应位置的元素赋给这些变量。基本用法如下所示:

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

  上面代码表示,可以从数组中提取值,按照对应位置,对变量赋值。本质上,这种写法属于“模式匹配”,只要等号两边的模式相同,左边的变量就会被赋予对应的值。如果解构不成功,变量的值就等于undefined。

let [foo] = [];
let [bar, foo] = [1];

  以上两种情况都属于解构不成功,foo的值都会等于undefined。另一种情况是不完全解构,即等号左边的模式,只匹配一部分的等号右边的数组。这种情况下,解构依然可以成功。

let [x, y] = [1, 2, 3];
console.log(x); // 1
console.log(y); // 2

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

1.2.2 默认值

  在解构赋值时,我们可以为变量指定默认值,当数组中对应位置的值不存在或为 undefined 时,就会使用默认值。

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

注意,ES6 内部使用严格相等运算符(===),判断一个位置是否有值。所以,只有当一个数组成员严格等于undefined,默认值才会生效。

let [x = 1] = [undefined];
x // 1

let [x = 1] = [null];
x // null

  上面代码中,如果一个数组成员是null,默认值就不会生效,因为null不严格等于undefined。如果默认值是一个表达式,那么这个表达式是惰性求值的,即只有在用到的时候,才会求值。

1.2.3 剩余参数

  在数组解构赋值中,我们还可以使用剩余参数 来获取数组中剩余的元素。

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

1.3 对象的解构赋值

1.3.1 基本用法

  解构不仅可以用于数组,还可以用于对象。对象解构赋值允许我们通过类似于对象字面量的语法,将对象中的属性解构到多个变量中。在对象解构赋值中,我们可以使用花括号 {} 来表示对象,通过将变量放在花括号中,就可以将对象中对应属性的值赋给这些变量。

let {name, age} = {name: 'Alice', age: 20};
console.log(name); // Alice
console.log(age); // 20

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

let { bar, foo } = { foo: 'aaa', bar: 'bbb' };
console.log(foo); // "aaa"
console.log(bar); // "bbb"

let { baz } = { foo: 'aaa', bar: 'bbb' };
console.log(baz); // undefined

  上面代码的第一个例子,等号左边的两个变量的次序,与等号右边两个同名属性的次序不一致,但是对取值完全没有影响。第二个例子的变量没有对应的同名属性,导致取不到值,最后等于undefined。如果解构失败,变量的值等于undefined

1.3.2 默认值

  在解构赋值时,我们可以为变量指定默认值,当对象中对应属性的值不存在或为undefined时,就会使用默认值。

let {name, age = 0} = {name: 'Alice'};
console.log(name); // Alice
console.log(age); // 0

默认值生效的条件是,对象的属性值严格等于undefinednullundefined不严格相等。

1.3.2 剩余参数

在对象解构赋值中,我们还可以使用剩余参数 来获取除已解构属性外的其它属性。

let {name, ...rest} = {name: 'Alice', age: 20, gender: 'female'};
console.log(name); // Alice
console.log(rest); // {age: 20, gender: 'female'}

1.4 字符串的解构赋值

字符串也可以解构赋值。这是因为此时,字符串被转换成了一个类似数组的对象。

const [a, b, c, d, e] = 'hello';
console.log(a); // "h"
console.log(b); // "e"
console.log(c); // "l"
console.log(d); // "l"
console.log(e); // "o"

类似数组的对象都有一个length属性,因此还可以对这个属性解构赋值。

let {length : len} = 'hello';

1.5 函数参数的解构赋值

函数的参数也可以使用解构赋值。例如:

function add([x, y]){
  return x + y;
}

add([1, 2]); // 3

  上面代码中,函数add的参数表面上是一个数组,但在传入参数的那一刻,数组参数就被解构成变量xy。对于函数内部的代码来说,它们能感受到的参数就是xy
  在函数的参数中,可以使用解构赋值的形式,并结合默认值的方式,使得函数的参数具备更强的灵活性。

function printPerson({name = 'Unknown', age = 0} = {}) {
    console.log(name);
    console.log(age);
}

printPerson(); // 使用默认值
printPerson({name: 'Alice', age: 20}); // 传递参数

  上面代码中,函数printPerson的参数是一个对象,通过对这个对象进行解构,得到变量nameage的值。如果解构失败,nameage 等于默认值。

二、解构赋值的优势和应用场景

解构赋值在编写代码时提供了许多便利,可以减少冗余代码,提高代码的可读性和可维护性。

2.1 代码简化和可读性提高

解构赋值可以将一组相互关联的变量赋值,从而避免了重复的变量名。这样可以减少代码量,使得代码更加简洁和易读。

// 传统方式
let firstName = person.firstName;
let lastName = person.lastName;
let age = person.age;

// 使用解构赋值
let {firstName, lastName, age} = person;

2.2 交换变量值

解构赋值可以轻松地交换两个变量的值,无需引入第三个变量。

let a = 1;
let b = 2;

// 传统方式
let temp = a;
a = b;
b = temp;

// 使用解构赋值
[a, b] = [b, a];

2.3 函数返回多个值

解构赋值使得函数可以返回多个值,并且可以方便地将函数返回值解构到单个变量中。

function getPerson() {
    return {name: 'Alice', age: 20};
}

// 使用解构赋值获取返回值中的属性值
let {name, age} = getPerson();
console.log(name); // Alice
console.log(age); // 20

2.4 函数参数的处理

解构赋值可以方便地从对象或数组中提取参数值,并将其解构到函数的参数中。

function printPerson({name, age}) {
    console.log(name);
    console.log(age);
}

printPerson({name: 'Alice', age: 20});

2.5 遍历数据结构

解构赋值可以方便地遍历数组或对象,并获取其中的值。

// 遍历数组
let numbers = [1, 2, 3, 4, 5];
for (let [index, value] of numbers.entries()) {
    console.log(index, value);
}

// 遍历对象
let person = {name: 'Alice', age: 20};
for (let [key, value] of Object.entries(person)) {
    console.log(key, value);
}

三、注意事项和常见问题

3.1 嵌套解构赋值

解构赋值也可以用于嵌套结构的数据,例如,数组中的元素是对象,或对象中的属性值是数组。在处理嵌套结构时,需要注意解构赋值的层级关系。

let person = {
    name: 'Alice',
    age: 20,
    address: {
        city: 'Beijing',
        country: 'China'
    }
};

// 解构赋值中的嵌套结构
let {name, address: {city, country}} = person;
console.log(name); // Alice
console.log(city); // Beijing
console.log(country); // China

3.2 数组和对象的区别

在解构赋值时,数组和对象有一些区别。数组解构赋值是按照位置进行解构,而对象解构赋值是按照属性名进行解构。

// 数组解构赋值按照位置解构
let [a, b, c] = [1, 2, 3];

// 对象解构赋值按照属性名解构
let {name, age} = {name: 'Alice', age: 20};

四、解构赋值的扩展应用

除了上述基本用法和常见场景外,解构赋值还有一些扩展应用,可以提升代码的灵活性和效率。

4.1 从函数体中返回一个对象

  使用解构赋值,可以从函数体中返回一个对象,而不是单个的值。这种方式可以方便地返回多个有关联的值,并且可以直接解构到需要的变量中。例如,假设有一个函数getConfig(),它返回一个包含了网站配置信息的对象。我们可以使用解构赋值获取该对象中的属性值:

function getConfig() {
    return {
        baseURL: 'https://xxxxxx.com',
        timeout: 5000
    };
}

// 使用解构赋值获取返回对象的属性值
let {baseURL, timeout} = getConfig();
console.log(baseURL); // https://xxxxxx.com
console.log(timeout); // 5000

  在上面的例子中,函数getConfig()返回一个包含了baseURL和timeout属性的对象。通过解构赋值,我们可以将对象中的属性直接赋值给相应的变量,使代码更加简洁和直观。

4.2 JSON数据的解构赋值

  解构赋值也可以方便地从JSON数据中提取所需的值,JSON是一种常见的数据交换格式,在前后端交互中经常使用。例如,假设有一个JSON数据对象jsonData,其中包含了用户的信息。我们可以使用解构赋值从这个对象中提取出需要的值:

let jsonData = {
    id: 1,
    name: 'Alice',
    address: {
        city: 'Beijing',
        country: 'China'
    }
};

// 解构赋值从JSON数据中提取值
let {id, name, address: {city, country}} = jsonData;
console.log(id); // 1
console.log(name); // Alice
console.log(city); // Beijing
console.log(country); // China

在上面的例子中,我们通过解构赋值,从jsonData对象中提取了id、name、address.city和address.country属性的值,并将它们赋给相应的变量。

4.3 Promise的解构赋值

使用解构赋值,可以方便地处理Promise对象的返回值。Promise是一种处理异步操作的机制,可以使用解构赋值从Promise对象中获取返回值。例如,假设有一个异步函数fetchData(),它返回一个Promise对象,并在异步操作完成后将数据传递给resolve函数。我们可以使用解构赋值获取Promise对象返回值中的特定属性:

function fetchData() {
    return new Promise((resolve, reject) => {
        // 异步操作的代码...
        resolve({data: 'Hello'});
    });
}

// 使用解构赋值获取Promise对象的返回值
fetchData().then(({data}) => {
    console.log(data); // Hello
});

在上面的例子中,异步函数fetchData返回一个Promise对象,并在异步操作完成后将包含数据的对象传递给resolve函数。通过在解构赋值中使用对象的属性名,我们可以直接获取Promise返回值中的特定属性,这样可以更方便地处理异步操作的结果。

五、总结

  解构赋值是一种从数组或对象中提取值并赋给变量的语法,它可以简化代码,使得对多个变量的赋值更加便捷和直观。在编写代码时,我们可以根据具体的需求选择使用数组解构赋值或对象解构赋值,并结合默认值和剩余参数等特性,来提升代码的可读性和可维护性。同时,了解解构赋值的注意事项和常见问题,以及应用于嵌套结构、函数返回值、函数参数和遍历数据结构等扩展应用,可以更好地发挥解构赋值的潜力。
在这里插入图片描述

参考文档:https://blog.csdn.net/dyk11111/article/details/133777237

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

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

相关文章

并发程序设计--D2D3exec函数族和守护进程

exec 函数族 背景&#xff1a;fork创建进程之后&#xff0c;子进程和父进程执行相同的代码&#xff0c;但是在实际开发当中&#xff0c;我们希望父子进程执行不同的代码。 作用&#xff1a;执行指定的程序 #include <unistd.h> int execl(const char *path, const cha…

echarts中dataZoom拖拽不起效果

vue3项目中&#xff0c;echarts使用dataZoom进行区域拖动&#xff0c;拖动下图红色框&#xff0c;数据展示无变化拖动功能失效。 原因 vue3中使用了ref或者reactive等初始化图表的变量 //定义 let myChart ref<any>(null); //使用 myChart.value echarts.init(chartR…

京东年度数据报告-2023全年度净水器十大热门品牌销量榜单

近年来&#xff0c;随着科技的不断发展和应用&#xff0c;净水器的技术得到持续创新和提高&#xff0c;产品品质和使用效果不断优化&#xff0c;这也进一步提升了净水器的市场竞争力&#xff0c;2023年&#xff0c;净水器市场的销售成绩呈现增长。 根据鲸参谋平台的数据显示&a…

了解单元测试

一&#xff0c;测试分类 1.1 E2E测试&#xff08;end to end端到端测试&#xff09; 属于黑盒测试。 主要通过测试框架&#xff0c;站在用户测试人员的角度&#xff0c;模拟用户的操作进行页面功能的验证&#xff0c;不管内部实现机制&#xff0c;完全模拟浏览器的行为。&am…

接口自动化—pytest命令行操作

学习目标&#xff1a; 1、pytest的不同的运行方法 2、pytest常见的命令行参数 3、如何添加自定义的pytest命令行参数 学习内容&#xff1a; 1、pytest的不同的运行方法 1.1主要有三种情况的运行方式&#xff1a; 1.1.1没有使用pytest框架&#xff0c;但是要运行包含test…

微信多功能投票小程序源码系统:送礼物+在线充值+票数汇总+创建活动+完整的代码安装包 附带完整的搭建教程

微信已成为人们日常生活中不可或缺的一部分。因此&#xff0c;微信小程序也受到了广大用户的欢迎。在这个背景下&#xff0c;多功能投票小程序应运而生&#xff0c;为各种活动提供了方便快捷的投票方式。本文将介绍一款微信多功能投票小程序源码系统&#xff0c;该系统具有送礼…

Python | Iter/genartor | 一文了解迭代器、生成器的含义\区别\优缺点

前提 一种技术的出现&#xff0c;需要考虑&#xff1a; 为了实现什么样的需求&#xff1b;遇到了什么样的问题&#xff1b;采用了什么样的方案&#xff1b;最终接近或达到了预期的效果。 概念 提前理解几个概念&#xff1a; 迭代 我们经常听到产品迭代、技术迭代、功能迭代…

Apache Doris (六十一): Spark Doris Connector - (1)-源码编译

🏡 个人主页:IT贫道_大数据OLAP体系技术栈,Apache Doris,Clickhouse 技术-CSDN博客 🚩 私聊博主:加入大数据技术讨论群聊,获取更多大数据资料。 🔔 博主个人B栈地址:豹哥教你学编程的个人空间-豹哥教你学编程个人主页-哔哩哔哩视频 目录 1. Spark Doris Connector…

开发者必备的 Github 加速工具(截至2024年01月)

开始闲聊前&#xff0c;我要感谢大神小青龍总结的博文&#xff1a;作为程序员不得不知道的几款Github加速神器&#xff0c;给我们介绍了常用&#xff08;较为合规&#x1f604;&#xff09;的加速方法。毕竟 github 是开发者绕不过的宝库。 背景 我用 Github 将近12年&#x…

drf知识--11

补充 # 研究simple-jwt提供的Token类&#xff1a; 1、RefreshToken:生成refresh token的类 2、AccessToken:生成refresh token的类 3、Token&#xff1a;他们俩的父类 4、str(RefreshToken的对象)---得到字符串 refresh token&#xff0c;Token类写了 …

【linux学习】linux概述

1. linux概述 操作系统主要的功能有两个部分&#xff0c;一是更有效率的控制计算机硬件资源&#xff08;主要通过核心来控制&#xff09;&#xff0c;二是为程序设计师提供更容易开发软件的环境&#xff08;系统呼叫提供软件开发环境&#xff09;。linux就是一套操作系统&…

台灯学生用哪个牌子最好?学生护眼台灯最好的品牌推荐

如今的家长对教育十分重视&#xff0c;不仅给孩子提供了各种别致的文具&#xff0c;为了孩子有更好的学习光线&#xff0c;还会购买各种护眼台灯&#xff0c;但各种选择五花八门。从无蓝光、无频闪到柔和光&#xff0c;各种宣传亮点层出不穷……为了为孩子选购一款优质的学习护…

P3704数字表格(莫比乌斯反演)

题目背景 Doris 刚刚学习了 fibonacci 数列。用 fi​ 表示数列的第 i 项&#xff0c;那么 00,11f0​0,f1​1 fn​fn−1​fn−2​,n≥2 题目描述 Doris 用老师的超级计算机生成了一个 nm 的表格&#xff0c; 第 i 行第 j 列的格子中的数是 gcd(i,j)​&#xff0c;其中gcd(…

企业数据治理的三个阶段:从起步到成熟的数据管理之旅

随着数字化时代的到来&#xff0c;企业数据已经成为企业的重要资产和驱动业务发展的重要力量。然而&#xff0c;要想充分利用数据的价值&#xff0c;企业需要对其数据进行有效的管理和治理。本文将对企业数据治理的三个阶段进行详细的探讨&#xff0c;以帮助企业了解其在数据治…

5600U PVE安装WIN10后直通核显

修改PVE系统配置 请先安装相同版本的PVE系统&#xff0c;其他版本如果存在问题请自行查找。 安装过程比较简单&#xff0c;具体方法请自行百度 1. 修改grub启动参数&#xff1a; 修改文件 /etc/default/grub 中 GRUB_CMDLINE_LINUX_DEFAULT 配置&#xff1a; GRUB_CMDLINE_LI…

七款人体感应报警器电路图

人体感应报警器电路图&#xff08;一&#xff09; 人体发出的红外线波长在9&#xff5e;10um之间&#xff0c;属远红外线区。我们利用热释电红外传感器及信号处理集成电路&#xff0c;组装成一个人体红外线感应开关电路报警器&#xff0c;它能依靠人体发出的微量红外线进行开关…

一键减低PNG像素,轻松优化图片质量!

在数字时代&#xff0c;我们每天都要处理大量的图片文件&#xff0c;从网站设计、广告素材到社交媒体图片等。PNG作为一种常用的无损压缩格式&#xff0c;在保证图片质量的同时&#xff0c;也占用了较大的存储空间。为了优化存储空间和提高加载速度&#xff0c;我们需要对PNG图…

获取小红书笔记详情API调用说明(含请求示例参数说明)

前言 小红书&#xff0c;是一个引领全球时尚潮流的社交电商平台。在这里&#xff0c;你可以发现世界各地的优质好物&#xff0c;从美妆护肤、穿搭时尚&#xff0c;到家居生活、旅行美食&#xff0c;一切应有尽有。同时&#xff0c;这里也是一个分享生活点滴的平台&#xff0c;…

CPU平台做视频智能分析,Lnton视频分析平台不仅支持流分析,同时也支持图片分析了

LntonAIServer最新v1.0.09版本支持图片分析了&#xff0c;经过几个月的研发&#xff0c;在原有的视频流分析的基础上&#xff0c;我们终于支持大家都非常期待的图片分析功能了&#xff0c;图片分析的功能加上&#xff0c;能有利于很多场景的展开&#xff0c;比如在烟火、明厨亮…

蓝牙技术在智能交通系统中的革新与应用

随着科技的不断进步&#xff0c;蓝牙技术已经成为智能交通系统中的一项关键技术。其无线连接和低功耗的特性为交通管理和车辆通信提供了新的解决方案。本文将深入探讨蓝牙技术在智能交通系统中的应用&#xff0c;以及其对交通效率、安全性和用户体验的积极影响。 1. 蓝牙技术在…