国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

ECMASCRIPT 6 實(shí)戰(zhàn)之 擴(kuò)展運(yùn)算符

habren / 912人閱讀

摘要：擴(kuò)展運(yùn)算符是以下簡稱中又一非常好用的實(shí)戰(zhàn)技術(shù)它的寫法只需要三個(gè)點(diǎn)作用則顧名思義用來展開你想要使用的任意變量本質(zhì)上是對所有擁有迭代器接口的對象進(jìn)行迭代。

擴(kuò)展運(yùn)算符(spreading)是 ECMASCRIPT 6(以下簡稱ES 6) 中又一非常好用的實(shí)戰(zhàn)技術(shù), 它的寫法只需要三個(gè)點(diǎn)(...),作用則顧名思義,用來展開你想要使用的任意變量,本質(zhì)上是對所有擁有迭代器接口(Iterator)的對象進(jìn)行迭代。

典型應(yīng)用

用于展開(迭代)數(shù)組元素

  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

展開未使用的鍵值, 并放到剩余參數(shù)對象中去

    數(shù)組中的擴(kuò)展剩余參數(shù)
    只取想要使用的第一個(gè)變量
    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"];

    對象中的剩余參數(shù)
    const editor = {
      id: "1688",
      name: "handome_boy",
      age: 18,
      male: 1
    }
    只想要使用 id 字段, 其它字段需要另作它用時(shí):
    const { id, ...rest } = editor;
    console.log(id); // 1688
    console.log(rest); 
    // {
      name: "handome_boy",
      age: 18,
      male: 1
    }
經(jīng)典實(shí)戰(zhàn)

復(fù)制數(shù)組

    const labels = ["segementfault", "好看", "實(shí)用"];
    const copy_array = [...labels];
    把擴(kuò)展后的 labels 的元素又放在一個(gè)新的數(shù)組字面量中, 即可得到一個(gè)新數(shù)組, 新數(shù)組與舊數(shù)組是使用不同的內(nèi)存空間
    labels === copy_array // false
    效果類似 slice, 但用法簡潔, 誰用誰喜歡 : )

合并數(shù)組

    const tag1 = ["前端", "設(shè)計(jì)", "產(chǎn)品"];
    const tag2 = ["后端", "數(shù)據(jù)庫", "緩存"];
    const merge_tags = [...tag1, ...tag2];
    console.log(merge_tags);
    // ["前端", "設(shè)計(jì)", "產(chǎn)品", "后端", "數(shù)據(jù)庫", "緩存"];
    相比于 tag1.concat(tag2); 擴(kuò)展運(yùn)算符的用法簡直簡約到極致, 除了理解容易, 也具有幾何的對稱美

合并對象

    const response = {
      itemid: 1068,
      name: "segementfault",
      tags: ["前端", "設(shè)計(jì)", "產(chǎn)品"],
      pv: 8888
    }
    const merged_response = { ...response, name: "掘銀", tags: ["后端", "數(shù)據(jù)庫", "緩存"] };
    console.log(merged_response);
    // {
        itemid: 1068,
        name: "segementAdult",
        tags: ["后端", "數(shù)據(jù)庫", "緩存"],
        pv: 8888
      }
    效果形同 Object.assign, 也是右邊的同名字段會(huì)覆蓋左邊的同名字段, 但誰更簡潔, 一目了然

合并剩余參數(shù)

  在定義函數(shù)時(shí), 把用不到的參數(shù)合并到一個(gè)對象中, 集中管理
  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 中解構(gòu)出來, 那就使用 rest 從組件最外層透傳進(jìn)來,　例如 onClick, 或是某些自定義事件,
  這樣即使組件定義 簡單優(yōu)雅, 也達(dá)到了支持透傳任意多的屬性／方法的目的
  另外本例也在style中使用擴(kuò)展運(yùn)算符作了 合并樣式組件（style）的操作

三個(gè)小點(diǎn),身材小巧,功能強(qiáng)大,還猶豫什么,實(shí)際開發(fā)中, 走你!!!

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/109832.html

