JavaScript 代码简化技巧

清疚 2022-05-29 09:57 219阅读 0赞

### 文章目录 ###

*   *  1. if else
     *  2. 短路求值，空（null，undefined）验证
     *  3. 变量声明
     *  4. if 存在条件
     *  5. for 循环
     *  6. 十进制指数简写
     *  7. 对象属性简写
     *  8. 箭头函数简写
     *  9. 隐式返回值简写
     *  10. 赋值运算符
     *  11. 避免使用 RegExp对象
     *  12. charAt()的替代品
     *  13. 更简短的函数调用

## 1. if else ##

使用三元操作符来代替

if (x > 0) { return true; } else { return false; } x > 0 ? true : false

if (a != b) { return false; } a != b ? false : true

## 2. 短路求值，空（null，undefined）验证 ##

当给一个变量分配另一个值时，想确定源始值不是`null`，`undefined`或空值。

if (args !== null || args !== undefined || args !== '') { args2 = args1; } var args2 = args1 || '';

## 3. 变量声明 ##

var a; var b; var c = 3; var a, b, c = 3;

## 4. if 存在条件 ##

if (like === true) { } if (like) { }

if (a != b) { return false; } a != b ? false : true

## 5. for 循环 ##

for (let i = 0; i < arrObj.length; i++){ } for (let i in arrObj) { } [0,1,2].forEach(function(value, index) { });

## 6. 十进制指数简写 ##

// 返回true 1e0 === 1; 1e1 === 10; 1e5 === 100000;

## 7. 对象属性简写 ##

var obj = { x: x, y: y };

如果`key` 名与 `value` 值相同，则可以采用`ES6`的简写

var obj = { x, y }

## 8. 箭头函数简写 ##

function fn(name) { console.log('Hello', name); } var fn = name => console.log('hello',name);

## 9. 隐式返回值简写 ##

经常使用return语句来返回函数最终结果

function fn1(name){ return 'yes'; } var fn2 = function func(){ return { foo:1 }; }

一个单独语句的箭头函数能隐式返回其值（函数必须省略 `{}`，为了省略 `return` 关键字）  
返回多行语句，例如对象字面表达式，则需要使用`()`包围函数体。

var fn1 = name => ('yes'); var fn2 = () => ({ foo:1 })

## 10. 赋值运算符 ##

arg1 = arg1 + 1; arg2 = arg2 - 1; arg3 = arg3 + 10;

arg1++; arg2--; arg3 += 10;

## 11. 避免使用 RegExp对象 ##

var reg = new RegExp("\d+(.)+\d+","igm"), result = reg.exec("number 123 or 456 number");

var result = /d+(.)+/d+/igm.exec("number 123 or 456 number");

## 12. charAt()的替代品 ##

console.log("hello".charAt(0)); // => h console.log("hello"[0]); // => h

## 13. 更简短的函数调用 ##

let bool = true; function fn1() { console.log("Yes") } function fn2() { console.log("No") } (bool ? fn1 : fn2)()

发表评论取消回复

表情：

评论列表（有 0 条评论，219人围观）

还没有评论，来说两句吧...

相关阅读

相关简化Java代码：常见设计模式和重构技巧

简化Java代码，可以遵循以下的设计模式和重构技巧： 1. **设计模式**： - **单例模式（Singleton）**：避免多实例并确保线程安全。 - **工

灰太狼/ 2024年10月14日 13:39/ 0 赞/ 47 阅读

相关《现代JavaScript高级教程》JavaScript修饰器：简化代码，增强功能

<table> <thead> <tr> <th><a href="https://www.coding-time.cn" rel="nofollow">点击

布满荆棘的人生/ 2023年10月13日 14:07/ 0 赞/ 70 阅读

相关在 JavaScript 和 React 中使用地图简化代码

在 JavaScript 中，开发人员经常会遇到需要根据各种条件返回不同结果的情况。一种这样的情况是，当他们想要基于某些可以切换的状态变量在组件内呈现不同的 JSX 时。但是，

逃离我推掉我的手/ 2023年09月26日 23:59/ 0 赞/ 137 阅读

相关日常Javascript开发技巧，提升代码质量

Javascript 常用代码优化和重构的方法简介主要介绍以下几点：提炼函数合并重复的条件片段把条件分支语句提炼成函数合理使用循环提前让函数

一时失言乱红尘/ 2023年01月10日 15:57/ 0 赞/ 157 阅读

相关 14个 JavaScript 代码优化技巧

![format_png][] 作者 | Mahdhi Rezvi 译者 | 王强策划 | 李俊辰这篇文章列举了一些技巧，可帮助你写出更好的 JavaScript

悠悠/ 2022年11月29日 03:10/ 0 赞/ 191 阅读

相关你可以使用这些技巧简化你的代码

不少人有五年的 `JavaScript` 经验，但实际上可能只是一年的经验重复用了五次而已。完成同样的逻辑和功能，有人可以写出意大利面条一样的代码，也有人两三行简洁清晰的代码就

ゝ一世哀愁。/ 2022年10月23日 09:59/ 0 赞/ 187 阅读

相关 javascript 代码技巧 (二) —— 运算符

> 1. 拓展运算符 // 对象合并 let obj = { a: 0 }; let obj1 = { a1: 1 }; let obj2

「爱情、让人受尽委屈。」/ 2022年10月19日 12:47/ 0 赞/ 167 阅读

相关 javascript 代码技巧 (一) —— 操作符

> 1. && 操作符 // 繁琐 if (this.isTrue) { this.test(); } // 简洁

你的名字/ 2022年10月19日 12:47/ 0 赞/ 139 阅读

相关 JavaScript 代码简化技巧

文章目录 1. if else 2. 短路求值，空（null，undefined）验证 3. 变量声明 4. if

清疚/ 2022年05月29日 09:57/ 0 赞/ 220 阅读

相关 Javascript学习笔记20 代码优化技巧

编写可维护性的代码：可理解性：其他人可以接手代码，而无需解释直观性：代码一看就明白，无论操作过程多么复杂可适应性：代码以一种数据上变化不要求完全重写的

比眉伴天荒/ 2022年05月25日 02:49/ 0 赞/ 211 阅读