ES6 解构赋值

一：何为解构赋值

从数组、对象、字符串中提取值，对变量进行赋值，这种方法称之为“解构赋值”

二:解构赋值的分类

1. 数组的解构赋值

2. 对象的解构赋值

3. 字符串的解构赋值

4. 数值和布尔值的解构赋值

5. 函数参数的解构赋值

6. 圆括号问题

7. 用途

---------------------------------------------------------------------------------------------------

1 数组的解构赋值 [数组对应数组]

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。

如果解构不成功，变量的值就等于 undefined 。

A 完全解构

let [a, b, c] = [1, 2, 3];

let [foo, [[bar], baz]] = [1, [[2], 3]];

foo // 1 bar // 2 baz // 3

let [ , , third] = ["foo", "bar", "baz"];

third // "baz"

let [x, , y] = [1, 2, 3];

x // 1 y // 3 let [head, ...tail] = [1, 2, 3, 4];

head // 1 tail // [2, 3, 4]

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

x // "a" y // undefined z // []

B 不完全解构

let [x, y] = [1, 2, 3];

x // 1 y // 2

let [a, [b], d] = [1, [2, 3], 4];

a // 1 b // 2 d // 4

C 解构不成功

let [foo] = 1;

let [foo] = false;

let [foo] = NaN;

let [foo] = undefined;

let [foo] = null;

let [foo] = {};

D 关于默认值

let [foo = true] = [];

foo // true

let [x, y = 'b'] = ['a']; // x='a', y='b'

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

let [x = 1] = [undefined]; x // 1

如果一个数组成员是 null，默认值就不会生效，因为 null 不严格等于 undefined。

let [x = 1] = [null]; x // null 如果默认值是一个表达式，那么这个表达式是惰性求值的，即只有在用到的时候，才会求值。

function f() {

return "我是函数的返回值";

}

let [x =f()] = ["我是新赋的值"];

console.log(x);

默认值可以引用解构赋值的其他变量，但该变量必须已经声明

let [x=1, y = x] = []; // x=1; y=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: y is not defined

2 对象的解构赋值

数组的元素是按 次序 排列的，变量的取值由它的 位置 决定；

对象的属性没有次序， 变量 必须与 属性 同名，才能取到正确的值。

let { foo, bar } = { foo: "aaa", bar: "bbb" };

foo // "aaa" baz // "undefined"

1.别名的引用:

let { foo:bar } = { foo: 'aaa', baz: 'bbb' };

对象的解构赋值的内部机制，是先找到同名属

性，然后再赋给对应的变量。真正被赋值的是后

者，而不是前者，前者 foo ： bar bar 只是一

个别名        

bar // "aaa"

let obj = { first: 'hello', last: 'world' };

let { first: f, last: l } = obj;

f // 'hello' l // 'world'

2.解构也可以用于嵌套结构的对象

let obj = { p: [

'Hello',

{ y: 'World' }

]

};

let { p, [x, { y }] } = obj;

x // "Hello" y // "World"

let obj = {

p: [

'Hello',

{ y: 'World' }

]

};

let {p, p: [x, { y }] } = obj;

x // "Hello"

y // "World"

p // ["Hello", {y: "World"}]

3.对象的解构也可以指定默认值

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

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

var {x,y = 3} = {}; y // 3

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

{ message:msg = 'study hard at ES6' } = {}; msg // " study hard at ES6"

★★ 默认值生效的条件是，对象的属性值严格等于 undefined ★★ 。

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

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

★ 已经声明的变量如何解构赋值

// 错误的写法

let x;

{x} = {x: 1};

// SyntaxError: syntax error

// 正确的写法

let x;

({x} = {x: 1});

// 放在一个圆括号内即可解决

对象的解构赋值，可以很方便地将现有对象的方法，赋值到某个变量

let json ={

name:'Strive',

age:18,

job:'码农'

};

let {name,age,job}=json;

console.log(name,age,job);

3 字符串的解构赋值

1. 字符串也可以解构赋值。这是因为此时，字符串被转换成了一个类似数组的对象。

a // "h" b // "e" c // "l" d // "l" e // "o"

2 字符串属性解构

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

4 数组和布尔值和解构赋值[详 const [a, b, c, d, e] = 'hello';

见 api]

5 函数的解构赋值

a. 函数参数的解构

function add([x, y]){

return x + y;

}

add([1, 2]); // 3

b 函数参数的解构使用默认值

function move({x = 0, y = 0} = {}) {

return [x, y];

}

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

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

move({}); // [0, 0]

三、解构赋值的应用

（1）交换变量的值

let x = 1;

let y = 2;

[x, y] = [y, x];

（2）从函数或数组返回变量的值

// 返回一个数组

function example() {

return [1, 2, 3];

}

let [a, b, c] = example();

// 返回一个对象

function example() {

return {

foo: 1,

bar: 2

};

}

let { foo, bar } = example();

（3）函数参数的定义

（4）提取 JSON 数据

（5）函数参数的默认值