es6 解构赋值 新认知/新习惯
es6 的解构赋值其实很早就学习了,但一直纠结于习惯和可读性问题,所以没有大规模使用。最近被 react调教一番之后。已经完全融入认知和习惯中去了。总结一下三个常用的技巧:
- 对象取值
- 取值并重命名
- 剩余表达式
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 解构赋值 新认知/新习惯的更多相关文章
- ES6解构赋值
前面的话 我们经常定义许多对象和数组,然后有组织地从中提取相关的信息片段.在ES6中添加了可以简化这种任务的新特性:解构.解构是一种打破数据结构,将其拆分为更小部分的过程.本文将详细介绍ES6解构赋值 ...
- es6 解构赋值
ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 关于给变量赋值,传统的变量赋值是这样的: var arr = [1,2,3];//把数组的值 ...
- 简单看看es6解构赋值
哎,我真的是太难了,今天就被这个解构赋值(也可以叫做析构,貌似析构是在c++中的,所以我这里叫做解构赋值吧)弄的我很烦,本来以为很容易的,结果还是弄了好久...就总结一下解构吧! 1.解构的基本使用 ...
- ES6解构赋值的简单使用
相较于常规的赋值方式,解构赋值最主要的是'解构'两个字,在赋值的过程中要清晰的知道等号右边的结构. 先简单地看一下原来的赋值方式. var a=[1,2] 分析一下这句代码的几个点: (1)变量申明和 ...
- ES6—解构赋值
1.什么是解构赋值 ES6允许按照预定的模式,从数组.对象中提取值,对变量进行赋值. 我们直接用例子说明. 2. 数组的解构赋值 数组传统的变量赋值: var arr=[1,2,3]; ...
- (2)ES6解构赋值-数组篇
1.解构赋值-数组篇 //Destrcturing(解构) //ES5 /* var a = 1; var b = 2; var c = 3; */ //ES6 var [a,b,c] = [1,2, ...
- ES6解构赋值常见用法
解构赋值出现的契机: let obj = { a: 1, b: 2 } // 取值 let a = obj.a let b = obj.b 问题核心: 每次取值既要确定对象属性名,还得重新定义一个变量 ...
- ES6 解构赋值详解
解构赋值是对赋值运算符的扩展,可以将属性/值从对象/数组中取出,赋值给其他变量. 一.数组的解构赋值 1.基本用法 只要等号两边的模式相同,左边的变量就会被赋予对应的值. let [a, [[b], ...
- 【ES6 】ES6 解构赋值--数组解构赋值
定义 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构 数组的解构赋值 以前,为变量赋值,只能直接指定值. let a = 1; let b = 2; let c = 3; ...
随机推荐
- QlikView图表显示同比数据
数据准备例如以下: SalesData: LOAD Num(ID) as ID, Date(Date) as Date, Month, Num(Year) as Year, Num(Sales) as ...
- go语言string、int、int64互相转换
#string到int int,err:=strconv.Atoi(string) #string到int64 int64, err := strconv.ParseInt(string, 10, 6 ...
- 【ES】elasticsearch学习笔记
ES学习 1 优势 1.1 简单 1.1.1 相比Solor配置部署等非常简单 1.2 高效 1.2.1 ES使用Netty作为内部RPC框架,Solor使用Jetty 1.3 插件化 1.3.1 E ...
- 微信小程序自定义数据分析试水
昨晚收到小程序自定义分析的内测邀请,简单试用了一下.说明挺长的,大概是这个意思: 一.定义一系列事件,对其进行统计 事件可以对页面中的这些事件进行追踪 click enterPage leavePag ...
- Immediately-Invoked Puzzler
The Poplar Puzzle-makers weren’t too impressed. They barely noticed your simple and beautiful array ...
- Postfix接收邮件后转向运行特定的脚本
本文主要參考:http://serverfault.com/questions/258469/how-to-configure-postfix-to-pipe-all-incoming-email-t ...
- 87. 再谈变体型Variant
在85. BASIC和LotusScript中的Variant一文中.我提到了BASIC风格的语言中的变体型Variant.由于下述种种原因.在LotusScript中常常要用到变体型. 1. ...
- which命令(转)
原文:http://www.cnblogs.com/peida/archive/2012/11/08/2759805.html 我们经常在linux要查找某个文件,但不知道放在哪里了,可以使用下面的一 ...
- 建立与读取.ini文件
一般读写ini文件被读写Registry所取代,但我们还是可以透过 win31的传统方式读写ini文件,以存程式目前的相关设定,而於下一次程式执行时再 读回来.目前建议使用GetSetting Sav ...
- 解决-bash: fork: retry: Resource temporarily unavailable (修改最大线程数)
错误提示的本质是Linux操作系统无法创建更多进程,导致出错.因此要解决这个问题需要修改Linux允许创建更多的进程. 方案一: cat /etc/security/limits.conf echo ...