ES6--变量的解构赋值
ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构。解构赋值在实际开发中可以大量减少我们的代码量,并且让我们的程序结构更清晰。也许你还是不太明白,那先来一个最简单的数组解构赋值来进行赋值。
数组的解构赋值:
** 简单的数组解构:**
以前,为变量赋值,我们只能直接指定值。比如下面的代码:
let a=0;
let b=1;
let c=2;
而现在我们可以用数组解构的方式来进行赋值。
letl [a,b,c]=[1,2,3];
上面的代码表示,可以从数组中提取值,按照位置的对象关系对变量赋值。
** 数组模式和赋值模式统一:**
可以简单的理解为等号左边和等号右边的形式要统一,如果不统一解构将失败。
let [a,[b,c],d]=[1,[2,3],4];
如果等号两边形式不一样,很可能获得undefined或者直接报错。
解构的默认值:
解构赋值是允许你使用默认值的,先看一个最简单的默认是的例子。
let [foo = true] =[];
console.log(foo); //控制台打印出true
上边的例子数组中只有一个值,可能你会多少有些疑惑,我们就来个多个值的数组,并给他一些默认值。
let [a,b="JSPang"]=['技术胖']
console.log(a+b); //控制台显示“技术胖JSPang”
现在我们对默认值有所了解,需要注意的是undefined和null的区别。
let [a,b="JSPang"]=['技术胖',undefined];
console.log(a+b); //控制台显示“技术胖JSPang”
undefined相当于什么都没有,b是默认值。
let [a,b="JSPang"]=['技术胖',null];
console.log(a+b); //控制台显示“技术胖null”
null相当于有值,但值为null。所以b并没有取默认值,而是解构成了null。
对象的解构赋值
解构不仅可以用于数组,还可以用于对象。
let {foo,bar} = {foo:'JSPang',bar:'技术胖'};
console.log(foo+bar); //控制台打印出了“JSPang技术胖”
注意:对象的解构与数组有一个重要的不同。数组的元素是按次序排列的,变量的取值由它的位置决定;而对象的属性没有次序,变量必须与属性同名,才能取到正确的值。
圆括号的使用
如果在解构之前就定义了变量,这时候你再解构会出现问题。下面是错误的代码,编译会报错。
let foo;
{foo} ={foo:'JSPang'};
console.log(foo);
要解决报错,使程序正常,我们这时候只要在解构的语句外边加一个圆括号就可以了。
let foo;
({foo} ={foo:'JSPang'});
console.log(foo); //控制台输出jspang
字符串解构
字符串也可以解构,这是因为,此时字符串被转换成了一个类似数组的对象。
const [a,b,c,d,e,f]="JSPang";
console.log(a);
console.log(b);
console.log(c);
console.log(d);
console.log(e);
console.log(f);
总结:这节课的内容很简单,但是也有一些细节需要注意,希望你能动手把解构练习一遍,在实战项目中解构Json数据格式还是很普遍的,有了ES6得帮助,提高了不少工作效率。
ES6--变量的解构赋值相关推荐
- ES6变量的解构赋值--对象篇
目录 使用方式 普通形式 嵌套结构 使用默认值 注意事项 上一篇我们讲解了数组的解构赋值,解构还可以用于对象.字符串等等,这里我们来讲解对象的解构赋值. ES6变量的解构赋值--数组_zxn20012 ...
- (34)2021-02-24(ES6变量的解构赋值)
ES6变量的解构赋值 一. 变量的解构赋值 1.什么是解构 2.数组解构赋值 不完全解构 3.对象解构赋值 方法解构 注意点 4.字符串解构 5.函数参数的解构赋值 6.用途 6.1 交换变量的值 6 ...
- ES6——变量的解构赋值
ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构. let [a, b] = [1, 2]; let {c, d} = {c: 3, d: 4};console.log(a ...
- es6—变量的解构赋值
数组的解构赋值 /* 1.变量的解构赋值: * 数组的元素是按次序排列的,变量的取值由它的位置决定: * 从数组和对象中提取值,对变量进行赋值,这被称为解构; * 属于"模式匹配" ...
- es6变量的解构赋值
https://note.youdao.com/web/#/file/WEB0795aa69a66933c323f06127c9127f4d/note/WEBb0bbf2a9471ea54f2cb0f ...
- 【ES6】变量的解构赋值
[ES6]变量的解构赋值 一.什么叫解构赋值? 二.解构赋值有哪些分类?写法? 1)对数组的解构赋值 2)对对象的解构赋值 3)对字符串的解构赋值 4)对数值和布尔值的解构赋值 5)对函数参数的解构赋 ...
- ES6的新特性(3)——变量的解构赋值
变量的解构赋值 数组的解构赋值 基本用法 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). let a = 1; let b = 2; le ...
- Vue2.x—理解vuex核心概念action(使用到ES6的变量的解构赋值)
Action Action 类似于 mutation,不同在于: Action 提交的是 mutation,而不是直接变更状态. Action 可以包含任意异步操作. 让我们来注册一个简单的 acti ...
- es6分享——变量的解构赋值
变量的解构赋值:ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 以前的写法: var a = 1; var b = 2; es6允许的写法 ...
- [ES6] 细化ES6之 -- 变量的解构赋值
变量的解构赋值 解构赋值是什么 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值 var/let [变量名称1,变量名称2,...] = 数组或对象 本质上,这种写法属于"模式 ...
最新文章
- 小波包分解 matlab_多尺度一维小波分解
- PHPWind的版权等信息去除的方法
- 从入门到进阶|如何基于WebRTC搭建一个视频会议
- 三极管基本参数介绍与放大电路分析
- JDK8新特性之重复注解
- 四种并发编程模型简介
- FreeRTOS | STM32H7串口中断调用FreeRTOS API,导致程序卡死
- 我的世界java手机版怎么调按键_博阅Likebook P6高配青春版使用评测
- Python高级特性:Python迭代、生成器、列表生成式
- cwm recovery 6.0.2.3下载_造梦西游3星辰辅助下载-造梦西游3星辰修改器下载v3.7.0 免费版...
- Microsoft Navision 4.0帮助您消除日常工作流程中的烦恼的7条途径
- 奇怪的电梯(DP动态规划和BFS)
- 软件架构设计–五视图法
- 微信自研生产级paxos类库PhxPaxos实现原理介绍
- ZYNQ芯片软硬件协同开发二:最简Linux操作系统的硬件部分设计
- 量子计算机qubit态,成功了!三维量子态传送被我国专家突破,量子计算机时代快来了...
- java中的example_mybatis中关于example类详解
- 国密算法分类总结:sm2,sm3,sm4等
- 蓝牙智能门锁现状分析
- 孩子做作业用计算机,小学五年级写作业让用计算机吗
热门文章
- Docker基础25--5.6 配置docker远程服务
- UML类图中实线虚线的指向关系
- 《阴阳师·2栀子女》原作:梦枕貘
- 数据交换平台-初步设计
- 电音制作收割者宿主软件-Cockos REAPER v6.15 x86 x64 WiN
- 不属于计算机系统的输出设备,不是电脑的输出设备的是什么
- 音乐计算机锦鲤抄,锦鲤抄 (feat. 银临)
- android指纹测试,Android指纹识别
- xposed框架报错安装不上解决办法
- 工业级4g无线路由器_工业级4g无线路由器厂家品牌