"路虽远行则将至，事虽难做则必成。"------ 《荀子·劝学》
目录
解构赋值是什么呢：
就是快速的从对象或者数组中取出成员的一个语法方式。
对数组解构：
javascript
let arr = [1, 2, 3]
let [x, y, z] = arr;
console.log(x, y, z); //1 2 3如何交换值的位置？
javascript
let x = 1;
let y = 2;
[y, x] = [x, y];
console.log(x, y); //2 1如果在数组中我只想拿到第三个数呢？
javascript
let arr = [1, 2, 3]
let [, , z] = arr;
console.log(z); // 3数组里有个数组，我想拿到数组里数组的第一个数？
javascript
let arr = [1, [2, 4, 6], 3]
let [, [a]] = arr;
console.log(a); // 2如果赋的值是空的输出什么，有办法设置默认值吗？
javascript
let [a] = []
console.log(a); // undefined
let [x = 1] = []
console.log(x); // 1对对象解构：
javascript
let obj = {
name: 'kitty',
age: 18
}
let { name, age } = obj;
console.log(name, age); // kitty 18如何交换位置会影响输出结果吗？
不会 因为是按照属性来找值的；对象是根据索引对应的。
javascript
let obj = {
name: 'kitty',
age: 18
}
let { age, name } = obj;
console.log(name, age); // kitty 18可以只取一个值吗？我不想都取出来
sure!!!
javascript
let obj = {
name: 'kitty',
age: 18
}
let { name } = obj;
console.log(name); // kitty
javascript
let res = {
code: 200,
data: "xxxxxxxxxxxxx"
}
let { data } = res;
console.log(data); //xxxxxxxxxxxxx如果在同一作用域下有重名的变量该怎么办？
可以取别名（进行重命名）。
javascript
let code = 'aaaaa';
let res = {
code: 200,
data: "xxxxxxxxxxxxx"
}
let { data, code: co } = res;
console.log(data, co); //xxxxxxxxxxxxx 200对于没有该属性的值打印一定是undefined，但是我们可以给它设置一个默认值。
javascript
let code = 'aaaaa';
let res = {
code: 200,
data: "xxxxxxxxxxxxx"
}
let { data, code: co, error = "没有错误" } = res;
console.log(data, co, error); //xxxxxxxxxxxxx 200 没有错误如果后端有这个属性的值，则会被覆盖，输出后端返回的值。
如果对象里包含一个数组呢，我想拿到这个数组或者拿到数组里的每一项
javascript
let code = 'aaaaa';
let res = {
code: 200,
data: {
list: ['A', 'B', 'C']
}
}
let { data: { list } } = res;
console.log(list); //['A', 'B', 'C']
javascript
let code = 'aaaaa';
let res = {
code: 200,
data: {
list: ['A', 'B', 'C']
}
}
let { data: { list: [x, y, z] } } = res;
console.log(x, y, z); // A B C在函数内传参：
javascript
function getData () {
let res = {
code: 200,
data: {
list: ['A', 'B', 'C']
}
}
test(res)
}
function test (res) {
console.log(res);// {code: 200, data: {...}}
// 可以在这里进行对象解构处理
let { data: { list: [x, y, z] } } = res;
console.log(x, y, z); //A B C
}
getData()也可以在接收的时候直接解构。。。主要看项目具体是怎么样的
javascript
function getData () {
let res = {
code: 200,
data: {
list: ['A', 'B', 'C']
}
}
test(res)
}
function test ({ code, data }) {
console.log(code, data); // 200 {list: Array(3)}
}
getData()
javascript
function getData () {
let res = {
code: 200,
data: {
list: ['A', 'B', 'C']
}
}
test(res)
}
function test ({ code, data: { list } }) {
console.log(code, list); // 200 ['A', 'B', 'C']
}
getData()对于字符串解构：
类似于数组解构
javascript
let myname = 'kitty';
let [x, y, z] = myname;
console.log(x, y, z); // k i t
let { length } = myname;
console.log(length); // 5当然也可以起别名（如果重名的话）
javascript
let myname = 'kitty';
let [x, y, z] = myname;
console.log(x, y, z); // k i t
let { length: len } = myname;
console.log(len); // 5