大伙儿好~，我是小鹿，公众号：「小鹿动画学编程」 原创作者。

时隔半年我又回来了，期间发生了很多事情。从大学刚毕业来到一线找工作，也由于今年出现的特殊情况，掘金断就更了一段时间。嗯～，就不给自己找借口啦。现在全部安顿好了，把精力开始慢慢回归到写作上，希望在 2021 新的一年和大伙儿一起在掘金成长！

2021 第一期。

本篇文章整理了在日常开发中 30 个常见的 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(test); // 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';

【2021 第一期】日常开发 26 个常见的 JavaScript 代码优化方案相关推荐

  1. “凝心聚力，携手共进”辰视智能2021第一期登山公益活动顺利举行

    春回大地,百花齐放,鹏城大地一片生机盎然.欣欣向荣的景象.随着辰视智能的快速发展,在董事长冯良炳博士的号召下,迎来了辰视智能2021年第一期登山公益活动.2021年3月20日早晨9点30分,辰视人携其 ...

  2. CSDN博客第一期移动开发排行榜

    为充分展示移动开发方向优秀博主,发掘潜力新星,为想更多了解移动开发方向的博客用户提供平台,CSDN博客频道推出"移动开发排行榜"活动,每月一期.我们将邀请CSDN博客频道活跃的资深 ...

  3. UE4课堂笔记——《UE4C++游戏开发入门教程！》第一期开场，C++必须了解小知识

    <UE4C++游戏开发入门教程!>第一期 UE4C++游戏开发入门教程!(第一期) 学习ue4 c++可以更好理解ue4,但需要已经了解或掌握至少以下两点: 已有编程经验 了解蓝图 所以可 ...

  4. 《cocos2d-x手机游戏开发实战》直播课程第一期介绍

    史上最牛的cocos2d-x课程 <cocos2d-x手机游戏开发实战>直播课程第一期 史上最牛的优惠活动: 报名关东升老师iOS会员送cocos2d-x直播课程,而且终身会员价格只要19 ...

  5. 网站开发：从写代码到公网访问整个流程（CSDN征文活动第一期获奖文章）

    [获奖感言]2019年7月18日  感谢CSDN,让我这篇文章在CSDN征文活动第一期的获奖! 获奖名单出处:10W+的机会来了!快把文章扔过来_CSDN官方博客的博客-CSDN博客 -------- ...

  6. 第十二届蓝桥杯(2021年)模拟赛 Python组（第一期） 题目+个人解答

    填空题 填空题-1 [问题描述] 如東整数a是整数b的整数倍,则称b是a的约数. 请问,有多少个正整数是2020的约数. [答案提交] 这是一道结果填空的题,你只需要算出结果后提交即可.本题的结果为一 ...

  7. 数睿数据低代码全民开发大讲堂 | 第一期《一小时开发企业软件》即将开讲

    随着企业数字化转型需求不断增加,新技术功能不断迭代更新,在数字化转型的背景下,低代码在企业中应用的越来越广泛.市场上也涌现出了各类优秀的低代码/无代码开发平台.表单驱动.模型驱动.领域驱动.数据驱动, ...

  8. 【eoe 特刊】Windows 8 第一期 -- C#基本语法---sqlite数据库的使用---ListView 滚动加载 ---等

    [eoe 特刊]Windows 8 第一期 本文档由 eoeWindowsPhone 开发者社区组织策划,整理及发布,版权所有,转载请保留 http://wp.eoe.cn/ 做最棒的 Windows ...

  9. 2021年低代码开发会成为主流软件开发模式吗？

    自1804年穿孔卡片可编程式提花织机问世,编程语言已经存在200多年.人类社会奔涌向前,技术潮起潮落,创业者能够压着一点时代韵脚的便足以名噪一时. 2021年的春天还没有到来以前,低代码开发平台早早迎 ...

最新文章

  1. 关于PreferenceActivity的使用和一些问题的解决(自己定义Title和取值)
  2. 可以搜python题答案的app-Python数据分析与数据可视化知到APP答案
  3. Lintcode--4(1)--A+B
  4. 学习sql注入:猜测数据库_面向数据科学家SQL：学习简单方法
  5. hdu 2149 巴什博弈
  6. Python之 range()函数✅
  7. ESP32-IDF给FATFS添加长文件名支持，更改_USE_LFN以支持大于8.3格式的文件名
  8. 三星笔记文件存储路径_《那些年JavaWeb踩过的坑》ssh框架整合配置文件路径（错误笔记）...
  9. 划分数算法概述及习题
  10. 3分钟下载好网易云付费音乐
  11. CAD2020下载AutoCAD2020下载安装详细教程
  12. 使用lxml爬取豆瓣电影排行榜
  13. html markdown插件,MarkDown编辑必备插件
  14. 利用ptython中的tutle画了一个表情包——2020冲冲冲！！
  15. 【校招Web前端面试干货分享】
  16. mysql服务器存储视频文件,把视频文件直接存储到mysql数据库的方法
  17. BZOJ3527 力
  18. 【task02】共享单车数据挖掘赛
  19. B站台湾大学郭彦甫｜MATLAB 学习笔记｜06 高阶绘图 Advanced Plot
  20. Unity游戏开发日记（一）：独自开发2d横板游戏：Small man（MainMenu主界面）基本构建

热门文章

  1. 生命礼赞，带动世界第三次文化复兴——三问篇
  2. 上海互盾信息科技有限公司：志不强者智不达
  3. 三星手机判断输入法是否显示的方法
  4. logback-logger和root
  5. 10种经典的时间序列预测模型 本文演示了 10 种不同的经典时间序列预测方法
  6. 离散化-利用计算机求解y=x,基于边缘的主动轮廓模型——从零到一用python实现snake...
  7. 凸优化笔记10（罚函数法-内点罚函数、外点罚函数）
  8. 回溯法、分枝限定法--求解N个杯子分酒问题
  9. 用公众号给女朋友推送早安问候（恋爱值♥♥♥♥♥）
  10. 《统计学习方法（第2版）》李航 第20章 潜在狄利克雷分配 LDA Dirichlet 思维导图笔记 及 课后全部习题答案（步骤详细， 包含吉布斯抽样算法）狄利克雷分布期望推导