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

  1. 对象取值
  2. 取值并重命名
  3. 剩余表达式

1、对象取值

// 以前都需要这样取对象的值:
const title = obj.title;
const text = obj.text;
const time = obj.time;
const author = obj.author;
const type = obj.type; // 现在使用解构赋值就可以这样了:
const { title, text, time, author, type } = obj;

2、取值并重新命名

let { foo: baz } = myObject;
baz // "aaa"
foo // error: foo is not defined

foo被重新赋值为baz,请注意,结构赋值的时候,赋值的其实是后者而不是前者。请注意了。

3、剩余参数

...原本是延展运算符的意思,但和解构赋值结合,就变成剩余运算符了。举个例子:

// 这时候我顺理成章的想,rest是this.props里面的某个属性吧。结果找不到,后来才知道,这是剩余表达式的意思。
const { component: Component, render, authority, redirectPath, ...rest } = this.props;

给个例子说明剩余运算符的作用:

let [first,...rest] = [1,2,3,4,5];
first //
rest //[2,3,4,5]

非常类似arguments

es6 解构赋值 新认知/新习惯的更多相关文章

  1. ES6解构赋值

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

  2. es6 解构赋值

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

  3. 简单看看es6解构赋值

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

  4. ES6解构赋值的简单使用

    相较于常规的赋值方式,解构赋值最主要的是'解构'两个字,在赋值的过程中要清晰的知道等号右边的结构. 先简单地看一下原来的赋值方式. var a=[1,2] 分析一下这句代码的几个点: (1)变量申明和 ...

  5. ES6—解构赋值

    1.什么是解构赋值 ES6允许按照预定的模式,从数组.对象中提取值,对变量进行赋值. 我们直接用例子说明.    2. 数组的解构赋值 数组传统的变量赋值:      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解构赋值常见用法

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

  8. ES6 解构赋值详解

    解构赋值是对赋值运算符的扩展,可以将属性/值从对象/数组中取出,赋值给其他变量. 一.数组的解构赋值 1.基本用法 只要等号两边的模式相同,左边的变量就会被赋予对应的值. let [a, [[b], ...

  9. 【ES6 】ES6 解构赋值--数组解构赋值

    定义 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构 数组的解构赋值 以前,为变量赋值,只能直接指定值. let a = 1; let b = 2; let c = 3; ...

随机推荐

  1. UGUI 屏幕适配 导致 BoxCollider无效 解决记录

    从来没有做过一个完整的游戏,所以用UGUI来做个手游界的 " Hello World " - 微信打飞机.看起来easy做起来也碰到各种奇异的问题. 昨天导出安卓包之后,在我的MX ...

  2. 【Javascript Demo】无刷新预览所选择的图片

    1.效果如下,可测试 2.代码如下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

  3. tcpdump-根据IP查看程序与服务都用了哪些端口

    tcpdump -i em1 -tttt src 116.3.248.157 and port ! 6869 -nn -i 指定端口 -tttt 附带时间戳 -nn 解析域名与端口信息 ####### ...

  4. Cocos2d-x 粒子编辑器 Particle Studio 争做 Windows Particle Designer 源代码

    1.Particle Studio介绍 非常早发现一款粒子编辑器叫Particle Designer,不知道为什么它没有Windows版本号. 所以我就在Windows下基于Qt做了一个粒子编辑器.之 ...

  5. Spring+DBUnit+H2----项目单元测试

    http://yugouai.iteye.com/blog/1879337 今天够郁闷的,早上调好的代码,到中午调试不同了,分析不出问题,H2的JDBC报错:org.h2.jdbc.JdbcSQLEx ...

  6. 消息队列的使用场景(转载c)

    作者:ScienJus链接:https://www.zhihu.com/question/34243607/answer/58314162来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业 ...

  7. JavaScript 之 parseInt

    首先还是从很热门的实例parseInt("09")==0说起. parseInt(numString, [radix])这个函数后面如果不跟第2个参数来表示进制的话,默认是10进制 ...

  8. linux查询文件中某几行

    查询文件中某几行: sudo cat /etc/tinyproxy.conf | head -n | tail -n + [一]从第3000行开始,显示1000行.即显示3000~3999行 cat ...

  9. es6-块级作用域let 和 var的区别

    块级绑定 js的处理机制和我们大家想象的完全不同,并不完全是所谓函数调用以及上下执行那样简单,它是存有”域”的本质区别的. var具有全局污染特性,所以es6才会出现let .const. 下面通过一 ...

  10. PHP高级教程-安全邮件

    PHP Secure E-mails 在上一节中的 PHP e-mail 脚本中,存在着一个漏洞. PHP E-mail 注入 首先,请看上一章中的 PHP 代码: <html> < ...