【JavaScript 基础】-- 灵活的应用JavaScript技巧

补零

const FillZero = (num, len) => num.toString().padStart(len, "0");
const num = FillZero(169, 5);
// num => "00169"

转数值

只对null、""、false、数值字符串有效（隐式转换）

const num1 = +null;
const num2 = +"";
const num3 = +false;
const num4 = +"169";
// num1 num2 num3 num4 => 0 0 0 169

时间戳

const timestamp = +new Date("2019-02-14");
// timestamp => 1550102400000

取假运算

满足条件赋值：取假运算，从左到右依次判断，遇到假值返回假值，后面不再执行，否则返回最后一个真值。

假值：null、undefined、空值等

const d = true;
const a = d && 1;
a => 1

取真运算

 默认赋值：取真运算，从左到右依次判断，遇到真值返回真值，后面不再执行，否则返回最后一个假值

const d = false;
const b = d || 1;
b => 1

满足条件时执行

const flagA = true; // 条件A
const flagB = false; // 条件B
(flagA || flagB) && Func(); // 满足A或B时执行
(flagA || !flagB) && Func(); // 满足A或不满足B时执行
flagA && flagB && Func(); // 同时满足A和B时执行
flagA && !flagB && Func(); // 满足A且不满足B时执行

交换赋值

let a = 0;
let b = 1;
[a, b] = [b, a];
// a b => 1 0

过滤假值

假值：undefined、null、""、0、false、NaN

const arr = [undefined, null, "", 0, false, NaN, 1, 2].filter(Boolean);
// arr => [1, 2]

三元运算符

使用三元操作符来代替 if...else

优化前：

const x = 20;
let answer;
if (x > 10) {
    answer = 'big';
} else {
    answer = 'small';
}

优化后：

const answer = x > 10 ? 'big' : 'small';

短路求值

当给一个变量分配另一个值时，想确定源始值不是null，undefined或空值。可以写撰写一个多重条件的if语句

优化前：

if (variable1 !== null || variable1 !== undefined || variable1 !== '') {
     let variable2 = variable1;
}

优化后：

const variable2 = variable1 || 'xxx';

默认参数值

在ES6之前我们为了给函数中参数传递默认值，通常使用if语句来编写

优化前：

function volume(l, w, h) {
    if (!w) w = 1;
    if (!h) h = 2;
    return l * w * h;
}

优化后：

const volume = (l, w = 3, h = 4 ) => (l * w * h);

多重判断

当判断条件数量越来越多时，越倾向于使用 switch 而不是 if-else

优化前：

if (color == 'blue') {}
else if (color == 'yellow') {}
else if (color == 'white') {} 
else if (color == 'black') {} 
else if (color == 'green') {} 
else if (color == 'orange') {} 
else if (color == 'pink') {}

优化后：

switch (color) {
    case 'blue':
        break
    case 'yellow':
        break
    case 'white':
        break
    case 'black':
        break
    case 'green':
        break
    case 'orange':
        break
    case 'pink':
        break
}

       像以上这种情况，使用 switch 是最好的。假设 color 的值为 pink，则 if-else 语句要进行 7 次判断，switch 只需要进行一次判断。 从可读性来说，switch 语句也更好。

       从使用时机来说，当条件值大于两个的时候，使用 switch 更好。不过 if-else 也有 switch 无法做到的事情，例如有多个判断条件的情况下，无法使用 switch。

5、用表的形式代替多重判断

当条件语句特别多时，使用 switch 和 if-else 不是最佳的选择。我们可以用查找表的方式，使用数组和对象来构建

优化前：

switch (index) {
    case '0':
        return result0
    case '1':
        return result1
    case '2':
        return result2
    case '3':
        return result3
    case '4':
        return result4
    case '5':
        return result5
    case '6':
        return result6
    case '7':
        return result7
    case '8':
        return result8
    case '9':
        return result9
    case '10':
        return result10
    case '11':
        return result11
}

优化后：

// 数组
const results = [result0, result1, result2, result3, result4, result5, result6, result7, result8, result9, result10, result11]

return results[index]

// 对象:如果条件语句不是数值而是字符串，可以用对象来建立查找表

const map = {
    red: result0,
    green: result1,
}

return map[color]