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');

 

posted @ 2017-02-09 16:34  李啸虎  阅读(181)  评论(0编辑  收藏  举报