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③运算符
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Web Form Design
Luke Wroblewski / Rosenfeld Media / 2008-5-2 / GBP 25.00
Forms make or break the most crucial online interactions: checkout, registration, and any task requiring information entry. In Web Form Design, Luke Wroblewski draws on original research, his consider......一起来看看 《Web Form Design》 这本书的介绍吧!