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; ...
随机推荐
- jmeter-The JVM should have exitted but did not
修改 jmeterengine.force.system.exit=true
- 【Canvas】动态正17边光阑 向高斯致敬
[背景知识] 公元前三世纪,欧几里得在<几何原本>中记载了正方形,正五边形,正六边形的做法,后来人们也掌握了正十五边形作图,但之后两千多年,人们没有在更高阶边形上取得突破. 1796年,1 ...
- 大型开放式网络课程MOOC的一点体会
2012年,美国的顶尖大学陆续设立网络学习平台,在网上提供免费课程,Coursera.Udacity.edX三大课程提供商的兴起.给很多其它学生提供了系统学习的可能.这就是大型开放式网 ...
- 折腾开源WRT的AC无线路由之路-1
Tags: tomato, dd-wrt, Netgear, NightHawk, R7000, RT-AC68U, RT-AC66U, N66U, N56U, WRT1900AC, Archer C ...
- Linux内核二层数据包接收流程
本文主要讲解了Linux内核二层数据包接收流程,使用的内核的版本是2.6.32.27 为了方便理解,本文采用整体流程图加伪代码的方式从内核高层面上梳理了二层数据包接收的流程,希望可以对大家有所帮助.阅 ...
- php如何实现页面跳转
•PHP页面跳转一.header()函数 header()函数是PHP中进行页面跳转的一种十分简单的方法.header()函数的主要功能是将HTTP协议标头(header)输出到浏览器. header ...
- 解决windows10 启动蓝屏 ntfs file system
启动 --> 疑难解答 -->高级工具 --> 命令行--> chkdsk /x /f c: cd c: ok ^_-
- Oracle 12c CDB PDB
先说基本用法: 先按11G之前进行 conn / as sysdba; create user test identifed by test; ORA-65096: 公用用户名或角色名无效. 查官方文 ...
- js中移除空白节点
//移除空白节点,空白节点的类型是3 function removeWhiteNode(node) { for (var i = 0; i < node.childNodes.lengt ...
- 〖Linux〗Ubuntu13.10中使用虚拟机对MTK手机进行线刷
最近一个同学把一台MTK手机刷坏了,在我的笔记本电脑上没有WindowsXp操作系统: 而在MTK线刷过程中,最好的刷机系统便是WindowsXP3,于是有了想在Linux中直接开启XP虚拟机来刷机的 ...