# ES6变量的解构赋值

·  阅读 107

## 1. 数组的解构赋值

``````var foo = 'abc'
var bar = 123

``````let [foo, bar] = ['abc', 123]

``````let [foo, [[bar, baz], qux]] = ['147', [['258', '369'], 'abc']]
foo // '147'    bar // '258'
baz // '369'    qux // 'abc'

let [, , foo] = ['147', '258', '369']
foo // '369'

const [foo, bar, ..., qux ] = ['a', 'b', 'c', 'd', 'e'];
foo // 'a'
bar // 'b'
qux // 'e'

let [foo, [bar, ...baz]] = ['a', ['b', 'c', 'd', 'e']]
foo // 'a'
bar // 'b'
baz // ['c', 'd', 'e']

let [x, y, ...z] = ['a'];
x // "a"
y // undefined
z // []

``````var [baz] = [];
var [qux, baz] = [1];

``````let [foo, [bar], qux] = [1, [2, 3], 4]
foo // 1
bar // 2
qux // 4

``````// 报错
let [qux] = 1;
let [qux] = false;
let [qux] = undefined;

``````let [x, y, z] = new Set(["a", "b", "c"]);
x // "a"

``````function* fibs() {
var a = 0;
var b = 1;
while (true) {
yield a;
[a, b] = [b, a + b];
}
}

var [first, second, third, fourth, fifth, sixth] = fibs();
sixth // 5

``````[x, y = 'b'] = ['a']; // x='a', y='b'
[x, y = 'b'] = ['a', null]; // x='a', y=null
[x, y = 'b'] = ['a', undefined]; // x='a', y='b'

``````function f() {
console.log('aaa');
}

let [x = f()] = [1];

``````let [x = 1, y = x] = [2];    // x=2; y=2
let [x = 1, y = x] = [1, 2]; // x=1; y=2
let [x = y, y = 1] = [];     // ReferenceError

## 2. 对象的解构赋值

``````const { foo, bar } = { foo: "a", bar: "b" };
foo // "a"
bar // "b"

``````const { bar, foo } = { foo: "aaa", bar: "bbb" };
foo // "aaa"
bar // "bbb"

const { qux } = { foo: "aaa", bar: "bbb" };
qux // undefined

``````let obj = { first: 'hello', last: 'world' };
let { first: f, last: l } = obj;
f // 'hello'
l // 'world'

``````const {foo: foo, bar: bar} = {foo: "a", bar: "b"}

``````let foo;
({foo} = {foo: 1}); // 成功

let baz;
{bar: baz} = {bar: 1}; // 报错

``````const foo = {
k: [
'123',
{
p: '456'
}
]
}
const {k: [a, {p: b}]} = foo;
a // '123'
b  // '456'
k // error: k is undefined
p // error: p is undefined

``````const o = {}, a = [];
({name: o.name, age: a[0]} = {name: 'Miku', age: 10})

o // {name: 'Miku'}
a // [10]

``````var {x = 3} = {};
x // 3

var {x, y = 5} = {x: 1};
x // 1
y // 5

``````var {x = 3} = {x: undefined};
x // 3

var {x = 3} = {x: null};
x // null

``````const {promise1, promise2} = fn()
Promise.all(promise1, promise2).then(...)

## 3. 函数参数的解构赋值

``````function add([x, y]){
return x + y;
}

``````function move({x = 0, y = 0} = {}) {
return [x, y];
}

move({x: 3, y: 8}); // [3, 8]
move({x: 3}); // [3, 0]
move({}); // [0, 0]
move(); // [0, 0]

``````[1, undefined, 3].map((x = 'yes') => x);
// [ 1, 'yes', 3 ]

## 4. 其他类型的解构赋值

``````const [a, b, c, d, e] = 'hello';
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"

``````let {length : len} = 'hello';
len // 5

``````let {toString: s} = 123;
s === Number.prototype.toString // true

let {toString: s} = true;
s === Boolean.prototype.toString // true

``````let { prop: x } = undefined; // TypeError
let { prop: y } = null; // TypeError

## 5. 应用场景

``````[foo, bar] = [bar, foo];

``````function fn () {
return {foo: '123', bar: '234'}
}
const {foo, bar} = fn()

``````function fn ({foo, bar, qux}) {
return `\${foo} \${bar} \${qux}!`
}
const param = {
foo: 'Welcome',
bar: 'to',
qux: 'javascript'
}
console.log(fn(param))
//Welcome to javascript!

``````const person = {
name: 'Miku',
age: 1,
birth: '1996-2-18'
}
let {name, age, birth} = person;
console.log(name, age, birth)
//Miku 1 1996-2-18

``````const areas = new Map()
areas.set('浙江省', '杭州市')
areas.set('广东省', '广州市')

for (let [key, value] of areas) {
console.log(`\${key}-\${value}`);
}
//浙江省-杭州市
//广东省-广州市

node module.exports/require函数和ES6 export/import

``````//node module.exports/require
const person = {name: 'Miku', age: 1}
const student = {grade: 3, class: 2}
module.exports = {person, student}
const {person} = require('......')
console.log(person)
//{name: 'Miku', age: 1}

//ES6 export/import
export const fnCollect = {
fn1 () {
return 'this is fn1'
},
fn2 () {
return 'this is fn2'
}
}
//import
import {fn1} from '......'
console.log(fn1())
//this is fn1