ES6-解构赋值

ES6引入的解构赋值用法总结:

一句话记忆:使用变量替换掉数组或者对象中目标值的位置

1、数组

{
	let [x, y, z] = ['a', 'b', 'c'];
	console.log(x, y, z); //a b c
} {
	let [, , z] = ['a', 'b', 'c'];
	console.log(z); //c
} {
	let [x, [y, z]] = ['a', ['b', 'c']];
	console.log(x, y, z); //a b c
}

2、对象

获取对象:

let person = {
		name: '小明',
		age: 20,
		gender: 'male',
		passport: 'G-12345678',
		school: 'No.4 middle school',
		address: {
			city: 'Beijing',
			street: 'No.1 Road',
			zipcode: '100001'
		}
	}; 

1、解构赋值时获取对象属性

{ //第一种 解构赋值时获取对象属性
		let {
			name,
			age,
			passport
		} = person;
		console.log(name, age, passport); //小明 20 G-12345678
	} 

2、解构赋值时获取嵌套的对象属性

{ //第二种 解构赋值时获取嵌套的对象属性
		let {
			name,
			address: {
				city,
				zip
			}
		} = person;
		console.log(name, city, zip); //小明 Beijing undefined
		//显示undefined, 因为属性名是zipcode而不是zip
		//注:address不是变量,而是为了让city和zip获得嵌套的address对象的属性
	}

3、解构赋值时重命名

{ //第三种 解构赋值时重命名
		let {
			name,
			passport: id //把passport的值赋给变量id;
		} = person;
		console.log(name, id); //小明 G-12345678
		//注:passport不是变量,而是为了让变量id获得passport属性
	}

4、解构赋值时使用默认值

{ //第四种 解构赋值时使用默认值
		let {
			name,
			single = true
		} = person;
		console.log(name, single); //小明 true
		//如果person对象没有single属性,默认赋值为true
	}

5、当变量已经被声明过时

{ //第五种 如果变量已经被声明了,赋值时使用小括号括起来
		let x, y;
		({
			x,
			y
		} = {
			name: '小明',
			x: 100,
			y: 200
		});
		console.log(x, y); //100 200
		//JavaScript引擎把{开头的语句当作了块处理,于是=不再合法
	}

 

参考资料

你可能感兴趣的:(ES6,学习笔记)