es6-对象解构、数组解构、参数解构

什么是解构

使用ES6的一种语法规则，将一个对象或数组的某个属性提取到某个变量中。
解构不会对解构的目标造成任何影响

对象的解构

对于对象， 在我们要使用它的属性时,通常把属性保存在变量里

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

     const age = user.age;
    const name = user.name;
   const sex = user.sex;
或者如下分开声明和赋值。（直接赋值可以用const；而分开先声明变量，再赋值的写法要用let）
// let name, age, sex, address;
// name = user.name;
// age = user.age;
// sex = user.sex;
// address = user.address;

现在我们学习了解构，就可以下面这种方式书写：
先定义4个变量，然后从对象中读取同名属性，放到变量中

 let name, age, sex, adress;
 ({ name, age, sex, address } = user); //此处为了表明是解构语句，前面的不是对象，要用小括号括起来，表明“=user”和前面是一个整体
 console.log(name, age, sex, address); //kevin 11 男 {province: "四川", city: "成都"}

合并书写效果也是一样的，它只是更方便书写的语法糖

let { name, age, sex, address } = user;

在解构中找不到同名属性，会被赋值undefined；如果找不到同名属性时想给它一个默认值就用“变量名 = 默认值”的形式书写

let {name,age,sex,address,abc = 123} = user;

给变量声明别名（就是变量和对象里的属性名不一样，又要解构该属性名的值时）用如下方式书写：

 let { name, age, sex: gender, address } = user
// 先定义4个变量name、age、gender、address，再从对象user中读取同名属性赋值，其中gender读取的是sex属性

上两种情况一块出现可写作：

let { name, age, sex: gender = 123, address } = user;

如果需要深度解构，就是对对象的属性又是一个对象，对这个是对象的属性进一步解构的情形：

const {name,address:{province}} = user //这是定义了两个变量name、province，province是address属性进一步解构得到
// console.log(name,address,provinc e)// Uncaught ReferenceError: address is not defined
console.log(name, province)   //kevin 四川

数组的解构

数组本质上就是一个对象

const numbers = ["a", "b", "c", "d"];
console.log(numbers);  //会显示出对象样式的结构

所以对数组解构，可以像对象解构那样解构就可以

const {
    0: n1,
     3: n2
 } = numbers;

同时es6下，可以可以用中括号直接对数组解构

// 定义常量const时必须同时赋值,这里分开写要用let
 let n1, n2;
 ([n1, n2] = numbers);
//const [n1,n2]= numbers; //按顺序解构赋值
console.log(n1, n2)

const [n1,,,n4]=numbers;//解构赋值第一位和第四位
// 如果事先定义的变量多于数组元素数，多出的变量赋值为undefined；当然也可以写上默认值
 const [n1,,,n4,n5=123]=numbers;

数组的某一项仍是一个数组情形下的深层解构：

const numbers2 = ["a", "b", "c", "d", [1, 2, 3, 4]];
// 得到numbers2下标为4的数组中的下标为2的数据，放到变量n中
const [, , , , [, , n]] = numbers2;
console.log(n);

数组里某一项是是对象的情况：

const numbers3 = ["a", "b", "c", "d", {
    a: 1,
    b: 2
}];
// 得到numbers3下标为4的数组的属性a，赋值给变量a
 const [, , , , { a }] = numbers3;
 console.log(a);
 //变量名声明为别名
// const [, , , , { a: A }] = numbers3;
// console.log(A);
//也可以如下书写，直接对数组的下标为4的一项进行解构
// const { a: A } = numbers3[4];

剩余项的收集在解构里的运用：

这个是对象的情形：

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

解构出name，然后剩余的所有属性，放到一个新的对象中，变量名为obj
name:kevin obj:{age:11,sex:"男",address:{...}}

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

这个是数组的情形：

const numbers4 = [324, 7, 23, 5, 3243];
// 得到数组前两项，分别放到变量a和b中，然后剩余的所有数据放到数组nums
const [a, b, ...nums] = numbers4; //剩余项的解构要放到最后一个
// 以前可以用这样的方法实现 
//const a = numbers4[0],b=numbers4[1],nums=numbers4.slice(2);
console.log(a, b, nums);

几个例子

1. 数组解构在变量数值调换是的运用

 let a = 1,
   b = 2;
 [b, a] = [a, b]
console.log(a, b) //2,1
//以前要用一个临时变量中转，用数组解构的方法，显得很方便

2. 解构出下面对象中第二条评论的用户名和评论内容
   // name:“用户名2” content:“评论2”

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

第一种解构方式：

 const {
  comments: [ , {
   content,
        user: {
          name
       }
    }]
} = article;

第二种解构方式：

 const [, {
    content,
    user: {
       name
   }
 }] = article.comments;

第三种解构方式：

 const {
    content,
   user: {
       name
     }
 } = article.comments[1]

// 有多种书写方式，注意要解构出来项的位置很关键。

console.log(content, name)

参数解构

函数的参数是对象，函数运行时要用到参数这个对象的属性，以前的做法是这样的（显得有些麻烦，每句都要带上user.）：

 function print(user) {
     console.log(`姓名：${user.name}`)
     console.log(`年龄：${user.age}`)
   console.log(`性别：${user.sex}`)
    console.log(`省份：${user.address.province}`)
    console.log(`城市：${user.address.city}`)
 }


const user = {
    name: "kevin",
    age: "11",
    sex: "male",
    address: {
        province: "sichuan",
        city: "chengdu"
    }
}
print(user)

在参数位置直接进行解构，则简洁很多：

function print({ name, age, sex, address: { province, city } }) {
   console.log(`姓名：${name}`)
   console.log(`年龄：${age}`)
   console.log(`性别：${sex}`)
   console.log(`省份：${address.province}`)
   console.log(`城市：${address.city}`)
}

再有一个ajax的例子，以前的做法默认配置和传参混合的模式，如果传参则覆盖默认值，不传参则使用默认值

function ajax(options) {
     const defaultOptions = {
        method: "get",
        url: "/"
    }
    const opt = {
         ...defaultOptions,
        ...options
    }
    console.log(opt)
 }

 ajax({
    method: "get",
    url: "/abc"
 })

现在用解构的方法来做（简洁很多吧）

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

ajax({
    url: "/abc"
})

这里有个隐患： 如果不传参，则视为undefined，当你试图对undefined或null进行解构会报错 在参数解构的位置默认赋值一个空对象，是通常的解决方法。

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

ajax()