JavaScript---变量的解构赋值.笔记

1.数组的解构赋值

1.1.数组形式的解构赋值
	let [foo, [[bar], baz]] = [1, [[2], 3]];// foo = 1、bar = 2、baz = 3
	let [ , , third] = ["foo", "bar", "baz"];// third = "baz"

只要某种数据结构具有 Iterator 接口,都可以采用数组形式的解构赋值

2.1.指定默认值。
	let [x, y = 'b'] = ['a']; // x='a', y='b'
	let [x, y = 'b'] = [null, undefined]; // x=null, y='b'

ES6 内部使用严格相等运算符(===)判断一个位置是否有值。所以,只有当一个数组成员严格等于undefined,默认值才会生效。

3.1.如果默认值是一个表达式,那么这个表达式是惰性求值的,即只有在用到的时候,才会求值。
	function f() {console.log('aaa');}
	let [x = f()] = [1];

上面代码中,因为x能取到值,所以函数f根本不会执行。

2.对象的解构赋值

2.1.对象的解构赋值

对象的解构与数组有一个重要的不同。数组的元素是按次序排列的,变量的取值由它的位置决定;而对象的属性没有次序,变量必须与属性同名,才能取到正确的值

	let { f: b } = { f: "aaa", z: "bbb" };
	>>b // "aaa"
	>>f // error: f is not defined

f是匹配的"模式",b才是变量。真正被赋值的是变量,而不是"模式"。对象的解构赋值的内部机制,是先找到同名属性,然后再赋给对应的变量。真正被赋值的是后者,而不是前者。

	let { loc, loc: { start }, loc: { start: { line }}} ={loc: { start: { line: 1, column: 5}}}
	>>loc	// {start: {line: 1, column: 5}
	>>start	// {line: 1, column: 5}
	>>line	// 1

"loc,"代表:“loc:loc”

2.2.设置默认值

注释:对象的解构也可以指定默认值,默认值生效的条件是,对象的属性值严格等于undefined。如果解构失败,变量的值等于undefined。,

	var {x = 3} = {x: undefined};
	>>x // 3

3.函数参数的解构赋值

3.1.函数的参数也可以使用解构赋值
	function add([x, y = 8, z]){
	  return x + y + z;
	}
	add([1, 2, 3]); // 6
	add([1,,1]);// 10

函数add的参数表面上是一个数组,但在传入参数的那一刻,数组参数就被解构成变量x和y。对于函数内部的代码来说,它们能感受到的参数就是x和y。
上述参数【“y = 8”】为设置函数参数默认值

*3.2.参数指定默认值
	function move({x, y} = { x: 0, y: 0 }) {
	  return [x, y];
	}
	move({x: 3, y: 8}); // [3, 8]
	move({x: 3}); // [3, undefined]
	move({}); // [undefined, undefined]
	move(); // [0, 0]

注意与3.1示例区分,上述代码为函数move的参数指定默认值,而不是为变量x和y指定默认值。undefined就会触发函数参数的默认值。
在调用该函数时,用入参来替换【参数括号中的"=“号的后半部分,即示例的:后半部分为”{ x: 0, y: 0 }"】。

4.其他的解构赋值

4.1.利用对象的解构赋值可以快速赋值
	let { log, sin, cos } = Math;// 上面代码将Math对象的对数、正弦、余弦三个方法,赋值到对应的变量上。
4.2.由于数组本质是特殊的对象,因此可以对数组进行对象属性的解构。此时,数组的下标相当于对象的属性名。
4.3.字符串也可以解构赋值,因为字符串默认具有 Iterator 接口。这是因为此时,字符串被转换成了一个类似数组的对象。
4.4.将解构赋值用来提取 JSON 数据,尤其有用。
	let jsonData = {
		id: 42,
		status: "OK",
		data: [867, 5309]
	};
	let { id, status, data: number } = jsonData;
	console.log(id, status, number);// 42, "OK", [867, 5309]

博文不长,旨在精炼,仅个人复习理解使用…

AND…

猜你喜欢

转载自blog.csdn.net/weixin_41087220/article/details/89031732