博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
ES6-----学习系列二(解构赋值)
阅读量:5053 次
发布时间:2019-06-12

本文共 1252 字,大约阅读时间需要 4 分钟。

一、解构赋值的定义

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

二、解构赋值的分类

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

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

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

 

转载于:https://www.cnblogs.com/diasa-fly/p/6993330.html

你可能感兴趣的文章
从MS SQL删除大数据说开去
查看>>
NOVO SOP (SOP简介及历史)
查看>>
windows7+docker添加php扩展
查看>>
V2019 Super DSP3 Odometer Correction Vehicle List
查看>>
Python 3.X 练习集100题 05
查看>>
今时不同往日:VS2010十大绝技让VS6叹服
查看>>
设计器 和后台代码的转换 快捷键
查看>>
在线视频播放软件
查看>>
用代码生成器生成的DAL数据访问操作类 基本满足需求了
查看>>
28初识线程
查看>>
Monkey测试结果分析
查看>>
Sublime Text 3 设置
查看>>
X64操作系统组件Jmail无法正常服务问题
查看>>
div 居中
查看>>
Vue 后台管理框架
查看>>
reactiveCocoa使用
查看>>
Orleans 序列化遇到的坑
查看>>
软件介绍(apache lighttpd nginx)
查看>>
Storm学习笔记1:Storm基本组件
查看>>
markdown语法实例
查看>>