• 进军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上面多写写。

  • 相关阅读:
    Table XXX is marked as crashed and should be repaired问题
    冗余带来的麻烦
    thinkPHP模板引擎案例
    css案例学习之float浮动
    css案例学习之父子块的margin
    block,inline和inline-block概念和区别
    css案例学习之div与span的区别
    css案例学习之盒子模型
    css案例学习之层叠样式
    css案例学习之继承关系
  • 原文地址:https://www.cnblogs.com/yxy99/p/5351882.html
Copyright © 2020-2023  润新知