JavaScript解构赋值

JavaScript解构赋值

在js中的解构赋值是一种十分便捷的赋值方式,如果运用的足够熟练,能大大提高工作效率,废话少说,这就开始介绍:

从ES6开始,JavaScript引入了解构赋值,不同于传统做法,解构赋值可以同时对一组变量进行赋值

比如,传统做法是酱紫的:

var array = ['hello', 'world'];
var x = array[0];
var y = array[1];

而用解构赋值可以酱紫:

var [x, y] = ['hello', 'world'];
x;//'hello'
y;//'world'

也就是说,对数组元素进行解构赋值时,需要用"[ ]"将多个变量扩起来.

有时候,数组可能有嵌套:

var a = ['I', ['love', 'you']]

我们为了将这个数组里的值赋给新的变量,可以在解构赋值的时候也写成同样的嵌套结构:

var [x, [y, z]] = a;
x;//'I'
y;//'love'
z;//'you'

这样,x将得到’I’,y将得到’love’,z将得到’you’

那如果我们只想要"love",能不能忽略那些不想要的元素呢?当然可以:

var [ , [ , z]] = a;
z;//'you'

现在,就只对z赋值了第三个元素.

除了从数组里取出元素赋值给变量,解构赋值还可以用于从一个对象中取出若干个属性赋值给变量:

var student = {
	name: '小明',
	age: 18,
	gender: 'male'
}
var {name, gender} = student;
name;//'小明'
gender;//'male'

同样,如果对象中有嵌套的话,只要在进行解构赋值的时候作同样的嵌套即可:

var student = {
	name:'小明',
	age:18,
	gender:'male',
	address:{
		city: 'beijing',
		school: 'No.1 middle school'
		zipcode: 123456
	}
}
var {name, address{city, street, zip}} = student;
name;//'小明'
city;//'beijing'
zip;//undefined

为啥zip是’undefined’呢?原因很简单,因为student对象中没有zip这个属性啊!,但是如果我就是想把对象里名叫’zipcode’的那个属性赋值给一个叫’zip’的变量怎么办呢?好办,酱紫:

var {name, address{city, street, zipcode: zip}} = student;
name;//'小明'
city;//'beijing'
zip;//123456

这样就把对象中的’zipcode’赋值给变量’zip’了.

除此之外,还可以在解构赋值的时候使用默认值:

var strdent = {
	name: '小明',
	age: 18,
}
var {name, height = 180} = student;
name;//'小明'
height;//180