大伙儿好~,我是小鹿,公众号:「小鹿动画学编程」原创作者。
时隔半年我又回来了,期间产生了很多事件。从大学刚毕业来到一线找工作,也因为往年呈现的非凡状况,文章断就更了一段时间。嗯~,就不给本人找借口啦。当初全副安置好了,把精力开始缓缓回归到写作上,心愿在 2021 新的一年和大伙儿一起在社区成长!
2021 第一期。
本篇文章整顿了在日常开发中 26 个常见的 JavaScript 代码优化计划。
本文章已在 Github blog 收录,欢送大伙儿~ Star,文章中若存在有余或者 issues,欢送在下方或 Github 留言!
1、Null
、Undefined
、''
查看
咱们在创立新变量赋予一个存在的变量值的时候,并不心愿赋予 null
或 undefined
,咱们能够采纳一下简洁的赋值形式。
if(test !== null || test !== undefined || test !== ''){let a1 = test;}
// 优化后
let a1 = test || ''
2、null
值查看并赋予默认值
let test = null;
let a1 = test || '';
3、undefined
值查看并赋予默认值
let test = undefined;
let a1 = test || '';
4、空值合并运算符(??
)
空值合并操作符(??
)是一个逻辑操作符, 当左侧的操作数为 null
或者 undefined
时,返回其右侧操作数,否则返回左侧操作数。
const test= null ?? 'default string';
console.log(test);
console.log(foo); // expected output: "default string"
const test = 0 ?? 42;
console.log(test); // expected output: 0
具体介绍可戳这 MDN
5、申明变量
当咱们想要申明多个独特类型或者雷同值的变量时,咱们能够采纳一下简写的形式。
let test1;
let test2 = 0;
// 优化后
let test1, test2 = 0;
6、if
多条件判断
当咱们进行多个条件判断时,咱们能够采纳数组 includes
的形式来实现简写。
if(test === '1' || test === '2' || test === '3' || test === '4'){// 逻辑}
// 优化后
if(['1','2','3','4'].includes(test)){// 逻辑解决}
7、if...else
的简写
当存在一层或两层 if...else
嵌套时,咱们能够应用三元运算符来简写。
let test = null;
if(a > 10) {test = true;} else {test = false;}
// 优化后
let test = a > 10 ? true : false;
// 或者
let test = a > 10;
8、多变量赋值
当咱们想给多个变量赋不同的值的时候,咱们能够采纳一下简洁的速记计划。
let a = 1;
let b = 2;
let c = 3;
// 优化
let [a, b, c] = [1, 2, 3];
9、算术运算简写优化
当咱们在开发中常常用到算数运算符时,咱们能够应用一下形式进行优化和简写。
let a = 1;
a = a + 1;
a = a - 1;
a = a * 2;
// 优化
a++;
a--;
a *= 2;
10、有效值判断
咱们常常会在开发中用到的,在这也简略整顿一下。
if (test1 === true)
if (test1 !== "")
if (test1 !== null)
// 优化
if (test1)
11、多条件 (&&
) 判断
咱们通常在我的项目中遇到条件判断后跟函数执行,咱们能够应用一下简写形式。
if (test) {foo();
}
// 优化
test && foo();
12、多个比拟 return
在 return 的语句中应用比拟,能够将其进行缩写的模式如下。
let test;
function checkReturn() {if (!(test === undefined)) {return test;} else {return foo('test');
}
}
// 优化
function checkReturn() {return test || foo('test');
}
13、Switch
的缩写
遇到如下模式的 switch 语句,咱们能够将其条件和表达式以键值对的模式存储。
switch (type) {
case 1:
test1();
break;
case 2:
test2();
break;
case 3:
test();
break;
// ......
}
// 优化
var obj = {
1: test1,
2: test2,
3: test
};
obj[type] && obj[type]();
14、for 循环缩写
for (let i = 0; i < arr.length; i++)
// 优化
for (let i in arr) or for (let i of arr)
15、箭头函数
function add() {return a + b;}
// 优化
const add = (a, b) => a + b;
16、短函数调用
function fn1(){console.log('fn1');
}
function fn2(){console.log('fn2');
}
if(type === 1){fn1();
}else{fn2();
}
// 优化
(type === 1 ? fn1 : fn2)();
17、数组合并与克隆
const data1 = [1, 2, 3];
const data2 = [4 ,5 , 6].concat(data1);
// 优化
const data2 = [4 ,5 , 6, ...data1];
数组克隆:
const data1 = [1, 2, 3];
const data2 = test1.slice()
// 优化
const data1 = [1, 2, 3];
const data2 = [...data1];
18、字符串模版
const test = 'hello' + text1 + '.'
// 优化
const test = `hello ${text}.`
19、数据解构
const a1 = this.data.a1;
const a2 = this.data.a2;
const a3 = this.data.a3;
// 优化
const {a1, a2, a3} = this.data;
20、数组查找特定值
数组依照索引来查找特定值,咱们能够通过逻辑位运算符 ~
来代替判断。
“~”运算符(位非)用于对一个二进制操作数逐位进行取反操作
if(arr.indexOf(item) > -1)
// 优化
if(~arr.indexOf(item))
// 或
if(arr.includes(item))
21、Object.entries()
const data = {a1: 'abc', a2: 'cde', a3: 'efg'};
Object.entries(data);
/** 输入:
[[ 'a1', 'abc'],
['a2', 'cde'],
['a3', 'efg']
]
**/
22、Object.values()
咱们能够通过 Object.values() 将对象的内容转化为数组。如下:
const data = {a1: 'abc', a2: 'cde'};
Object.values(data);
/** 输入:
['abc', 'cde']
**/
23、求平方
Math.pow(2,3);
// 优化
2**3;
24、指数简写
for (var i = 0; i < 10000; i++)
// 优化
for (var i = 0; i < 1e4; i++) {
25、对象属性简写
let key1 = '1';
let key2 = 'b';
let obj = {key1: key1, key2: key2};
// 简写
let obj = {
key1,
key2
};
26、字符串转数字
let a1 = parseInt('100');
let a2 = parseFloat('10.1');
// 简写
let a1 = +'100';
let a2 = +'10.1';
❤️ 欢送素质三连[点赞 + 珍藏 + 评论]</font>
我是小鹿,文章同步更新 Github,也能够在微信搜一搜「小鹿动画学编程 」第一工夫接管文章更新告诉,回复“ 前端”可获取小鹿整顿的备战面试小册。