ES6标准入门之变量的解构赋值简单解说
首先我们来看一看解构的概念,在ES6标准下,允许按照一定模式从数组和对象中提取值,然后对变量进行赋值,这被称作解构,简而言之粗糙的理解就是变相赋值。
解构赋值的规则是,只要等号右边的值不是对象或者数组,就先将其转为对象。
一、数组的结构赋值
以前为变量赋值只能直接指定。而ES6允许从数组中提取值,按照对应位置对变量赋值,我们先来看下面一段代码
//ES5对变量赋值只能直接指定
var a = 10;
var b = 20;
var c = 30;
//ES6允许写成下面这样
let [a, b, c] = [10, 20, 40]
//a: 10
//b: 20
//c: 30
//本质上,这种写法属于“模式匹配”
ES6通过数组解构对变量赋值
在上面的代码段中提到了模式匹配,所谓模式匹配就是只要等号两边模式相同,左边的变量就会被赋予对应的值,看下面代码
let [foo, [[bar], baz]] = [1, [[2], 3]];
foo //
bar //
baz //
模式匹配说明
如果解构不成功,变量的值就等于underfined。解构赋值允许指定默认值,但是默认值生效的条件是一个数组成员严格等于(===)underfined,默认值才会生效,let [x = 1] = [underfined],此时x = 1生效。
二、对象的解构赋值
对象的解构赋值与数组有一个重要的不同,数组的元素是按照次序排列的,变量的取值是由它的位置决定的;而对象的属性没有次序,变量必须与属性值同名才能取到正确的值。我们先来看一段对象赋值的代码
let { bar, foo } = { foo: "aaa", bar: "bbb" }
foo // "aaa"
bar // "bbb"
let { baz } = { foo: "aaa", bar: "bbb" }
baz // underfined
对象解构赋值
从上面的代码中可以看出,等号左边的两个变量的次序和等号右边两个同名属性的次序不一致,但是对取值完全没有影响。第二个例子的变量没有对应的同名属性,导致去不导致,最后等于underfined。如果变量名与属性名不一致,必须写成下面这样:
let { foo: baz } = { foo: "aaa", bar: "bbb" };这样baz就能取到值,这种也是模式匹配,foo是模式,baz才是变量。对象解构中模式匹配常用于嵌套对象模式匹配。
三、字符串解构赋值
字符串也可以解构赋值,这是因为此时字符串被转换成了一个类似数组的对象。看下面一段代码
const [a, b, c, d, e] = 'hello' a // h
b // e
c // l
d // l
e // o
字符串解构赋值
数值和布尔值姐解构赋值业火先将数值和布尔值转为对象在进行解构赋值。
四、用途
1、交换变量的值
let x = 1;
let y = 2;
[x, y] = [y, x];
此时x和y的值已经发生了替换,换做以前,只能通过中间变量来实现。
2、从函数返回多个值
function example () {
return [1, 2, 3]
}
let [a, b, c] = example ();此时a=1,b=2,c=3
3、函数参数的定义
function f ([x, y, z]) { ... }
f([1, 2, 3])
4、提取JSON数据
let jsonData = {
id: 42,
status: "OK",
data: [867, 5309]
};
let { id, status, data: number } = jsonData;
console.log(id, status, number);
// 42, "OK", [867, 5309]
JSON数据提取
ES6标准入门之变量的解构赋值简单解说的更多相关文章
- ES6学习笔记之变量的解构赋值
变量的解构赋值 ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构. 数组的解构赋值 以前,为变量赋值,只能直接指定值: 1 2 3 var a = 1; var b = 2; ...
- ES6学习 第二章 变量的解构赋值
前言 该篇笔记是第二篇 变量的解构赋值. 这一章原文链接: 变量的解构赋值 解构赋值 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 解构 ...
- ES6入门之变量的解构赋值(二)
前言 在上一章 ES6入门之let和const命令中我们对ES6的相关语法已经有了初步了解,上一章中我们主要学习了三大部分的内容,let命令的使用,块级作用域,const命令的使用,那么从本篇博客将进 ...
- ES6系列_3之变量的解构赋值
ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构. 解构有三种类型: 1.数组的解构赋值 (1)简单的数组解构 以前,我们给变量赋值是直接单个指定值,比如: let a=0; ...
- ES6第三节:变量的解构赋值
ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构.下面我们看实际的例子: 一.数组解构: let [a,b,c] = [1,2,3]; console.log(a); //a ...
- es6学习2:变量的解构赋值
一:数组的解构赋值 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构 let [foo, [[bar], baz]] = [1, [[2], 3]]; foo bar ba ...
- ES6 - 基础学习(3): 变量的解构赋值
解构赋值概述 1.解构赋值是对赋值运算符的扩展. 2.它是一种针对数组或者对象进行模式匹配,然后对其中的变量进行赋值. 3.代码书写上显得简洁且易读,语义更加清晰明了:而且还方便获取复杂对象中的数据字 ...
- ES6 第三章 变量的解构赋值 具体参照http://es6.ruanyifeng.com
1.基本用法 let [a, b, c] = [1, 2, 3];左右两边解构格式要保持一致. 2.默认值 let [x, y = 'b'] = ['a']; // x='a', y='b' let ...
- ECMAScript 6 入门之变量的解构赋值
1.数组 1. var a=1,b=2,c=3; console.log("a:",a) console.log("b:",b) console.log(&qu ...
随机推荐
- C# 利用反射将枚举绑定到下拉框
前言:反射(Reflection)是.NET提供给开发者的一个强大工具,尽管作为.NET框架的使用者,很多时候不会用到反射.但在一些情况下,尤其是在开发一些基础框架或公共类库时,使用反射会使系统架构更 ...
- [javaSE] 集合框架(体系概述)
为什么出现集合类 为了方便对多个对象的操作,对对象进行存储,集合就是存储对象最常用的一种方式 数组和集合的不同 数组是固定长度的,集合是可变长度的 数组可以存储基本数据类型,集合只能存储对象 数组只能 ...
- UML基础 UML对象图解析
本节向大家介绍一下UML对象图方面的内容,主要包括UML对象图概念介绍,表示法和用途等,希望通过本节的介绍大家对UML对象图有全面的认识,下面让我们一起来学习吧. UML对象图简介 对象图(Objec ...
- 在Windows上搭建kafka环境
英文文档:https://dzone.com/articles/running-apache-kafka-on-windows-os 第一步:安装JDK 百度很多,不赘述 第二步:安装ZooKeepe ...
- springboot 初识
从实用主义来学习springboot的话,那我们期望的就是首先知道 1 他是个什么东西 2 我们为什么要用他,他能带来什么样的好处 3 如何快速上手 简单来讲,springboot你可以理解成spri ...
- 转载文章CSS3的calc()使用
calc()对大家来说,或许很陌生,不太会相信calc()是css中的部分.因为看其外表像个函数,既然是函数为何又出现在CSS中呢?这一点也让我百思不得其解,今天有一同事告诉我,说CSS3中有一个属性 ...
- Django Rest framework 之 分页
RESTful 规范 django rest framework 之 认证(一) django rest framework 之 权限(二) django rest framework 之 节流(三) ...
- js-ES6学习笔记-Class(2)
1.与函数一样,类也可以使用表达式的形式定义. const MyClass = class Me { getClassName() { return Me.name; } }; 这个类的名字是MyCl ...
- js-ES6学习笔记-对象的扩展
1.ES6允许直接写入变量和函数,作为对象的属性和方法.这种写法用于函数的返回值,将会非常方便.CommonJS模块输出变量,就非常合适使用简洁写法. var ms = {}; function ge ...
- 尝试笔记 01 之 CSS 边角上的标签
作者: 八月未见 博客: https://www.cnblogs.com/jmtm/ 以下内容我仅尝试了Firefox浏览器,其他浏览器效果未知. 尝试做一个 CSS 写的角标,因为不能把它移到角落去 ...