ECMASCRIPT 6 實戰之擴展運算符

habren 發布于2019-08-26 13:55 / 903人閱讀

摘要：擴展運算符是以下簡稱中又一非常好用的實戰技術它的寫法只需要三個點作用則顧名思義用來展開你想要使用的任意變量本質上是對所有擁有迭代器接口的對象進行迭代。

擴展運算符(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 之字形

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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