进军es6(2)---解构赋值
本该两周之前就该总结的,但最近一直在忙校招实习的事,耽误了很久。目前依然在等待阿里HR面后的结果中...但愿好事多磨!在阿里的某轮面试中面试官问到了es6的掌握情况,说明es6真的是大势所趋,我们更需要加快步伐掌握它,跟上前端改革的潮流。
上一篇大概提到了es6的一些变量声明基础,可能是有些乏味的,但今天所讲可能是在别的语言中都不存在的一种语法现象。它就是今天的主人公"解构赋值"。
解构赋值
es6代码可以在babel官网编写执行 -> http://babeljs.io/repl/
何为解构赋值,第一次听到这个名字,我也是相当陌生的。先分析一个小栗子:
//es5
var a = 1, b = 2, c = 3;
//es6
let [a, b, c] = [1, 2, 3];
这样看起来就很好理解了,解构赋值就是指从数组和对象中提取值,对变量进行赋值。解构可以理解为将对象的结构进行解析,并把值赋给声明的变量。不光是数组,在别的数据类型中也可以见到解构赋值的身影。
对象:
let {a, b} = {a : 'one', b: 'two'};
//a = one, b = two
字符串:
const [a, b, c, d, e] = 'apple';
//a='a',b='p'...
在函数的参数中:
function test({x, y} = {x:0, y: 1}) { return [x, y]; }
test(); // [0,1]
test({}); // [undefined, undefined]
test({a: 2, b: 3}); // [2, 3]
对解构赋值的写法有了大致了解后,我们接着研究下它的用途。
1.交换变量值
[x, y] = [y, x],千万不要以为这个是 x= y; y =x。在es6解析后会产生一个中间变量(babel上显示的是一个数组),所以是可以用作交换变量写法的。
2.函数参数无序定义以及默认值
使用自定义函数的时候,偶尔会记不准确函数参数的顺序以及个数。同样可以利用解构的方法进行参数定义:
// 无序定义
function f({x, y, z, a}) {};
f({a: 1, y:2, z:3, x: 4});
// 默认定义
function f({x, y, z, a=1})();
f({}); // x=undefined, y=undefined,z=undefined,a=1
3.提取JSON对象,可过滤信息
var jsonData = {a:1,b:2,c:[3,4]};
let {a,c} = jsonData;
4.提取模块中的方法或函数
import React, {Component, PropTypes} from 'react';
解构赋值在es6中是很简单的语法,如果还觉得很陌生,那一定要去babel上面多写写。
进军es6(2)---解构赋值的更多相关文章
- ES6 的解构赋值前每次都创建一个对象吗?会加重 GC 的负担吗?
本文来源于知乎上的一个提问. 为了程序的易读性,我们会使用 ES6 的解构赋值: function f({a,b}){} f({a:1,b:2}); 这个例子的函数调用中,会真的产生一个对象吗?如果会 ...
- ES6之解构赋值
截止到ES6,共有6种声明变量的方法,分别是var .function以及新增的let.const.import和class: 我们通常的赋值方法是: var foo='foo'; function ...
- es6的解构赋值学习(1)
相对es5的简单的"="赋值来说,es6增加了一种新的赋值模式--解构赋值,按照它的规则,可以从数组和对象中提取值来对变量进行赋值,个人觉得方便了很多,但是这个模式有点恶心人,相比 ...
- Es6 新增解构赋值
1.数组的解构赋值 基本用法 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 要想实现解构,就必须是容器,或者具有可遍历的接口. 以前,为 ...
- ES6 之 解构赋值
本博文配合 阮一峰 <ES6 标准入门(第3版)>一书进行简要概述 ES6 中变量的解构赋值. 数组的解构赋值 基本用法 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这 ...
- ES6变量解构赋值
ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构ES6之前我们申明多个变量需要按照下面的方法: let l a=1; let b=2; let c=3; let d=4; ...
- es6变量解构赋值的用途
这里是我觉得es6解构赋值,在平时我们写js的时候非常有用,而且经常用到的地方,能简化我们的代码,让写代码简介优雅易读; 用途 1.交换变量的值,太方便了这逼,写法不仅简介而且一看就明白 let [x ...
- 粗看ES6之解构赋值
标签: javascript es6 什么是解构赋值? 示例如下: <!DOCTYPE html> <html> <head> <meta charset=& ...
- ES6变量解构赋值的用法
一.数组赋值(从数组中提取值,按照对应位置,对变量赋值) 1. 完全解构(变量与值数目相等) let arr = [1, 2, 3]; let [a,b,c] = arr; console.log(a ...
随机推荐
- jekyll 的安装
静态网站生成器Jekyll 是一个简洁的.特别针对博客平台的 静态网站 生成器.它使用一个模板目录作为网站布局的基础框架,并在其上运行 Textile . Markdown 或 Liquid 标记语言 ...
- MVC中Area的使用
1.Area是什么? MVC 2 中引进了区域的概念,它允许将模型,视图和控制器分成单独的功能节点,换句话说,可以在大型复杂的网站中建立几个区域(模块),每一个区域都有Model,View,Contr ...
- 使用Unidac内置连接池
第一步: 放一个TUniconnection并设置相关属性 之后直接使用TUniconnection对象即可 跟踪unidac源码uni单元1540行中可以看到 Connect方法调用CreateIC ...
- 一个Highcharts的例子
关键字:Highcharts <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Typ ...
- 10g和11g,优化器对外连接的处理对比
我反省,今天面试有个问题没有说清楚.我给出的结论(而且这个结论我验证过)是:不要使用不必要的外连接,举了下面这个例子却没有说清楚.虽然最近感冒,状态不是很好,但最擅长的东西都没有表达清楚,泪流满面啊: ...
- IEnumerable,ICollection,IList,List区别
做C#的同学们,都知道,一类只能有一个继承类,但可以实现多个接口.这句话就告诉我们:IEnumerable,ICollection,IList,List区别了 首先我看看 IEnumerable: / ...
- Android动画总结#补间动画(Tween Animation/View Animation) #帧动画(Frame Animation/Drawable Animation)#属性动画(PropertyAnimation)
1.共有三种动画,英文名字多种叫法如下 第一种动画:补间动画(Tween Animation/View Animation) 四个:RotateAnimation旋转. AlphaAnimation透 ...
- asp.net viewstate的模拟登陆
其实 VIEWSTATE 不用太在意,倒是 JTCookieID 需要注意,这个才应该是服务器上用来维护 Session 的那个 Cookie.所以,你用 httpclient 的时候,不能上来就直接 ...
- [JavaScript] js实现简单的代码运行框
<script type="text/javascript">// <![CDATA[ function runCode(obj) { var winname = ...
- bzoj 4066: 简单题 kd-tree
4066: 简单题 Time Limit: 50 Sec Memory Limit: 20 MBSubmit: 234 Solved: 82[Submit][Status][Discuss] De ...