ES6(二) Destructuring-变量的解构赋值
1、解构的含义
允许按照一定的模式,从数组和对象中取值,对变量进行赋值,称为解构。
解构赋值时,只要等号右边的值不是对象,就先将其转换成对象。
本质上,这种写法属于 “模式匹配”,只要两边模式相同,左边的变量就会被赋予对应的值。
let [head,...tail]=[, , , ]; //不完全解构,左边的模式,只匹配一部分的等号右边的数组
解构后: head=1,tail=[2,3,4]。
2、解构的限制。
(1)undefined与null 无法转换成对象,解构赋值就会报错。
let { y } = null; // Cannot match against 'undefined' or 'null'.
(2)如果等号的右边不是数组,转换对象以后不具备 Iterator接口,或本身就不具备Iterator接口,
即某种数据结构具有Iterator接口,都可以采用数组形式的解构赋值。
let [foo]=; //undefined is not a function,报错的行数会指向上一行代码 let [foo1,foo2]=new Set(['a', 'b', 'c']);
3、解构赋值时, 左边参数允许默认值。
(1)ES6内部使用严格相对运算符,因此,若defaultValue!==undefined,默认值失效。
var [x=]=[undefined]; //x=1
var [y=]=[null]; //y=2
(2)赋予默认值时,左边参数 可以引用解构赋值的其他变量,但该变量必须已经声明.
let [x1=y1,y1=]=[]; //error,因为此时y1还没有值,应该如此写: let[y=1,x=y]=[];
4、对象解构赋值
对象属性没有次序,变量名必须与属性相同。
let { fishInstance,dogInstance}={
dogInstance: {
name: 'dog',
moveType: 'run'
},
fishInstance{
name:'fish'
}
}
5、变量名与属性名不一致,必须写成下面这样。
真正被赋值的是后者,而不是前者。
let { oldName:newName}={oldName: '', bar: 'barTest'}
6、
let tree = {
root: {
leaf: {
left: ,
right:
}
}
}
var { root:{leaf:{left}} }=tree; //此时, root 与 leaf 都是模式,不会被赋值,只有leaf是变量
console.log(root); /*root is not defined*/
7、对象的解构也可以指定默认值,生效的条件是对象的属性严格等于 undefined
如果解构模式是嵌套的对象,而且子对象所在的父属性不存在,则error。
let {x=}={}; let { foo: { name }}={bar: 'bar'};
将一个已经申明的变量用于解构赋值,必须非常小心。
let temp;
{temp}= {x: }; /error ( { temp }={x: } ); //使用圆括号,避免JS引擎将 "{ }" 解释为代码块
8、字符串解构赋值,会将字符串转换成类似数组的对象。
const [a,b,c,d,e]='hello world';
let { length:strLen }='world';
9、解构 数值和布尔值时,先转换成对象
let { toString:s1 } =; //s1===Number.prototype.toString let { toString: s2}=true; //s2===Boolean.prototype.toString
解构使用场景
(1)可以很方便的将 现有对象的方法,赋值给某个变量.
let { log: selfLog}=console;
selfLog('test log');
(2)交换变量.
[x,y]=[y,x];
(3)从函数返回多个值
function getPerson() {
return {
name: 'jack',
age:
}
} var {name,age}=getPerson();
(4) 定义函数参数后,可以不按顺序传入
function setPerson({name,age,address}) { } setPerson({age: , address: 'china', name: 'Tom'});
(5)提取JSON对象中的数据
let jsonData = {
age: ,
name: 'Tom',
son: [
'little Jack',
'little Tom'
]
}; let { son:child }=jsonData;
(6)遍历map结构
var map =new Map(); for(let [key,value] of map) { } for(let [,value] of map ) { }
(7)获取模块的指定方法
const { SourceMapConsumer }= require('');
ES6(二) Destructuring-变量的解构赋值的更多相关文章
- ES6学习之变量的解构赋值
前言:什么是ES6?ECMAScript 6(简称ES6)是JavaScript语言的下一代标准,已经在2015年6月正式发布了.其中相比较于ES5新增了诸多的特性,并且ES6可转换为ES5的语法.- ...
- 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) 本质上,这种写法属于“模式匹配 ...
- ES6中的变量的解构赋值, 解放我们的双手,实现变量的批量赋值
ES6--变量的解构赋值 引言 正文 一.数组的解构赋值 解构失败 不完全解构 默认值 二.对象的解构赋值 三.字符串的解构赋值 结束语 引言 变量的解构赋值, 听起来很复杂, 简单点说可以理解成批量 ...
- ECMAScript 6 入门学习笔记(二)——变量的解构赋值
一.数组的解构赋值 let [foo, [[bar], baz]] = [1, [[2], 3]]; ①可多不可少,等号的右边是数组 let [x, y] = [1, 2, 3]; //可以 let ...
- ES6 学习笔记 - 变量的解构赋值
变量的解构赋值 学习资料:ECMAScript 6 入门 数组的解构赋值 基本用法 可以从数组中提取值,按照对应位置,对变量赋值.这种写法属于"模式匹配". let [a, b, ...
- ES6入门之变量的解构赋值(二)
前言 在上一章 ES6入门之let和const命令中我们对ES6的相关语法已经有了初步了解,上一章中我们主要学习了三大部分的内容,let命令的使用,块级作用域,const命令的使用,那么从本篇博客将进 ...
- JavaScript学习笔记 -- ES6学习(三) 变量的解构赋值
1.解构赋值的定义 在ES6中,允许按照一定模式,从数组和对象中提取值(所谓解构),然后对变量进行赋值. var a = 1; var b = 2; var c = 3; //等价于 var [a, ...
- 《ECMAScript 6 入门》【二、变量的解构赋值】(持续更新中……)
前言: 让我们看下es6的新语法解构,跟模式匹配类似.一.数组的解构赋值 举个例子给多个变量赋值的写法: var a =1;var b =2;var c =3; 需要写多个变量特别麻烦,我们先使用以前 ...
- es6基础入门变量的解构赋值
let [a, b, c] = [1, 2, 3]; let [foo, [[bar], baz]] = [1, [[2], 3]]; foo bar baz let [ , , third] = [ ...
随机推荐
- [安全]PHP能引起安全的函数
php中需要禁用以下函数来提高安全性 打开php.ini 找到 disable_functions .然后禁用以下函数 [C] 纯文本查看 复制代码 ? 1 disable_functions = ...
- java把html标签字符转普通字符(反转换成html标签)(摘抄)
下面是java把html标签字符转换,我用了spring 包中的 org.springframework.web.util.HtmlUtils 了解了源代码并且进步了使用,发现写得真不错...同时也可 ...
- 深入理解java虚拟机_第三章(上)----->垃圾收集器与内存分配策略
1. 前言 这一版块内容比较多,分为两篇文章来做笔记.本文讲述上半部分垃圾收集部分;下一篇文章写内存分配部分. 概述 对象已死吗? 引用技术算法 可达性分析算法 再谈引用 两次标记 回收方法区 2. ...
- mongoDB之数据库操作
mongoDB中的数据库操作 查看数据库名称: db 查看所有数据库: show dbs 切换数据库: use 数据库名称 注意:如果数据库不存在,则指向数据库,但不会创建.直到插入数据或者是创建集合 ...
- 剑指Offer_11_旋转数组的最小数字
题目描述 把一个数组最开始的若干个元素搬到数组的末尾,我们称之为数组的旋转.输入一个递增排序的数组的一个旋转,输出一个旋转数组的最小元素. 例如: {3,4,5,1,2} 为 {1,2,3,4,5} ...
- 《iOS Human Interface Guidelines》——Multitasking
多任务处理 多任务处理让人们在屏幕上(以及合适的iPad模式)查看多个app,而且在近期使用的app中高速地切换. 在iOS 9中.人们能够使用多任务处理UI(例如以下所看到的)来选择一个近期使用的a ...
- Linux性能及调优指南(翻译)之Linux进程管理
本文为IBM RedBook的Linux Performanceand Tuning Guidelines的1.1节的翻译原文地址:http://www.redbooks.ibm.com/redpap ...
- java多线程编程核心技术——第七章补漏拾遗
本章主要知识点: 1)线程组的使用 2)如何切换线程状态 3)SimpleDateFormat类与多线程的解决方法 4)如何处理线程异常. 这本书基本来到了终点,其实在第四章来说,核心(基础)的线程知 ...
- 浅析node.js
大家好,今天来给大家讨论node.js这个东西,说起这个东西啊,可能大家已经很熟悉了,因为现在市场上运用的越来越广泛,毕竟它的优点还是有目共睹的! 那么,什么是node.js呢?官方给出了这样的定义: ...
- Linux:快速找到占用CPU过高的Thread
1.通过top命令找到高耗CPU的进程,记下PID 2.使用命令ps -mp PID -o THREAD,tid,time找到高耗CPU的那些线程 3.jstack PID 4.对每个高耗CPU的线程 ...