变量解构赋值【ES6】

"路虽远行则将至，事虽难做则必成。"------ 《荀子·劝学》

目录

• 解构赋值是什么呢：
• 对数组解构：
• 对对象解构：
• 在函数内传参：
• 对于字符串解构：

解构赋值是什么呢：

就是快速的从对象或者数组中取出成员的一个语法方式。

对数组解构：

let arr = [1, 2, 3]
let [x, y, z] = arr;
console.log(x, y, z); //1 2 3

如何交换值的位置？

let x = 1;
let y = 2;
[y, x] = [x, y];
console.log(x, y); //2 1

如果在数组中我只想拿到第三个数呢？

let arr = [1, 2, 3]
let [, , z] = arr;
console.log(z); // 3

数组里有个数组，我想拿到数组里数组的第一个数？

let arr = [1, [2, 4, 6], 3]
let [, [a]] = arr;
console.log(a); // 2

如果赋的值是空的输出什么，有办法设置默认值吗？

let [a] = []
console.log(a); // undefined
let [x = 1] = []
console.log(x); // 1

对对象解构：

 let obj = {
      name: 'kitty',
      age: 18
    }

let { name, age } = obj;
console.log(name, age); // kitty 18

如何交换位置会影响输出结果吗？

不会 因为是按照属性来找值的；对象是根据索引对应的。

let obj = {
      name: 'kitty',
      age: 18
    }

let { age, name } = obj;
console.log(name, age); // kitty 18

可以只取一个值吗？我不想都取出来

sure!!!

let obj = {
      name: 'kitty',
      age: 18
    }

let { name } = obj;
console.log(name); // kitty 

let res = {
      code: 200,
      data: "xxxxxxxxxxxxx"
   }
let { data } = res;
console.log(data); //xxxxxxxxxxxxx

如果在同一作用域下有重名的变量该怎么办？

可以取别名（进行重命名）。

let code = 'aaaaa';
let res = {
      code: 200,
      data: "xxxxxxxxxxxxx"
    }
let { data, code: co } = res;
console.log(data, co); //xxxxxxxxxxxxx 200

对于没有该属性的值打印一定是undefined，但是我们可以给它设置一个默认值。

let code = 'aaaaa';
let res = {
      code: 200,
      data: "xxxxxxxxxxxxx"
    }
let { data, code: co, error = "没有错误" } = res;
console.log(data, co, error); //xxxxxxxxxxxxx 200 没有错误

如果后端有这个属性的值，则会被覆盖，输出后端返回的值。

如果对象里包含一个数组呢，我想拿到这个数组或者拿到数组里的每一项

let code = 'aaaaa';
let res = {
      code: 200,
      data: {
        list: ['A', 'B', 'C']
      }
    }
let { data: { list } } = res;
console.log(list); //['A', 'B', 'C']

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

在函数内传参：

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()

也可以在接收的时候直接解构。。。主要看项目具体是怎么样的

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()

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()

对于字符串解构：

类似于数组解构

let myname = 'kitty';
let [x, y, z] = myname;
console.log(x, y, z); // k i t

let { length } = myname;
console.log(length); // 5

当然也可以起别名（如果重名的话）

let myname = 'kitty';
let [x, y, z] = myname;
console.log(x, y, z); // k i t

let { length: len } = myname;
console.log(len); // 5