解构赋值定义:

允许按照一定模式从数组或对象中提取值,然后对变量进行赋值。

数组的解构赋值

注:数组的元素要一次排序的,变量的值由他的位置决定。

基本用法

    // ES6 解构赋值
let [a, b, c] = [1, 2, 3]; // 等于
let a = 1;
let b = 2;
let c = 3;

如果结构不成功,变量的值就是undefined。

    let [x, y, z] = [1, 2];
// x = 1;
// y = 2;
// z = undefined; 结构没有成功,值就是undefined;

如果等号右边不是数组(不具有Iterator),是会报错的。比如下面语句就会报错:

    let [a] = 1;
let [a] = false;
let [a] = NaN;
let [a] = undefined;
let [a] = null;
let [a] = {};

事实上只要某种数据结构具有 Iterator 接口,都可以使用数组形式的解构赋值。

    let [x, y, z, a] = new Set([1, 2, 3]);
x // 1
y // 2
z // 3
a // undefined

指定默认值

    let [a, b = 2] = [1]; // a=1,b=2。b=2为默认值

    let [a = 1, b = a] = [2]; //a=2,b=2。a=1为默认值,后被赋值为 2,a的值又被赋值为 b,所以b=2。

    let [a = b, b = 1] = [2]; //a=2,b=1。b=1为默认值。

    // 下面这种方式报错
let [a = b, b = 1] = []; // 不先给 a 赋值会报错,因为未给 a 赋值。要先给 a 赋值。

对象的解构赋值

注:对象的属性没有次序,变量必须与属性同名才能取得正确的值。

    let { x, y } = { x: "a", y: "b" };
x // "a"
y // "b" let { z } = { x: "a", y: "b" };
z // undefined

如果变量名与属性名不一致,要写成下面这样:

    var { a: x } = { a: "1", b: "2" }
x // "1",a=undefined let { first: f, last: l } = { first: "hello", last: "world" };
f // "hello"
l // "world"

就是说对象的解构赋值的内部机制是先找到相同名称的属性,然后赋值给变量,真正被赋值的是后者,不是前者。

字符串的解构赋值

字符串用于解构赋值时,字符串会被转换成一个类似数组的对象。

    let [a, b, c, d, e] = "hello";
a // "h"
b // "e"
c // "l"
d // "l"
e // "0" // 类似数组的对象都会有一个length属性,可以这样写
let { length: len } = "hello";

参考书籍:

《ES6标准入门(第3版)》 阮一峰 著

