大伙儿好~，我是小鹿，公众号：「小鹿动画学编程」 原创作者。
时隔半年我又回来了，期间产生了很多事件。从大学刚毕业来到一线找工作，也因为往年呈现的非凡状况，文章断就更了一段时间。嗯～，就不给本人找借口啦。当初全副安置好了，把精力开始缓缓回归到写作上，心愿在 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，也能够在微信搜一搜「小鹿动画学编程」第一工夫接管文章更新告诉，回复“前端”可获取小鹿整顿的备战面试小册。