1.数组的解构

ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构

例子:

let [a, b, c] = [1, 2, 3];

console.log(a);//1
console.log(b)://2
console.log(c)://3

上面代码表示,可以从数组中提取值,按照对应位置,对变量赋值。

本质上,这种写法属于“模式匹配”,只要等号两边的模式相同,左边的变量就会被赋予对应的值。下面是一些使用嵌套数组进行解构的例子。

2.对象的解构

对象的解构与数组有一个重要的不同。数组的元素是按次序排列的,变量的取值由它的位置决定;而对象的属性没有次序,变量必须与属性同名,才能取到正确的值。

let {foo,bar}={bar:'aaa',foo:'bbb'};

console.log(foo);//aaa

console.log(bar);//bbb

3.字符串解构

字符串也可以解构赋值。这是因为此时,字符串被转换成了一个类似数组的对象。

const [a,b,c,d,f]='hello';

console.log(a);//h

console.log(b);//e

console.log(c);//l

console.log(d);//l

console.log(e);//o

初识ES6 解构的更多相关文章

  1. ES6解构赋值

    前面的话 我们经常定义许多对象和数组,然后有组织地从中提取相关的信息片段.在ES6中添加了可以简化这种任务的新特性:解构.解构是一种打破数据结构,将其拆分为更小部分的过程.本文将详细介绍ES6解构赋值 ...

  2. ES6 解构

    { "code": 200, "msg": "success", "data": { "total" ...

  3. ES6解构赋值常见用法

    解构赋值出现的契机: let obj = { a: 1, b: 2 } // 取值 let a = obj.a let b = obj.b 问题核心: 每次取值既要确定对象属性名,还得重新定义一个变量 ...

  4. ES6—解构赋值

    1.什么是解构赋值 ES6允许按照预定的模式,从数组.对象中提取值,对变量进行赋值. 我们直接用例子说明.    2. 数组的解构赋值 数组传统的变量赋值:      var arr=[1,2,3]; ...

  5. es6 解构赋值

    ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 关于给变量赋值,传统的变量赋值是这样的: var arr = [1,2,3];//把数组的值 ...

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

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

  7. es6 解构赋值 新认知/新习惯

    es6 的解构赋值其实很早就学习了,但一直纠结于习惯和可读性问题,所以没有大规模使用.最近被 react调教一番之后.已经完全融入认知和习惯中去了.总结一下三个常用的技巧: 对象取值 取值并重命名 剩 ...

  8. 简单看看es6解构赋值

    哎,我真的是太难了,今天就被这个解构赋值(也可以叫做析构,貌似析构是在c++中的,所以我这里叫做解构赋值吧)弄的我很烦,本来以为很容易的,结果还是弄了好久...就总结一下解构吧! 1.解构的基本使用 ...

  9. ES6 解构 destructuring

    解构的作用:简化书写长度,提升开发效率. 解构对象 在开发中我们常用到使用ajax请求数据,并且把数据渲染到页面上.可能这个数据返回的对象或数组.例如返回一个obj{name:'zwq',age:18 ...

随机推荐

  1. 20155339 2016-2017-2《Java程序设计》课程总结

    20155339 2016-2017-2<Java程序设计>课程总结 每周作业链接汇总 第一篇随笔:简单的叙述了一下自己对自己的专业以及对师生关系的期望. 平措卓玛的第二次随笔--论技能与 ...

  2. WPF Color、String、Brush转换

    原文:WPF Color.String.Brush转换 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/BYH371256/article/detai ...

  3. 【LG3235】 [HNOI2014]江南乐

    题目描述 给出\(n\)堆石子, 每次可以选择将大于某个数\(f\)一堆平均分成多个堆, 最后不能操作的失败. 题解 10pts 直接爆搜即可. 70pts 像我们对这类题目的常规操作那样,将一整个局 ...

  4. bzoj4998 星球联盟

    bzoj4998 星球联盟 原题链接 题解 先按照输入顺序建一棵树(森林),然后用一个并查集维护联盟的关系,对于不是树上的边\(a-b\),就把\(a-lca(a,b),b-lca(a,b)\)全部合 ...

  5. set get方法诡异的空指针异常

    发现原来是我的bean没有实例化 我的一直都是这么实例化的: UserEntity userEntity = null;难怪每次用不了set方法 原来是没有实例化 实例化之后就能正常使用了 UserE ...

  6. NumPy v1.15手册汉化

    NumPy参考 数组创建 零 和 一 empty(shape[, dtype, order]):返回给定形状和类型的新数组,而不初始化条目 empty_like(prototype[, dtype,  ...

  7. mybatis按datetime条件查询,参数为时间戳时

    mybatis按datetime条件查询,参数为时间戳时,如果数据库为2018-1-1 20:22:10, 你的时间戳也为2018-1-1 20:22:10,但却没找到数据.可能是时差导致的.百度修正 ...

  8. 3星|《CMO到底能干多久?》:CEO必须决定供公司需要哪类CMO

    CMO到底能干多久?(<哈佛商业评论>增刊) <哈佛商业评论>关于CMO的6篇文章.我认为第一篇<为何CMO宝座坐不长>写的最好,是典型的哈评风格:做过实际调查.有 ...

  9. eos对数据库的操作

    eosio的multi_index 概述 multi_index是eosio上的数据库管理接口,通过eosio::multi_index智能合约能够写入.读取和修改eosio数据库的数据 multi_ ...

  10. 两张神图介绍python3和 2.x与 3.x 的区别

    有感与第一张图, 做了第二张图.