前言

解构赋值大家都肯定会经常用到，比如常见的借口返回值解构：

const jiegou = {
   data:{
     list:[1,2,3],
   },
  code:1,
}

const {data, code} = jiegou; 
console.log(data,code);

解构赋值交换变量

var ay=1,by=2,cy=3,dy=4;
[ay,by,cy,dy]=[dy,cy,by,ay];
console.log(ay,by,cy,dy);

对象解构赋值

let {obj1, obj2 } = { obj1: "666", obj2: "888" };
console.log(obj1,obj2);

数组解构

let [a, b, c] = [1, 2, 3] // a=1, b=2, c=3
let [d, [e], f] = [1, [2], 3] // 嵌套数组解构 d=1, e=2, f=3
let [g, ...h] = [1, 2, 3] // 数组拆分 g=1, h=[2, 3]
let [i,,j] = [1, 2, 3] // 不连续解构 i=1, j=3
let [k,l] = [1, 2, 3] // 不完全解构 k=1, l=2

数组对象解构

let {a, b} = {a: 'aaaa', b: 'bbbb'} // a='aaaa' b='bbbb'
let obj = {d: 'aaaa', e: {f: 'bbbb'}}
let {d, e:{f}} = obj // 嵌套解构 d='aaaa' f='bbbb'
let g;
(g = {g: 'aaaa'}) // 以声明变量解构 g='aaaa'
let [h, i, j, k] = 'nice' // 字符串解构 h='n' i='i' j='c' k='e'

变量赋值

var data = {userName: 'aaaa', password: 123456}
var userName = data.userName
var password = data.password
console.log(userName)
console.log(password)
var data1 = ['aaaa', 123456]
var userName1 = data1[0]
var password1 = data1[1]
console.log(userName1)
console.log(password1)

剩余参数 - 默认参数

let {name, age = 0} = {name: 'Alice'};
console.log(name); // Alice
console.log(age); // 0

let {name, ...rest} = {name: 'Alice', age: 20, gender: 'female'};
console.log(name); // Alice
console.log(rest); // {age: 20, gender: 'female'}

使用场景

1.函数参数的定义

一般我们在定义函数的时候，如果函数有多个参数时，在es5语法中函数调用时参数必须一一对应，否则就会出现赋值错误的情况，来看一个例子：

function personInfo(name, age, address, gender) {
  console.log(name, age, address, gender)
}
personInfo('william', 18, 'changsha', 'man')

这样的话就会有所限制，你必须去按照一定的顺序去进行一个传参。

通过解构，我们可以这样写：

function personInfo({name, age, address, gender}) {
  console.log(name, age, address, gender)
}
personInfo({gender: 'man', address: 'changsha', name: 'william', age: 18})

相对来说呢，通过解构你可以不用按照一定的顺序去写入参，函数本身已经帮你排序了，在项目代码块里你可能要多写一个key. 但是他这样能够保持你的入参正确。

解构赋值的多种用法

前言