ECMAScript6(2):解构赋值
来源:互联网 发布:中兴2018校招待遇知乎 编辑:程序博客网 时间:2024/04/27 19:25
相关文章
ECMAScript6 (1):块级作用域
解构赋值
解构赋值简单来说就是 对应位置(数组)或对应键名(对象)的变量匹配过程。如果匹配失败, 对于一般变量匹配不到结果就是 undefined, 对于具有展开运算符(…)的变量结果就是空数组。
数组的解构赋值
var [a, b, c] = [1, 2, 3]; //a=1, b=2, c=3var [, , c] = [1, 2, 3]; //c=3var [x, , y] = [1, 2, 3]; //x=1, y=3var [head, ...tail] = [1, 2, 3, 4]; //head = 1, tail = [2, 3, 4];var [x, y, ...z] = [1]; //x=1, y=undefined, z=[];var [a, [b, c], d] = [1, [2, 3], 4]; //a=1.b=2, c=3, d=4var [a, [b], d] = [1, [2, 3], 4]; //a=1.b=2, d=4
数组的解构赋值可以具有默认值, 在 ES6中对于目标数据使用严格相等(===)比较是否为空(undedined)。如果默认值是表达式, 那么对于该表达式采用惰性求值, 即只有在对应位置为空(undedined)时才执行该表达式。
var [a=1, b] = []; //a=1, b=undefinedvar [a=1, b] = [2, 3]; //a=2, b=3var [a=1, b] = [undefined, 3]; //a=1.b=3var [a=1, b] = [null, 3]; //a=null, b=3var [a=1, b] = [NaN, 3]; //a=NaN, b=3function f(){ console.log("done"); return 2;}var [a=f()] = [1]; //a=1var [a=f()] = []; //a=2, 输出 "done"
解构赋值的右侧表达式在必要的隐式转换后如果不具有 iterator 则遍历失败, 关于 iterator, 具体看iterator部分。这里可以先记住, 左边是数组结构的解构赋值, 右侧可以是数组, 字符串, 集合, Generator 函数, map等。
//字符串var [a, b, c, d] = "123"; //a='1', b='2', c='3', d=undefined//集合var [a, b, c] = new Set(['1', '2', '3']); //a='1', b='2', c='3'//Generatorfunction* fib(){ let a = 1; let b = 1; while(1){ yield a; [a, b] = [b, a + b]; //使用结构赋值实现叠加并交换变量 }}var [a, b, c, d, e, f] = fib(); //a=1, b=1, c=2, d=3, e=5, f=8//mapvar map = new Map();map.set('a', 1);map.set('b', 2);var [a, b] = map; //a=['a', 1], b=['b', 2]
对象的解构赋值
对象的解构赋值与变量位置次序无关, 只取决于键名是否严格相等(===)。如果匹配失败, 结果就是 undefined
var {a, b, f} = {b:2, a:3, d:4}; //a=3, b=2, f=undefinedvar node = { loc: { start:{ x:1, y:2 } }};var {loc: {start: {x:line}}} = node; //line=1
可以在复制时对属性重命名, 但此时原名只用于匹配参数, 不生成变量:
var {name:alias} = {name:'Bob'}; //alias='Bob'console.log(name); //"global"console.log(alias); //"Bob"
对象解构同样可以指定默认值, 默认值生效(或表达式被行)的条件是对应属性值严格等于(===) undefined
var {a:3, b} = {b:2}; //a=3, b=2var {a:3, b} = {a:null, b:2}; //a=null, b=2
解构嵌套对象父属性不存在会报错:
var {foo:{bar}} = {ba: 2}; //报错
解构对象如果和声明分开, 独立成为一行要加圆括号, 就想用 eval 解析 JSON 字符串的时候一样。因为系统会把一行开头花括号默认作为块级作用域的开始, 而不是对象的开始。
var a, b;({a, b} = {a:2, b:10}); //a=2, b=10{a, b} = {a:2, b:10}; //报错//以下表达式无意义, 但没有错({}=[1, 2]);({}="abc");({}=[]);
注意, 除了这样的情况, 不要滥用圆括号
右侧变量通过隐式类型转换可以转为对象的情况下也可以结构赋值:
var {toString: s} = 123; //s=Number.prototype.toString
技巧: 解构的用处很多, 包括交换变量, 简化传参(可带默认值),
//参数传递function f([x, y, z=4]){ return [x+1, y+2, z+3];}var [a, b, c] = f([1, 2]); //a=2, b=4, c=7[[1, 2], [3, 4]].map(([a, b]) => a + b); //返回 [3, 7]
//交换变量var a=2, b=4;[a, b] = [b, a]; //a=4, b=2
- ECMAScript6(2):解构赋值
- ECMAScript6笔记:变量的解构赋值
- ECMAScript6-学习笔记(变量的解构赋值)
- ECMAScript6.0学习之第四篇变量的解构赋值
- ECMAScript6(ES6)标准之解构赋值语法及应用
- [Wondgirl]ECMAScript6(ES6)(四)数组的解构赋值
- [Wondgirl]ECMAScript6(ES6)(五)对象的解构赋值
- es6解构赋值(2)
- 进军es6(2)---解构赋值
- 解构赋值
- 解构赋值
- 解构赋值
- 解构赋值
- ES6学习笔记2--解构赋值
- 【ES6系列】解构赋值
- ES6 destructuring 解构赋值
- es6 chapter3 解构赋值
- ES6 解构赋值用途
- 典型数据库架构设计与实践 | 架构师之路
- Spark Scheduler模块源码分析之DAGScheduler
- java自动运行任务job---quartz的运用
- Android性能优化全方面解析
- MYSQL的UPDATE子查询,UPDATE时避免使用子查询
- ECMAScript6(2):解构赋值
- ORACLE(DEDICATED)式(SHARE)的区别
- 文章标题
- php进阶之数据库设计/ 选择合适的表引擎
- clumsy模拟客户端网络差的场景的使用
- 设计模式详解——策略模式
- JEESZ分布式框架简介--技术介绍文档
- java--数组的复制
- 多网卡bond模式