devpoint.cn

开发人员的生活总是学习新事物，学习Javascript优化技巧，当做实践笔记，并结合现有项目开发，将学习的最佳实践应用到项目中，加深学习。

如果你是经验丰富的前端，也不妨看看是否有更好的技巧一起提高。

1. if 多条件判断

之前在介绍数组include方法的时候有提过，在if多条件判断的情况下建议使用include方法。

const day = "星期二";
if (day === "星期二" || day === "星期三" || day === "星期四") {
    console.log(day);
}

// 优化
if (["星期二", "星期三", "星期四"].includes(day)) {
    console.log(day);
}

2. if...else

当有不包含复杂逻辑的使用if...else条件时，可以三元运算符来简化。

// 优化前
let test;
if (x > 100) {
    test = true;
} else {
    test = false;
}
// 优化后
let test = x > 10 ? true : false;
// 或简写如下
let test = x > 10;

当有嵌套条件时，可以采用下面的方式：

const x = 300;
const test2 =
    x > 100 ? "greater 100" : x < 50 ? "less 50" : "between 50 and 100";
console.log(test2); // "greater than 100"

3. 变量声明

当要声明两个具有相同值或相同类型的变量时，可以使用简写方式。

// 优化前
let number1;
let number2 = 1;

// 优化后
let number1, number2 = 1;

4. null、undefined和空值检查

当创建新的变量或者调试API提供的数据时，需要检查数据是否为null、undefined和空值。Javascript 新语法空值合并运算符??确实有一个很好的快捷方式来实现这个功能。

// 优化前
if (test1 !== null || test1 !== undefined || test1 !== "") {
    const test2 = test1;
}
// 优化后
const test2 = test1 || "";
// 新语法
const foo = null ?? "default string";
console.log(foo);

5. null或者undefined检查并设置默认值

const test1 = null;
const test2 = test1 || "";

const test3 = undefined;
const test4 = test3 || "";

// 使用空值合并运算符
const test = null ?? "default";

6. 声明多个变量并赋值

当处理多个变量并进行赋值的时候，使用“解构”可以使得代码更加友好。

// 优化前
let test1, test2, test3;
test1 = 1;
test2 = 2;
test3 = 3;
// 优化后
let [test1, test2, test3] = [1, 2, 3];

7. 赋值运算符

在项目开发中，要处理大量的算术运算符，很多方式可以进行简写。

// 优化前
test1 = test1 + 1;
test2 = test2 - 1;
test3 = test3 * 10;
// 优化后
test1++;
test2--;
test3 *= 10;

8. if 存在的简写

// 优化前
if (test1 === true) or if (test1 !== "") or if (test1 !== null){

}
// 优化后
if (test1){

}

9. if 执行函数

如果判断一个条件满足就执行某个函数，则可以利用和运算符&&。

// 优化前
if (test1) {
    callMethod();
}
// 优化后
test1 && callMethod();

10.for循环

// 优化前
for (var i = 0; i < testData.length; i++)

// 优化后
for (let i in testData) or  for (let i of testData)

如果是数组，可以使用foreach。

[11, 24, 32].forEach((element, index, array) => {
    console.log("test[" + index + "] = " + element);
});

11.条件返回

// 优化前
let test;
function callMe(val) {
    console.log(val);
}

function checkReturn() {
    if (!(test === undefined)) {
        return test;
    } else {
        return callMe("test");
    }
}
var data = checkReturn();
console.log(data);
// 优化后
function checkReturn() {
    return test || callMe("test");
}

12. 箭头函数

在项目中还是建议多用箭头函数，简洁而且可以避免this的问题。

// 优化前
function add(a, b) {
    return a + b;
}
// 优化后
const add = (a, b) => a + b;

function callMe(name) {
    console.log("Hello", name);
}
// 箭头函数的简写
callMe = (name) => console.log("Hello", name);

13.条件调用

// 优化前
function test1(title) {
    console.log(title);
}
function test2(title) {
    console.log("我的名称是：" + title);
}
var test3 = 1;
var title = "DevPoint";
if (test3 === 1) {
    test1(title);
} else {
    test2(title);
}

