JavaScript 解构赋值基础详解

一、什么是解构赋值?

 简单来说，解构赋值就是把数组中的元素，字符串中的字符，对象中的属性分解成一个一个的值，再赋值给一些变量。当我们需要一些属性值的时候，解构赋值会使代码变得更简单。

二、解构赋值的几种写法

1.数组的解构赋值

 为多个变量赋值,，一般需要写多条声明与赋值语句，解构赋值简化了代码，定义了一个数组用来为变量赋值。

a.完全解构

//一般写法
var a=10;
var b=20;
var c=30;
console.log(a,b,c) //10 20 30
//解构赋值的写法
var [a,b,c]=[10,20,30]
//或者
var arr=[10,20,30];
var [a,b,c]=[...arr]

b.不完全解构

var [a,b,c]=[10,20]
console.log(a,b,c)  //10 20 undefined

c.赋初值

 当数组元素比变量数量少时，有为变量赋初值的写法，例如：

var [a,b,c=30]=[10,20];
console.log(a,b,c)//10 20 30

 如果数组元素可以为对应的变量赋值时，再给变量赋初值是无效的。原理很简单，相当于声明变量时已赋初值，而后又覆盖了。例如：

var [a=40,b,c]=[10,20,30]
console.log(a,b,c);//10,20,30  这里a不是40

d.嵌套解构赋值

 数组的解构赋值可以嵌套，例如:

var	[a,b,[c,d]]=[1,2,[3,4]]
console.log(a,b,c,d) //1 2 3 4 

2.字符串的解构赋值

 字符串的解构赋值会把字符串分解成单个字符赋值给变量。例如:

var str='有误之处请您斧正';
var [a,b,c,d]=str; //或者是 var [a,b,c,d]=[...str];
console.log(a,b,c,d);//有 误 之 处

3.对象的解构赋值

 需要注意，与上文不同的是，需要定义新的对象用来接收对象的属性值，而非数组。在新对象中，属性名要与原对象属性名一致。否则undefined

a.完全解构

	let obj={
		name:'zs',
		age:'18',
		sex:'man'
	}
	let {name_1,age,sex}=obj;
	console.log(name_1,age,sex); //undefined 18 man

b.赋初值

 同样的，已有属性值为变量赋值的情况下，为变量赋初值无效。

	var { name, age=20,sex='man'} = { name: 'ls',sex:'womam' }
    console.log(name, age,sex);  //ls 20 woman

三、解构赋值常见的用法

1.交换两个变量的值

  常用交换两个变量的值需要定义第三个变量作为中间容器，而用解构赋值简化了代码，更为方便。

	//一般写法
	var a=10;
	var b=20;
	var c;
	c=a;
	a=b;
	b=c;
	console.log(a,b) //20 10
	//解构写法
	var a=10;
	var b=20;
	[a,b]=[b,a]
	console.log(a,b) //20 10

2.让函数有多个返回值

 函数需要有多个返回值时，可以将返回值保存在[]数组中，再用解构赋值的方法来接收调用结果。

	function fn(x, y) {
        return [x, y];
    }
    var [x, y] = fn(10, 20)
    console.log(x, y);//10 20

3.可以用来为函数传参

	 function fn_1({ age = 10 }) {
        console.log(age);
    }
    fn_1({ age: 30 });  //30
    //相当于{age=10}={age:30}

 希望以上内容对你有所帮助