ES6特性2—变量解构赋值
一、数组的解构赋值
var [a, b, c] = [1, 2, 3]; 本质为“模式匹配”,只要等号两边模式相同,左边变量会被赋予对应的值。 let[, , third] = ['foo', 'bar', 'baz']; third // "baz" let[head, ...tail] = [1, 2, 3, 4]; head //1 tail //[2,3,4] 不完全解构: let[x,y] = [1,2,3]; x //1 y //2 let[a, [b], d] = [1, [2,3], 4]; a //1 b //2 d //4
如果等号右边不是数组。(严格说,不是可遍历的解构),则报错
let [foo] = 1; let [foo] = false; let [foo] = NaN; let [foo] = undefined; let [foo] = null; 都会报错
解构赋值允许指定默认值( 默认值生效的条件是,对象的属性值严格等于undefined。)
[x, y='b'] = ['a'] //x='a', y='b' [x, y='b'] = ['a', undefined] //x='a', y='b'
二、对象的解构赋值
var {foo, bar} = {foo: "aaa", bar: "bbb"};foo // "aaa"bar // "bbb"
对象解构跟数组解构不同。数据结构按位置取值,对象解构按属性名取值;
var {bar, foo} = {foo: "aaa", bar: "bbb"};foo // "aaa"bar // "bbb"var {taz} = {foo: "aaa", bar: "bbb"};baz //undefined
如果变量名与属性名不一致,必须写成这样
var { foo: baz } = { foo: "aaa", bar: "bbb" };baz // "aaa"
解构也可以用于嵌套解构对象
var obj = { p: [ "Hello", {y: "World"} ]};var { p: [x,{y}] } = obj;x // "Hello"y // "World"
如果解构失败,变量值等于undefined
三、字符串解构赋值
const[a, b] = 'hi';a //"h"b //"i"
可以对数据长度属性解构赋值
let{length: len} = 'hello';len //5
四、函数参数解构赋值
function add([x, y]){ return x + y;}add([1,2]);
函数add参数不是数组,而是通过解构得到变量x和y。
函数参数解构可以使用默认值
function move({x = 0, y = 0} = {}){ return [x,y];}move({x: 3, y: 8}); //[3, 8]move({x: 3}); //[3, 0]
五、圆括号问题
解构解析对编译器来说并不容易,尽量少用圆括号。
六、用途
1、交换变量值
[x, y] = [y, x];
2、从函数返回多个之=值
(1)返回一个数组 function example(){ return [1, 2, 3] ; } var [a,b,c] = example(); (2)返回一个对象 function example(){ return { foo: 1, bar: 2} } var {foo , bar } = example;
3、函数参数定义,上面有
4、提取json数据
var jsonData = { id: 42, status: 'ok', data: [867,5309]}let { id, status, data: number } = jsonData;console.log(id, status, number)//42, ok, [867, 5309]
5、函数参数默认值,具体见上面
6、遍历Map解构
var map = new Map();map.set('first': 'hello');map.set('second': 'world');for( let [key, value] of map ){ console.log(key + 'id' + value);}// first is hello// second is world
如果只获取键名或者只获取键值
//获取键名
for(let [key] of map){ // ...}
//获取键值
for(let [,value] of map){ // ...}
7、输入模块的指定方法
const { SourceMapConsumer, SourceNode } = require("source-map");