ECMASCRIPT 6 实战之 扩展运算符

2019-05-26 admin

扩展运算符(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

  const Button = props => {
    const { title = '确定', style = {}, ...rest } = props;
    return (
      <div {...rest} style={{ ...confirmButtonStyle, ...style }}>{ title }</div>
    )
  }
  组件的某些属性不需要特意从 props 中解构出来, 那就使用 rest 从组件最外层透传进来, 例如 onClick, 或是某些自定义事件,
  这样即使组件定义 简单优雅, 也达到了支持透传任意多的属性/方法的目的
  另外本例也在style中使用扩展运算符作了 合并样式组件(style)的操作

三个小点,身材小巧,功能强大,还犹豫什么,实际开发中, 走你!!!

[转载]原文链接:https://segmentfault.com/a/1190000019297191

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-65774.html

文章标题:ECMASCRIPT 6 实战之 扩展运算符

相关文章
jquery拼接ajax 的json和字符串拼接的方法
整理文档,搜刮出一个jquery拼接ajax 的json和字符串拼接的代码,稍微整理精简一下做下分享。 jQuery拼接字符串ajax &lt;form id=&quot;myForm&quot; action=&quot;#&quot;&...
2017-04-01
JavaScript正则进阶之路——活学妙用奇淫正则表达式
有些童鞋肯定有所疑惑,花了大量时间学习正则表达式,却发现没有用武之地,正则不就是验证个邮箱嘛,其他地方基本用不上,其实,大部分人都是这种感觉,所以有些人干脆不学,觉得又难又没多大用处。殊不知,想要成为编程大牛,正则表达式必须玩转,GitH...
2017-05-31
Node.js v0.11.16 开发版发布
Node.js v0.11.16 开发版发布了,改进记录包括: openssl: Upgrade to 1.0.1l npm: Upgrade to 2.3.0 url: revert support of path for url.fo...
2015-11-12
js使用split函数按照多个字符对字符串进行分割的方法
本文实例讲述了js使用split函数按照多个字符对字符串进行分割的方法。分享给大家供大家参考。具体分析如下: js中的split()函数可以对字符串按照指定的符号进行分割,但是如果字符串中存在多个分割符号,js的split()函数是否还可以...
2017-03-21
ajax教程之ajax使用Http请求
ajax中是如何让使用http请求的呢? 在传统的JS编程中,如果您希望从服务器上的文件或数据库中得到任何的信息,或者向服务器发送信息的话,就必须利用一个 HTML 表单向服务器 GET 或 POST 数据。而用户则需要单击“提交”按钮来发...
2015-11-12
bootstrap table之通用方法( 时间控件,导出,动态下拉框, 表单验证 ,选中与获取信息)代码分享
1.bootstrap-table 单击单行选中 $(&#x27;#gzrwTable&#x27;).on(&#x27;click-row.bs.table&#x27;, function(e, row, $element) { $(&#x...
2017-02-17
Angular 6 正式发布,新功能详解
作者|Stephen Fluin编译|覃云今天,Angular 6.0.0 正式发布,新版本重点关注工具链以及工具链在 Angular 中的运行速度问题。 这次更新还包括框架包(@angular/core、@angular/common、@...
2018-05-05
JavaScript将字符串转换成字符编码列表的方法
本文实例讲述了JavaScript将字符串转换成字符编码列表的方法。分享给大家供大家参考。具体如下: JavaScript将字符串转换成字符编码列表,例如foo转换成 [112,111,111] 方法 1: JavaScript 1.6 A...
2017-03-21
RxJS 6有哪些新变化?
RxJs 6于2018年4月24日正式发布,为开发人员带来了一些令人兴奋的增补和改进。Ben Lesh, rxJS核心开发成员,强调: RxJS 6在拥有更小API的同时,带来了更整洁的引入方式 提供一个npm包,该package可以处理...
2018-05-22
JS教程之基础
javascript教程之什么是 JavaScript? JavaScript 被设计用来向 HTML 页面添加交互行为。JavaScript 是一种脚本语言(脚本语言是一种轻量级的编程语言)。JavaScript 由数行可执行计算机代码组...
2015-11-12
回到顶部