JS開發技巧有哪些

這篇文章主要為大家展示了“JS開發技巧有哪些”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“JS開發技巧有哪些”這篇文章吧。

常用 JS 函數

1.時間格式化

界面展示的時間千變萬化, 所以一個處理時間的函數，它的重要性就不言而喻了。

export function formatDate (oldDate, fmt) { 
 let date = new Date() 
 if (typeof oldDate === 'string' || typeof oldDate === 'number') { 
 date = new Date(+oldDate) 
 } else { 
 date = oldDate 
 } 
if (/(y+)/.test(fmt)) { 
 fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length)) } 
 let o = { 
 'M+': date.getMonth() + 1, 
 'd+': date.getDate(), 
 'h+': date.getHours(), 
 'm+': date.getMinutes(), 
 's+': date.getSeconds() } 
 function padLeftZero (str) { 
 return ('00' + str).substr(str.length) 
 } 
 for (let k in o) { 
 if (new RegExp(`(${k})`).test(fmt)) { 
 let str = o[k] + '' 
 fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str)) 
 } 
 } 
 return fmt
}復制代碼

formatDate 接受倆個參數, oldDate 類型可以是 Date，String，Number。因為現在用時間戳傳遞時間真的是蠻多，也蠻方便的，而JS 是一門弱類型語言，所以我將 String 和 Number 類型的數據統一當做時間戳來處理。 fmt 是格式化的類型：yyyy-MM-dd hh:mm，其中的 yyyy | MM | dd | hh | mm 是分別匹配 年 | 月 | 日 | 時 | 分 的關鍵字。其中的連字符是可以隨意替換的，只展示年月將其他關鍵字去掉即可。舉幾個例子：

• yyyy年MM月dd -> 2019年09月7日

• hh分mm秒 -> 16分53秒

2.以“天”為單位獲取響應的時間戳

通常都會獲取三天前的時間，12 個以內的數據，24 小時以內的數據，因此我弄了一個以天為單位獲取時間戳的函數

export function setDate(num) { return Date.now() + num * 24 * 60 * 60 * 1000}復制代碼

時間為正可以獲得未來的時間，時間為負可以獲得過去時間。舉個例子

• 12 個小時之前的時間 -> setDate(-.5)

• 24 個小時之前的時間 -> setDate(-1)

• 三天后的時間 -> setDate(3)

3.獲取 URL 中的參數

這個需求在三大框架的時代應用貌似不多了，不過面試中問的還是蠻多的，了解一下是好的

簡單實現

var urlParams = new URLSearchParams('?post=1234&action=edit');
console.log(urlParams.get('action')); // "edit"
復制代碼

看了一下瀏覽器支持情況還是蠻好的，除了萬惡的 ie

復雜實現

function getUrlParams(param){
 // 有賴于瀏覽器環境， window.location.search 是瀏覽器函數
 // 意思是:設置或返回從問號 (?) 開始的 URL（查詢部分）。 
 var query = window.location.search.substring(1); 
 var vars = query.split("&"); 
 for (var i=0;i<vars.length;i++) { 
 var pair = vars[i].split("="); 
 if(pair[0] == param){return pair[1];} 
 } 
 return(false);
}復制代碼

舉個例子： http://xuyuechao.top?a=3&b=5&c=8888

• getUrlParams('a') -> 3

• getUrlParams('b') -> 5

• getUrlParams('c') -> 8888

4.手機端判斷瀏覽器類型

BrowserInfo = { 
 isAndroid: Boolean(navigator.userAgent.match(/android/ig)), 
 isIphone: Boolean(navigator.userAgent.match(/iphone|ipod/ig)), 
 isIpad: Boolean(navigator.userAgent.match(/ipad/ig)), 
 isWeixin: Boolean(navigator.userAgent.match(/MicroMessenger/ig)), 
 isAli: Boolean(navigator.userAgent.match(/AlipayClient/ig)),
 isPhone: Boolean(/(iPhone|iPad|iPod|iOS|Android)/i.test(navigator.userAgent))
}復制代碼

目前主要支持 安卓 & 蘋果 & ipad & 微信 & 支付寶 & 是否是手機端。

5. 數組降維

二維數組

let arr = [ [1], [2], [3] ]
arr = Array.prototype.concat.apply([], arr); // [1, 2, 3]復制代碼

多維數組降維

let arr = [1, 2, [3], [[4]]]
arr = arr.flat(3) // [1, 2, 3, 4]復制代碼

flat 有兼容性問題，手機端問題不大。瀏覽器端不兼容 edge。填 Infinity 可展開任意深度的數組

6.深拷貝

使用變量 a 拷貝對象 b，改變 a 中的值 b 中的值也會跟著改變，這叫做淺拷貝。要想讓 a 獨立于 b 就需要深拷貝

