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

目录
  • 1. 什么是解构赋值 ？
  • 2. 数组的解构赋值
    • 2.1) 数组解构赋值的默认值
    • 2.2) 数组解构赋值的应用
      • 类数组中的应用
      • 交换变量的值
  • 3. 对象的解构赋值
    • 3.1) 对象解构赋值的默认值
    • 3.2)对一个已声明的变量解构赋值
  • 4. 字符串的解构赋值
  • 总结

1. 什么是解构赋值 ？

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

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

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

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

将数组的值获取出来，赋值给a, b, c

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);

总结

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

赞 (0)

相关推荐

  • JavaScript解构赋值的实用技巧指南

    目录 一.基本概念 二.解构分类 1. 对象的解构赋值 2. 数组的解构赋值 (1)字符串 (2)数组 (3)集合 (4)Map 三.嵌套解构 四.使用技巧 1. 函数解构 (1)解构函数参数 2. 循环中的解构 3. 动态属性解构 4. 交换变量 5. 数组拷贝 四.解构赋值注意点 总结 一.基本概念 为什么需要解构呢,先来看一个例子: const student = { name: 'ZhangSan', age: 18, scores: { math: 19, english: 85, c

  • ES6下javascript解构赋值常见用法总结

    Javascript解构赋值出现的契机: let obj = { a: 1, b: 2 } // 取值 let a = obj.a let b = obj.b Javascript解构赋值问题核心: 每次取值既要确定对象属性名,还得重新定义一个变量占用多一行,代码行数和重复的声明a,使得代码不够简洁,能否通过左边变量名,匹配到右边的属性名从而取得对应的值,ES6解构语法核心就基于这样的模式匹配思想 上面的问题解构方案: let obj = { a: 1, b: 2 } // 取值 let {a,

  • JavaScript对象解构的用法实例解析

    JavaScript对象解构的用法实例解析

    目录 前言 使用解构从对象中获取值 使用解构从嵌套对象中获取值 使用对象解构定义一个新变量以及默认值 默认值 新变量 使用 JavaScript 对象解构别名 使用对象解构处理动态名称属性 在函数参数和返回值中解构对象 解构赋值传参 解构函数对象返回值 在循环中使用对象解构 总结 前言 ES6(ES2015)的发布,给JavaScript 提供了一种更方便快捷的方式来处理对象的属性.该机制称为Destructuring(也称为解构赋值).但是你真的会用吗?你真的了解各种场景下,解构赋值的用法吗?

  • JavaScript解构赋值详解

    目录 概念 数组解构 声明分别赋值 解构默认值 交换变量值 解构函数返回的数组 忽略返回值(或跳过某一项) 赋值数组剩余值给一个变量 嵌套数组解构 字符串解构 对象解构 基础对象解构 赋值给新变量名 解构默认值 赋值给新对象名的同时提供默认值 同时使用数组和对象解构 不完全解构 赋值剩余值给一个对象 嵌套对象解构(可忽略解构) 注意事项 小心使用已声明变量进行解构 函数参数的解构赋值 解构的用途 交换变量的值 从函数返回多个值 提取JSON数据 总结 概念 ES6提供了更简洁的赋值模式,从数组和

  • JavaScript ES6解构运算符的理解和运用

    目录 前言 解构符号的作用 使用方法 解构赋值的应用 浅谈应用 提取json数据 可扩展运算符... 交换变量值 总结 前言 最近一直在学JavaScript,看到了ES6中的解构符号,觉得这个给我们的代码简洁性带来了一个飞跃式的提升,而且它已经运用在了企业开发中,假如未来你工作中,别人在用,你却读不懂别人的代码,这造成的影响还是很大的.因此,好好学习一下吧. 你可以不用,但是你不能不懂✔ JavaScript ES6中,有很多特性都是为了简化代码,方便程序员去书写的.解构运算符就是其中很好的特

  • 解析JavaScript的ES6版本中的解构赋值

    什么是解构赋值? 解构赋值允许你使用类似数组或对象字面量的语法将数组和对象的属性值赋给一系列变量.这个语法非常简洁,而且比传统的属性访问更加清晰. 在不使用解构赋值的情况下,访问数组的前三项: var first = someArray[0]; var second = someArray[1]; var third = someArray[2]; var first = someArray[0]; var second = someArray[1]; var third = someArray

  • Javascript 解构赋值详情

    Javascript 解构赋值详情

    目录 1.数组解构 2.对象解构 3.不完全解构 4.用解构赋值实现变量交换 1.数组解构 let [a, b, c] = [1,2,3] console.log(a, b, c) // 1 2 3 除了数组,任何可迭代的对象都支持被解构, 例如字符串 let [first, second] = "he" console.log(first, second) // h e 2.对象解构 赋值右侧是对象,左侧是包含在花括号内逗号隔开的变量名 let {a, b, c} = {a:1, b

  • 关于JS解构的5种有趣用法

    前言 原文标题:5 Interesting Uses of JavaScript Destructuring 原文链接:dmitripavlutin.com/5-interesti- 定期回顾我写的JS代码,我发现解构运算无处不在. 获取对象的属性和访问数组内容是都是很常用的操作.而解构运算使得这些操作变得非常简单明了. 在这篇文章中,我将会讲解JS解构不同于常见用法的五种使用技巧. 1. 交换变量 常见的交互两个变量值的方法都需要借助一个额外的变量,看一个简单的例子: let a = 1; l

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

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

    目录 1. 什么是解构赋值 ? 2. 数组的解构赋值 2.1) 数组解构赋值的默认值 2.2) 数组解构赋值的应用 类数组中的应用 交换变量的值 3. 对象的解构赋值 3.1) 对象解构赋值的默认值 3.2)对一个已声明的变量解构赋值 4. 字符串的解构赋值 总结 1. 什么是解构赋值 ? 将属性/值从对象/数组中取出,赋值给其他变量 通俗来说,即解析某一数据的结构,将我们想要的东西提取出来,赋值给变量或常量. 让我们通过一个例子看看: const [a, b, c] = [1, 2, 3];

  • 一篇文章带你吃透JavaScript中的DOM知识及用法

    目录 一.前言 二.DOM框架 三.认识DOM节点 四.JS访问DOM 1.获取节点 2.改变 HTML 3.改变 CSS 4.检测节点类型 5.操作节点间的父子及兄弟关系 6.操作节点属性 7.创建和操作节点 总结 一.前言 DOM:Document Object Model(文档对象模型),定义了用户操作文档对象的接口,可以说DOM是自HTML将网上相关文档连接起来后最伟大的创新.它使得用户对HTML有了空前的访问能力,并使开发者将HTML作为XML文档来处理. 本文知识导图如下: 二.DO

  • JavaScript之解构赋值的理解

    JavaScript之解构赋值的理解

    1. ES6的新特性 允许将对象或者数组'分解'成多个单独的值, 以对象的解构开始. 代码示例 2. 说明 1).  定义一个对象 const obj={b:2,c:3,d:4}; 此时系统中没有变量b, 变量c与变量d 2). 开始解构该对象, const {a,b,c} = obj 这句话的意思是, 定义a,b,c三个变量, 然后在obj对象中寻找a,b,c变量, 如果找到, 则赋值给对应的变量 所以, a, 已定义, 但是未赋值. 定义是在const{a,b,c}中定义的, 而没有在obj

  • 一篇文章带你了解JavaScript的包装类型

    一篇文章带你了解JavaScript的包装类型

    目录 1.简介 2.String 1.创建语法 2.常用方法 3.更多方法 3.Number 1.语法 2.属性 3.常用方法 4.Boolean 总结 1.简介 [解释]: 在 JavaScript 中的字符串.数值.布尔具有对象的使用特征,如具有属性和方法,之所以具有对象特征的原因是字符串.数值.布尔类型数据是JavaScript 底层使用 Object 构造函数“包装”来的,被称为包装类型. 2.String 1.创建语法 字面量 let str = 'abcd'; 构造函数 let st

  • Javascript中的解构赋值语法详解

    前言 首先在 ES6中引入的"解构赋值语法"允许把数组和对象中的值插入到不同的变量中.虽然看上去可能很难,但实际上很容易学习和使用. 解构赋值语法是一种 JS表达式.ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构.通过解构赋值, 可以将属性/值从对象/数组中取出,赋值给其他变量. 在ES6解构赋值出现之前,我们需要为变量赋值的时候,只能直接指定值. 比如: let a = 1; let b = 2; let c = 3; let d = 4; let e

  • 一篇文章带你吃透Vue生命周期(结合案例通俗易懂)

    一篇文章带你吃透Vue生命周期(结合案例通俗易懂)

    目录 1.vue生命周期 1.0_人的-生命周期 1.1_钩子函数 1.2_初始化阶段 1.3_挂载阶段 1.4_更新阶段 1.5_销毁阶段 2.axios 2.0_axios基本使用 2.1_axios基本使用-获取数据 2.2_axios基本使用-传参 2.3_axios基本使用-发布书籍 2.4_axios基本使用-全局配置 3.nextTick和refs知识 3.0$refs-获取DOM 3.1$refs-获取组件对象 3.2$nextTick使用 3.3$nextTick使用场景 3.

  • 一篇文章带你吃透Vuex3的状态管理

    一篇文章带你吃透Vuex3的状态管理

    目录 一. Vuex是什么 Vue全局事件总线 Vuex状态管理 何时使用Vuex 二. 纯vue组件案例 计算总数案例 添加人员案例 三. Vuex工作原理和流程 第一种工作流程 第二种工作流程 生活化的Vuex工作原理 四. 在项目中引入Vuex 安装Vuex 创建store 在Vue中挂载store 五. Vuex的核心属性用法 单一数据源(state) 状态更新方式(mutations) store中的计算属性(getters) 异步更新状态(actions) 同步增加总数 异步增加总数

  • 一篇文章带你了解清楚Mysql 锁

    一篇文章带你了解清楚Mysql 锁

    一丶为什么数据库需要锁 数据库锁设计的初衷是处理并发问题.作为多用户共享 的资源,当出现并发访问的时候,数据库需要合理地控制资源的访问规则.而锁就是用来实 现这些访问规则的重要数据结构. 根据加锁的范围,MySQL 里面的锁大致可以分成全局锁.表级锁和行锁三类 二丶全局锁&全库逻辑备份 全局锁就是对整个数据库实例加锁.全局锁的典型使用场景是,做全库逻辑备份,全库逻辑备份有以下几种方式: 1.Flush tables with read lock (FTWRL) Flush tables with

  • 一篇文章带你使用Typescript封装一个Vue组件(简单易懂)

    一.搭建项目以及初始化配置 vue create ts_vue_btn 这里使用了vue CLI3自定义选择的服务,我选择了ts.stylus等工具.然后创建完项目之后,进入项目.使用快捷命令code .进入Vs code编辑器(如果没有code .,需要将编辑器的bin文件目录地址放到环境变量的path中).然后,我进入编辑器之后,进入设置工作区,随便设置一个参数,这里比如推荐设置字号,点下.这里是为了生成.vscode文件夹,里面有个json文件. 我们在开发项目的时候,项目文件夹内的文件很

  • 一篇文章带你搞定SpringBoot中的热部署devtools方法

    一.前期配置 创建项目时,需要加入 DevTools 依赖 二.测试使用 (1)建立 HelloController @RestController public class HelloController { @GetMapping("/hello") public String hello(){ return "hello devtools"; } } 对其进行修改:然后不用重新运行,重新构建即可:只加载变化的类 三.热部署的原理 Spring Boot 中热部

随机推荐