一:数组的解构赋值
ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring)。
本质上,这种写法属于“模式匹配”,只要等号两边的模式相同,左边的变量就会被赋予对应的值。
如果解构不成功,变量的值就等于undefined。
解构赋值不仅适用于var命令,也适用于let和const命令。
例一:
var [ a , b ,c ] = [ 1 , 2 , 3 ] ;
等价于
var a = 1;
var b = 2;
var c = 3;
例二:
var [ foo,[ [ bar ],baz] ] = [ 1,[ [ 2 ],3] ] ;
foo// 1;
bar// 2;
baz// 3
var [ ,,third ] = [ "foo","bar","baz" ];
third // "baz"
var [ head,...tail ] = [ 1,2,3,4 ];
head // 1;
tail // [2, 3, 4]
例三:
解构赋值允许指定默认值。
var [ foo = true ] = [ ];
foo // true
[ x , y = ' b ' ] = [ 'a' ]
// x='a', y='b'
[ x , y = 'b ' ] = [ ' a ' , undefined ]
// x='a', y='b'
例四:
也适用于let和const命令。
let [ v1 , v2 ,..., vN ] = array ;
const [ v1 , v2 ,..., vN ] = array ;
例五:
Set结构,也可以使用数组的解构赋值。
[ a , b , c ] = new Set ( [ " a "," b "," c " ] );
a // ' a '
二:对象的解构赋值
对象的解构与数组有一个重要的不同。
数组的元素是按次序排列的,变量的取值由它的位置决定;
而对象的属性没有次序,变量必须与属性同名,才能取到正确的值。
例一:
var { foo , bar } = { foo : " aaa ", bar : " bbb " };
foo // "aaa";
//和顺序无关
var {bar, foo } = { foo : " aaa ", bar : " bbb " };
foo // "aaa";
//变量没有对应的同名属性
var {baz} = { foo : " aaa ", bar : " bbb " };
baz // undeefined
例二:
如果变量名与属性名不一致,必须写成下面这样。
var { foo : baz } = { foo : " aaa ", bar : " bbb " };
baz // 'aaa'
例三:
解构也可以用于嵌套结构的对象。
var o = {
p : [
' hello ',
{ y: ' world ' }
]
};
var { p : [ x , { y } ] } = o;
x // hello;
y // world;
例四:
对象的解构也可以指定默认值。
var { x = 3 }={ };
x //3
var { x , y = 5 } = { x : 1 };
console.log( x , y )// 1 , 5
例五:
要将一个已经声明的变量用于解构赋值,必须非常小心。
//错误写法
var x;
{x} = {x:1};
// SyntaxError: syntax error
//正确写法
( {x} )={x:1};
// 或者
( {x} = {x:1} );
上面的写法会报错,因为JavaScript引擎会将{ x } 理解成一个代码块,从而发生语法错误。只有不将大括号写在行首,避免JavaScript将其解释为代码块,才能解决这个问题。
例六:
对象的解构赋值,可以很方便地将现有对象的方法,赋值到某个变量。
let { log , sin , cos } = Math ;
上面代码将Math对象的对数、正弦、余弦三个方法,赋值到对应的变量上,
三:解构赋值用途
(1)从函数返回多个值
例一:
// 返回一个数组
function example () { return[ 1 , 2 , 3 ]; }
var [ a , b , c ] = example();
// 返回一个对象
function example () {
return { foo : 1 , bar : 2 };
}
var { foo , bar } = example ();
(2)函数参数的定义
function f ( { x , y , z } ) {...}
f ( { x : 1, y : 2 ,z : 3 } )
(3)遍历Map结构
var map = new Map();
map.set('first','hello');
map.set('second','world');
for ( let [ key , value ] of map ) {
console.log( key + " is " + value );
}
// first is hello
// second is world
如果只想获取键名,或者只想获取键值,可以写成下面这样。
// 获取键名
for( let [ key] of map ) {
// ...
}
// 获取键值
for( let [ ,value] of map ) {
// ...
}