ES6 对象解构
打赏作者

aaronlam

老师是感冒了吗?

jayin

@JellyBool 我怎么@这位女神啊

George 回复 jayin

对方503拒绝请求

zhangbao1992

请教一下。被圆括号(())括起来的是表达式,但表达式里的不还是解构赋值吗?

为什么没有报错 Identifier 'name' has already been declared 呢?而且下面 console 还能打印出来 nameage 的值。

是不是

({ name, age } = Tom);

// 等同于
{
    name = Tom.name;
    age = Tom.age;
}

这我不太理解。

Yawenina 回复 zhangbao1992

不加括号的话,解释器会把起首的大括号解析为一个代码块,而不是赋值语句。
加了之后,这就是一个解构赋值,所以就是把 Tom.name 的值赋值给 name 。

zhangbao1992 回复 Yawenina

你说的括号是圆括号(())吗?

Yawenina 回复 zhangbao1992

就是 () 这个括号,否则解释器会把 {} 当做当做代码块。如果不加(),这样写就会报错。

zhangbao1992 回复 Yawenina

视频里好像说,加 () 的话,{ name, age } = Tom 就是代码块,而不是解构赋值的语法。

那根据最后的 console 结果,这段代码块会将 Tom 属性的值赋给对应的 nameage 变量。

那这段代码块还是起到赋值作用的,但这种形式不还是解构赋值吗?我疑惑在这个地方的。

Yawenina 回复 zhangbao1992

视频里说的是,如果不加(), 会把 { name, age } 这解释为代码块。

zhangbao1992 回复 Yawenina

突然理解了!花括号在 ES6 中位于行首时是被解析成代码块,有作用域的。

{
    // ...
}

如果不加圆括号的话

let Tom = {name: 'zhangb', age: 18};
let name;

{name, age} = Tom;

// 相当于
let Tom = {name: 'zhangb', age: 18};
let name;

{
    name, age
}
= Tom;

自然会报错 Uncaught SyntaxError: Unexpected token =

加上圆括号之后,就是一个解构赋值表达式了。

@Yawenina 感谢你的解答!

zhangbao1992

你说的括号是圆括号(())吗?

duo

笔记:
对象结构能够帮助我们更为简便的提取对象中的属性,对其重命名,以及赋予默认值。
({name,age} = Tom); 小括号包裹起来。

<script type="text/javascript">
		const Tom = {
			name:'Tom Jones',
			age:25,
			family:{
				mother:'Norah Jones',
				father:'Richard Jones',
				brother:'Howard Jones'
			},
		}

		let name ='';
		({name,age} = Tom);

		console.log(name);
		console.log(age);
	</script>

嵌套,重命名

<script type="text/javascript">
		const Tom = {
			name:'Tom Jones',
			age:25,
			family:{
				mother:'Norah Jones',
				father:'Richard Jones',
				brother:'Howard Jones'
			},
		}

		const father = 'Dad';
		const{father:f,mother:m,brother:b} =Tom.family;

		console.log(f);
		console.log(m);
		console.log(b);
	</script>

未定义的属性初始值为undefined的时候才会使用默认值

<script type="text/javascript">
		const Tom = {
			name:'Tom Jones',
			age:25,
			family:{
				mother:'Norah Jones',
				father:'Richard Jones',
				brother:'Howard Jones',
				sister:undefined
			},
		}

		const father = 'Dad';
		const{father:f,mother:m,brother:b,sister='have no sister'} =Tom.family;

		console.log(sister);
	</script>

一个个属性值注释掉看看初始值

<div class="container"></div>
	<script type="text/javascript">
		function appendChildDiv(options ={}){
			const {parent = 'body',width = '100px',height = '80px',
			backgroundColor = 'pink'} =options;
			const div = document.createElement('div');
			div.style.width = width;
			div.style.height = height;
			div.style.backgroundColor = backgroundColor;

			document.querySelector(parent).appendChild(div);
		}

		appendChildDiv({
			parent:'.container',
			width:'200px',
			// height:'150px',
			// backgroundColor:'yellow'
		})

	</script>