JavaScript(ES6):变量的解构赋值
解构赋值定义:
允许按照一定模式从数组或对象中提取值,然后对变量进行赋值。
数组的解构赋值
注:数组的元素要一次排序的,变量的值由他的位置决定。
基本用法
// 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):变量的解构赋值的更多相关文章
- ES6 变量的解构赋值
数组的解构赋值 var [a,b,c] = [1,2,3]; 左边是变量,右边是值,根据数据结构一一对应 只要等号两边的模式相同,左边的变量就会被赋予右边对应的值,必须模式相同 如果等号 ...
- ES6 - 变量的解构赋值学习笔记
变量的解析赋值 数组的解析赋值 es6允许按照一定的模式,从数组和对象中提取值,对变量进行赋值,这就称为解构. var a = 1; var b = 2; var c = 3; //在es6中允许写成 ...
- es6变量的解构赋值学习笔记
1. 解构赋值的规则是,只要等号右边的值不是对象,就先将其转为对象.由于undefined和null无法转为对象,所以对它们进行解构赋值,都会报错. let { prop: x } = undefin ...
- ES6变量的解构赋值
变量的解构赋值 1.数组的解构赋值 2.对象的解构赋值 3.字符串的解构赋值 4.数值和布尔值的解构赋值 5.函数参数的解构赋值 6.圆括号问题 7.用途 1.数组的解构赋值 ES6 允许写成下面这样 ...
- es6—变量的解构赋值
数组的解构赋值 ]]]]]]] = []}} = {}} = {}})]: first]: last} = arr} = {}) {}))}))}) {}))}))].]]]])})] }}} = { ...
- ES6变量的解构赋值(一)数组的解构赋值
let[a,...arr]=[1,2,3,4];//a==>1 arr==>[2,3,4] let [x, y, ...z] = ['a'];//a==>'a' y==>und ...
- ES6变量的解构赋值(二)对象的解构赋值
前面我们知道,数组的结构赋值需要按顺序进行赋值, let [a,,c] = [,,] console.log(a); console.log(c);//3 let [a,b] = [1];consol ...
- ES6中的变量的解构赋值, 解放我们的双手,实现变量的批量赋值
ES6--变量的解构赋值 引言 正文 一.数组的解构赋值 解构失败 不完全解构 默认值 二.对象的解构赋值 三.字符串的解构赋值 结束语 引言 变量的解构赋值, 听起来很复杂, 简单点说可以理解成批量 ...
- ES6学习之变量的解构赋值
前言:什么是ES6?ECMAScript 6(简称ES6)是JavaScript语言的下一代标准,已经在2015年6月正式发布了.其中相比较于ES5新增了诸多的特性,并且ES6可转换为ES5的语法.- ...
- ES6标准入门 第三章:变量的解构赋值
解构赋值:从数组和对象中提取值,对变量进行赋值. 本质上,这种写法属于“匹配模式”:只要等号两边的模式相同,左边的变量就会被赋予对应的值. 1.数组的结解构赋值 基本用法 let [foo, [[ba ...
随机推荐
- 踏入数字天地之中 | Metaworld SDK 2.0进化纵览
ZEGO从未停止对技术边界的探索,我们力图让用户能够更高效.便捷地使用技术去创造价值. 去年8月,ZEGO打造的元宇宙智能互动引擎首次与大家见面,Metaworld SDK作为其中的核心能力组件, ...
- Java计算日期之间相差时间和解决浮点类型精度过长
计算日期之间相差 此处相差计算以分钟为单位,自行可根据业务场景更改 /** * 测试时间相差分钟 */ @Test public void getTime() { SimpleDateFormat s ...
- 【NestJS系列】核心概念:Providers提供者
前言 Providers是Nest中的一个基本概念,许多Nest中定义的类都可以被视为一个Provider,比如:service.repository.factory.helper等,它们都可以通过c ...
- Mysql高级4-索引的使用规则
一.最左前缀法则 如果索引了多列(联合索引),要遵守最左前缀法则.最左前缀法则指的是查询从索引的最左列开始,并且不跳过索引中的列,如果跳跃某一列,索引将部分失效(后面的字段索引失效) 示例1:acco ...
- 代码随想录算法训练营第三天| LeetCode 203.移除链表元素(同时也对整个单链表进行增删改查操作) 707.设计链表 206.反转链表
203.移除链表元素 题目链接/文章讲解/视频讲解::https://programmercarl.com/0203.%E7%A7%BB%E9%99%A4%E9%93%BE%E8%A1 ...
- Chrome 报错: Unchecked runtime.lastError: Could not establish connection. Receiving end does not exist.
经检查,是由浏览器中的插件导致的报错. 解决方案: 将该插件移除或关闭
- Docker版SS安装
灰常简单 首先安装docker 使用官方安装脚本自动安装 64位的centos7和8安装命令如下: curl -fsSL https://get.docker.com | bash -s docker ...
- DBSCAN聚类
一.概述 DBSCAN(Density-Based Spatial Clustering of Applications with Noise)是一种基于密度的聚类算法,簇集的划定完全由样本的聚集 ...
- 论文解读(AAD)《Knowledge distillation for BERT unsupervised domain adaptation》
Note:[ wechat:Y466551 | 可加勿骚扰,付费咨询 ] 论文信息 论文标题:Knowledge distillation for BERT unsupervised domain a ...
- 如何通过API接口获取京东的商品评论
如果您想要获取京东的商品评论,可以通过API接口来实现.这篇文章会介绍如何使用京东API接口获取商品的评论数据. 首先,您需要到京东开放平台注册成为开发者,然后创建一个应用程序.通过这个应用程序,您可 ...