JavaScript(ES6):变量的解构赋值的更多相关文章

  1. ES6 变量的解构赋值

    数组的解构赋值     var [a,b,c] = [1,2,3];    左边是变量,右边是值,根据数据结构一一对应 只要等号两边的模式相同,左边的变量就会被赋予右边对应的值,必须模式相同 如果等号 ...

  2. ES6 - 变量的解构赋值学习笔记

    变量的解析赋值 数组的解析赋值 es6允许按照一定的模式,从数组和对象中提取值,对变量进行赋值,这就称为解构. var a = 1; var b = 2; var c = 3; //在es6中允许写成 ...

  3. es6变量的解构赋值学习笔记

    1. 解构赋值的规则是,只要等号右边的值不是对象,就先将其转为对象.由于undefined和null无法转为对象,所以对它们进行解构赋值,都会报错. let { prop: x } = undefin ...

  4. ES6变量的解构赋值

    变量的解构赋值 1.数组的解构赋值 2.对象的解构赋值 3.字符串的解构赋值 4.数值和布尔值的解构赋值 5.函数参数的解构赋值 6.圆括号问题 7.用途 1.数组的解构赋值 ES6 允许写成下面这样 ...

  5. es6—变量的解构赋值

    数组的解构赋值 ]]]]]]] = []}} = {}} = {}})]: first]: last} = arr} = {}) {}))}))}) {}))}))].]]]])})] }}} = { ...

  6. ES6变量的解构赋值(一)数组的解构赋值

    let[a,...arr]=[1,2,3,4];//a==>1 arr==>[2,3,4] let [x, y, ...z] = ['a'];//a==>'a' y==>und ...

  7. ES6变量的解构赋值(二)对象的解构赋值

    前面我们知道,数组的结构赋值需要按顺序进行赋值, let [a,,c] = [,,] console.log(a); console.log(c);//3 let [a,b] = [1];consol ...

  8. ES6中的变量的解构赋值, 解放我们的双手,实现变量的批量赋值

    ES6--变量的解构赋值 引言 正文 一.数组的解构赋值 解构失败 不完全解构 默认值 二.对象的解构赋值 三.字符串的解构赋值 结束语 引言 变量的解构赋值, 听起来很复杂, 简单点说可以理解成批量 ...

  9. ES6学习之变量的解构赋值

    前言:什么是ES6?ECMAScript 6(简称ES6)是JavaScript语言的下一代标准,已经在2015年6月正式发布了.其中相比较于ES5新增了诸多的特性,并且ES6可转换为ES5的语法.- ...

  10. ES6标准入门 第三章:变量的解构赋值

    解构赋值:从数组和对象中提取值,对变量进行赋值. 本质上,这种写法属于“匹配模式”:只要等号两边的模式相同,左边的变量就会被赋予对应的值. 1.数组的结解构赋值 基本用法 let [foo, [[ba ...

随机推荐

  1. 在Java项目中使用redisson实现分布式锁

    Redisson自定义注解实现分布式锁 在Java项目中使用Redission自定义注解实现分布式锁: 添加Redission依赖项:在项目的pom.xml中添加Redission依赖项: <d ...

  2. 二进制安装K8S

    参考链接:https://zhuanlan.zhihu.com/p/408967897 准备工作 3台Centos7.9虚拟机 虚拟机配置:2C4G,能连接外网 虚机规划 ip 用途 192.168. ...

  3. 使用JMeter连接达梦数据库的步骤和示例

    引言: 本文将介绍如何使用JMeter连接达梦数据库,并提供连接达梦数据库的步骤和示例,帮助您快速开始进行数据库性能测试. 步骤: 1. 下载并安装JMeter:首先,从JMeter官方网站下载并安装 ...

  4. [selenium]相对定位器

    前言 Relative Locators,相对定位器,是Selenium 4引入的一个新的定位器,相对定位器根据源点元素去定位相对位置的其它元素. 相对定位方法其实是基于JavaScript的 get ...

  5. SQL Server 2022新功能概览

    开始之前   本篇文章仅仅是针对SQL Server 2022新推出功能的概览,以及我个人作为用户视角对于每个功能的理解,有些功能会结合一些我的经验进行描述,实际上,SQL Server 2022在引 ...

  6. nacos适配SqlServer、Oracle

    继上文<nacos适配达梦.瀚高.人大金仓数据库及部分源码探究>后补充nacos适配SqlServer.Oracle的贴码,主要区别是SqlServer.Oracle的分页SQL有点不一样 ...

  7. AI绘画:StableDiffusion制作AI赛博机车图保姆级教程

    本教程收集于:AIGC从入门到精通教程汇总 如果你具备Stable Diffusion的基础知识,那制作AI赛博机车图会更为顺畅.即便没有这个基础,只要严格按照教程的步骤执行,也能成功制作出来. 本教 ...

  8. 【matplotlib基础】--子图

    使用Matplotlib对分析结果可视化时,比较各类分析结果是常见的场景.在这类场景之下,将多个分析结果绘制在一张图上,可以帮助用户方便地组合和分析多个数据集,提高数据可视化的效率和准确性. 本篇介绍 ...

  9. 2.4 PE结构:节表详细解析

    节表(Section Table)是Windows PE/COFF格式的可执行文件中一个非常重要的数据结构,它记录了各个代码段.数据段.资源段.重定向表等在文件中的位置和大小信息,是操作系统加载文件时 ...

  10. ViTPose+:迈向通用身体姿态估计的视觉Transformer基础模型

    身体姿态估计旨在识别出给定图像中人或者动物实例身体的关键点,除了典型的身体骨骼关键点,还可以包括手.脚.脸部等关键点,是计算机视觉领域的基本任务之一.目前,视觉transformer已经在识别.检测. ...