es6学习2：变量的解构赋值

一：数组的解构赋值

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构

let [foo, [[bar], baz]] = [1, [[2], 3]];

foo //

bar //

baz //

let [ , , third] = ["foo", "bar", "baz"];

third // "baz"

let [x, , y] = [1, 2, 3];

x //

y //

let [head, ...tail] = [1, 2, 3, 4];

head //

tail // [2, 3, 4]

let [x, y, ...z] = ['a'];

x // "a"

y // undefined

z // []

这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。上面是一些使用嵌套数组进行解构的例子。如果解构不成功，变量的值就等于undefined。

不完全解构：

即等号左边的模式，只匹配一部分的等号右边的数组。这种情况下，解构依然可以成功。如果等号的右边不是数组，那么将会报错。

let [x, y] = [1, 2, 3];

x //

y //

let [a, [b], d] = [1, [2, 3], 4];

a //

b //

d //

默认值：

ES6 内部使用严格相等运算符（===），判断一个位置是否有值。所以，只有当一个数组成员严格等于undefined，默认值才会生效。

let [foo = true] = [];

foo // true

let [x, y = 'b'] = ['a']; // x='a', y='b'

let [x, y = 'b'] = ['a', undefined]; // x='a', y='b'

let [x = 1] = [undefined];

x //

let [x = 1] = [null];

x // null

如果一个数组成员是null，默认值就不会生效，因为null不严格等于undefined。

默认值可以引用解构赋值的其他变量，但该变量必须已经声明。上面最后一个表达式之所以会报错，是因为x用y做默认值时，y还没有声明。

let [x = 1, y = x] = [];     // x=1; y=1

let [x = 1, y = x] = [2];    // x=2; y=2

let [x = 1, y = x] = [1, 2]; // x=1; y=2

let [x = y, y = 1] = [];     // ReferenceError: y is not defined

二：对象的解构赋值

对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。

let { bar, foo } = { foo: 'aaa', bar: 'bbb' };

foo // "aaa"

bar // "bbb"

let { baz } = { foo: 'aaa', bar: 'bbb' };

baz // undefined 如果解构失败，变量的值等于undefined。

对象的解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量。真正被赋值的是后者，而不是前者。

let { foo: baz } = { foo: 'aaa', bar: 'bbb' };

baz // "aaa"

foo // error: foo is not defined

上面代码中，foo是匹配的模式，baz才是变量。真正被赋值的是变量baz，而不是模式foo。

默认值：

和数组结构一样，默认值生效的条件是，对象的属性值严格等于undefined。

var {x = 3} = {};

x //

var {x, y = 5} = {x: 1};

x //

y //

var {x: y = 3} = {};

y //

var {x: y = 3} = {x: 5};

y //

var { message: msg = 'Something went wrong' } = {};

msg // "Something went wrong"

var {x = 3} = {x: undefined};

x //

var {x = 3} = {x: null};

x // null

三：字符串结的解构赋值

字符串也可以解构赋值。这是因为此时，字符串被转换成了一个类似数组的对象。类似数组的对象都有一个length属性，因此还可以对这个属性解构赋值。

const [a, b, c, d, e] = 'hello';

a // "h"

b // "e"

c // "l"

d // "l"

e // "o"

let {length : len} = 'hello';

len //

四：数值和布尔值的结构赋值

解构赋值时，如果等号右边是数值和布尔值，则会先转为对象。解构赋值的规则是，只要等号右边的值不是对象或数组，就先将其转为对象

let {toString: s} = 123;

s === Number.prototype.toString // true

let {toString: s} = true;

s === Boolean.prototype.toString // true

上面代码中，数值和布尔值的包装对象都有toString属性，因此变量s都能取到值。

结构赋值的用途：

1.交换变量的值

let x = 1;

let y = 2;

[x, y] = [y, x];

2.从函数返回多个值

// 返回一个数组

function example() {

  return [1, 2, 3];

}

let [a, b, c] = example();

// 返回一个对象

function example() {

  return {

    foo: 1,

    bar: 2

  };

}

let { foo, bar } = example();

3.函数参数的定义

解构赋值可以方便地将一组参数与变量名对应起来。

// 参数是一组有次序的值

function f([x, y, z]) { ... }

f([1, 2, 3]);

// 参数是一组无次序的值

function f({x, y, z}) { ... }

f({z: 3, y: 2, x: 1});

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]

es6学习2：变量的解构赋值的更多相关文章

