解构赋值

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

  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. elementUI table 数组中各项加逗号隔开

    js处理 //this.newTableData 数组 this.newTableData.map((item,index)=>{ //item.label 数组 if(item.label){ ...

  2. Unity鼠标点选RenderTexture里渲染的3D模型

    公司的产品有个功能:在主相机之外,另有一个摄像机来渲染不同的3D模型,然后把摄像机的RenderTexture赋值给一个 rawImage.texture,作为2D的UGUI来显示.(应用场景:模型结 ...

  3. https://计算机四级

    计算机四级内容: 一,网络工程师 基本要求 1.了解大型网络系统规划.管理方法: 2.具备中小型网络系统规划.设计的基本能力: 3.掌握中小型网络系统组建.设备配置调试的基本技术: 4.掌握企事业单位 ...

  4. Navicat Premium 12 安装破解过程 (经过测试)

    @ 目录 下载安装 下载 解压文件目录 安装使用步骤截图 1. 安装navicat120_premium_cs_x64.exe 软件 2. 解压Navicat.Premium 破解补丁.rar 3. ...

  5. mitudesk的pytorch基础

    pytorch定义张量的方法和Numpy差不多 2. 标量才能对张量求导,代表其在各个方向上的偏导数,结果是一个张量 3. 在pyt中张量可以对张量求导,前提条件是求导时传一个1,1,1,1,进去,其 ...

  6. 05 HDFS Java API应用实例

    一.在Ubuntu系统中安装和配置Eclipse 二.利用hadoop 的java api,向HDFS写一个文件. 三.从HDFS读取一个文件的内容.

  7. 点击按钮触发div颜色改变的几种写法

    目录 JavaScript 行内事件 onclick绑定 关于选取元素 关于改变颜色 addEventListener jQuery 获取元素 绑定事件 设置样式 css() 添加class Vue ...

  8. 持续集成环境(3)-Jenkins用户权限管理

    我们可以利用Role-based Authorization Strategy 插件来管理Jenkins用户权限 安装Role-based Authorization Strategy插件 开启权限全 ...

  9. HDFS Property列表,适用于Hadoop 2.4以上 。

    Property列表链接:http://hadoop.apache.org/docs/r2.4.1/hadoop-project-dist/hadoop-hdfs/hdfs-default.xml 以 ...

  10. git的回退以及合并,删除什么的

    有时候不小心合并了别的分支中的commit.我们需要回退某些提交记录.可以通过reset来操作,reset 会回退到指定commit.这种方式会删除记录,我们最好使用revert命令来操作 git r ...