JS解构赋值

一、前言

解构赋值语法是一种 Javascript 表达式。通过解构赋值，可以将属性/值从对象/数组中取出，赋值给其他变量。本文将讨论解构赋值的作用与其用法。

二、用途

现在我们有一个数组，与三个变量，数组中有3个元素，我们想将数组中的三个元素分别对应赋值给三个变量，我们可以采用以下形式，即可实现。

const arr = ["孙悟空","猪八戒","沙和尚"]
let a,b,c;

a= arr[0];
b= arr[1];
c= arr[2];
console.log(a,b,c);

    但是如果我们元素变成10个或者更多，以这种方式赋值就有一定难度，这时候就需要解构赋值：[a,b,c],给元素写在中括号中间，表示我们给三个变量一起来赋值。

[a,b,c]=["孙悟空","猪八戒","沙和尚"]
//表示数组的第一个元素赋值给第一个变量，第二个赋值给第二个变量，以此类推
console.log(a,b,c);

我们可以看到两种赋值的效果是一样的。所以解构赋值，故名思意，就是将一个东西解析展开后再赋值给某个东西。

三、数组的解构

1.变量声明并且赋值时的解构

    我们有数组解构与对象解构两种形式，在实际操作中，以**[ ]**包裹的形式为数组的解构，我们可以直接声明同时解构赋值，我们可以实现声明同时完成解构赋值的操作。

arr = ['孙','悟','空']
let [d,e,f]= arr;
console.log(d,e,f);

2.默认值

 let [g,h,i,j]=[1,2,3];

console.log(g,h,i,j);

    我们可以看到 j 也进行了赋值，时候解构赋值后 j 的值就是undefined所以为了防止出现undefined的出现，我们可以先在左边对象先预设值默认值。

let a, b;

[a=5, b=7] = [1];
console.log(a); // 1
console.log(b); // 7

3.剩余数组赋值给一个变量

    我们在解析一个数组时，可以将数组剩余部分赋值给一个变量。 

let [n1,n2,...n3]=[1,2,3,4,5,6,7]//...获取剩余参数
console.log(n1,n2,n3)

4.解构交换变量

没有解构赋值时，我们交换变量采用以下方式

let a1 = 10;
let a2 =20;

let temp =a1;
a1 = a2;
a2=temp;
//这个是我们常规的操作
[a1,a2]=[a2,a1];//这样的解构能实现交换
//表达式左边与右边表示的意义不一样，左边表示的是变量，右边才表示的是值，所以可以通过这种方式实现变量值交换

const arr1 = ["孙悟空","猪八戒"]
[arr1[0],arr[1]]=[arr1[1],arr[0]]//完成两个数组元素交换变量

5.解析一个函数返回的数组

function f() {
  return [1, 2];
}

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

6.二维数组的解构

const arr3 = [[1,2,3],[4,5,6]];
console.log(arr3)
//    假如我们要解构一个二维数组
let [[num1,num2,num3],[num4,num5,num6]]=arr3
//将num1-6分别对应二维数组的六个元素
arr4=[]
[[num1,num2,num3],arr4]=arr3//将num1,num2,num3为1，2，3，arr4为[4,5,6]

四、对象的解构

1.基本用法

我们在解构对象时，采用以**{ }**包裹的形式。通过在{}中添加变量名，把对象的属性与{}中的属性名一 一对应实现解构赋值。与数组不同的是，对象的解构赋值不需要按照变量的顺序对应赋值。

const obj = {name:'qb',age:19,gender:'男'};
let {age,name,gender} = obj;
console.log(name,age,gender);

 let {address} = obj;
console.log(address)//undefined

对象中没有address属性就返回undefined

2.给新的变量名赋值

可以从一个对象中提取变量并赋值给和对象属性名不同的新的变量名

let {name:a,age:b,gender:c} = obj;
console.log(a,b,c)

我们也可以与数组的解构形式相同，给变量先赋予默认值，也可以给新的变量名赋默认值。

五、综合

1.解析嵌套对象与数组

const metadata = {
  title: 'Scratchpad',
  translations: [
    {
      locale: 'de',
      localization_tags: [],
      last_edit: '2014-04-14T08:43:37',
      url: '/de/docs/Tools/Scratchpad',
      title: 'JavaScript-Umgebung'
    }
  ],
  url: '/en-US/docs/Tools/Scratchpad'
};

let {
  title: englishTitle, // rename
  translations: [
    {
       title: localeTitle, // rename
    },
  ],
} = metadata;

console.log(englishTitle); // "Scratchpad"
console.log(localeTitle);  // "JavaScript-Umgebung"

2.For of迭代与解构

var people = [
  {
    name: 'Mike Smith',
    family: {
      mother: 'Jane Smith',
      father: 'Harry Smith',
      sister: 'Samantha Smith'
    },
    age: 35
  },
  {
    name: 'Tom Jones',
    family: {
      mother: 'Norah Jones',
      father: 'Richard Jones',
      brother: 'Howard Jones'
    },
    age: 25
  }
];

for (var {name: n, family: {father: f}} of people) {
  console.log('Name: ' + n + ', Father: ' + f);
}

// "Name: Mike Smith, Father: Harry Smith"
// "Name: Tom Jones, Father: Richard Jones"

来源于mdn

以上内容如有错误，麻烦大家在评论区指正，让我们共同进步。 加油！！！

如果对您有帮助就给一个关注支持一下吧。