JavaScript解构赋值(代码说明ES6数组, 对象, 函数的解构赋值)

解构赋值

es6为我们对变量赋值提供了新的方式.


方式1 :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//ES5
var a = 1;
var b = 2;
var c = 3;
//这是在es6之前的赋值方式
//ES6
var [a,b,c] = [1,2,3];
console.log(a,b,c);
//变量会分别辅助到a,b,c中去, 因此输出结果为1,2,3;
const arr = ['a', 'b', 'c'];
const [name1, name2, name3] = arr;
//当然对于const, 和let的解构赋值也是可以的;
console.log(name1);
console.log(name2);
console.log(name3);


方式2 :
本质是上述匹配属于一种模式匹配, 也就是只要等号两边的模式相同,左边的变量就会被赋予对应的值。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
let [foo,[[bar],baz]] = [1,[[2],3]];
console.log(foo,bar,baz);
//输出, 1 2 3
let [x,,y] = [1,2,3];
let [head,...tail] = [1,2,3,4,5];
// ...tail 把后续元素当成数组 如果 没有后续元素那么就是空数组。
let [a,b,...z] = ['a'];
console.log(x,y);
//输出, 1 3
console.log(head,tail);
//输出, 1 Array(4)
console.log(a,b,z);
//输出, a undefined Array(0)

如下情况会报错 右边不是数组(或者严格地说,不是可遍历的结构)

1
2
3
4
5
6
let [foo] = 1;
let [foo] = false;
let [foo] = NaN;
let [foo] = undefined;
let [foo] = null;
let [foo] = {};

方式3:

默认赋值
只有右侧的值严格等于undefined的时候才生效。

1
2
3
4
5
6
7
8
9
10
var [foo = true] = [];
console.log(foo);//true
var [x1, y1 = 'b'] = ['a'];
console.log(x1,y1);//a, b
var [x2, y2 = 'b'] = ['a',undefined];
console.log(x2,y2);//a, b
//null 不等于undefined 所以不生效
var [x3 = 1] = [null];
console.log(x3);//null

方式4:

惰性求值 只有在用到的时候,才会求值

1
2
3
4
5
6
7
function f () {
return 'aaa';
}
let [x1 = f()] = [1];
let [x2 = f()] = [];
console.log(x1);//1
console.log(x2);//aaa

默认赋值规则

默认赋值可以应用解构赋值的其他变量
首先看右侧有无和左侧对应的值,没有的话看左侧从左到右解析

1
2
3
4
5
6
7
8
9
10
11
12
let [x1 = 1, y1 = x1] = [];
let [x2 = 1, y2 = x2] = [2];
let [x3 = 1, y3 = x3] = [1,2];
console.log(x1,y1);//1 1
console.log(x2,y2);//2 2
console.log(x3,y3);//1 2
let [x4 = y4, y4 = 1] = []; --var 和 let 有区别
console.log(x4,y4);//报错, let不具有变量声明提前
var [x4 = y4, y4 = 1] = []; --var 和 let 有区别
console.log(x4,y4);//undefined 1

方式5:

对象的解构赋值

对象的解构赋值是按照属性名称决定的

1
2
3
4
5
var {foo,bar} = {foo: 'aaa', bar: 'bbb'};
console.log(foo);//输出aaa
console.log(bar);//输出bbb
var {baz} = {foo: 'aaa', bar: 'bbb'};
console.log(baz);//输出undefined

对象赋值注意: 一个已经声明的变量用于解构赋值 必须非常小心

1
2
3
4
5
var x;
// js引擎会将{x} 理解成一个代码块,从而发生语法错误。只有不将大括号写在行首可以避免这个问题
//{x} = {x:1};
({x} = {x:1});
console.log(x);

同时对象的结构赋值, 也可以用于嵌套结构

1
2
3
4
5
6
7
8
9
var obj = {
p: [
'hello',
{y: 'world'}
]
};
var {p: [x, { y }] } = obj;
console.log(x,y);//hello word

对象结构也可以自定默认值 默认生效条件和数组一样都是undefined

1
2
3
4
var {z = 3} = {};
console.log(z);//3
var {x, y = x} = {x:1};
console.log(x,y);//1 1

方式6:

字符串的解构赋值 字符串会转化成一个类数组的对象

1
2
const [a,b,c,d,e] = 'hello';
console.log(a,b,c,d,e);//h e l l o

类数组对象有length属性 所以len是5

1
2
let {length : len} = 'hello';
console.log(len);//5

方式7:
函数参数的解构赋值
函数add的参数表面上是一个数组,但在传入参数的那一刻,数组参数就被结构成变量 x 和 y

1
2
3
4
function add([x,y]) {
return x + y;
}
console.log(add([1, 2]));//3

练习

巩固一下上面的知识

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function move({x = 0,y = 0} = {}) {
console.log([x,y]);
}
move({x:3,y:8});//3, 8
move({x:3});//3, 0
move({});//0, 0
move();//0, 0
function deal({x,y} = {x: 0 , y: 0}) {
console.log([x,y]);
}
deal({x: 3,y: 8});//3, 8
deal({x: 3});//3, undefined
deal({});//undefined undefined
deal();//undefined undefined

解构赋值用途

下面简单举例说明一下解构赋值的用途
1.交换变量

1
2
3
4
var x = 1;
var y = 2;
[x, y] = [y, x];
console.log(x, y);//2 1

2.从函数返回多个值

1
2
3
4
function example () {
return [1,2,3];
}
var [a, b, c] = example();//1 2 3

3.函数参数的定义

1
2
3
4
function f2({x,y,z}) {
console.log(x,y,z);//2 1 3
}
f2({z:3,x:2,y:1});

4.提交json数据

1
2
3
4
5
6
7
var jsonData= {
id: 42,
status: 'ok',
data:[888,999]
}
let {id,status,data:number} = jsonData;
console.log(id, status,number);//42 ok [888, 999]
越来越多的平台(微信公众平台,新浪微博,简书,百度打赏等)支持打赏功能,付费阅读时代越来越近,特此增加了打赏功能,支持微信打赏和支付宝打赏。坚持原创技术分享,您的支持将鼓励我继续创作!