文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

一篇文章带你了解JavaScript的解构赋值

2024-04-02 19:55

关注

1. 什么是解构赋值 ?

将属性/值从对象/数组中取出,赋值给其他变量

通俗来说,即解析某一数据的结构,将我们想要的东西提取出来,赋值给变量或常量。

让我们通过一个例子看看:

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

在这里插入图片描述

将数组的值获取出来,赋值给abc

2. 数组的解构赋值

模式(结构)匹配

即左边与右边的结构相同 (如左边是数组,右边也要是数组)

索引值相同的完成赋值

即左边与右边的索引值相同的完成赋值

通过例子来理解一下:

对于第一个:

let [e, [ , , f], g] = [1, [2, 4, 5], 3]; // 可以正确输出
console.log(e, f, g);  

在这里插入图片描述

但是如果写成这样,则会报错。

let [e, [ , , f], [g]] = [1, [2, 4, 5], 3];
console.log(e, f, g);

在这里插入图片描述

因为左边与右边的结构不匹配,右边索引为 2 的地方是个 3,而左边是个数组,无法完成匹配。

对于第二个

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

索引值相同的完成赋值,a的索引值是 1,对应右边索引值为 1 的值是 2,所以a = 2

2.1) 数组解构赋值的默认值

const [a, b] = [];console.log(a, b);

在这里插入图片描述

当左边对应的索引在右边为undefined时(如右边不存在这个值的情况),此时赋值的是undefined

那我们如何修改这个赋值呢 ?

通过在左边给变量写个 = 想要的值,即默认值。

所以,当左边的值=== undefined时,如果有默认值,左边的值会等于默认值

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

在这里插入图片描述

2.2) 数组解构赋值的应用

类数组中的应用

比如arguments中的应用

arguments中的值提取出来

function fun() {
    const [a, b, c] = arguments;
    console.log(a, b);
}

fun(1, 2, 3, 4);

在这里插入图片描述

比如NodeList中的应用

在这里,将p元素提取出来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>解构赋值的应用</title>
</head>
<body>
    <p>one</p>
    <p>two</p>
    <p>three</p>
    <script>
    	// 利用数组解构赋值将 p 元素获取的同时解构出来
    	const [p1, p2, p3] = document.querySelectorAll('p');
    	console.log(p1, p2, p3);
	</script>
</body>
</html>

在这里插入图片描述

交换变量的值

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

在这里插入图片描述

3. 对象的解构赋值

模式(结构)匹配

即左边与右边的结构相同 (如左边是对象,右边也要是对象)

属性名相同的完成赋值

即左边与右边的属性名相同的完成赋值

通过例子来理解一下:

const {val, objName} = {objName: "object", val: 1};
console.log(objName, val);

在这里插入图片描述

属性名相同的完成赋值,不用管左边属性名出现的顺序是否与右边出现的顺序一致。

这里还可以这么写,给新的变量名赋值:

const {val: vvv, objName: objnnn} = {objName: "object", val: 1};
console.log(objnnn, vvv);

在这里插入图片描述

3.1) 对象解构赋值的默认值

与数组解构赋值类似

对象的属性值=== undefined时,如果有默认值,等于对应的默认值

const {age: val = 18} = {};
console.log(val);

在这里插入图片描述

3.2)对一个已声明的变量解构赋值

在数组中,我们可以直接这么写:

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

在这里插入图片描述

但是,在对象中,直接这么写则会报错

let a, b;
{a, b} = {a: 1, b: 2};
console.log(a, b);

在这里插入图片描述

因为在这里,左边的花括号,浏览器会把它当成是一个代码块。

那么,我们如何解决这个问题呢 ?

在外面加个圆括号

let a, b;
({a, b} = {a: 1, b: 2});
console.log(a, b);

在这里插入图片描述

除此之外,对象的解构赋值可以取到继承的属性!

4. 字符串的解构赋值

可以用数组和对象的形式进行结构赋值

const [a, b] = "Hello";
// 左边对象的属性名对应右边字符串的字符下标序号
const {2: c, 4: e} = "Hello";
console.log(a, b, c, e);

在这里插入图片描述

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注编程网的更多内容!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