相關(guān)文章

  • ECMASCRIPT 6 實(shí)戰(zhàn)之 解構(gòu)賦值

    摘要：相信解構(gòu)賦值自以下簡稱面世以來被大家快速地熟悉并運(yùn)用到實(shí)際開發(fā)中了這是一種能有效減少代碼量，使代碼邏輯更簡單優(yōu)雅的技術(shù)下面我們就再來回顧總結(jié)一下解構(gòu)賦值的種種用法吧基本用法從對象解構(gòu)假設(shè)有一個(gè)對象，它的結(jié)構(gòu)為以對稱的形式從從邊的對象中匹配與 相信解構(gòu)賦值(Destructuring)自 ECMASCRIPT 6(以下簡稱 ES 6) 面世以來被大家快速地熟悉并運(yùn)用到實(shí)際開發(fā)中了, 這是...

    yangrd 評論0 收藏0

  • 《JavaScript 闖關(guān)記》之簡介

    摘要：瀏覽器只是實(shí)現(xiàn)的宿主環(huán)境之一，其他宿主環(huán)境包括和。年月，版發(fā)布，成為國際標(biāo)準(zhǔn)。事件定義了事件和事件處理的接口。對于已經(jīng)正式納入標(biāo)準(zhǔn)的來說，盡管各瀏覽器都實(shí)現(xiàn)了某些眾所周知的共同特性，但其他特性還是會(huì)因?yàn)g覽器而異。 JavaScript 是面向 Web 的編程語言，絕大多數(shù)現(xiàn)代網(wǎng)站都使用了 JavaScript，并且所有的現(xiàn)代 Web 瀏覽器（電腦，手機(jī)，平板）均包含了 JavaScri...

    baihe 評論0 收藏0

  • 你該知道的ES6那些事兒

    摘要：最近重構(gòu)了一個(gè)項(xiàng)目，引入了部分用法，最大的感受是讓這門語言變得更加嚴(yán)謹(jǐn)，更加方便。通過該方法獲得位置后還得比較一次才能判斷是否存在。再來看看的寫法使用數(shù)組來初始化一個(gè)，構(gòu)造器能確保不重復(fù)地使用這些值。下面提供鏈接，供有興趣的朋友參考。 最近重構(gòu)了一個(gè)SPA項(xiàng)目，引入了部分ES6用法，最大的感受是ES6讓javascript這門語言變得更加嚴(yán)謹(jǐn)，更加方便。本篇將結(jié)合實(shí)戰(zhàn)經(jīng)驗(yàn)，對最常用的部...

    CoffeX 評論0 收藏0

  • JavaScript 簡史

    摘要：正大力推進(jìn)，網(wǎng)景通訊公司即將與他們達(dá)成一項(xiàng)協(xié)議，讓可以用在瀏覽器上。年月，網(wǎng)景通訊公司和達(dá)成協(xié)議將被重新命名為，它將會(huì)作為瀏覽器中小型客戶端任務(wù)的一種腳本語言，同時(shí)將會(huì)被提升為一種更大的開發(fā)富組件的專業(yè)工具。 本文轉(zhuǎn)載自：眾成翻譯譯者：網(wǎng)絡(luò)埋伏紀(jì)事審校: 為之漫筆鏈接：http://www.zcfy.cc/article/2389原文：https://auth0.com/blog/a-...

    pubdreamcc 評論0 收藏0

  • ES6學(xué)習(xí)手稿之基本類型擴(kuò)展

    摘要：它是一個(gè)通用標(biāo)準(zhǔn)，奠定了的基本語法。年月發(fā)布了的第一個(gè)版本，正式名稱就是標(biāo)準(zhǔn)簡稱。結(jié)語的基本擴(kuò)展還有一些沒有在這里詳細(xì)介紹。 前言 ES6標(biāo)準(zhǔn)以及頒布兩年了，但是，好像還沒有完全走進(jìn)我們的日常開發(fā)。這篇文章從ES6的基本類型擴(kuò)展入手，逐步展開對ES6的介紹。 ECMAScript和JavaScript JavaScript是由Netscape創(chuàng)造的，該公司1996年11月將JavaSc...

    tommego 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<