js对象、数组解构

1 什么是解构？

解构是使用es6的一种语法规则，将一个对象或者数组的某个属性提取到某个变量中

 const user = {
            name: '演员',
            age: 11,
            sex: '男',
            address: {
                province: "四川",
                city: "成都"
            }
        }

如果没有解构我们的代码是这样的：

      let name, age, sex, address;
      name = user.name
      age = user.name
      sex = user.sex
      address = user.address
       console.log(name, age, sex, address);  //演员 11 男 {province: '四川', city: '成都'}

有了解构后：

       // 解构写法  先定义4个变量，然后从对象中读取同名属性，放到变量中
        let { name, age, sex, address } = user
        console.log(name, age, sex, address);  //演员 11 男 {province: '四川', city: '成都'}

是不是简单了许多呐 两行搞定！

2 在解构中使用默认值

	语法：{同名属性=默认值}

     let { name, age, sex, address, abc = 1 } = user
     console.log(name, age, sex, address, abc);  //演员 11 男 {province: '四川', city: '成都'} 1

3 非同名属性解构

    语法{属性名:变量名}

       // 先定义4个变量 name age gender address
       // 在从对象中读取同名属性赋值（其中gender读取的事user中的sex属性）
       let { name, age, sex: gender, address } = user
       console.log(name, age, gender, address);  //演员 11 男 {province: '四川', city: '成都'}

如果想结构出name和province

        let { name, address: { province } } = user
        console.log(name, province);  //演员 四川

4 参数结构

参数结构 也就是在使用函数传参是时候进行结构
例子：

		//此处可以直接解构
       function userinfo({ name, age, sex, address: { province, city } } = {}) {
            console.log(`姓名：${name}`);
            console.log(`年龄：${age}`);
            console.log(`性别：${sex}`);
            console.log(`省份：${province}`);
            console.log(`城市：${city}`);
        }
        //此处传入uesr对象
        userinfo(user)

数组解构 和对象解构一样样的 这里就小小演示一波

     const [a, b, c, [e, f], d = 0] = [1, 2, 3, [6, 7]]
     console.log(a, b, c, e, f, d);//1 2 3 6 7 0

5 安排一波小练习

解构出第二条评论的用户名和评论内容 name：“用户名2” content：“评论2”

        const article = {
            title: "文章标题",
            content: "文章内容",
            comments: [
                {
                    content: "评论1",
                    user: {
                        id: 1,
                        name: "用户名1"
                    }
                }, {
                    content: "评论2",
                    user: {
                        id: 2,
                        name: "用户名2"
                    }
                }
            ]
        }

第一种解构写法：

            const { 
                comments: [, {
                content,
                user: {
                    name
                }
            }] 
        	} = article
            console.log(content, name);  //评论2 用户名2

第二种解构写法：

        const [, {
            content,
            user: {
                name
            }

        }] = article.comments;
        console.log(name, content); //用户名2 评论2

第三种解构写法：

        const {
            content,
            user: {
                name
            }
        } = article.comments[1]
        console.log(name, content); //用户名2 评论2

解构就是这么简单 ！！！ 关键在于掌握其语法 精髓