ES6个人学习整理(三)——解构赋值
2015-12-16 00:15
405 查看
解构赋值
ES6允许按照一定的模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring)。 如果解构不成功,就会赋值undefined
数组
解构时按顺序排列
let [a, b, c] = [1, 2, 3]; // a = > 1; b => 2; c => 3; let [a, [b, c], d] = [1, [2, 3], 4]; // a => 1; b => 2; c => 3; d => undefined; // 当等号左边变量少于等号右边值时(包括变量缺省和变量个数不足), 仍可解构成功,成为不完全解构 let [a, , c] = [1, 2, 3]; // a => 1; c => 3; // 多余参数的解构 let [a, b, ...c] = [1, 2, 3, 4, 5]; // a => 1; b => 2; c => [3, 4, 5]; // 解构不成功的情况 let [a] = []; // a => undefined; let [a, b] = [1] // a => 1; b => undefined; // 当等号右边不是数组或类数组(即可遍历的结构) 将会报错 let [a] = 1; let [a] = false; let [a] = NaN; let [a] = undefined; let [a] = null; let [a] = {}; // TypeError: Invalid attempt to destruture non-iteable instance
对象
解构时无次序,属性名必须相同
let {a, b} = {a: 1, b: 2} // a => 1; b => 2; let {a, b, c} = {a: 1, c: 2, d: 3} // a => 1; b => undefined; c => 2; d => d is not defined let {a: b} = {a: 1, b: 2} // a => a is not defined; b => 2
字符串
相当于把字符串切割成一个数组,顺位取
let [a, b, c] = 'string'; // a => s; b => t; c => r; let [a, b, c] = '字符串也可以解构'; // a => 字; b => 符; c => 串; let [a, b, c] = '字符'; // a => 字; b => 符; c => undefined;
函数参数
let a = [1, 2]; function log ([a, b, c]) { // 相当于 let [a, b, c] = [1, 2]; console.log(a, b, c); // a => 1; b => 2; c => undefined; } log(a); function alert({title = 'title', content = 'content', button = 'button'}) { console.log(title, content, button); } alert({title: '123'})
默认值
解构赋值也允许使用默认值
let [a = 1] = [2]; let [a = 1] = [NaN]; let [a = 1] = [true]; let [a = 1] = ['string']; let [a = 1] = [null]; let [a = 1] = [undefined]; // 以上几种情况只哟传入的值为undefined时,默认值才会生效 // null 和 NaN 并不等于 undefined // 如果默认值为表达式,那这个表达式是惰性求职的 let [a = b()] = [1]; function b() { // 无输出结果 console.log('验证是否为惰性求值'); } let b = 1; let [a = ++b] = ['string']; // a => string, b => 2 let [a = ++b] = [undefined]; // a => 2, b => 2
用途
// 交换宾变量的值 let [x, y] = [1, 2]; // x => 1; y => 2; [y, x] = [x, y]; // x => 2; y => 1; // 从数组或者json中提取值 function params() { return [1, 2, 3]; } let [a, b, c] = params(); let obj = { a: 1, b: 2, c: 3 } let {a, b, c} = obj; // 函数参数的默认值 function alert({title = 'title', content = 'content', button = 'button'}) { console.log(title, content, button); } alert({title: '123'}); // 导入模块的指定值 import {A, B} from './const'
相关文章推荐
- hdu1069 Monkey and Banana
- MAC 上 mysql 的编码设置
- STL_2: 模板_2_函数模板
- android-Hardware Acceleration
- hdu 1301 Jungle Roads (最小生成树)
- React 万能的函数表达式
- 使用Promise解决多层异步调用的简单学习
- An Important Pointer Concept
- strcpy,strcmp,strcat,strlen的实现以及大概介绍(下)
- Java 不定长度参数
- java设计优化--装饰者模式
- oracle ora-00054:resource busy and acquire with nowait specified解决方法
- 合并字符串(动态内存申请)
- 做个备忘(linux重装重要文件)
- 程序之路的开始
- jQuery中ready与load事件的区别
- [傅里叶变换及其应用学习笔记] 十三. 分布的傅里叶变换
- HSRP
- java多线程网络服务器端向客户端发送文件
- jersy服务,将图片发送另个服务器,再将异步返回