ECMASCRIPT 6 实战之 扩展运算符
栏目: JavaScript · 发布时间: 5年前
内容简介:扩展运算符(spreading)是 ECMASCRIPT 6(以下简称ES 6) 中又一非常好用的实战技术, 它的写法只需要三个点(...),作用则顾名思义,用来展开你想要使用的任意变量,本质上是对所有拥有迭代器接口(Iterator)的对象进行迭代。三个小点,身材小巧,功能强大,还犹豫什么,实际开发中, 走你!!!
扩展运算符(spreading)是 ECMASCRIPT 6(以下简称ES 6) 中又一非常好用的实战技术, 它的写法只需要三个点(...),作用则顾名思义,用来展开你想要使用的任意变量,本质上是对所有拥有迭代器接口(Iterator)的对象进行迭代。
典型应用
- 用于展开(迭代)数组元素
const labels = ['ES 5', 'ES 6', 'React.js', 'Vue.js', 'Node.js']; console.log('label elements: ', ...labels); // ES 5 ES 6 React.js Vue.js Node.js
- 展开未使用的键值, 并放到剩余参数对象中去
数组中的扩展剩余参数 只取想要使用的第一个变量 const labels = ['javascript', 'ES 5', 'ES 6', 'React.js', 'Vue.js', 'Node.js', 'React-Native']; const [main, ...rest] = labels; main // 'javascript' rest // ["ES 5", "ES 6", "React.js", "Vue.js", "Node.js", "React-Native"]; 对象中的剩余参数 const editor = { id: '1688', name: 'handome_boy', age: 18, male: 1 } 只想要使用 id 字段, 其它字段需要另作它用时: const { id, ...rest } = editor; console.log(id); // 1688 console.log(rest); // { name: 'handome_boy', age: 18, male: 1 }
经典实战
- 复制数组
const labels = ['segementfault', '好看', '实用']; const copy_array = [...labels]; 把扩展后的 labels 的元素又放在一个新的数组字面量中, 即可得到一个新数组, 新数组与旧数组是使用不同的内存空间 labels === copy_array // false 效果类似 slice, 但用法简洁, 谁用谁喜欢 : )
- 合并数组
const tag1 = ['前端', '设计', '产品']; const tag2 = ['后端', '数据库', '缓存']; const merge_tags = [...tag1, ...tag2]; console.log(merge_tags); // ['前端', '设计', '产品', '后端', '数据库', '缓存']; 相比于 tag1.concat(tag2); 扩展运算符的用法简直简约到极致, 除了理解容易, 也具有几何的对称美
- 合并对象
const response = { itemid: 1068, name: 'segementfault', tags: ['前端', '设计', '产品'], pv: 8888 } const merged_response = { ...response, name: '掘银', tags: ['后端', '数据库', '缓存'] }; console.log(merged_response); // { itemid: 1068, name: 'segementAdult', tags: ['后端', '数据库', '缓存'], pv: 8888 } 效果形同 Object.assign, 也是右边的同名字段会覆盖左边的同名字段, 但谁更简洁, 一目了然
- 合并剩余参数
在定义函数时, 把用不到的参数合并到一个对象中, 集中管理 const calcalute_date = (mode = 'fullDate', ...rest) => { if(mode === 'timestamp') { return Date.now(); } return rest.join('-'); } calcalute_date('fullDate', '2019', '05', '26'); // 2019-05-26
- 在 React 中 透传 props
const Button = props => { const { title = '确定', style = {}, ...rest } = props; return ( <div {...rest} style={{ ...confirmButtonStyle, ...style }}>{ title }</div> ) } 组件的某些属性不需要特意从 props 中解构出来, 那就使用 rest 从组件最外层透传进来, 例如 onClick, 或是某些自定义事件, 这样即使组件定义 简单优雅, 也达到了支持透传任意多的属性/方法的目的 另外本例也在style中使用扩展运算符作了 合并样式组件(style)的操作
三个小点,身材小巧,功能强大,还犹豫什么,实际开发中, 走你!!!
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- ES6—扩展运算符和rest运算符(6)
- C/C++三元运算符实际上是否具有与赋值运算符相同的优先级?
- Python 运算符
- Python算术运算符
- 004.Python运算符
- JavaScript③运算符
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Java Servlet & JSP Cookbook
Bruce W. Perry / O'Reilly Media / 2003-12-1 / USD 49.99
With literally hundreds of examples and thousands of lines of code, the Java Servlet and JSP Cookbook yields tips and techniques that any Java web developer who uses JavaServer Pages or servlets will ......一起来看看 《Java Servlet & JSP Cookbook》 这本书的介绍吧!