<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>

          不用if擼代碼,是件很有趣的事。

          時間:?2017-11-06閱讀:?1227標簽:?js技巧

          譯者按: 試著不用if擼代碼,是件很有趣的事,而且,萬一你領會了什么是“數據即代碼,代碼即數據”呢?

          為了保證可讀性,本文采用意譯而非直譯。另外,本文版權歸原作者所有,翻譯僅用于學習。

          我在教新手編程時,喜歡給他們一些小小的挑戰,比如:不使用if語句(或者三元運算符、switch語句等)解決一些編程問題。

          這樣做有什么意義嗎?

          事實上,它可以迫使你從不同的角度尋找解決方法,也許可以找到更好的方法。

          當然,使用if語句沒有任何不對的地方。但是,不使用if的話,有時候可以增加代碼的可讀性。這一點并不是絕對的,如果完全不使用if語句的話,代碼可讀性也許會更差。這需要你根據不同情況去判斷。

          而且,不用if的話不只是影響可讀性。在這背后隱含著更加深刻的道理。通過了解本文的代碼示例,你可以發現,如果不使用if語句的話,你的代碼會更加接近代碼即數據的概念。

          另外,當你嘗試不使用if語句去編程時,也是一件非常有意思的事情。

          示例1: 統計數組中的奇數

          假設我們有一個整數數組arrayOfIntegers,現在需要統計其中奇數的個數:

          const arrayOfIntegers = [1, 4, 5, 9, 0, -1, 5];

          使用if

          let counter = 0;
          arrayOfIntegers.forEach((integer) => {
          const remainder = Math.abs(integer % 2);
          if (remainder === 1) {
          counter++;
          }
          });
          console.log(counter);

          不用if

          let counter = 0;
          arrayOfIntegers.forEach((integer) => {
          const remainder = Math.abs(integer % 2);
          counter += remainder;
          });
          console.log(counter);

          不用if時,我們巧妙地利用了奇數與偶數的特性,它們除以2的余數分別是0和1。

          示例2: 判斷工作日和周末

          給定一個日期(比如new Date()),判斷它是工作日還是周末,分別返回”weekend”和”weekday”。

          使用if

          const weekendOrWeekday = (inputDate) => {
          const day = inputDate.getDay();
          if (day === 0 || day === 6) {
          return 'weekend';
          }
          return 'weekday';
          // Or, for ternary fans:
          // return (day === 0 || day === 6) ? 'weekend' : 'weekday';
          };
          console.log(weekendOrWeekday(new Date()));

          不用if

          const weekendOrWeekday = (inputDate) => {
          const day = inputDate.getDay();
          return weekendOrWeekday.labels[day] ||
          weekendOrWeekday.labels['default'];
          };
          weekendOrWeekday.labels = {
          0: 'weekend',
          6: 'weekend',
          default: 'weekday'
          };
          console.log(weekendOrWeekday(new Date()));

          你是否發現if語句中其實隱含著一些信息呢?它告訴我們哪一天是周末,哪一天是工作日。因此,要去掉if語句的話,我們只需要把這些信息寫入weekendOrWeekday.labels對象,然后直接使用它就好了。

          示例3: doubler函數

          寫一個doubler函數,它會根據參數的類型,進行不同的操作:

          • 如果參數是數字,則乘以2(i.e. 5 => 10-10 => -20);
          • 如果參數是字符串,則每個字符重復2次 (i.e. 'hello' => 'hheelloo');
          • 如果參數是函數,則調用2次;
          • 如果參數是數組,則將每一個元素作為參數,調用doubler函數
          • 如果參數是對象,則將每個屬性值作為參數,調用doubler函數

          使用switch

          const doubler = (input) => {
          switch (typeof input) {
          case 'number':
          return input + input;
          case 'string':
          return input
          .split('')
          .map((letter) => letter + letter)
          .join('');
          case 'object':
          Object.keys(input)
          .map((key) => (input[key] = doubler(input[key])));
          return input;
          case 'function':
          input();
          input();
          }
          };
          console.log(doubler(-10));
          console.log(doubler('hey'));
          console.log(doubler([5, 'hello']));
          console.log(doubler({ a: 5, b: 'hello' }));
          console.log(
          doubler(function() {
          console.log('call-me');
          }),
          );

          不用switch

          const doubler = (input) => {
          return doubler.operationsByType[typeof input](input);
          };
          doubler.operationsByType = {
          number: (input) => input + input,
          string: (input) =>
          input
          .split('')
          .map((letter) => letter + letter)
          .join(''),
          function: (input) => {
          input();
          input();
          },
          object: (input) => {
          Object.keys(input)
          .map((key) => (input[key] = doubler(input[key])));
          return input;
          },
          };
          console.log(doubler(-10));
          console.log(doubler('hey'));
          console.log(doubler([5, 'hello']));
          console.log(doubler({ a: 5, b: 'hello' }));
          console.log(
          doubler(function() {
          console.log('call-me');
          }),
          );

          可知,我將每一種參數類型對應的操作綁定到了doubler.operationsByType,這樣不需要switch語句,就可以實現doubler函數了。

          版權聲明:
          轉載時請注明作者Fundebug以及本文地址:
          https://blog.fundebug.com/2017/11/06/write-javascript-without-if/
          站長推薦

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

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

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

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

          三個實用的javascript小技巧

          如果你想從后向前獲取一個數組的元素,可以這樣寫:如果你想在某個條件邏輯值為true時,執行某個函數,就像這樣:如果你必須給一個變量賦默認值,可以簡單的這樣寫:

          JS技巧技法總結

          閉包原理、數組展平、前端語音(在項目中需要對ajax請求返回的消息進行語音播報,str 為返回的data)、Proxy 數據綁定和監聽、計數器

          JS禁止打開控制臺

          主要為了通過禁止打開控制臺,防止別人進行代碼調試。禁止右鍵查看源碼和F12;通過頁面寬度變化監測控制臺;利用控制臺特性改寫對象toString;利用控制臺特性進行監聽dom屬性

          javascript如何判斷值是否為整數?

          javascript如何判斷一個值是否為整數?下面本篇文章就來給大家介紹一下使用javascript判斷一個值是否為整數的方法。

          (a ==1 && a== 2 && a==3) 有可能是 true 嗎?

          1. 利用松散相等運算符 == 的原理,自定義 toString 和 valueOf 返回對應值2. 利用半寬度韓文等特殊字符,玩“障眼法”,本質上其實并沒有做到題設3. 劫持 JS 對象的 getter,不過這種方式對于嚴格相等 === 同樣有效

          js中~~和 | 的妙用

          ~~它代表雙非按位取反運算符,如果你想使用比Math.floor()更快的方法,那就是它了。需要注意,對于正數,它向下取整;對于負數,向上取整;非數字取值為0,它具體的表現形式為:

          js技巧_js中一些常見的陷阱

          這里我們針對JavaScript初學者給出一些技巧和列出一些陷阱。如果你已經是一個磚家,也可以讀一讀。你是否嘗試過對數組元素進行排序?

          5個小技巧讓你寫出更好的 JavaScript 條件語句

          使用 Array.includes 來處理多重條件,少寫嵌套,盡早返回,使用函數默認參數和解構,相較于 switch,Map / Object 也許是更好的選擇,使用 Array.every 和 Array.some 來處理全部/部分滿足條件,讓我們一起寫出可讀性更高的代碼吧

          js語言中常見錯誤總匯

          事實證明很多這些 null 或 undefined 的錯誤是普遍存在的。 一個類似于 Typescript 這樣的好的靜態類型檢查系統,當設置為嚴格的編譯選項時,能夠幫助開發者避免這些錯誤。

          js求數組的最大值--奇技淫巧和笨方法

          js中有很多“奇技淫巧”,有時我會常常刻意去用這些“奇技淫巧”(注意,我不是在反對用它,只是有時其實沒必要用)。比如,求數組中的最大值,js中Array沒有原生的求最大值的方法,但是Math有呀

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

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

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

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