ECMASCRIPT-6-实战之-扩展运算符

jiezi

5 年前

扩展运算符 (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）的操作

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

ECMASCRIPT-6-实战之-扩展运算符

典型应用

经典实战