ECMASCRIPT 6 实战之扩展运算符

habren 发布于2019-08-26 13:55 / 902人阅读

摘要：扩展运算符是以下简称中又一非常好用的实战技术它的写法只需要三个点作用则顾名思义用来展开你想要使用的任意变量本质上是对所有拥有迭代器接口的对象进行迭代。

扩展运算符(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 (
      { title }
    )
  }
  组件的某些属性不需要特意从 props 中解构出来, 那就使用 rest 从组件最外层透传进来,　例如 onClick, 或是某些自定义事件,
  这样即使组件定义 简单优雅, 也达到了支持透传任意多的属性／方法的目的
  另外本例也在style中使用扩展运算符作了 合并样式组件（style）的操作

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

云服务器 GPU云服务器 ECMAScript 6 ECMAScript ECMAScript6 之字形

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/109832.html

ECMASCRIPT 6 实战之解构赋值

摘要：相信解构赋值自以下简称面世以来被大家快速地熟悉并运用到实际开发中了这是一种能有效减少代码量，使代码逻辑更简单优雅的技术下面我们就再来回顾总结一下解构赋值的种种用法吧基本用法从对象解构假设有一个对象，它的结构为以对称的形式从从边的对象中匹配与相信解构赋值(Destructuring)自 ECMASCRIPT 6(以下简称 ES 6) 面世以来被大家快速地熟悉并运用到实际开发中了, 这是...

yangrd 2019-08-26 13:54 评论0 收藏0
《JavaScript 闯关记》之简介

摘要：浏览器只是实现的宿主环境之一，其他宿主环境包括和。年月，版发布，成为国际标准。事件定义了事件和事件处理的接口。对于已经正式纳入标准的来说，尽管各浏览器都实现了某些众所周知的共同特性，但其他特性还是会因浏览器而异。 JavaScript 是面向 Web 的编程语言，绝大多数现代网站都使用了 JavaScript，并且所有的现代 Web 浏览器（电脑，手机，平板）均包含了 JavaScri...

baihe 2019-08-21 10:55 评论0 收藏0
你该知道的ES6那些事儿

摘要：最近重构了一个项目，引入了部分用法，最大的感受是让这门语言变得更加严谨，更加方便。通过该方法获得位置后还得比较一次才能判断是否存在。再来看看的写法使用数组来初始化一个，构造器能确保不重复地使用这些值。下面提供链接，供有兴趣的朋友参考。最近重构了一个SPA项目，引入了部分ES6用法，最大的感受是ES6让javascript这门语言变得更加严谨，更加方便。本篇将结合实战经验，对最常用的部...

CoffeX 2019-08-22 18:42 评论0 收藏0
JavaScript 简史

摘要：正大力推进，网景通讯公司即将与他们达成一项协议，让可以用在浏览器上。年月，网景通讯公司和达成协议将被重新命名为，它将会作为浏览器中小型客户端任务的一种脚本语言，同时将会被提升为一种更大的开发富组件的专业工具。本文转载自：众成翻译译者：网络埋伏纪事审校: 为之漫笔链接：http://www.zcfy.cc/article/2389原文：https://auth0.com/blog/a-...

pubdreamcc 2019-08-20 18:53 评论0 收藏0
ES6学习手稿之基本类型扩展

摘要：它是一个通用标准，奠定了的基本语法。年月发布了的第一个版本，正式名称就是标准简称。结语的基本扩展还有一些没有在这里详细介绍。前言 ES6标准以及颁布两年了，但是，好像还没有完全走进我们的日常开发。这篇文章从ES6的基本类型扩展入手，逐步展开对ES6的介绍。 ECMAScript和JavaScript JavaScript是由Netscape创造的，该公司1996年11月将JavaSc...

tommego 2019-08-21 18:25 评论0 收藏0