// 优化后
(test3 === 1 ? test1 : test2)(title);

14.switch

优化的方式可以将条件保存在键值对象中，根据条件调用。

// 优化前
switch (data) {
    case 1:
        test1();
        break;

    case 2:
        test2();
        break;

    case 3:
        test();
        break;
}

// 优化后
var data = {
    1: test1,
    2: test2,
    3: test,
};

data[something] && data[something]();

15. 隐式返回

使用箭头函数，可以直接返回值，而不必使用 return 语句。

// 优化前
function calculate(diameter) {
    return Math.PI * diameter;
}
// 优化后
const calculate = (diameter) => Math.PI * diameter;

16.十进制数值指数优化

// 优化前
for (let i = 0; i < 10000; i++) {}

// 优化后
for (let i = 0; i < 1e4; i++) {}

17.参数默认值

// 优化前
function add(test1, test2) {
    if (test1 === undefined) {
        test1 = 1;
    }
    if (test2 === undefined) {
        test2 = 2;
    }
    return test1 + test2;
}
// 优化后
add = (test1 = 1, test2 = 2) => test1 + test2;
add();

18. ...运算符

展开运算符...是一个 es6 / es2015 特性，它提供了一种非常方便的方式来执行浅拷贝，这与 Object.assign()的功能相同。

// 优化前
const data = [1, 2, 3];
const test = [4, 5, 6].concat(data);
// 优化后
const data = [1, 2, 3];
const test = [4, 5, 6, ...data];


// 数组对象浅拷贝
const map1 = {
        title: "DevPoint",
    },
    map2 = {
        info: "Develop",
    };
const newMap = { ...map1, ...map2 };
console.log(newMap); // { title: 'DevPoint', info: 'Develop' }
const test1 = [1, 2, 3];
const test2 = [...test1];

19.模板字符串

对于拼接字符串很实用，可以更加友好。

// 优化前
const welcome = "Hi " + test1 + " " + test2 + ".";
// 优化后
const welcome = `Hi ${test1} ${test2}`;

多行字符串的拼接。

// 优化前
const data =
    "abc abc abc abc abc abc\n\t" + "test test,test test test test\n\t";
// 优化后
const data = `abc abc abc abc abc abc
         test test,test test test test`;

20.对象属性赋值

let test1 = "a";
let test2 = "b";
// 优化前
let obj = { test1: test1, test2: test2 };
// 优化后
let obj = { test1, test2 };

21.字符串转为数字

// 优化前
let test1 = parseInt("123");
let test2 = parseFloat("12.3");
// 优化后
let test1 = +"123";
let test2 = +"12.3";

22. 解构变量

// 优化前
const test1 = this.data.test1;
const test2 = this.data.test2;
const test2 = this.data.test3;
// 优化后
const { test1, test2, test3 } = this.data;

23.Array.find

当确实有一个对象数组并且我们想要根据对象属性查找特定对象时，find方法确实很有用。

const data = [
    {
        type: "test1",
        name: "abc",
    },
    {
        type: "test2",
        name: "cde",
    },
    {
        type: "test1",
        name: "fgh",
    },
];
function findtest1(name) {
    for (let i = 0; i < data.length; ++i) {
        if (data[i].type === "test1" && data[i].name === name) {
            return data[i];
        }
    }
}
// 优化后
filteredData = data.find(
    (data) => data.type === "test1" && data.name === "fgh"
);
console.log(filteredData); // { type: 'test1', name: 'fgh' }

24.条件执行

如果有代码来检查类型，并且基于类型需要调用不同的方法，可以选择使用多个else if或进行切换，可以使用对象键值优化。

// 优化前
if (type === "test1") {
    test1();
} else if (type === "test2") {
    test2();
} else if (type === "test3") {
    test3();
} else if (type === "test4") {
    test4();
} else {
    throw new Error("Invalid value " + type);
}
// 优化后
var types = {
    test1: test1,
    test2: test2,
    test3: test3,
    test4: test4,
};

var func = types[type];
!func && throw new Error("Invalid value " + type);
func();