es6 解构赋值 新认知/新习惯
2024-10-12 16:18:37
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
最新文章
- Android调用webservice的例子
- [LeetCode] Next Permutation 下一个排列
- php多线程操作同一文件-待续
- Error Domain=ASIHTTPRequestErrorDomain Code=8 ";Failed to move file from";xxx/xxx";to";xxx/xxx";
- Git本地提交到远程指定分支
- java截取图片部分尺寸
- 读书笔记2:HTTP协议
- STL源码剖析—stl_config
- 数据访问层的改进以及测试DOM的发布
- [Swift]LeetCode869. 重新排序得到 2 的幂 | Reordered Power of 2
- hdu6395 (矩阵快速幂+分块)
- 分享一个好用的tmux配置文件
- Android Studio添加aar依赖的两种方式
- xpath语法笔记
- 图->;连通性->;最小生成树(克鲁斯卡尔算法)
- 随记MySQL的时间差函数(TIMESTAMPDIFF、DATEDIFF)、日期转换计算函数(date_add、day、date_format、str_to_date)
- 怎样求逆序对数(Inverse Number)?
- Unity Editor Toolbar 编辑器扩展
- Postman 上传文件
- C# Async await和Task的关系
热门文章
- 黑马day12 DbUtils的介绍
- windows安装go-sqlite3失败,提示找不到gcc
- 网络结构设计——负载均衡之LVS学习笔记(二)
- 默认网关和默认路由 —— Cisco CCNA – Default Gateway &; Default Routes
- SIT/UAT测试
- Escape字符总结
- C++:cin、cin.getline()、getline()的用法
- shell脚本中的几个括号总结(小括号/大括号/花括号)
- cannot use 'throw' with exceptions disabled(转)
- java 内省(Introspector)