摘要:之銀彈技法下文這些淫巧在之前自認為是居家必備,裝逼撩妹的必備之物,博主一直敝帚自珍,不愿拿出來分享,現如今,極盡能事,我知道再不拿出來就在沒有價值了來由博主入行前端寫時候,因為需要兼容低版本,時常需要在繁雜冗長的操作夾雜的代碼中,盡可能巧妙
JavaScript 之銀彈の技法
來由下文這些淫巧在之前自認為是居家必備,裝逼撩妹的必備之物,博主一直敝帚自珍,不愿拿出來分享,現如今,ES6+極盡能事,我知道再不拿出來就在沒有價值了?
博主入行前端寫JavaScript時候,因為需要兼容IE低版本,時常需要在繁雜冗長的DOM操作夾雜的代碼中,盡可能巧妙地節省代碼了,保持代碼清潔和逼格,久而久之,在維護前輩舊代碼和新功能開發時積累了一套代碼書寫的奇技淫巧,你也可以把它看作是抖機靈,不過它的確是豐盈了我的codeの時光,讓我們不至書寫業務那么枯燥。
目錄1. 取整
2. 多行字符串
3. 快速輸出重復字符串
4. 用switch case代替if else
5. 截取數組
6. 獲取數組中的最大值和最小值
7. 日期轉數字
8. 用 && || ?: , 節省代碼行數
9. 隱式轉換
10. 利用對象數組取值、方法
11. 匿名函數的N種寫法
1. 取整 (任性指數: ??????????)var a = ~~1.2; //1
還可以用位右移符>>
var a = 3.4>>0; //3
簡單解釋,~是按位取反的運算符,可以將浮點數通過舍去小數點后面的所有位來轉換為整數。
2. 多行字符串 (銀彈指數: ????????)注意:如果需要做嚴格的四舍五入運算就要慎用此方法,那就還是得用Math函數
var temp1 = "" + "";" + "<%=data%>" + "
這樣一段多行的js字符串我們一般通過行尾+字符串來實現連接,這樣的寫法既不好看,不容易維護,代碼量又多,當然我們知道ES6的字符串模版可以輕松實現優雅寫法:
const temp2 = ``;<%=data%>
想知道在遠古時代,我們智慧的勞動人民刀耕火種這樣寫:
var temp3 = "3. 快速輸出重復字符串(腦洞指數: ??????????)";<%=data%>
我們笨辦法是
for (var i = 0, temp = ""; i < 200; i++, temp += "leo"); console.log(temp)
在ES6+寫法中我們使用 "leo".repeat(200)"
在以前我們可以這樣抖機靈:
var temp = Array(201).join("leo");
4. 用switch case代替if else(腦洞指數: ????????)經過提醒,此處用該把200換成了201。
這種代替可能會讓第一次看到的你覺得腦洞大開:這樣玩也行?對的,case后面跟上Boolean判斷而不是具體值。
switch (true) { case (a > 10): do_something(); break; case (a < 100): others(); break; default: break; }5. 截取數組 (奇葩指數: ??????)
var arr = [1,2,3,4,5,6]; arr = arr.slice(0,3);
我們可以利用length在這種情況
var arr = [1,2,3,4,5,6]; arr.length=3;6. 獲取數組中的最大值和最小值 (實用指數: ????????)
var numbers = [ 5, 458, 120, -215, 228, 400, 122205, -85411 ]; var maxInNumbers = Math.max.apply(Math, numbers); var minInNumbers = Math.min.apply(Math, numbers);7. 日期轉數字 (銀彈指數: ??????)
var time1 = new Date().getTime();
我們可以這樣
var time2 = + new Date();8. 用 && || ?: , 節省代碼行數 (用多了會被打指數: ??????????)
在我們代碼簡短的判斷邏輯,我們經常會使用運算符去實現,用if else反而顯得不簡潔,特別注意用,可以把多個短句合成一句。
data = { currpage: (obj.role == 4 || obj.role == 7) ? ++_this.curpage_store : ++_this.curpage_agent, ajaxType: "GET" } !localData[type][number] && (localData[type][number] = data, localStorage.setItem(this.jobid, JSON.stringify(localData))); !$allCity.hasClass("active") ? ($(this).addClass("active"), $allCity.addClass("active"), lastPos = xk_www.$bd.scrollTop()) : ($(this).removeClass("active"), $allCity.removeClass("active"), lastPos != null && xk_www.$bd.animate({ scrollTop: lastPos }));9. 隱式轉換 (實用指數: ??????????)
data.isDeep == ‘0’; // 有時候返回的deep可能為0可能為“0” data.isDeep > 0 ; ...
合理優雅的運用JavaScript的弱類型特點的靈活性,可以在很多時候巧妙地做到節省代碼量,如果我們很好掌握隱式轉換,比如在很多時候我們用==反而比===更得心應手,用>的布爾比較反而比嚴格的類型檢查和值比較更快捷。
10. 利用對象數組取值、方法 (實用指數: ????????)const config={ 1:"周一", 2:"周二", 3:"周三", 4:"周四", 5:"周五", 6:"周六", 7:"周日", }; config[1]; const doSomething={ a(){ ... } b(){ ... } c(){ ... } d(){ ... } } doSomething("a");11. 匿名函數的N種寫法 (漲姿勢指數: ????????)
js的匿名函數是未申明函數名的自執行函數,格式是這樣的
(function(){})();
但是在實際項目中,我們經常這么些,在前面加上;或者+
;function(){}(); +function(){}();
雖然JS的語法是可以省略分號的,為了避免代碼上線后合并壓縮成一個文件可能造成的語法錯誤,所以加上“;”可以避免未知錯誤。
而“+”在這里是運算符,運算符具有極高的優先級,所以右邊的函數聲明加上括號的部分(實際上就是函數執行的寫法)就直接執行了。其實不止前面可以是“+”號,“-”、“!”、“~”、“++”等運算符均可。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/85102.html
摘要:函數式編程術語大全函數式編程有許多優點,它也越來越流行了。然而,每個編程范式都有自己獨特的術語,函數式編程也不例外。作用域有兩種類似全局作用域和局部作用域。目前最重要的應用場景之一,就是在的握手階段,客戶端服務端利用算法交換對稱密鑰。 1、JavaScript 函數式編程術語大全 函數式編程(FP)有許多優點,它也越來越流行了。然而,每個編程范式都有自己獨特的術語,函數式編程也不例外。...
摘要:函數式編程術語大全函數式編程有許多優點,它也越來越流行了。然而,每個編程范式都有自己獨特的術語,函數式編程也不例外。作用域有兩種類似全局作用域和局部作用域。目前最重要的應用場景之一,就是在的握手階段,客戶端服務端利用算法交換對稱密鑰。 1、JavaScript 函數式編程術語大全 函數式編程(FP)有許多優點,它也越來越流行了。然而,每個編程范式都有自己獨特的術語,函數式編程也不例外。...
摘要:為什么會產生閉包究其根本,是因為代表的函數包含的作用域。而在作用域鏈中,外部函數的活動對象始終處于第二位,外部函數的外部函數的活動對象處于第三位直到作為作用域鏈終點的全局執行環境。 前言 此文的內容主要是來自看書的總結+小小的實踐哦~會不斷更新總結。 什么是閉包 書上是這樣定義閉包的: 有權訪問另一個函數作用域中變量的函數。 舉一個例子: function test(){ va...
摘要:構造函數構造操作符調用的函數就是構造函數。其和其構造函數的指向相同。而構造函數屬性指向的對象帶有屬性,指向函數自身。,回歸構造函數繼承,仔細看看誕生的嘻嘻和哈哈兩位同學可以看到兩個實例都擁有了和兩個屬性,因為方法的運行類似于執行了和。 最近在看《JavaScript設計模式》,然后開篇復習了JavaScript中的幾種繼承方式,自己似乎也沒有怎么仔細探究過,目前自己沒怎么碰到過應用的場...
閱讀 1892·2021-11-23 09:51
閱讀 1535·2021-11-19 09:40
閱讀 3209·2021-11-11 11:01
閱讀 1105·2021-09-27 13:34
閱讀 1835·2021-09-22 15:56
閱讀 2122·2019-08-30 15:52
閱讀 1061·2019-08-30 14:13
閱讀 3473·2019-08-30 14:10