解构赋值

通过解构赋值,可以快速从对象或者数组中取出属性或者数值。

  1. 解构赋值

    可以通过定位到数组或者对象的某一个位置,将值直接赋给一个或多个变量。

    const arr = ['dasha', 'ersha', 'gangdan']
    let [a, b, c] = arr //a='dasha' b='ersha' c='gangdan'
    //假如需要交换ab的值 只需要
    [a, b] = [b, a]
  2. 解构赋值嵌套

    复杂的对象或者数组也可以使用这种方法。

    const arr = [1, [2,3,4], 5]
    let [a, [b,,d], c] = arr console.log(a) // 1
    console.log(b) // 2
    console.log(d) // 4
  3. 解构赋值的默认值

    给变量先设置好默认值,当数组或者对象中无法找到匹配的值,则将默认值赋给变量。

    let [a=1] = [100] // a=100
    let [b=1] = [] // b=1
  4. 解构赋值用在对象上时候,需要用键的方式

    const obj = {
    name:'shabi',
    age:12,
    }
    let{age} = obj // 为了防止age在上面被let定义过了,可以将age改名为ag
    let{age:ag, err="定义err默认值即使对象中没有这个属性,也可以获取到这个默认值字符串"} = obj
    console.log(err)// '定义err默认值即使对象中没有这个属性,也可以获取到这个默认值字符串'
  5. 解析一个从函数返回的数组

    获取返回值进行解构赋值,更加方便

    function test(){
    return [1,2,3]
    }
    let [x,y] = test()
    console.log(x) //x = 1
    console.log(y) //y = 2
  6. rest写法:将剩下的所有值赋值给一个变量

    这种写法只能适用于用在最后一位,无法用在开头或者中间,否则会报错。

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

ES6中的解构赋值(数组,对象,嵌套,默认值)的更多相关文章

  1. 【JS】325- 深度理解ES6中的解构赋值

    点击上方"前端自习课"关注,学习起来~ 对象和数组时 Javascript 中最常用的两种数据结构,由于 JSON 数据格式的普及,二者已经成为 Javascript 语言中特别重 ...

  2. ES6中的解构赋值

    在解释什么是解构赋值前,我们先来看一下, ES5 中对变量的声明和赋值. var str = 'hello word'; 左边一个变量名,右边可以是字符串,数组或对象. ES6 中增加了一种更为便捷的 ...

  3. ES6学习-5 解构赋值(2)对象的解构赋值

    啥也不说,先举个栗子: 1 let { myname, myage } = { myage: 18, myname: "郭郭" }; 2 console.log(myname) / ...

  4. ES6 变量的解构赋值

    数组的解构赋值     var [a,b,c] = [1,2,3];    左边是变量,右边是值,根据数据结构一一对应 只要等号两边的模式相同,左边的变量就会被赋予右边对应的值,必须模式相同 如果等号 ...

  5. (2)ES6解构赋值-数组篇

    1.解构赋值-数组篇 //Destrcturing(解构) //ES5 /* var a = 1; var b = 2; var c = 3; */ //ES6 var [a,b,c] = [1,2, ...

  6. ES6里的解构赋值

    我们经常定义许多对象和数组,然后有组织地从中提取相关的信息片段.在ES6中添加了可以简化这种任务的新特性:解构.解构是一种打破数据结构,将其拆分为更小部分的过程. 一.引入背景 在ES5中,开发者们为 ...

  7. ES2015中的解构赋值

    ES2015中允许按照一定的模式,从数组和对象中提取值,对变量进行赋值,被称为”解构(Destructering)“. 以前,为变量赋值,只能指定值. /** * 以前,为变量赋值,只能直接指定值 * ...

  8. ES6学习随笔--字符串模板、解构赋值、对象、循环、函数、Promise、Generrator

    在线编译器:babel.github 在nongjs中使用 'use strict' let a = ; 运行node : node --harmony_destructuring xxx.js 代码 ...

  9. 【ES6 】ES6 解构赋值--数组解构赋值

    定义 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构 数组的解构赋值 以前,为变量赋值,只能直接指定值. let a = 1; let b = 2; let c = 3; ...

  10. ES6:使用解构赋值仅用一行定义多个相同的数组,且指向堆不同(解构赋值)

    在开发过程中我们经常要用到一些临时变量对数据进行一些特殊处理,由于良好的编码习惯要在临时变量用完后释放内存,所以当临时变量数量较多时,整体代码会变得冗余. let a = [] let b = [] ...

随机推荐

  1. UE4 编辑器的非运行时,给StaticMeshActor设置StaticMesh

    用 UAssetManager::GetStreamableManager().LoadSynchronous<UStaticMesh>(FSoftObjectPath(packagePa ...

  2. MySQL innodb存储引擎的数据存储结构

    InnoDB存储引擎的数据存储结构 B+ 树 为什么选择B+树? 因为B+树的叶子节点存储了所有的data,所以它的非叶子节点可以存储更多的key,使得树更矮:树的高度几乎就是I/O的次数,所以选择更 ...

  3. Gabor滤波(个人学习)

    Gabor滤波 1.优点 Gabor小波与人类视觉系统中简单细胞的视觉刺激响应非常相似.在提取目标的局部空间和频率与信息方面具有良好的特性. 对于图像的边缘敏感,能够提供良好的方向选择和尺度选择.因此 ...

  4. Linux系列---【U盘插入后,linux系统如何查看U盘中的内容?】

    U盘插入后,linux系统如何查看U盘中的内容? 1.插入U盘 2.输入命令查看U盘是否插入成功 sudo fdisk -l 输入上面命令后,在最下面Device Boot一栏查看自己的U盘所在的分区 ...

  5. C# 类库 dll 读取配置文件信息

    一:给 C# 类库 dll 添加配置文件并读取配置信息 效果: 1.给类库程序添加配置文件,并命名为:类库名.DLL.config 如上面效果图,类库为:API.dll ,那么其对应的类库配置文件为: ...

  6. Vue父子组件传值——第一次传不过去之“怪象”?

    前言:最近写Vue父子组件传值出现第一次传不过去之"怪象",以为Vue的BUG呢.然则,是自己太菜"^_^"!!!特此记录以警己 <spec-param& ...

  7. Unity学习笔记——坐标转换(2)

    子物体与父物体 子物体与父物体的关系类似于人与地球的关系,地球无论自转还是公转,对于地球上的我们来说,前后左右的方向不会变,因此在Unity中当我们旋转或是移动父物体时,子物体跟随父物体变化,但tra ...

  8. Oracle账户被锁住,解锁

    转载自:https://blog.csdn.net/weixin_43464743/article/details/121226334 方法一PLSQL解锁1.用dba用户登录plsql.2.左侧选择 ...

  9. JAVA 学习打卡 day2

    2022-04-23 16:43:32 1.字符类型 (1)字符和整型之间的相互转换 给字符变量赋值可以使用数值和字符,它们都可以使程序正确地运行.要注意的是,字符要用一对单引号('')括起 (2)常 ...

  10. HTTPS的实现原理 ---- 核心 SSL/TLS协议

    是在应用层和 传输层之间 添加的 安全层(SSL/TLS协议) 端口号 :HTTP 默认是 80,HTTPS 默认是 443. URL 前缀 :HTTP 的 URL 前缀是 http://,HTTPS ...