ES6 解构

对象解构

• 解构不会影响原始对象
• 对象的解构就是将对象中的属性值保存到同名变量中，方便书写和使用。即是语法糖。
• 同名变量是跟属性名一样的变量
• 例子

const obj = {
    name: "111",
    age: 12,
    sex: 0,
    address: {
        x: "abc",
        y: "cde"
    }
}
//正常
// let name,age,sex,address;
// name = obj.name;
// age = obj.age;
// sex = obj.sex;
// address = obj.address;

//解构
// let name,age,sex,address;
// ( { name , age , sex , address }  = obj );

//简写解构，先定义4个变量，然后从对象中读取同名属性，放到变量中
let { name , age , sex , address } = obj;
console.log(name,age,sex,address);

在解构中使用默认值

• 如果对象中没有相应的变量名，解构时默认值为undefined;若不知道有没有同名变量，就可以给他默认值，如果对象中有就覆盖，没有就使用我们写的默认值。
• 例子

const obj = {
    name: "111",
    age: 12,
    sex: 0,
    address: {
        x: "abc",
        y: "cde"
    }
}

let {name,age,sex,abc} = obj;
console.log(name,age,sex,abc);//111 12 0 undefined
---------------------------------------------------
const obj = {
    name: "111",
    age: 12,
    sex: 0,
    address: {
        x: "abc",
        y: "cde"
    }
}

let {name,age,sex,abc = "默认值"} = obj;
console.log(name,age,sex,abc);//111 12 0 默认值
--------------------------------------------------
const obj = {
    name: "111",
    age: 12,
    sex: 0,
    address: {
        x: "abc",
        y: "cde"
    },
    abc: "有值"
}

let {name,age,sex,abc = "默认值"} = obj;
console.log(name,age,sex,abc);//111 12 0 有值

非同名属性解构

{属性名：变量名}

• 例子

const obj = {
    name: "111",
    age: 12,
    sex: 0,
    address: {
        x: "abc",
        y: "cde"
    }
}
//先定义3个变量，name,age,gender
//再从对象中取出name,age,sex的值
let {name,age,sex:gender} = obj;
console.log(name,age,gender);//111 12 0
--------------------------------------
const obj = {
    name: "111",
    age: 12,
   
    address: {
        x: "abc",
        y: "cde"
    }
    
}
//先定义3个变量，name,age,gender
//再从对象中取出name,age,sex的值
//没有就是默认值
let {name,age,sex:gender = "男"} = obj;
console.log(name,age,gender);//111 12 男

进一步解构

const obj = {
    name: "111",   
    address: {
        x: "abc",
        y: "cde"
    }
    
}
//先定义两个变量name，x

let { name , address: { x } } = obj;
console.log(name,x);//111 abc

数组解构

• 数组本质还是对象

//变量名在后
const numbers = ['a','b','c','d']
const {0:n1,1:n2,2:n3,3:n4} = numbers;
const {0:n1,1:n2,2:n3,3:n4,4:n5} = numbers;
console.log(n1,n2,n3,n4);//结果一样 a b c d

• 更加方便

const numbers = ['a','b','c','d'];
const [n1,n2,n3,n4] = numbers;
console.log(n1,n2,n3,n4);//a b c d

• 还可以跳着写，中间空格

const numbers = ['a', 'b', 'c', 'd']
const [n1, , , n4] = numbers;
console.log(n1,n4); //a d

• 默认值照样可以

const numbers = ["a","bb","ccc"];
const [n1,n2="b",n3="c"] = numbers;
console.log(n1,n2,n3,n4="dddd");//a bb ccc dddd

• 嵌套解构

const numbers = ['a','b','c','d',['e','f']];
const [,,,,[,n]] = numbers;
console.log(n);//f

const numbers1 =  ['a','b','c','d',{a:"111",b:"222"}];
const [,,,,{a}] = numbers1;
const [,,,,{b:B}] = numbers1;
const {a:a1} = numbers1[4];
console.log(a,B,a1);//111 222 111

解构和展开运算符

• 对象中

const obj = {
    name: "111",
    age: 12,
    sex: 0,
    address: {
        x: "abc",
        y: "cde"
    }
}
const {name , ...obj1} = obj;
console.log(name,obj1);//111 age: 12, sex: 0, address: {…}}

• 数组中

const numbers = [11,22,33,44,55];
const [a,b, ...nums] = numbers;
//之前的写法
const num1 = numbers[0],num2 = numbers[1],nums1 = numbers.slice(2);
console.log(num1,num2,nums1)//11 22 [33, 44, 55]
console.log(a,b,nums);//11 22 [33, 44, 55]

解构之交换

let a = 1111,b=2222;
//[a,b]看成一个数组进行解构
[b,a] = [a,b];
console.log(a,b);//2222,1111

• 题

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

//解构出第二条评论的用户名和评论内容
// name:"用户名2"  content:"评论2"
const {content,user:{name}} = article.comments[1];
console.log(content,name);

参数解构

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

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

---

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

ajax()