<font id="zqva1"></font>
<rt id="zqva1"></rt>
  • <tt id="zqva1"></tt>
    <cite id="zqva1"></cite>

    <cite id="zqva1"><noscript id="zqva1"></noscript></cite>
      <rp id="zqva1"><meter id="zqva1"></meter></rp>

        <cite id="zqva1"></cite>
          <b id="zqva1"></b>
          <rp id="zqva1"></rp>
          <cite id="zqva1"></cite>

          <rt id="zqva1"></rt>

        1. <rp id="zqva1"></rp>

          js中箭頭函數的編碼規范,如何更好的使用箭頭函數

          時間:?2017-12-19閱讀:?1431標簽:?規范

          當您必須使用匿名函數(如在傳遞一個內聯回調時),請使用箭頭函數表示法,它創建了一個在 this 上下文中執行的函數的版本,這通常是你想要的,而且這樣的寫法更為簡潔。


          如果你有一個相當復雜的函數,你或許可以把邏輯部分轉移到一個聲明函數上。

          // bad
          [1, 2, 3].map(function (x) {
              const y = x + 1;
              return x * y;
          });
          // good
          [1, 2, 3].map((x) => {
              const y = x + 1;
              return x * y;
          });


          如果函數體由一個返回無副作用(side effect)的expression(表達式)的單行語句組成,那么可以省略大括號并使用隱式返回。否則,保留大括號并使用 return 語句。

          什么是副作用(side effect)?一段代碼,即在不需要的情況下,創建一個變量并在整個作用域內可用。 

          為什么? 語法糖。 當多個函數鏈式調用時,可讀性更高。 
          // bad
          [1, 2, 3].map(number => {
              const nextNumber = number + 1;
              `A string containing the ${nextNumber}.`;
          });
           
          // good
          [1, 2, 3].map(number => `A string containing the ${number}.`);
           
          // good
          [1, 2, 3].map((number) => {
              const nextNumber = number + 1;
              return `A string containing the ${nextNumber}.`;
          });
           
          // good
          [1, 2, 3].map((number, index) => ({
              [index]: number,
          }));
           
          // No implicit return with side effects
          function foo(callback) {
              const val = callback();
              if (val === true) {
              // Do something if callback returns true
              }
          }
           
          let bool = false;
           
          // bad
          foo(() => bool = true);
           
          // good
          foo(() => {
              bool = true;
          });


          如果表達式跨多行,將其包裹在括號中,可以提高可讀性。 

          為什么? 它清楚地顯示了函數開始和結束的位置。 
          // bad
          ['get', 'post', 'put'].map(httpMethod => Object.prototype.hasOwnProperty.call(
              httpMagicObjectWithAVeryLongName,
              httpMethod,
              )
          );
           
          // good
          ['get', 'post', 'put'].map(httpMethod => (
              Object.prototype.hasOwnProperty.call(
              httpMagicObjectWithAVeryLongName,
              httpMethod,
              )
          ));


          如果你的函數只有一個參數并且不使用大括號,則可以省略參數括號。否則,為了清晰和一致性,總是給參數加上括號。
          注意:總是使用圓括號也是可以被lint工具接受的,在這種情況下 使用 eslint 的 “always” 選項,或者 jscs 中不要包含 disallowParenthesesAroundArrowParam 選項。 eslint: arrow-parens jscs: disallowParenthesesAroundArrowParam  

          為什么? 不造成視覺上的混亂。  
          // bad
          [1, 2, 3].map((x) => x * x);
           
          // good
          [1, 2, 3].map(x => x * x);
           
          // good
          [1, 2, 3].map(number => (
              `A long string with the ${number}. It’s so long that we don’t want it to take up space on the .map line!`
          ));
           
          // bad
          [1, 2, 3].map(x => {
              const y = x + 1;
              return x * y;
          });
           
          // good
          [1, 2, 3].map((x) => {
              const y = x + 1;
              return x * y;
          });


          避免使用比較運算符(< =, >=)時,混淆箭頭函數語法

          // bad
          const itemHeight = item => item.height > 256 ? item.largeSize : item.smallSize;
           
          // bad
          const itemHeight = (item) => item.height > 256 ? item.largeSize : item.smallSize;
           
          // good
          const itemHeight = item => (item.height > 256 ? item.largeSize : item.smallSize);
           
          // good
          const itemHeight = (item) => {
              const { height, largeSize, smallSize } = item;
              return height > 256 ? largeSize : smallSize;
          };


          來源:javascript編碼規范

          站長推薦

          1.阿里云: 本站目前使用的是阿里云主機,安全/可靠/穩定。點擊領取2000元代金券、了解最新阿里云產品的各種優惠活動點擊進入

          2.騰訊云: 提供云服務器、云數據庫、云存儲、視頻與CDN、域名等服務。騰訊云各類產品的最新活動,優惠券領取點擊進入

          3.廣告聯盟: 整理了目前主流的廣告聯盟平臺,如果你有流量,可以作為參考選擇適合你的平臺點擊進入

          鏈接: http://www.modern-decoration.com.cn/article/detial/259

          前端之CSS編碼規范

          那為什么變量名不用小寫字母加小劃線的方式,如:family_tree,而是推薦用駝峰式的familyTree?C語言就喜歡用這種方式命名變量,但是由于因為下劃線比較難敲(shift + -),所以一般用駝峰式命名變量的居多。

          你可能不知道的CSS

          也許有人會說,都快 2019 年了怎么還讀 CSS2.1 規范。一方面,現在最新的 CSS (core) 規范是 CSS2.2,因為 CSS2.1 有中文的版本,并且和 CSS2.2 規范差異性不是很大,基于偷懶的目的最終選擇閱讀了 CSS2.1 規范。

          Js ES6編碼規范

          本章節討論使用ES6編碼風格到代碼中需要注意的點。通過記住這些關鍵點,可以讓我們寫出更優美的、可讀性更強的JavaScript E6風格的代碼。ES6 提出了兩個新的聲明變量的命令: let 和 const。

          分享一份大佬的MySQL數據庫設計規范,值得收藏

          MySQL數據庫與 Oracle、 SQL Server 等數據庫相比,有其內核上的優勢與劣勢。我們在使用MySQL數據庫的時候需要遵循一定規范,揚長避短。無意中從github上看到一個大佬的MySQL數據庫設計規范

          CSS的BEM規范學習

          塊中的子元素是塊的子元素,并且子元素的子元素在 bem 里也被認為是塊的直接子元素。一個塊中元素的類名必須用父級塊的名稱作為前綴。如上面的例子,li.item 是列表的一個子元素

          Web前端開發規范手冊

          文件命名規則:文件名稱統一用小寫的英文字母、數字和下劃線的組合。引文件統一使用index.htm index.html index.asp文件名(小寫),圖片的名稱分為頭尾兩部分,用下劃線隔開,頭部分表示此圖片的大類性質

          為什么有的編程規范要求用 void 0 代替 undefined?

          Undefined 類型表示未定義,它的類型只有一個值,就是 undefined。任何變量在被賦值前它的值都是 undefined,但是在 JavaScript 引擎中,undefined 是一個變量而非關鍵字。

          CSS的書寫規范和順序

          關于CSS的書寫規范和順序,是大部分前端er都必須要攻克的一門關卡,如果沒有按照良好的CSS書寫規范來寫CSS代碼,會影響代碼的閱讀體驗。這里總結了一個CSS書寫規范、CSS書寫順序供大家參考

          實際項目中用Redis要注意哪些規范?

          Redis功能強大,數據類型豐富,再快的系統,也經不住瘋狂的濫用。通過禁用部分高風險功能,并掛上開發的枷鎖,業務更能夠以簡潔、通用的思想去考慮問題,而不是綁定在某種實現上。

          前端標準規范

          總體原則:極簡、極快、解耦,主要適用范圍:vue 單頁項目+;關于圖片:少量直接放到本頁面文件下(資源集中,互不影響),有兩個頁面以上公用則抽離放到 img 文件夾下(降低層級),assets 下的 img 主要放 favicon.png、pwa等全局圖片

          fly63.com版權所有,內容以共享、參考、研究為目的,不存在任何商業目的。其版權屬原作者所有,如有侵權,請與小編聯系!情況屬實本人將予以刪除!

          文章投稿關于web前端網站點搜索站長推薦網站地圖站長QQ:522607023

          小程序專欄: 土味情話心理測試腦筋急轉彎幽默笑話段子句子語錄成語大全運營推廣

          国产精品高清视频免费 - 视频 - 在线观看 - 影视资讯 - 唯爱网