成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

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

habren / 913人閱讀

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

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

典型應(yīng)用

用于展開(kāi)(迭代)數(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

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

    數(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"];

    對(duì)象中的剩余參數(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
    效果類(lèi)似 slice, 但用法簡(jiǎn)潔, 誰(shuí)用誰(shuí)喜歡 : )

合并數(shù)組

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

合并對(duì)象

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

合并剩余參數(shù)

  在定義函數(shù)時(shí), 把用不到的參數(shù)合并到一個(gè)對(duì)象中, 集中管理
  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 中 透?jìng)?props

  const Button = props => {
    const { title = "確定", style = {}, ...rest } = props;
    return (
      
{ title }

    )
  }
  組件的某些屬性不需要特意從 props 中解構(gòu)出來(lái), 那就使用 rest 從組件最外層透?jìng)鬟M(jìn)來(lái),　例如 onClick, 或是某些自定義事件,
  這樣即使組件定義 簡(jiǎn)單優(yōu)雅, 也達(dá)到了支持透?jìng)魅我舛嗟膶傩裕椒ǖ哪康?  另外本例也在style中使用擴(kuò)展運(yùn)算符作了 合并樣式組件（style）的操作

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/109832.html

相關(guān)文章

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

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

    yangrd 評(píng)論0 收藏0

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

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

    baihe 評(píng)論0 收藏0

  • 你該知道的ES6那些事兒

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

    CoffeX 評(píng)論0 收藏0

  • JavaScript 簡(jiǎn)史

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

    pubdreamcc 評(píng)論0 收藏0

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

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

    tommego 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

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