首发于 悟道前端
切换模式
优雅编程：24个Javascript代码优化技巧
全栈工匠
深耕WEB开发10+年，拥有一颗工匠的心
开发人员的生活总是学习新事物，学习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();
编辑于 2022-03-27 20:57
JavaScript 编程
编程
JavaScript
文章被以下专栏收录
