ES6-解构赋值

文档移步ES6 入门教程

只说用途：

一、获取对象属性值

一个对象里面可能会有很多属性，如果想取值，按照正常的写法，是这样

 const details: {
        nickName: "张三",
        address: "北京",
    }

//正常赋值(. [])
const nickName = details.nickName
const address= details.address

const nickName = details["nickName"]
const address= details["address"]

如果属性有很多很多呢？那么就会增加大量重复的代码，ES6的解构赋值完美解决这一问题，下面看用法

 const details: {
        nickName: "张三",
        address: "北京",
    }

//解构赋值等号两边类型要相应
const { nickName,address}= details

二、获取嵌套对象的属性值

对象里面还有一层对象，对象的对象还有一层..........

    const user = {
        userName: "李四",
        addresss: "上海",
        details: {
            nickName: "王五",
            address: "江苏",
            signature: "我的人生我做主",
            ooo: {
                a: 'dsadasdasd',
                p: {
                    bbb: 'dsadadasdasdasdasdasdadsa'
                }
            }
        }
    }
    const { userName, addresss, details: { nickName, address, signature, ooo: { a, p: { bbb } } } } = user
    console.log(userName, address)
    console.log(nickName)
    console.log(a)
    console.log(bbb)

三、默认值

如果说利用解构赋值获取到属性值，但是这个属性值结果为undefined，这个时候可以设置默认值，需要注意！只有在取到的值为undefined时，默认值才会生效

    const details = {
        nickName: "张三",
        address: undefined,//如果address对应的属性值不为undefined，那么默认值不会生效
    }
    //undefined才会生效，null不生效，因为在ES6解构赋值中，采用的是===
    const { nickName, address = "北京" } = details
    console.log(nickName)
    console.log(address)

四、使用别名

使用解构赋值必须得面临的一个问题，变量名冲突，

    const details = {
        nickName: "张三",
        address: '杭州'
    }
    const nickName = '李四'  //此时项目中已经有nickName变量名了

    const { nickName:name, address = "北京" } = details
    //对nickName重新命名nickName:name
    console.log(name) //"张三"

五、定义新变量

解构赋值还可以基于对象的属性值创建新的变量

    const details = {
        nickName: "张三",
        address: '杭州'
    }

    const { nickName, address, message = nickName + address } = details
    console.log(message)

六、动态名称属性

在实际的开发中，会通过接口API来获取数据，这些数据是动态的，甚至对象的属性键名也是动态的(字段也可能是动态的)，再或者连属性的名称都不知道，这种情况怎获取相应的属性值呢？

    const details = {
        nickName: "张三",
        address: '杭州'
    }

    function getValue(data, key) {
        console.log(data)
        console.log(key)
        const { [key]: value } = data
        console.log(key)
        return value
    }
    let userName = getValue(details, "nickName");
    console.log(userName) // "张三"

七、交换变量的值

let x = 1;
let y = 2;

[x, y] = [y, x];

八、从函数返回多个值

函数只能返回一个值，如果要返回多个值，只能将它们放在数组或对象里返回。有了解构赋值，取出这些值就非常方便。

// 返回一个数组

function example() {
  return [1, 2, 3];
}
let [a, b, c] = example();

// 返回一个对象

function example() {
  return {
    foo: 1,
    bar: 2
  };
}
let { foo, bar } = example();

九、提取 JSON 数据

解构赋值对提取 JSON 对象中的数据，尤其有用。

let jsonData = {
  id: 42,
  status: "OK",
  data: [867, 5309]
};

let { id, status, data: number } = jsonData;

console.log(id, status, number);
// 42, "OK", [867, 5309]

总结：

1.提取数组和对象的属性值

2.对后端返回的数据进行提取赋值，使用别名改变后端返回数据属性（字段）

3.解构json数据，页面跳转，携带数据，接收直接结构json

4.从函数中返回多个值

5.给函数传递已结构的值