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; ...
随机推荐
- Android 修改Camera拍照的默认保存路径
前言 欢迎大家我分享和推荐好用的代码段~~ 声明 欢迎转载,但请保留文章原始出处: CSDN:http://www.csdn.net ...
- wstring to wchar_t*
If you want to convert from std::wstring to const WCHAR* (i.e. the returned pointer gives read-onl ...
- 1. Change the emulator screen size
1. "Windows" ==> "Android Virtual Device Manager" ==> Select one emulator ...
- 云端软件平台 封装了诺基亚PC套件无法找到驱动怎么办
1 在设备管理器中可以看到你的手机驱动器位感叹号. 2 右键→更新驱动程序→从列表指定位置安装→搜索位置选择C:\ProgramFiles\Nokia\ConnectivityCableDriver ...
- 多mysql实例下开发需要注意主从同步延迟
今天晚上服务器上线测试,遇到了一个问题! 往数据库写了一条数据之后,再读取该记录,居然读不出来,报空指针.十分费解,喊来开发组长定位问题.他的解释是:写操作用的是主库,而读操作用的是从库.在写库写完之 ...
- wepy - 使用vsCode编辑器安装插件
完成后,高亮以及智能补全代码. 1. 首先ctrl+shift+p打开扩展,安装以下三个插件 2. 复制以下文件内容到你的vsCode配置 files.associations { "fil ...
- Jsp之神笔记
JSP笔记 Tomcatserver port: port就是指的某一个程序网络入口,Tomcat的初始化port为:8080: port的个数:256*256=65536个: 一般常见协议的缺省po ...
- 〖Linux〗使用Qt5.2.0开发Android的NDK应用程序
2013年12月11日,Qt发布了其新的Qt版本:Qt5.2.0: 利用这个新的版本,我们可以很轻松地制作出Android手机的NDK应用程序. 开发环境:Ubuntu13.10 x86_64 下载链 ...
- 〖Linux〗iptables使用实例
1. 使局域网用户可共享外网(拨号上网) > /proc/sys/net/ipv4/ip_forward iptables -t nat -A POSTROUTING -o ppp0 -j MA ...
- 简单四步開始树莓派上的Docker之旅
大概这篇博文发表之后,应该算是我个人的第一篇翻译作品了,翻译的可能不是非常到位,望各位看官大刀砍过来. 原文链接:http://resin.io/blog/docker-on-raspberry-pi ...