ES6之解构

ES6之解构

解构是将对象或数组里的属性提取出来，放到一个变量中。
我们先看对象解构。

const user = {
    name: 'xiaoming',
    age: 18,
    sex: 'male',
    address: {
        province: 'guangdong',
        city: 'shenzhen'
    }
}

//定义的是 gender 变量，user 中读取的是sex变量
//同样，address也起到解构的作用
let { name, age, sex: gender='male', address:{
    province
} } = user;
console.log(name, age, gender,province);

通过在 {} 中添加变量的形式，可以将属性放到变量中。属性可分为同名属性和不同名属性。同名属性没有什么问题，不同名属性要写到 : 之后。那么会先定义:之后的变量，然后从对象中读取:之前的变量放到后面的变量中。对象解构并不会改变原来的对象。同时，还可以在 = 之后添加默认值。如果属性不存在，则会变为 undefined 。

const numbers = ["a", "b", "c", {
    "name": "xiaoming"
}]
// let [n1, n2, n3, n4] = numbers;
// console.log(n1, n2, n3, n4);
const { name: NAME } = numbers[3];
console.log(NAME);

数组解构和对象解构类似，将要赋值的变量放到 [] 里面。同时也可以进行嵌套。如果你要拿到第三项，那么前面就要空出两项的位置。

const { name, ...obj } = user;
console.log(name, obj);

利用展开运算符可以很好地分离两项。注意，展开运算符只能放到最后，否则会造成逻辑错误。

const article = {
            title: "文章标题",
            content: "文章内容",
            comments: [{
                content: "评论1",
                user: {
                    id: 1,
                    name: "用户名1"
                }
            }, {
                content: "评论2",
                user: {
                    id: 2,
                    name: "用户名2"
                }
            }]
        }
  //解构出第二条评论的用户名和评论内容
  // name:"用户名2"  content:"评论2"

        const {
            comments: [,
                {
                    content,
                    user: {
                        name
                    }
                }
            ] } = article;
        console.log(content, name)

上面这个例子中，展示了如何在嵌套的对象和数组中拿到需要的属性。
平时用的最多的还是参数解构。

function ajax({ method='get', url='/'}={}) {
   console.log(method, url)
}
ajax()

如果函数没有传参数，则传入一个默认的空对象，空对象会进行解构出默认值。