ES6笔记（二）解构赋值

简介

  解构赋值是对赋值运算符的扩展，是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值的方法，在代码书写上简洁且易读，语义更加清晰明了，也方便了复杂对象中数据字段的获取。

使用方式

数组模型结构

只要某种数据结构具有Iterator接口，都可以采用数组形式的解构赋值。

• 基本解构：等号两侧变量与值一一对应

  let [a, b, c] = [1, 2, 3]
  // 等效于
  let a = 1;
  let b = 2;
  let c = 3;

• 嵌套与忽略：等号两侧各符号保持一致

  let [a, [[b], c]] = [1, [[2], 3]]
  // a = 1; b = 2; c = 3
  
  let [a, , b] = [1, 2, 3]
  // a = 1; b = 3

• 剩余运算符：运算符必须用于左边数组的最后一个变量，作用是将右边剩余的所有值的数组赋给左边最后一个变量，当右边没有剩余值时，赋值为空数组。

 let [a, ...b] = [1, 2, 3]
 // 等效于
 let a = 1;
 let b = [2, 3]

• 解构默认值与不完全解构：等号左边的模式，只匹配一部分的等号右边的数组，解构也可以成功，没有被赋值的变量等于undefined，若该变量存在默认赋值时，会触发默认值作为返回结果。

 let [a = 1, b] = []; // a = 1, b = undefined
 let [a = 1, b = a] = [5];    // a = 5, b = 5

对象模型解构

  ES6同样支持复杂对象的解构赋值，使用方式与数组模型类似

• 基本解构：等号两侧变量与值一一对应

 let { a, b } = { a: 1, b: 2 };
//等效于
 let a = 1;
 let b = 2;
 
 let { c : d } = { c : 3 }; // d = 3

• 嵌套与忽略：等号两侧各符号保持一致

  let {p: [x, {  }] } = {p: ['hello', {y: 'world'}] }
  // x = 'hello'

• 剩余运算符：运算符必须用于左边对象的最后一个变量，作用是将右边剩余的所有值的对象赋给左边最后一个变量，当右边没有剩余值时，赋值为空。

 let {a, ...rest} = {a: 1, b: 2, c: 3};
 // 等效于
 let a = 1;
 let rest = { b: 2, c: 3 }

• 解构默认值与不完全解构：等号左边的模式，只匹配一部分，解构也可以成功，没有被赋值的变量等于undefined，若该变量存在默认赋值时，会触发默认值作为返回结果。

 let {a = 10, b = 5} = {a: 3};// a = 3; b = 5

使用场景

复杂对象解构赋值

  const coder = {
    name: 'myName',
    age: 30,
    study: {
        name: 'es6',
        year: 2015
    }
  };

  const {
    name: name1,// const不允许重复定义，可以使用别名
    age,
    study:{
        name, year
    }
  } = coder;
  console.log(name1, age, name, year);

解构函数对象或者函数返回值

  const coder = () => {
    return {
        name: 'myName',
        age: 30
    }
  }
  const {name, age} = coder();
  console.log(name, age)

交换变量值

  let a = 1;
  let b = 2;
  [a, b] = [b, a]
  console.log(a, b) // 2,1

json字符串取值

const json = '{"name":"myName", "age":"30"}';
const {name, age} = JSON.parse(json);
cosole.log(name, age)

ajax请求应用

// CDN引用axios库
axios.get('./data.json').then(({data}) => {
    console.log(data)
})

注意事项

• 不建议将已经声明的变量进行解构赋值， JavaScript 引擎会将{x}理解成一个代码块，从而发生语法错误。

  let a;
  {a} = {a: 1};// SyntaxError: syntax error
  // 只能写为：
  ({a} = {a: 1}); // x = 1

• 数组本质是特殊的对象，因此可以对数组进行对象属性的解构

  let arr = [1, 2, 3];
  let {0 : first, [arr.length - 1] : last} = arr;
  // first = 1; last = 3;

• 字符串为类数组对象，也可进行解构赋值

  let [a, b, c] = 'hello' 
  // a = 'h'; b = 'e'; c = 'l'

• 数组和类数组对象都含有length属性，也可对其进行解构赋值

  let { length: len } = [1, 2] // len = 2
  let { length: len } = 'hello' // len = 5