整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          JS代碼其實可以這樣寫

          常工作中,我確實經常去幫大家review代碼,長期以來,我發現有些個功能函數,JS其實可以稍微調整一下,或者換個方式來處理,代碼就會看起來更清晰,更簡潔,甚至效率更高,主要是還更好理解。

          下面我列舉5個案例,我們一起來看一下

          一、建議考慮使用FlatMap方法

          先來看一段同時使用filtermap方法遍歷數組的代碼。我相信這種場景大家一定碰到過。為了說明問題,這里我用簡單的數字內容來舉個例子。

          上面代碼這樣寫,沒什么問題,而且方法的連用也是比較推薦的處理方式, 但是,還是請多想想,其實我們有更好的方式來處理這一類問題。

          現在我們看使用FlatMap如何實現的

          使用FlatMap的好處是

          只要遍歷一遍,而且不產生中間多余數組

          二、建議調整數組方法調用的順序

          日常工作中寫的比較多的數組方法有filter()find()map()reduce(),在必要的場景下,我們也建議將這些個方法連起來一起調用。但是,一定要注意調用順序,否則也會影響效率問題。

          比如下面這樣:

          仔細看上面這段代碼,你就會發現

          如果我們首先使用過濾器,然后排序,這樣執行就能提高效率

          三、建議這里使用reduce方法

          你寫的代碼一定要讓大家看的懂,代碼要簡潔,然而,有些方法它就出于這個目的創造的,如果你又不用,那就太可惜了,比如reduce方法。

          舉個例子,我們先從接口中拉出一段數據,然后對數據內容進行分類處理,像下面代碼這樣

          我看到大多數前端開發人員都會使用forEach方法或者錯誤的使用map方法去處理,相比之下,實際上這里特別適合使用reduce方法

          看起來會更清晰而且更容易理解

          四、建議使用原生JavaScript類

          上面這張很清晰明了的拆解了URL的每一部分

          關于頁面的URL我們可以組裝也可以拆卸,這里說一下URL各部分的組裝問題,你現在或者曾經肯定處理過URL拼接的問題,代碼可能是這么寫的

          這樣寫雖然能夠實現,但是代碼看起來很混亂,很可能會被破壞,并且每次都需要你在最后添加一些規則,添加一些其他參數。

          比如,你可能忘記添加/或者&符號就會導致錯誤,下面看看原生類怎么實現的,可以對比一下兩者區別

          這樣看來,在處理URL組裝問題上是不是可以考慮使用原生類了?

          五、建議使用生成器

          提到生成器,大家可能只是聽過,或者知道怎么使用,而實際項目中很少去用。實際上它有很多使用場景。

          使用生成器能夠節省很多代碼,代碼也非常清晰。如,進行異步操作或者按需循環或者按需加載時。

          看這段代碼:

          上面代碼中main函數,可以根據用戶交互或者其它技巧來調用。因為這里不希望無限加載。

          總結

          好了,就說這幾點,日常工作中,希望大家都寫出高質量的代碼。

          avaScript基礎概念

          JS的組成:

          1.ECMAScript:Js語法

          2.DOM:文檔對象模型 , 文檔:html文檔 ,操作html文檔 (操作html文檔的工具)

          3.BOM:瀏覽器對象模型 , 操作瀏覽器的工具

          JS的三種書寫方式

          行內式,內嵌式,外部鏈接

          JavaScript輸入·輸出語句

          alert(msg) 瀏覽器彈出警告框

          consle.log(msg) 瀏覽器控制臺打印輸出信息

          prompt(info) 瀏覽器彈出輸入框 用戶可以輸入信息

          我自己是一名從事了多年開發的web前端老程序員,目前辭職在做自己的web前端私人定制課程,今年年初我花了一個月整理了一份最適合2019年學習的web前端學習干貨,各種框架都有整理,送給每一位前端小伙伴,想要獲取的可以關注我的頭條號并在后臺私信我:前端,即可免費獲取。

          變量的概念

          通俗:變量是用于存放數據的容器。 我們通過 變量名 獲取數據,甚至數據可以修改。

          變量理解:變化的量,變化的內容,變化的數據

          變量存儲數據理解:程序運行過程中的數據存儲在內存中,但是內存比較大,為了方便管理,所以將內存分成一個一個的盒子(變量)來存儲

          變量的使用

          1.聲明變量 var 變量名;var age;(聲明一個 名稱為age 的變量)

          2.變量的賦值 var 變量名 = 值; var age = 18; 聲明變量age同時賦值為 18

          變量案例

          var myname = '旗木卡卡西'; // 字符串
          var address = '火影村';
          var age = 30; // 數字
          var email = 'kakaxi@itcast.cn';
          var gz = 2000;
          console.log(myname);
          console.log(address);
          console.log(age);
          console.log(email);
          console.log(‘gz’); // gz
          console.log(gz); // 2000
          

          注意:

          • 變量賦值時,值如果是字符串需要添加’’,“”
          • 每行代碼結束,都需要添加;
          • 變量在使用時,不能添加引號 (定義,聲明變量的時候,沒有引號,使用的時候自然也不能添加引號)
            案例2:
          // 1. 用戶輸入姓名 存儲到一個 myname的變量里面
          var myname = prompt('請輸入您的名字');
          // prompt 做的事情:
          // (1). 彈出輸入框 , 用戶輸入內容:zs
          // (2). 將用戶輸入內容返回 ,相當于 :var myname = 'zs';
          // 2. 輸出這個用戶名
          alert(myname); // zs
          

          變量命名規范

          規則

          由字母(A-Za-z)、數字(0-9)、下劃線(_)、美元符號( $ )組成,如:usrAge, num01, _name ***

          嚴格區分大小寫。var app; 和 var App; 是兩個變量

          不能 以數字開頭。 18age 是錯誤的

          不能 是關鍵字、保留字。例如:var、for、while

          變量名必須有意義。 MMD BBD nl → age

          遵守駝峰命名法。首字母小寫,后面單詞的首字母需要大寫。 myFirstName

          推薦翻譯網站: 有道 愛詞霸

          變量案例-交換兩個變量

          // js 是編程語言有很強的邏輯性在里面: 實現這個要求的思路 先怎么做后怎么做 
          // 1. 我們需要一個臨時變量幫我們
          // 2. 把apple1 給我們的臨時變量 temp 
          // 3. 把apple2 里面的蘋果給 apple1 
          // 4. 把臨時變量里面的值 給 apple2 
          var temp; // 聲明了一個臨時變量為空
          var apple1 = '青蘋果';
          var apple2 = '紅蘋果';
          temp = apple1; // 把右邊給左邊
          apple1 = apple2;
          apple2 = temp;
          console.log(apple1);
          console.log(apple2);
          

          簡單數據類型
          JavaScript 中的簡單數據類型及其說明如下:


          數字型范圍:JavaScript中數值的最大和最小值

          alert(Number.MAX_VALUE); // 1.7976931348623157e+308 (10的正308次方)
          alert(Number.MIN_VALUE); // 5e-324 5e-324 (10的負324次方)

          數字型三個特殊值

          alert(Infinity); // Infinity
          alert(-Infinity); // -Infinity
          alert(NaN); // NaN ***
          //課堂代碼:
          // 5. 無窮大
          console.log(Number.MAX_VALUE * 2); // Infinity 無窮大 
          // 6. 無窮小
          console.log(-Number.MAX_VALUE * 2); // -Infinity 無窮大
          // 7. 非數字
          console.log('pink老師' - 100); // NaN:字符串是無法與數字進行運算的,所以結果是一個非數字
        1. Infinity ,代表無窮大,大于任何數值
        2. -Infinity ,代表無窮小,小于任何數值
        3. NaN ,Not a number,代表一個非數值
        4. isNaN
          用來判斷一個變量是否為非數字的類型,返回 true 或者 false

          var usrAge = 21;
          var isOk = isNaN(userAge);
          console.log(isNum); // false ,21 不是一個非數字
          var usrName = "andy";
          console.log(isNaN(userName)); // true ,"andy"是一個非數字

          字符串型 String
          字符串型可以是引號中的任意文本,其語法為 雙引號 “” 和 單引號’’

          var strMsg = "我愛北京天安門~"; // 使用雙引號表示字符串
          var strMsg2 = '我愛吃豬蹄~'; // 使用單引號表示字符串
          // 常見錯誤
          var strMsg3 = 我愛大肘子; // 報錯,沒使用引號,會被認為是js代碼,但js沒有這些語法

          字符串引號嵌套
          JS 可以用單引號嵌套雙引號 ,或者用雙引號嵌套單引號 (外雙內單,外單內雙)

          var strMsg = '我是"高帥富"程序猿'; // 可以用''包含""
          var strMsg2 = "我是'高帥富'程序猿"; // 也可以用"" 包含''
          // 常見錯誤
          var badQuotes = 'What on earth?"; // 報錯,不能 單雙引號搭配

          字符串轉義符

          類似HTML里面的特殊字符,字符串中也有特殊字符,我們稱之為轉義符。

          轉義符都是 \ 開頭的,常用的轉義符及其說明如下:

          字符串長度

          • 字符串是由若干字符組成的,這些字符的數量就是字符串的長度
          • 通過字符串的 length 屬性可以獲取整個字符串的長度
          var strMsg = "我是帥氣多金的程序猿!";
           alert(strMsg.length); // 顯示 11

          字符串拼接

          • 多個字符串之間可以使用 + 進行拼接,其拼接方式為 字符串 + 任何類型 = 拼接之后的新字符串
          • 拼接前會把與字符串相加的任何類型轉成字符串,再拼接成一個新的字符串
          //1.1 字符串 "相加"
          alert('hello' + ' ' + 'world'); // hello world
          //1.2 數值字符串 "相加"
          alert('100' + '100'); // 100100
          //1.3 數值字符串 + 數值
          alert('11' + 12); // 1112 
          //以上的字符串拼接都沒有意義,一般我們字符串會與變量進行拼接
          

          原文鏈接:https://blog.csdn.net/H_eartbeat/article/details/103102782

          文講述了 9 條非常強大的 JavaScript 技巧。

          作者 | Klaus

          譯者 | 彎月,責編 | 屠敏

          以下為譯文:

          全部替換

          我們知道string.replace函數只會替換第一次出現的位置。在正則表達式末尾添加 /g 即可替換所有出現。

          var example = "potato potato";
          console.log(example.replace(/pot/, "tom"));
          // "tomato potato"
          console.log(example.replace(/pot/g, "tom"));
          // "tomato tomato"

          提取唯一值

          使用Set對象和spread操作符可以創建一個新的數組,僅包含唯一的值。

          var entries = [1, 2, 2, 3, 4, 5, 6, 6, 7, 7, 8, 4, 2, 1]
          var unique_entries = [...new Set(entries)];
          console.log(unique_entries);
          // [1, 2, 3, 4, 5, 6, 7, 8]

          數字轉為字符串

          只需要將其與空字符串連接。

          var converted_number = 5 + "";
          console.log(converted_number);
          // 5
          console.log(typeof converted_number);
          // string

          字符串轉為數字

          只需要使用 + 運算符。

          注意這個技巧只能在“字符串形式的數字”上使用。

          the_string = "123";
          console.log(+the_string);
          // 123

          the_string = "hello";
          console.log(+the_string);
          // NaN

          打亂數組的元素順序

          var my_list = [1, 2, 3, 4, 5, 6, 7, 8, 9];
          console.log(my_list.sort(function {
          return Math.random - 0.5
          }));
          // [4, 8, 2, 9, 1, 3, 6, 5, 7]

          多維數組扁平化

          只需使用spread運算符。

          var entries = [1, [2, 5], [6, 7], 9];
          var flat_entries = .concat(...entries);
          // [1, 2, 5, 6, 7, 9]

          短路條件

          比如下面的例子:

          if (available) {
          addToCart;
          }

          只需將變量和函數寫到一起即可:

          available && addToCart

          動態屬性名

          原來我以為必須先定義一個對象才能指定動態屬性名,其實不需要:

          const dynamic = 'flavour';
          var item = {
          name: 'Coke',
          [dynamic]: 'Cherry'
          }
          console.log(item);
          // { name: "Coke", flavour: "Cherry" }

          使用length屬性來改變數組大小或清空數組

          只需要重寫數組的length即可。

          要想改變數組大小:

          var entries = [1, 2, 3, 4, 5, 6, 7]; 
          console.log(entries.length);
          // 7
          entries.length = 4;
          console.log(entries.length);
          // 4
          console.log(entries);
          // [1, 2, 3, 4]

          要想清空數組:

          var entries = [1, 2, 3, 4, 5, 6, 7]; 
          console.log(entries.length);
          // 7
          entries.length = 0;
          console.log(entries.length);
          // 0
          console.log(entries);
          //

          原文:https://dev.to/razgandeanu/9-extremely-powerful-javascript-hacks-4g3p

          本文為 CSDN 翻譯,轉載請注明來源出處。

          【End】


          主站蜘蛛池模板: 日韩AV无码一区二区三区不卡毛片| 国产av熟女一区二区三区| av无码免费一区二区三区| 一区二区三区四区视频| 夜色福利一区二区三区| 无码人妻精品一区二区蜜桃 | 国产丝袜美女一区二区三区| 国产精品一区二区电影| 麻豆视传媒一区二区三区| AV无码精品一区二区三区宅噜噜| 波多野结衣一区二区免费视频| 精品国产亚洲一区二区三区| 中文字幕乱码一区久久麻豆樱花| 一区二区三区免费看| 精品国产一区二区三区无码| 无码精品前田一区二区| 毛片一区二区三区无码| 成人欧美一区二区三区在线视频| 无码人妻精品一区二区蜜桃网站| 精品人妻中文av一区二区三区| 精品一区二区三区在线成人| 久久伊人精品一区二区三区 | 亚洲AV综合色区无码一区爱AV| 国产91精品一区二区麻豆网站| 视频一区二区三区人妻系列| 成人精品一区二区户外勾搭野战| 99在线精品一区二区三区| 久久人妻无码一区二区| 亚洲国产av一区二区三区丶| 日韩免费视频一区二区| 日韩精品一区二区午夜成人版| 国模极品一区二区三区| 亚洲Av高清一区二区三区| 日韩精品无码免费一区二区三区| 国产免费播放一区二区| 国产午夜毛片一区二区三区| 精品人妻一区二区三区毛片| 日韩精品人妻av一区二区三区| 国产成人精品亚洲一区| 无码人妻一区二区三区精品视频| 高清一区二区在线观看|