6-1. 对象解构
什么是解构
使用ES6的一种语法规则，将一个对象或数组的某个属性提取到某个变量中
解构不会对被解构的目标造成任何影响
在解构中使用默认值
{同名变量 = 默认值}
非同名属性解构
{属性名:变量名}
为什么要使用对象结构？
为了解决取对象属性的时候太繁琐的问题。
最开始取属性的值可以采用下面的写法，为了简化下面的写法采用了解构。
const user = {
name: "kevin",
age: 11,
sex: "男",
address: {
province: "四川",
city: "成都"
}
}
let name, age, sex, address;
name = user.name;
age = user.age;
sex = user.sex;
address = user.address;
第一步简化的写法
let name, age, sex, address;
({ name, age, sex, address } = user);
进一步简化的写法
// 先定义5个变量，然后从对象中读取同名属性，放到变量中
let { name, age, sex, address, abc = 123 } = user
上面的例子也引申出来如果结构你想给个默认值类似于 abc,可以直接在 abc = 默认值。
如果我想解析出来address中对象中对象属性，要采用下面的写法。
//解构出user中的name、province
//定义两个变量name、province
//再解构
const { name, address: { province } } = user;
注意上面的写法只是定义了 name,province 两个属性，别的参数没有定义，同样结构后的赋值也是。
6-2. 数组解构
const numbers = ["a", "b", "c", "d"];
// const {
// 0: n1,
// 1: n2
// } = numbers;
首先数组本身也是对象，可以使用对象的结构办法去解构，但是0,1不能作为变量名，所以，将 0 变成n1 1重新命名成n2,去解构。 按照上面的思路还有下面的两种写法，第一种是先声明变量，再解构。
// let n1, n2;
// ([n1, n2] = numbers);
第二个是直接声明变量和解构一块进行。
const [n1, n2] = numbers;
console.log(n1, n2)
如果遇到我只想要数组的某几个元素，也可以使用下面的方法进行解构 ,号可以省略中间不要的元素。
const numbers = ["a", "b", "c", "d"];
const [n1, , , n4, n5 = 123] = numbers;
console.log(n1, n4, n5)
数组中套数组进行解构
const numbers = ["a", "b", "c", "d", [1, 2, 3, 4]];
// // 得到numbers下标为4的数组中的下标为2的数据，放到变量n中
const [, , , , [, , n]] = numbers;
数组中套对象进行解构
const numbers = ["a", "b", "c", "d", { a: 1, b: 2}];
//得到numbers下标为4的数组的属性a，赋值给变量A
// const [, , , , { a: A }] = numbers;
const { a: A } = numbers[4];
console.log(A)
展开运算符的使用
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)
解构用来交换变量
6-3. 参数解构
例子1
const user = {
name: "kevin",
age: 11,
sex: "男",
address: {
province: "四川",
city: "成都"
}
}
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}`)
}
print(user)
上面print 方法里面 user.name,user.age ....太麻烦了，可以使用参数解构 写法如下
function print({ name, age, sex, address: {
province,
city
} }) {
console.log(`姓名：${name}`)
console.log(`年龄：${age}`)
console.log(`性别：${sex}`)
console.log(`身份：${province}`)
console.log(`城市：${city}`)
}
例子2 ajax的参数
原来写法
function ajax(options) {
const defaultOptions = {
method: "get",
url: "/"
}
const opt = {
...defaultOptions,
...options
}
console.log(opt)
}
现在解构写法
function ajax({
method = "get",
url = "/"
}) {
console.log(method, url)
}
ajax(option)
但是如果是ajax()；去调用就会导致传进去的参数是 undefined，undefined是不能进行解构的，这里的解决办法就是给参数一个空对象这样一个默认值，防止报错。 代码如下：
function ajax({
method = "get",
url = "/"
} = {}) {
console.log(method, url)
}
ajax( )
