ECMAScript 6----变量的解构赋值
此分类为学习ECMAScript 6的笔记,主要参考《ECMAScript 6 入门》
ES6允许按照一定的模式,从数组和对象中提取值,对变量进行赋值。
数组的解构赋值
var [a, b, c] = [1, 2, 3];
本质上属于模式匹配,只要等号两边模式相同,便可进行赋值。
另一种情况是不完全解构,等号左边的模式之匹配一部分等号右边的模式,这样依旧可以解构成功。
let [a, b] = [1, 2, 3]; a // 1 b // 2 let [a, [b], c] = [1, [2, 3], 4]; a // 1 b // 2 c // 4
如果等号右边不是可比案例结构,那么将会报错。
解构同时适用于var,let,const命令。
解构允许指定默认值。
var [foo = true] = []; foo // true var [x, y = 'b'] = ['a']; x // a y // b var [x = 'a', y = 'b'] = ['c']; x // c y // b
如果一个数组成员不严格等于 undefined ,默认值不会生效。
var [a = 1] = []; a // 1 var [b = 2] = [null]; b // null
如果默认值是一个表达式,这个表达式是惰性求值的,只有用得上默认值时才会求值,能取到值时表达式不会求值。
function f() { console.log(123); } var [a = f()] = [1]; a // 1
对象的结构赋值
解构赋值同样应用于对象。
var { foo, bar } = { bar: 456, foo: 123 } foo // 123 bar // 456
由于对象的属性不存在顺序,所以赋值时变量名与对象中的属性名必须相同,才能完成赋值。
如果变量名与属性名不一样,要写成下面这样。
var obj = { foo: 123, bar: 456 }; var { foo: f, bar: b } = obj; f // 123 b // 456
这实际上说明了,对象的解构赋值是下面形式的简写。
var { foo: foo, bar: bar } = { foo: 123, bar: 456 }
内部机制是先找到同名属性,在赋给对应变量的值。真正被复制的是后者,而不是前者。
对象的解构赋值也可用于嵌套的对象。
对象的解构也可指定默认值,默认值生效的条件时对象的属性值严格等于undefined,与数组相同。
字符串的解构赋值
字符串也可解构赋值,因为此时被转换成为一个类数组的对象。
var [a, b, c, d, e] = 'hello'; a // 'h' b // 'e' c // 'l' d // 'l' e // 'o'
字符串有一个 length 属性,也可用于解构赋值。
var { length: len } = 'hello'; len // 5
数字和布尔值的解构赋值
数字和布尔值进行解构赋值时,要先转为对象。
let {toString: s} = 123; s === Number.prototype.toString // true let (toStringL b} = true; b === Boolean.prototype.toString // true
解构赋值的规则是,等号右边如果不是对象,就先转化为对象。undefined 和 null 不可转化为对象,所以对这两个进行解构赋值会报错。
let {prop: x} = undefined; // Uncaught TypeError: Cannot match against 'undefined' or 'null'. let {prop: y} = null; // Uncaught TypeError: Cannot match against 'undefined' or 'null'.
函数参数的解构赋值
函数的参数也可以进行解构赋值。
function add([x, y]) { return (x + y); } add([1, 2]); // 3 [[1, 2], [3, 4]].map(([x, y]) => (x + y)); // [3, 7]
输入模块的制定方法
加载模块时经常需要引入模块内的不同方法,解构赋值可以进行很清晰的引入。
let {funcA, funcB} = require('source-map');