本该两周之前就该总结的,但最近一直在忙校招实习的事,耽误了很久。目前依然在等待阿里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)---解构赋值的更多相关文章

  1. ES6 的解构赋值前每次都创建一个对象吗?会加重 GC 的负担吗?

    本文来源于知乎上的一个提问. 为了程序的易读性,我们会使用 ES6 的解构赋值: function f({a,b}){} f({a:1,b:2}); 这个例子的函数调用中,会真的产生一个对象吗?如果会 ...

  2. ES6之解构赋值

    截止到ES6,共有6种声明变量的方法,分别是var .function以及新增的let.const.import和class: 我们通常的赋值方法是: var foo='foo'; function ...

  3. es6的解构赋值学习(1)

    相对es5的简单的"="赋值来说,es6增加了一种新的赋值模式--解构赋值,按照它的规则,可以从数组和对象中提取值来对变量进行赋值,个人觉得方便了很多,但是这个模式有点恶心人,相比 ...

  4. Es6 新增解构赋值

    1.数组的解构赋值 基本用法 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 要想实现解构,就必须是容器,或者具有可遍历的接口. 以前,为 ...

  5. ES6 之 解构赋值

    本博文配合 阮一峰 <ES6 标准入门(第3版)>一书进行简要概述 ES6 中变量的解构赋值. 数组的解构赋值 基本用法 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这 ...

  6. ES6变量解构赋值

    ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构ES6之前我们申明多个变量需要按照下面的方法: let l a=1; let b=2; let c=3; let d=4; ...

  7. es6变量解构赋值的用途

    这里是我觉得es6解构赋值,在平时我们写js的时候非常有用,而且经常用到的地方,能简化我们的代码,让写代码简介优雅易读; 用途 1.交换变量的值,太方便了这逼,写法不仅简介而且一看就明白 let [x ...

  8. 粗看ES6之解构赋值

    标签: javascript es6 什么是解构赋值? 示例如下: <!DOCTYPE html> <html> <head> <meta charset=& ...

  9. ES6变量解构赋值的用法

    一.数组赋值(从数组中提取值,按照对应位置,对变量赋值) 1. 完全解构(变量与值数目相等) let arr = [1, 2, 3]; let [a,b,c] = arr; console.log(a ...

随机推荐

  1. OpenCV(4)-图像掩码操作(卷积)--平滑处理

    卷积定义 矩阵的掩码操作即对图像进行卷积.对图像卷积操作的意义为:邻近像素对(包括该像素自身)对新像素的影响:影响大小取决于卷积核对应位置值得大小. 例如:图像增强可以使用 \[ I(i,j)=5*I ...

  2. CF Round#240题解

    第一次参加CF的比赛,MSK19.30,四个小时的时差真心累,第一次CODE到这么夜-- 一开始做了A,C两题,后来做B题的时候我体力和精神集中度就很低了,导致一直WA在4-- 今天起床后再刷B,终于 ...

  3. (转)iOS中3种正则表达式的使用与比较

    .利用NSPredicate(谓词)匹配 例如匹配有效邮箱: NSString *email = @“nijino_saki@.com”: NSString *regex = @"[A-Z0 ...

  4. siege 压力测试

    Ben: $ siege -u shemp.whoohoo.com/Admin.jsp -d1 -r10 -c25 ..Siege 2.65 2006/05/11 23:42:16 ..Prepari ...

  5. shell中的双引号,单引号,反引号

    在shell中引号分为三种:单引号,双引号和反引号. 单引号 ‘ 由单引号括起来的字符都作为普通字符出现.特殊字符用单引号括起来以后,也会失去原有意义,而只作为普通字符解释.单引号用于保持引号内所有字 ...

  6. js获取json数据

    var json = {  contry:{ area:{ man:"12万",  women:"10万" } } };//方式一:使用eval解析  var  ...

  7. 破解https和https原理

    http://blog.csdn.net/cch5487614/article/details/6364711 http://www.jb51.net/network/68135.html

  8. PHP用memcached做实时分页

    用memcached做分页缓存,可能很多人会觉得麻烦而不用.因为在增加.修改.删除的过程中,你不知道会影响到哪些数据,而如果把所有分页相关的数据缓存都删除并重新生成一遍,实现又很麻烦,甚至不可行,所以 ...

  9. google+ 登录API 使用 javascript sdk 快速入门 (图解)

    准备工作: 打开Google API 控制台 : https://code.google.com/apis/console 点击 My Project (我的项目) 按照图示流程,您将完成一个goog ...

  10. ubuntu下的软件安装

    1.软件安装 最近开始将个人电脑由windows换成linux,第一步就是会装一些个人软件,以前玩linux都是用yum或者apt-get来进行安装. 下面介绍一下如何从官网下载文件并且安装的方法. ...