首页 > 代码库 > ES6-----学习系列二（解构赋值）

ES6-----学习系列二（解构赋值）

2024-10-05 00:21:39   216人阅读

一、解构赋值的定义

　　简单的理解就是赋值=号左右两侧具有相同的结构，来进行一一对应的赋值的语句

二、解构赋值的分类

　　数组解构赋值  对象解构赋值  字符串解构赋值  布尔值解构赋值  函数参数解构赋值  数值解构赋值 （重点理解前两个就可以了）

三、对于每个分类单独解释

　　1、数组解构赋值（下面进行代码展示，并添加必要的注释便于理解）

{
  let a,b,rest;
  [a,b]=[1,2];
  console.log(a,b);//输出1,2 直接将1和2解构到a和b
}

　　也可以对变量设置默认值例如下面代码的c 就是默认为3  如果解构例如[a,b,c]=[1,2] 没有对c进行解构  则c为undefined

{
  let a,b,c,rest;
  [a,b,c=3]=[1,2];
  console.log(a,b);
}

　　使用场景1

　　　　①、变量交换　　　

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

　　　　②、对函数返回值直接提取（没有解构赋值 需要先取出结果 然后通过索引来进行取出）　

{
  function f(){
    return [1,2]
  }
  let a,b;
  [a,b]=f();
  console.log(a,b);
}

　　　　③、只取出返回结果的某些需要的值

{
  function f(){
    return [1,2,3,4,5]
  }
  let a,b,c;
  [a,,,b]=f();
  console.log(a,b); // 输出1 4
}

　　　　④、不关心数组的内容长度

{
  function f(){
    return [1,2,3,4,5]
  }
  let a,b,c;
  [a,...b]=f();
  console.log(a,b);//输出1,[2,3,4,5]
}

　　2、对象解构赋值

{
  let o={p:42,q:true};
  let {p,q}=o;
  console.log(p,q);
}

　　　对象解构赋值设置默认值

{
  let {a=10,b=5}={a:3};
  console.log(a,b);//输出3 5
}

　　　稍微复杂的对象的解构赋值　　　

{
  let metaData={
    title:‘abc‘,
    test:[{
      title:‘test‘,
      desc:‘description‘
    }]
  }
  let {title:esTitle,test:[{title:cnTitle}]}=metaData;
  console.log(esTitle,cnTitle);//abc test （相当于esTitle和cnTitle分别对应metaData里面的abc和test）
}

 

ES6-----学习系列二（解构赋值）


联系
我们