簡易處理

function deepClone() {
 return JSON.parse(JSON.stringify(obj))
}復制代碼

既然是建議處理就有他的不足，上面主要是用了 JSON 的序列化和反序列化。而 JSON 是不支持函數和 undefined 的因此碰到這些情況會缺失，但是已經能夠滿足大部分情況了

復雜處理

復雜處理就需要采用遞歸的方式了

function deepClone(obj) { 
 function isClass(o) { 
 if (o === null) return "Null"; 
 if (o === undefined) return "Undefined"; 
 return Object.prototype.toString.call(o).slice(8, -1); 
 } 
 var result; 
 var oClass = isClass(obj); 
 if (oClass === "Object") { 
 result = {}; 
 } else if (oClass === "Array") {
 result = []; 
 } else { 
 return obj; 
 } 
 for (var key in obj) { 
 var copy = obj[key]; 
 if (isClass(copy) == "Object") { 
 result[key] = arguments.callee(copy);//遞歸調用 
 } else if (isClass(copy) == "Array") { 
 result[key] = arguments.callee(copy); 
 } else { 
 result[key] = obj[key]; 
 } 
 } 
 return result;
}復制代碼

7. 防抖 & 節流

防抖和節流屬于高階技巧，業務中比較多見的場合也就是搜索內容改變提示信息。即使不加也也不一定能看出區別，但是加了新手維護代碼可能會崇拜你哦。

防抖

function debounce(func, wait) {
 let timeout;
 return function () {
 let context = this;
 let args = arguments;
 if (timeout) clearTimeout(timeout);
 
 timeout = setTimeout(() => {
 func.apply(context, args)
 }, wait);
 }
}復制代碼

節流

function throttle(func, wait) {
 let previous = 0;
 return function() {
 let now = Date.now();
 let context = this;
 let args = arguments;
 if (now - previous > wait) {
 func.apply(context, args);
 previous = now;
 }
 }
}復制代碼

8. 獲取數組極值

function smallest(array){ 
 return Math.min.apply(Math, array); 
} 
function largest(array){ 
 return Math.max.apply(Math, array); 
} 
smallest([0, 1, 2.2, 3.3]); // 0
largest([0, 1, 2.2, 3.3]); // 3.3復制代碼

感謝歲月無影的評論，再此補充用 es6 的實現方式

let list = [1, 2, 3, 4, 5]
Math.max(...list) // 5
Math.min(...list) // 1
復制代碼

9.判斷小數是否相等

function epsEqu(x,y) { 
 return Math.abs(x - y) < Math.pow(2, -53);
}
// 舉例
0.1 + 0.2 === 0.3 // false
epsEuq(0.1 + 0.2, 0.3) // true復制代碼

用戶輸入的是十進制數字，計算機保存的是二進制數。所以計算結果會有偏差，所以我們不應該直接比較非整數，而是取其上限，把誤差計算進去。這樣一個上限稱為 machine epsilon，雙精度的標準 epsilon 值是 2^-53 （Math.pow(2, -53)）

總結：

文中的代碼可能不一定是最優代碼，要是你有更好的代碼歡迎評論。

參考資料：

www.jianshu.com/p/c8b86b09d…

www.cnblogs.com/wxydigua/p/…

blog.csdn.net/u014607184/…

rockjins.js.org/2017/02/15/…

一些讓 JS 更優雅 / 易讀的小技巧

對于工程師來說，代碼是寫一遍、修改很多遍、閱讀更多遍的重要產出，可讀性至關重要，所以高可讀代碼的重要性不言而喻。

1.用對象代替 switch / if

公共內容:
let a = 'VIP'
場景 1
if (a === 'VIP') {
 return 1
} else if (a === 'SVIP') {
 return 2
}
場景 2
switch(a) {
 case 'VIP'
 return 1
 break
 case 'SVIP'
 return 2
 break
}
場景 3
let obj = {
 VIP: 1,
 SVIP: 2
}復制代碼

這里只是提供了一種方式，具體的使用場景還是要你自己判斷。我用的比較多的一個場景是狀態映射中文含義，例如支付狀態通常獲取的是 1， 2，3，4 這種值，但是列表要求顯示相應的中文狀態 未支付 | 支付中 | 已退款等等

2. || 和 && 的妙用

// 場景 1
function b(a) {
 if (a) {
 return a
 } else {
 return ''
 }
}
// 場景 2
function b(a) {
 return a || ''
}復制代碼

上面是 || 的用法，也叫做短路處理。常見于 if 條件中，但是他其實也可以直接用于語句中。當第一個參數為 true 就會取第一個參數的值，當第一個參數不為 true 就會取第二個參數的值。&& 正好與 || 相反。第一個參數 為 true 會取第二個參數的值

以上是“JS開發技巧有哪些”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！