【ES6】之解构赋值

解构赋值

按照一定的模式, 将数组或对象中的数据提取出来, 赋值给变量,这个过程叫做解构赋值

1、赋值：将数组或对象中的数据提取出来，赋值给变量

  let arr = [1, 2, 3, 4, 5]

  // let 变量名=值
  let a = arr[0]
  let b = arr[1]
  console.log(a, b);

2、解构：按照一定的模式（数组模式，对象模式）

   // let 变量名=值

   // let [变量名1,变量名2,...]=值
   // let {k1:变量名1,k2:变量名2,。。。。}=值

   let [, , c, d] = arr
   console.log(c, d);

1、这是一个赋值运算 =
2、右边是需要使用的数据
3、左边是变量（按照一定的模式去声明的变量，需要匹配右边的数据的模式）

数组的解构赋值

<script>
    /* 数组解构赋值 */
    let arr = [1, 2, "a", [3, 4], { name: "jiaxin" }];

    // 1.完全解构
    let [a, b, c, d, e] = arr;
    console.log(a, b, c, d, e); // 解析每一个值

    // 2.不完全解构
    let [c, d] = arr;
    console.log(c, d); // 1 2

    // 不完全解构缺省值
    let [,,,e,f] = arr;
    console.log(e, f); // [3, 4], {name: "jiaxin"}

    // 解构失败
    // 解构失败, 变量多于实际数据
    let [a, b, c, d, e, f] = arr;
    console.log(f); // undefined

    // 解构赋值默认值
    // 默认值只有当解构失败或者值为undefined的时候才会生效
    let [a, b, c, d, e, f=0, g=0] = arr;
    console.log(f, g);// 0 null

    // 数组的解构赋值, 是按照数组的特性、顺序解构的

</script>

对象解构赋值

  // 对象解构赋值
  // 对象解构不是顺序解构, 不需要缺省值
  // let{k1:变量名1, k2:变量名2,,...} = 值

  let obj = {
      age: 20,
      name: 'jiaxin',
      job: undefined
  }

  // 解构成功
  let {age: a, name: n} = obj;
  console.log(a, n);

  // 解构失败和解构失败默认值
  // 解构失败: 没有对应的key值 undefined 
  // 如果解析出来的值是undefined, 那么默认值生效
  let {age: a, name: n, name: m, sex:s = "female", job:j = "coding"} = obj;
  console.log(a, n, m, s, j);

  // 当key和变量名一致时, 可以简写
  let {age, name, sex = 'female'} = obj;
  console.log(age, name, sex); // 20 "jiaxin" female

函数参数解构赋值

function myajax({ type = "get", url = "./json/1.txt", dataType = "json" } = {}) {
      $.ajax({
          type,
          url,
          dataType,
          success: function (res) {
              console.log(res);
          },
          error: function (err) {
              console.log(err);
          }
      });
  }
  // myajax("get","./json/1.txt","json")
  // myajax("get","./json/2.txt","json")
  let obj = {
      type: "get",
      url: "./json/1.txt",
      dataType: "json"
  }
  // myajax(obj)//实参相当于等号的右边 let {type2:type1,url2:url1,dataType2:dataType1}   =obj

  let obj1 = {
      url: "./json/2.txt"
  }
  // myajax(obj1)  //let {url2:url1}   =obj

  myajax()  // 想让所有项都保持默认   let {type="get",url="./json/1.txt",dataType="json"}={}