解构赋值含义：允许按照一定模式，从数组和对象中提取值，对变量进行赋值，只要等号两边的模式相同，左边的变量就会被赋予对应的值
1、数组解构赋值 右侧必须是一个数组
let [a, b, c] = [1, 2, 3];// 如果不是数组，则会报错let [e] = 5console.log(e)// 如果左侧变量名多于右侧，则左侧多的变量赋值不成功为undefinedlet [a,b,c,d] = [2,3];console.log(a,b,c,d) //2 3 undefined undefined// 如果左侧出现展开运算符时；右侧对应的值会放到一个数组中let [a,...b] = [1,2]console.log(a,b) // 1 [2]let [c,...d] = [1,[3,4]]console.log(c,d)// 1 [[3,4]]// 如果右侧的值多于左侧的变量，那么只匹配对应的值，多余的值则不会解构 嵌套解构let [aa,bb] = [1,[3,4],66]let [cc,[dd]] = [1,[3,4],66]console.log(aa,bb) //1 [3,4]console.log(cc,dd) //1 3// 2、解构赋值允许指定默认值let [a1,b1=2] = [1];console.log(a1,b1) //1 2// 只有左侧对应的值严格等于undefined时，默认才生效let [a2,b2=3]=[2,false];let [a3,b3=3]=[2,undefined];console.log(a2,b2); //2 falseconsole.log(a3,b3); //2 3// 默认值可以引用解构赋值的其他变量，但该变量必须已经声明。let [a4,b4=a4] = [3];let [a6=1,b6=a6] = [];let [a5=b5,b5] = [3,5];let [a7=b7,b7] = []; //ReferenceError: b7 is not definedconsole.log(a4,b4) //3 3console.log(a5,b5) //3 5console.log(a6,b6) //1 12、对象的解构赋值
对象解构 是根据变量名来进行解构赋值的 没有顺序，如果左侧没有在右侧找到同样的名称，则该变量是undefined先找到同名属性，然后再赋给对应的变量。真正被赋值的是后者，而不是前者。所以我们写代码的时候一定要注意
let { bar, foo } = { foo: 'aaa', bar: 'bbb' };console.log(bar,foo) //bbb aaalet { bar, foo } = { foo: 'aaa' };console.log(bar,foo) //undefined aaalet { bar:foo, foo:bar } = { foo: 'aaa', bar: 'bbb' };let { foo:bar } = { foo: 'aaa', bar: 'bbb' };console.log(bar,foo) //foo is not defined// 也可以对内置对象进行解构 例如Mathlet {floor,ceil,round} = Math;console.log(floor(3.5)) //3console.log(ceil(3.5)) //4console.log(round(3.5)) //4// 对象也可以嵌套解构let {fn,fn:{fn1}} = {fn:{fn1:3}}console.log(fn) //{fn1:3}console.log(fn1) // 3// 对象的解构也可以指定默认值 默认值生效的条件是，对象的属性值严格等于undefined。var {obj1 = 3} = {};var {obj2 = 3} = {obj2:undefined};var {obj3 = 3} = {obj3:null};console.log(obj1,obj2,obj3) //3 3 null// 注意 不能将大括号写在行首，JavaScript 引擎会将{obj4}理解成一个代码块，从而发生语法错误。let obj4;// {obj4} = {obj3:5};({obj4} = {obj4:5})// 可以对数组进行对象属性的解构// 都有一个length属性，因此还可以对这个属性解构赋值。let {0:first,length:len} = [2,4,5]console.log(first) //2console.log(len) //33、字符串的解构赋值 就是把字符串展开，分别对应左侧一个变量
const [str1, str2, str3] = 'hello';const {length}= 'hello';console.log(str1,str2,str3,length) //h e l 5// 只要等号右边的值不是对象或数组，就先将其转为对象。由于undefined和null无法转为对象，所以对它们进行解构赋值，都会报错。let {toString:s} = 55let dddd = s.toString(444)console.log(typeof dddd)4、解构赋值有什么用？
（1）、交换赋值更方便
let x = 1;let y = 2;[x, y] = [y, x];（2）、函数返回值，可以直接解构对应不同的变量
function example() { return { foos: 1, bars: 2 };}let { foos, bars } = example();（3）、函数传参更方便 如果向函数中传入数组或对象的话，不使用解构那我们还需要从数组或对象中去取值；如果解构，则我们可以在函数中直接使用变量的值
function f([x, y, z]) { // 这里可以直接使用 数组的值 1 2 3}f([1, 2, 3]);（4）、以快速提取 JSON 数据中有用的值 后台接口给我们返回的字段，我们不一定全部都用，这是我们可以把用到的字段解构出来使用。
let jsonData = { data: [867, 5309], success:true, massage:"成功", status:200};let { status, data,success } = jsonData;（5）、for...of循环遍历 任何部署了 Iterator 接口的对象，
const map = new Map();map.set('first', 'hello');map.set('second', 'world');for (let [key, value] of map) { console.log(key + " is " + value);}（6）、引入模块的时候，可以使用解构来，输出需要使用的一些方法
// 例如vue3 的引入 直接使用其内的函数 import { ref, reactive,readonly,toRaw } from 'vue'欢迎关注公众号（web学习吧），一起学习进步:
本文使用 mdnice 排版