解构赋值(ES6)

在学习ES6的解构赋值之前，我们先了解一下ES5中，如果想要获取某个属性的值，我们一般采用obj.属性名

ES5

 const person = {
      name: "木柔",
      age: 20,
      sex: "女"
    }
    console.log(person.name);
    console.log(person.age);
    console.log(person.sex);

解构赋值

const person = {
      name: "木柔",
      age: 20,
      sex: "女"
    }
    const {name,age,sex}=person;
    console.log(name,age,sex);

常见的解构赋值有3种：

对象的解构赋值

数组的解构赋值

字符串的解构赋值

对象的解构赋值

语法简介

        对于对象的解构赋值，只要等号左边与等号右边的模式相同，就可以将等号右边的值赋值给等号左边的变量。所谓的"模式相同",指的是变量名相同且变量的个数相同

举例：    模式相同

const person = {
      name: "木柔",
      age: 20,
      sex: "女"
    }
    const {name,age,sex}=person;
    console.log(name,age,sex);//木柔 20 女

//分析
//等号左右两边的模式是相同的，因为左边和右边都有name,age,sex,此时右边对象属性的值会被赋值给左边
//对应的变量，接下来，我们就可以直接使用name,age,sex，而不需要使用person.name.....

解构赋值这个词其实很好理解，也就是先解构，后赋值。对象的解构赋值，其实就是抽取等号右边对象的属性(解构)，然后将属性的值赋值给等号左边具有相同名称的变量(赋值)。

举例：   模式不同

 const person = {
      name: "木柔",
      age: 20,
      sex: "女"
    }
    const {name1,age1,sex1}=person;
    console.log(name1,age1,sex1);//undefined undefined undefined

//分析
//如果等号左右两边的模式不同，那么程序是无法进行正确的解构赋值的，因此这里的name1，age1，sex1都是undefined

const person = {
      name: "木柔",
      age: 20,
      sex: "女"
    }
    const {name,age,sex1}=person;
    console.log(name,age,sex1);//木柔 20 undefined

实际上，对象解构赋值的本质是先找到等号左右两边相同的属性名(key),然后再将右边的值(value)赋值给左边的变量名。真正被赋值的是value，而不是key

 开发技巧

1.指定别名

 function fn(user) {
      const {name:userName,age:userAge}=user;
      console.log(`${userName},${userAge}`);//木柔,23
    }
    const name="木柔";
    const age=23;
    fn({name,age})

2.部分解构

 function fn(user) {
      const {name}=user;
      console.log(`用户名：${name}`);//木柔
    }
    const name="木柔";
    const age=23;
    fn({name,age})

3.嵌套解构

 function fn (user) {
      const { name: { firstname, lastname } } = user;
      console.log(`姓：${firstname}`);//姓：木
      console.log(`名：${lastname}`);//名：柔
    }
    const user = {
      name: {
        firstname: "木",
        lastname: "柔"
      },
      age: 23
    }
    fn(user);

4.解构方法

 const {max,min}=Math;
    console.log(max(1,2,3));//3
    console.log(min(1,2,3));//1
//分析
//对象的方法本质上就是对象的属性，只不过这个属性的值是一个函数而已。如果一个对象有很方法，我们只需要用到其中几个的话，就可以像上面的例子这样进行解构赋值。


上面这个例子等价于下面的代码：
console.log(Math.max(1,2,3));
console.log(Math.min(1,2,3));

数组的解构赋值

数组解构和对象解构其实是非常相似的，两者都可以进行这些操作:完全解构、部分解构、嵌套解构。

1.完全解构

 const [a,b,c]=[20,30,40];
    const result=a+b+c;
    console.log(result);//90

2.部分解构

 const [a,b]=[20,30,40];
 console.log(a);//20
 console.log(b);//30

3.嵌套解构

 const [a,b,[c,d]]=[20,30,["html","css"]];
 console.log(c);//html
 console.log(d);//css

深入了解数组解构

数组的解构赋值其实比对象的解构赋值稍微复杂一点。现在我们要学以下的两个方面内容。

1.默认值

//如果数组未能完全解构，等号左边匹配不成功的变量的值将为undefined。为了避免这种情况出现，我们可以给左边的变量定义一个默认值。


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

2.连续逗号

//在数组解构赋值中，等式左边的变量列表可以用连续的逗号来跳转过右边部分对应的值，从而快速的获取右边的某个或某些值。
const [,,c]=[1,2,3];
console.log(c);//3

 应用场景

在实际的开发中，数组的解构赋值主要可以用于以下两个场景：

1.交换数值

//ES5方式
var a="HTML";
var b="CSS";
var temp;
temp=a;
a=b;
b=temp;
console.log(a,b);//CSS HTML


//ES6方式
const a="HTML";
const b="CSS";
[a,b]=[b,a];//核心代码
console.log(a,b);//CSS HTML

2.函数返回值

//如果想要在一个函数内返回多个值，比较好的做法是返回一个数组，然后对数组进行解构赋值，获取每一歌值
  function getSize(width,height,depth){
      let area=width*height;
      let volum=width*height*depth;
      return [area,volum];
    }
    let [area,volum]=getSize(30,40,10);
    console.log(`面积:${area}`);//面积：1200
    console.log(`体积:${volum}`);//体积：12000

 总结

在实际开发中，对象和数组的解构赋值应用得最为广泛。其使用要点可以总结为以下4点：

1.解构赋值分为两步：先解构，后赋值

2.解构赋值最大的作用是从对象或数组中快速检索值，大大简化代码。

3.对象解构赋值，通过属性名来指定值；数组解构赋值，通过索引值来指定值。

4.对象和数组的解构赋值都可以进行这些操作：完全解构、部分解构、嵌套解构。

 字符串解构

字符串其实是一个类数组，因此我们也可以对字符串进行解构赋值。

let [a,b,c,d]="我爱代码";
console.log(a);//我

//分析
//既然字符串是一个类数组，我们也可以使用数组解构赋值的其他功能，比如默认值、连续逗号。