JavaScript優雅寫法及騷操作記錄

NO IMAGE

昨天看權威指南的時候看到一個個人覺得很優雅的寫法,便想著記錄一下(我的夢想就是寫一手富有詩意的優雅代碼)在Js世界中,有些操作會讓你無法理解,但是卻無比優雅。如有錯誤,歡迎批評指正!

1、 判斷為空

  • 直白寫法
    if(a == undefined) a = [];
if(params.success){
params.success(res);
}
  • 優雅寫法
     a = a || [];
params.success&&params.success(res);
//注意事項
1、if內不能出現var、=等賦值定義語句,才可以使用優雅寫法
2、if內可以有多個方法調用,但必須方法內有true返回值(此用法意義不大)

問題:我們編寫js代碼時經常遇到複雜邏輯判斷的情況,通常大家可以用if/else或者switch來實現多個條件判斷,但這樣會有個問題,隨著邏輯複雜度的增加,代碼中的if/else/switch會變得越來越臃腫,越來越看不懂.

2、多條件判斷

  • 小白寫法

var Statistics = function(){
console.log('執行')
}
switch (currentTab) 
{
case 0:
Statistics();
break;
case 1:
Statistics();
break;
case 2:
Statistics();
break;
case 3:
Statistics();
break;
}
  • 優雅寫法
    //將判斷條件作為對象的屬性名,將處理邏輯作為對象的屬性值
var Statistics = function(){
console.log('執行')
}
const comparativeTotles = new Map([
[0,Statistics],
[1,Statistics],
[2,Statistics],
[3,Statistics]
])
let map = function(val){
return comparativeTotles.get(val)
} 
let getMap  = map(1); //如果查找不到返回undefined
if(!getMap){
console.log('查找不到')
}else{
concaozuole.log('執行操作')
getMap()
}
  • if else
/**
* 按鈕點擊事件
* @param {number} status 活動狀態:1開票中 2開票失敗 3 開票成功 4 商品售罄 5 有庫存未開團
* @param {string} identity 身份標識:guest客態 master主態
*/
const onButtonClick = (status, identity) => {
if (identity == 'guest') {
if (status == 1) {
//函數處理
} else if (status == 2) {
//函數處理
} else if (status == 3) {
//函數處理
} else if (status == 4) {
//函數處理
} else if (status == 5) {
//函數處理
} else {
//函數處理
}
} else if (identity == 'master') {
if (status == 1) {
//函數處理
} else if (status == 2) {
//函數處理
} else if (status == 3) {
//函數處理
} else if (status == 4) {
//函數處理
} else if (status == 5) {
//函數處理
} else {
//函數處理
}
}
}
  • 改完後
//利用數組循環的特性,符合條件的邏輯都會被執行,那就可以同時執行公共邏輯和單獨邏輯。
const functionA = ()=>{/*do sth*/}       // 單獨業務邏輯
const functionB = ()=>{/*do sth*/}       // 單獨業務邏輯
const functionC = ()=>{/*send log*/}   // 公共業務邏輯
const actions = new Map([
['guest_1', () => { functionA }],
['guest_2', () => {  functionB }],
['guest_3', () => { functionC }],
['guest_4', () => { functionA }],
['default', () => { functionC  }],
//...
])
/**
* 按鈕點擊事件
* @param {string} identity 身份標識:guest客態 master主態
* @param {number} status 活動狀態:1開票中 2開票失敗 3 開票成功 4 商品售罄 5 有庫存未開團
*/
const onButtonClick = (identity, status) => {
let action = actions.get(`${identity}_${status}`) || actions.get('default')
action.call(this)
}

三、’騷’操作

1. 生成隨機ID

    // 生成長度為10的隨機字母數字字符串
Math.random().toString(36).substring(2);

2. 每秒更新當前時間

setInterval(()=>document.body.innerHTML=new Date().toLocaleString().slice(10,18))

3. 生成隨機 16 進制 顏色 碼 如 # ffffff

'#' + Math.floor(Math.random() * 0xffffff).toString(16).padEnd(6, '0');

4. 返回鍵盤

// 用字符串返回一個鍵盤圖形
(_=>[..."`1234567890-=~~QWERTYUIOP[]\~ASDFGHJKL;'~~ZXCVBNM,./~"].map(x=>(o+=`/${b='_'.repeat(w=x<y?2:' 667699'[x=["BS","TAB","CAPS","ENTER"][p++]||'SHIFT',p])}\|`,m+=y+(x+'    ').slice(0,w)+y+y,n+=y+b+y+y,l+=' __'+b)[73]&&(k.push(l,m,n,o),l='',m=n=o=y),m=n=o=y='|',p=l=k=[])&&k.join`
`)()

5. 優雅的取整

var a = ~~2.33   ----> 2
var b = 2.33 | 0   ----> 2
var c = 2.33 >> 0   ----> 2

6.優雅的金錢格式化

1、使用正則實現
var test1 = '1234567890'
var format = test1.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
console.log(format) // 1,234,567,890
2、使用騷操作
function formatCash(str) {
return str.split('').reverse().reduce((prev, next, index) => {
return ((index % 3) ? next : (next + ',')) + prev
})
}
console.log(format) // 1,234,567,890

7. 五種方法實現值交換


1. var temp = a; a = b; b = temp; (傳統,但需要藉助臨時變量)
2. a ^= b; b ^= a; a ^= b; (需要兩個整數)
3. b = [a, a = b][0] (藉助數組)
4. [a, b] = [b, a]; (ES6,解構賦值)
5. a = a + b; b = a - b; a = a - b; (小學奧賽題)

8. 實現深拷貝

var b = JSON.parse(JSON.string(a))

9. 去掉小數部分

//下面幾種方式都行
parseInt(num)
~~num
num >> 0
num | 0

10. 遞歸求階乘


function factorial(n) {
return (n > 1) ? n * f(n - 1) : n

11. 打印試試


console.log(([][[]] + [])[+!![]] + ([] + {})[!+[] + !![]])
console.log((!(~+[]) + {})[--[~+''][+[]] * [~+[]] + ~~!+[]] + ({} + [])[[~!+[]] * ~+[]])

12. console美化

console.info("%c哈哈", "color: #3190e8; font-size: 30px; font-family: sans-serif");

最後

  • 收集不易,如果你對這篇文章感興趣,就點個贊和關注吧

相關文章

iOS底層探索消息查找

iOS底層探索方法

iOS底層探索類

[ts基礎]如何編寫一個ts聲明文件(xxx.d.ts)