ES6的解构说白了就是能够让我们一次性取到多个值,大致可分为一下几个方面

1、数组解构

普通的一维数组解构,如下one = array[0],two=array[1],three=array[2]

var [one, tow, three] = array;

嵌套数组解构

var [one,[[two],three]] = [1,[[2],3]];
// one=1;two=2;three=3

还可以跳过一些元素解构

var [,,three] = [1,2,3];
// three=3

指定不定参数进行解构

var [one,...three] = [1,2,3];
three=[2,3];

当访问空数组或则越界的时候得到undefined;

2、对象解构

对象解构使用{},首先指定要解构的属性名,然后指定绑定的变量

var {name:nameA,age:ageA}={name:"Jhon",age:23};
// nameA="Jhon",ageA=23

如果属性名和变量名一致时,可以缩写

var {name,age}={name:"Jhon",age:23};
// name="Jhon",age=23

对象也可以像数组一样进行嵌套解构,当解构一个未定义的属性时得到undefined

如果已经声明了某些变量或者没有使用关键字(var,let,const),则像下面这样使用会报错,因为解析引擎将{开头的语句解析为一个语句块,这时要加()处理

{name,age}={name:"Jhon",age:23};
// error
({name,age}={name:"Jhon",age:23});

3、其他

  • 解析null或者undefined会得到一个错误
  • 解析原始类型将会得到undefined
典型应用,多重返回值
function show(){
return [1,2];
}
var [one, two] = show();

解构Map

for( var [,value] of map){
console.log(value);
}


ES6新特性之解构使用细节的更多相关文章

  1. javascript ES6 新特性之 解构

    解构的作用是可以快速取得数组或对象当中的元素或属性,而无需使用arr[x]或者obj[key]等传统方式进行赋值 var arr = [1, 2, 3]; //传统方式 var a = arr[0], ...

  2. JavaScript ES6 新特性详解

    JavaScript ES6 带来了新的语法和新的强大功能,使您的代码更现代,更易读 const ,  let and var 的区别: const , let 是 ES6 中用于声明变量的新关键字. ...

  3. js--ES6新特性之解构

    前言 es6 中引入了解构这一新特性,了解解构成为一个格合前端必须掌握的基础知识,不仅作为了面试的重要考查知识,同时能极大提高我们平常工作的开发效率.本文来总结一下需要掌握的解构知识点. 正文 1.什 ...

  4. ECMAscript6新特性之解构赋值

    在以前,我们要对变量赋值,只能直接指定值.比如:var a = 1;var b = 2;但是发现这种写法写起来有点麻烦,一点都不简洁,而在ECMAScript6中引入了一种新的概念,那就是" ...

  5. ECMA Script 6新特性之解构赋值

    1.基本概念用法 1.1解构赋值:ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值. var a = 1; var b = 2; var c = 3; /*上述赋值语句用解构赋值为*/ v ...

  6. ES6,ES2105核心功能一览,js新特性详解

    ES6,ES2105核心功能一览,js新特性详解 过去几年 JavaScript 发生了很大的变化.ES6(ECMAScript 6.ES2105)是 JavaScript 语言的新标准,2015 年 ...

  7. ES6新特性三: Generator(生成器)函数详解

    本文实例讲述了ES6新特性三: Generator(生成器)函数.分享给大家供大家参考,具体如下: 1. 简介 ① 理解:可以把它理解成一个函数的内部状态的遍历器,每调用一次,函数的内部状态发生一次改 ...

  8. 前端入门21-JavaScript的ES6新特性

    声明 本篇内容全部摘自阮一峰的:ECMAScript 6 入门 阮一峰的这本书,我个人觉得写得挺好的,不管是描述方面,还是例子,都讲得挺通俗易懂,每个新特性基本都还会跟 ES5 旧标准做比较,说明为什 ...

  9. ES6新特性概览

    本文基于lukehoban/es6features ,同时参考了大量博客资料,具体见文末引用. ES6(ECMAScript 6)是即将到来的新版本JavaScript语言的标准,代号harmony( ...

随机推荐

  1. 在ZABBIX平台上通过SNMP协议监控网络设备

    在ZABBIX平台上通过SNMP协议监控网络设备 方法一:自动发现监控项 ZABBIX自带模板Template SNMP Interfaces中有"自动发现规则"这一选项,在主机选 ...

  2. Android 之异步任务(AsyncTask,Handler,Message,looper)

    AsyncTask: 3个类型(Params,Progress和Result),4个步骤(onPreExecute(),doInBackground(Params…),onProgressUpdate ...

  3. pig hive hbase比较

    Pig 一种操作hadoop的轻量级脚本语言,最初又雅虎公司推出,不过现在正在走下坡路了.当初雅虎自己慢慢退出pig的维护之后将它开源贡献到开源社区由所有爱好者来维护.不过现在还是有些公司在用,不过我 ...

  4. Linux Ubuntu从零开始部署web环境及项目 -----tomcat+jdk+mysql (二)

    上一篇介绍如何在linux系统下搭建ssh环境 这篇开始将如何搭建web服务器 1,下载文件 在官网下载好 tomcat.jdk.mysql的linux压缩包 后缀名为.tar.gz 并通过xftp上 ...

  5. 11 Linear Models for Classification

    一.二元分类的线性模型 线性分类.线性回归.逻辑回归 可视化这三个线性模型的代价函数 SQR.SCE的值都是大于等于0/1的 理论分析上界 将回归应用于分类 线性回归后的参数值常用于pla/pa/lo ...

  6. 在JavaScript中使用json.js:Ajax项目之POST请求(异步)

    经常在百度搜索框输入一部分关键词后,弹出候选关键热词.现在我们就用Ajax技术来实现这一功能. 一.下载json.js文件 百度搜一下,最好到json官网下载,安全起见. 并与新建的两个文件部署如图 ...

  7. IDEA——IDEA使用Tomcat服务器出现乱码问题

    最近刚使用IDEA,在开发一个功能的时候,开始使用Jetty作为容器进行web项目开发,测试通过.然后想了一下线上服务器使用的容器是Tomcat,还是用Tomcat跑一下项目在测试一下,本地和服务器使 ...

  8. Spring Boot Document Part II(上)

    Part II. Getting started 这一章内容适合刚接触Spring Boot或者"Spring"家族的初学者!随着安装指导说明,你会发现对Spring boot有一 ...

  9. centos 6.5系统下安装ibus及设置开机自启动

    先说一下系统环境:centos 6.5,然后我是以root身份执行的,没有权限的用户参见sudo用法 第1步:查找并安装ibus安装包,命令如下: 找到一行: ibus-pinyin.x86_64 : ...

  10. [bzoj1059] [ZJOI2007] 矩阵游戏 (二分图匹配)

    小Q是一个非常聪明的孩子,除了国际象棋,他还很喜欢玩一个电脑益智游戏--矩阵游戏.矩阵游戏在一个N *N黑白方阵进行(如同国际象棋一般,只是颜色是随意的).每次可以对该矩阵进行两种操作:行交换操作:选 ...