ES6(2)-解构赋值 | 易学教程

概念

ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构赋值。
如：
var a =1;
var b= 2; 
var c = 3; 
在ES6中可以这么做：
var [a, b, c] = [1, 2, 3]; 
如果解构不成功，变量的值就等于undefined.
如果等号的右边不是数组（不是可遍历的结构），将会报错。
等式右边可以嵌套、可以忽略、…b表示剩余运算符(若赋值失败，空数组[])

设置默认值

解构赋值允许设置默认值

let [num = 2] = [];//num=2
let [num1,num2 = 2] = [5];//num1 = 5,num2 = 2
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] = [];//报错，因为x用到默认值y时，y还没声明
[x, y = 'b'] = ['a', undefined];//x = 'a', y = 'b'

对象的解构赋值
var {name, age} = {name: "sss", age: "12"};//name = sss,age = 12
注意：变量必须和属性同名，才能正确取值，位置顺序没关系
如果变量和属性名不一致，必须如下所写：
var {foo: baz} = {foo: "sss", bar: "bbb"};//baz= sss
let obj = {first:'hello', last: 'world'};
let {first: a,last: b} = obj;//a的值hello,b的值world

字符串的解构赋值

 var {a，b, c, d} = 'nice';//a为n，b为i，c为c，b为e

还有一个length属性

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

函数参数的解构赋值

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

也可以使用默认值

function move({x = 1, y = 2} = {}){
 	return [x, y];
}
move({x:3, y:8}); //[3, 8]
move({x:3}); //[3, 2]
move({}); //[1, 2]
move(); //[1, 2]

不能使用圆括号的情况

变量声明语句中，不能带有圆括号
//全部报错
var [(a)] = [1];
var {a:(c)} = {};
var ({a:c}) = {};
var {(a):c} = {};
函数参数中，不能带有圆括号
//报错
function f([(a)]) { return a; }
赋值语句中，不能将整个模式或嵌套模式中的一层，放在圆括号之中
//全部报错
({a: b}) = {a: 2};
([a]) = [5];

解构赋值的使用场景

交换变量的值

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

方便从函数中取值

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

函数参数定义

//参数是一组无次序的值
function f({x, y, z}){ ... }
f({z:1, y:2, x:3});

提取JSON数据

var jsonData = {
	id: 12,
	name: "sss",
	data: [123, 456]
};
let {id, name, data: number} = jsonData;

函数默认参数

function move({x = 1, y = 2} = {}){
		return [x, y];
}
move({x:3}); //[3, 2]

来源：CSDN

作者：練習一下

链接：https://blog.csdn.net/qq_32687373/article/details/104193999

标签

赋值