前言

JavaScript 是一門(mén)弱類(lèi)型語(yǔ)言，其使用非常廣泛。

這里我總結(jié)了自己日常使用中的 Tips ,不斷更新 _.

常用技巧

1. 數(shù)據(jù)類(lèi)型轉(zhuǎn) Boolean

# !!
!!0; // false
!!undefined; // false
!!null; // false
!!(()=>{}); // true

2. 解構(gòu)交換兩數(shù)

不使用臨時(shí)變量的情況下，交換兩數(shù)

let a = 1, b = 2;
[a, b] = [b, a]; // [2, 1]

3. 短路賦值

初始化參數(shù)，并賦予其默認(rèn)值

let param = test_param || []; 

4. if 判斷優(yōu)化

當(dāng) if 判斷中存在多種情況時(shí)，如:

if(param === 1 || param === 2 || param === 3){
  // do something
}

考慮使用數(shù)組進(jìn)行優(yōu)化

if([1, 2, 3].includes(param)){
  // do something
}

5. switch 判斷優(yōu)化

switch (param) {
  case '1': {
    // do something
    break;
  }
  case '2': {
    // do something
    break;
  }
  default: {
    // do something
    break;
  }
}

使用對(duì)象進(jìn)行優(yōu)化

const Utils = {
  '1': () => {
    // do something
  },
  '2': () => {
    // do something
  },
},

Utils[param];

6. 簡(jiǎn)單深拷貝

日常使用中，經(jīng)常遇到需要深拷貝的場(chǎng)景

const arr = JSON.parse(JSON.stringify({name:'小豪',age:'25',}));

但存在幾個(gè)問(wèn)題：

• Date 對(duì)象將變?yōu)?String 類(lèi)型
• RegExp、Error對(duì)象變?yōu)榭諏?duì)象
• undefined、Function 丟失
• NAN、Infinity 變?yōu)閚ull

如下圖：

7. 動(dòng)態(tài)正則匹配

eval 生成正則表達(dá)式

let str = 'hello world ';
let reg1 = `/hello/g`;
let reg2 = `/world/g`;

eval(reg1).test(str); // true
eval(reg2).test(str); // true

Number

1. 保留兩位小數(shù)

new Number(1).toFixed(2); // '1.00'
new Number(1.994).toFixed(2); // "1.99"
new Number(1.995).toFixed(2); // "2.00"

2. 冪運(yùn)算

Math.pow(2,10); // 1024
2**10; // 1024

3. 安全計(jì)算

js中進(jìn)行數(shù)字計(jì)算時(shí)候，會(huì)出現(xiàn)精度誤差的問(wèn)題，如兩個(gè)小數(shù)相乘：

 0.1*0.2; //  0.02000000000000000
 0.1*0.2 === 0.02; // false

封裝一個(gè)乘法計(jì)算函數(shù)：

function safeAccumulate(arg1,arg2) {
 var m=0,s1=arg1.toString(),s2=arg2.toString();
 try{m+=s1.split(".")[1].length}catch(e){}
 try{m+=s2.split(".")[1].length}catch(e){}
 return Number(s1.replace(".",""))*Number(s2.replace(".",""))/Math.pow(10,m);
}
safeAccumulate(0.1, 0.2); // 0.02
safeAccumulate(0.1, 0.2) === 0.02; // true

String

1. 判斷是否是 https 鏈接

startsWith 判斷是否以 'https' 開(kāi)頭

'https://www.baidu.com/'.startsWith('https');

2. 判斷是否回文數(shù)

let str = 'hello olleh';
str === str.split('').reverse().join(''); // true

Array

1. 數(shù)組去重

使用 Set 進(jìn)行數(shù)組去重

let arr = [1, 2, 2, 3, 3, 4, 5];
arr = [...new Set(arr)];

2. 數(shù)組求和

[1, 2, 3, 4].reduce((a, b) => a + b);  // 10

3. 平鋪多維數(shù)組

flat 展開(kāi)數(shù)組，參數(shù)表示要提取嵌套數(shù)組的結(jié)構(gòu)深度

const arr = new Array(5).fill(0).map(()=> new Array(5).fill(0));
arr.flat(Infinity);

4. 初始化二維數(shù)組

初始化 5*5 二維數(shù)組

new Array(5).fill(0).map(()=> new Array(5).fill(0));

Object

1. 對(duì)象遍歷

const obj = { name: '小豪', age: 25 };
Object.keys(obj).forEach(key => {
  console.log(`${key}:${obj[key]}`);
});
// name:小豪
// age:25

2. 凍結(jié)對(duì)象

Object.freeze() 凍結(jié)對(duì)象

let obj = { name: '小豪', age: 25 };
Object.freeze(obj);

obj.age = 18; // 25 修改失敗
delete obj.age; // false 無(wú)法刪除

后續(xù)不斷更新，歡迎評(píng)論補(bǔ)充~

END