ES6学习之变量的解构赋值
前言:什么是ES6?ECMAScript 6(简称ES6)是JavaScript语言的下一代标准,已经在2015年6月正式发布了.其中相比较于ES5新增了诸多的特性,并且ES6可转换为ES5的语法.- ...
ES6 学习笔记 - 变量的解构赋值
变量的解构赋值学习资料:ECMAScript 6 入门数组的解构赋值基本用法可以从数组中提取值,按照对应位置,对变量赋值.这种写法属于"模式匹配". let [a, b, ...
ES6学习历程(变量的解构赋值)
一.数组的解构赋值 1.举几个例子足以理解 let [a, b, c] = [1, 2, 3]; a:1; b:2; c:3; let [x, , y] = [1, 2, 3]; x:1 y ...
ES6学习4 变量的解构赋值
变量的解构赋值一.数组结构赋值 1.数组结构赋值 let [a, b, c] = [1, 2, 3]; ES6 可以从数组中提取值,按照对应位置,对变量赋值. 1) 本质上,这种写法属于“模式匹配 ...
JavaScript学习笔记 -- ES6学习(三) 变量的解构赋值
1.解构赋值的定义在ES6中,允许按照一定模式,从数组和对象中提取值(所谓解构),然后对变量进行赋值. var a = 1; var b = 2; var c = 3; //等价于 var [a, ...
ES6中的变量的解构赋值，解放我们的双手，实现变量的批量赋值
ES6--变量的解构赋值引言正文一.数组的解构赋值解构失败不完全解构默认值二.对象的解构赋值三.字符串的解构赋值结束语引言变量的解构赋值, 听起来很复杂, 简单点说可以理解成批量 ...
ES6 - 基础学习(3): 变量的解构赋值
解构赋值概述 1.解构赋值是对赋值运算符的扩展. 2.它是一种针对数组或者对象进行模式匹配,然后对其中的变量进行赋值. 3.代码书写上显得简洁且易读,语义更加清晰明了:而且还方便获取复杂对象中的数据字 ...
ES6入门之变量的解构赋值(二)
前言在上一章 ES6入门之let和const命令中我们对ES6的相关语法已经有了初步了解,上一章中我们主要学习了三大部分的内容,let命令的使用,块级作用域,const命令的使用,那么从本篇博客将进 ...
js-ES6学习笔记-变量的解构赋值
1.ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 2.ES6允许写成:let [a,b,c] = [1,2,3];上面代码表示,可以从数 ...
es6基础入门变量的解构赋值
let [a, b, c] = [1, 2, 3]; let [foo, [[bar], baz]] = [1, [[2], 3]]; foo bar baz let [ , , third] = [ ...

随机推荐

【开发笔记】- MySQL EXPLAIN用法和结果的含义
转自:http://blog.chinaunix.net/uid-540802-id-3419311.html explain显示了mysql如何使用索引来处理select语句以及连接表.可以帮助选择 ...
【转载】 C#使用Newtonsoft.Json组件来反序列化字符串为对象
在Asp.Net网站开发的过程中,很多时候会遇到对象的序列化和反序列化操作,Newtonsoft.Json组件是专门用来序列化和反序列化操作的一个功能组件,引入这个DLL组件后,就可使用JsonCon ...
CSS-锚点笔记
注意点: position属性定义建议元素布局所用的定位机制 {position:static/absolute/relative/fixed;} static:默认值,没有定位 absolute: ...
Java的基本知识之线程池篇
1.基本概念 1.共享资源多个线程对同一份资源进行访问(读写操作),该资源被称为共享资源.如何保证多个线程访问到的数据是一致的,则被称为数据同步或资源同步. 2.线程通信线程通信,又叫进程内通信, ...
java自定义注释及其信息提取
转自:https://xuwenjin666.iteye.com/blog/1637247 1. 自定义注解 import java.lang.annotation.Retention; import ...
css display block 和 inline
根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的默认display属性值为“block”,成为“块级 ...
springboot自定义CORS&XSS拦截器
springboot 项目前后端接口,防止xss攻击以及跨域问题解决 1.启动类添加注解 @ServletComponentScan 2.cors的拦截类 package com.longfor.hr ...
windows下用纯C实现一个简陋的imshow：基于GDI
intro 先前实现了GDI显示图像时设定窗口大小为图像大小,不过并没有刻意封装函数调用接口,并不适合给其他函数调用.现在简单封装一下,特点: 纯C 基于GDI,因此只支持windows平台类似于o ...
docker管理监控方案
docker相关管理可分为四类:docker基础功能.docker监控.docker集群管理和docker系统认证管理.docker管理的基础或信息来源都是docker命令行或docker API. ...
TPA测试项目管理系统-测试用例管理
Test Project Administrator(简称TPA)是经纬恒润自主研发的一款专业的测试项目管理工具,目前已广泛的应用于国内二十余个整车厂和零部件供应商.它可以管理测试过程 ...

es6学习2：变量的解构赋值

es6学习2：变量的解构赋值的更多相关文章

随机推荐

热门专题