本文共 2285 字，大约阅读时间需要 7 分钟。

1.什么是解构

ES6中，按照一定的模式，从数组或对象中提取值，对变量进行赋值。这个过程叫做解构赋值。

2.数组解构

const arr = ["诺手", "蝎子", "劫", "EZ", "女坦"];     let nuo = arr[0];     console.log(nuo);//诺手    //ES6---------------------------  /  let [nuo, lailai, jie, ez, f] = arr;或  let [nuo,lailai,jie,ez,f] = ["诺手","蝎子","劫","EZ","女坦"];  /  console.log(nuo);诺手

本质上，这种写法属于“模式匹配”。只要赋值号两边的模式相同，左边的变量就会被赋予对应的值。

let [a,[b,c]] = [1,[2,3]];console.log(b);//2let [a,,b] = [1,2,3];console.log(b);//3

不完全解构(赋值号两边不是完全相等的。)

let [a,b] = [1,2,3];console.log(a);//1console.log(b);//2

解构失败时，变量的值为undefined。

let [a,b] = [1];console.log(a);//1console.log(b);//undefined

3.对象解构赋值

const obj = {
       name:"亚索",    skill:"hasakei"}let {
   name,skill} = obj;console.log(name);//亚索

变量名与属性名相同，才能取到正确的值。

如果想要自定义变量名，则用：进行修改。

const obj = {
            name: "亚索",         skill: "hasakei"     }     var {
    name:yi, skill:er } = obj;     console.log(yi);//亚索*/

方法解构

var obj = {
            r: function () {
                console.log("狂风绝息斩");         },         e: function () {
                console.log("e去不复返");         }     }     const {
    r, e } = obj;     r();//狂风绝息斩     e();//e去不复返   /---方法解构自定义名     var {
    r: yi, e: er } = obj;     yi();//狂风绝息斩     er();//e去不复返*/

注意点:

let x;{
   x} = {
   x:1};

以上代码是错误写法。{x}前面如果没有let const的变量声明的关键字，则js会将其视为代码块。

let x;({
   x} = {
   x:1}); console.log(x);//1

数组本质也是特殊的对象，也可以对数组进行对象属性的解构。

const arr = ["诺手", "蝎子", "劫", "EZ", "女坦"];     var {
    length, 0: first, 4: last } = arr;     console.log(length);//5     console.log(first);//诺手     console.log(last);//女坦

数组的本来我们用的方式

const arr = ["诺手", "蝎子", "劫", "EZ", "女坦"];    var [yi ,er] = arr;    console.log(arr.length);//5    console.log(yi);//诺手

4.字符串解构

const str = 'hello';let [a, b, c, d, e] = str;console.log(a);//hlet {
    length } = str;console.log(length);//5

类数组的对象都有一个length属性，我们可以对这个属性进行解构赋值。

5.函数参数的解构赋值

function add([x, y]) {
           return x + y;    }    let sum = add([1, 2]);    console.log(sum);//3

以上案例，函数add的参数表面上一个数组，但是在传入参数的那一刻，数组参数会被解构成变量x和与y.

6.用途

6.1 交换变量的值

let a = 1;let b = 2;/*原来写法 let tmp = a; a = b; b = tmp;8*/[a,b] = [b,a]; console.log(a);/2

6.2 从函数中返回多个值

6.3 函数参数的定义(也叫传参)

function fn({
   a,b,c}){
       console.log(a);/1    console.log(b);/2    console.log(c);/3}fn({
   c:3,b:2,a:1})

转载地址：https://blog.csdn.net/z18237613052/article/details/114036923 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！