前言

JS 代码冗长或不整洁,看起来逻辑不清晰,此时你需要简化你的代码,这里我将标记一些常见的方法

多个或条件

多个或或条件可以将多个条件值放在一个数组中,然后使用 includes() 方法 判断这个值是否在这个数组内

['a','b','c'].includes(x)

简化 if...else 或 if ...elseif ...else

这里可以使用三元运算符替换法则,当然也支持嵌套的方法

const conditon = x> 10?true:false

嵌套

const conditon = (x>100)?'some value':(x<50)?'some value1':'else value2'

多个相同类型变量声明

可以直接将多个变量同时使用逗号分隔开统一初始化

const test1,test2 = 1

空值检查

第一种方法 是使用 逻辑运算符 或 的短路规则来实现

let test2 = test1 || ''

第二种方法是使用 ES2020 的空值运算符

const value=  test??'initvalue'`

但是值得注意的是,?? 不支持检测 '' 值,也就是说他支支持 undefined 或 null

多变量赋值

通常我们可以使用 ES6 中的 解构运算符

let [test1,test2,test3] = [1,23,4]

自增与自减,简化*=

++ -- 变量赋值操作,一般始于简化表达式的写法和降低内存使用率的角度

你可以 将 test1 = test1-1 简化为 test1--

乘法的简化

test1  = test1*29
// 可以简化为:
test1*=20

if(condition) 简化

if(x!=='' || x!==null || x===true || x===undefined) 

可以简化为

if(x)

多条件判断

假设只有前一个条件成立才能调用下面的函数

那么你可以这么写

if conditon && callM()

forEach

当然这个函数是用来遍历每个成员变量的,break 并不适合它。
如果你有其他需要,可以使用 for ...in for ..of

比较后返回

如果你需要判断某个变量 例如 test 是否为空才能返回或者调用某个函数 ,你完全可以使用 || 逻辑运算符的短路特性或者你可以使用 ES2020 或这 三元运算符,也就是说能少用 if else 就少用

使用胖箭头函数

胖箭头函数主要在应用于 context 的 this 指针 在可控范围内的,如果你不知道它的上下文一直是在当前作用域的,那么你最好还是使用传统的方法

const sum = (a,b)=> return a+b

简化函数调用

利用三元运算符,我们可以在判断后直接返回函数本身然后再调用它

(test1==1?test2:test3)()

switch 简化

正常我们会将一个变量进行多个条件的判断和相关函数的调用,但是这个过程就显得比较冗长
,我们可以将变量的值和对应的函数放在一个字典对象中,然后通过一个简单的 && 符号就可以简化整个流程

var map = {
 1:test1,
 2:test2,
 3:test3
}
// 调用
map[key] && map[key]()

隐式 return

这个特性是 ES6 之后的胖箭头函数才有的, 当你写一个函数时,你可以使用胖箭头函数的特性:

const calc = (x,y) =>x+y

科学计数法

当我们使用一些比较大的数时,我们可以将大数转换为科学计数法的方式来表示

// 将 1000000 表示为 1e6
for (let i =0; i< 1e6;i++)

函数默认值

当我们在使用含有多个形参的函数时,通常需要默认值,在 ES6 之后,这个默认值就可以直接在形参的后面标记了

function a(c,d=2)

延展操作符

所谓的延展,你可以理解为用某个重物,将这个数据结构压成平铺的状态,并且能够嵌套到你指定的位置:

const a = [1,2,3]
const b = [4,5,6]

const res = [...a,...b]

直接克隆这个数组

const c = [...a]

模板字面量

你可以直接使用 `` 字面量将多行的字符串或含有嵌套变量的组织起来 。

const a = `asdasdasd asdasdasd`
const b = `line:${L}`

对象属性赋值,简化变量属性声明

当变量属性和变量名相同时,此时你可以直接简化它

const val = {test1,test2}

转化字符串为数字

这个比较简单,直接在字符串的前面放上一个 + 号,然后就可以了

const numer = +'12.3'

解构

略。。。

数组 find

条件查找简化

使用短路 && 运算符 和 取反运算符,结合字典,我们可以这么组合

var typeMap  = {
 test1,
 test2,
 tets3,
 test4
}

const func = typeMap[key]
(!fun) && throw new Error();func()

Oject.entries

将对象转换为一个对象数组,当然这种类似于生维操作

Object.values

ES8 引入的新特性,直接可以将 对象的所有键值对的值取出来放在一个数组中

双重按位取反

双重按位取反可以代替 向下取整的操作

~~1.9 === Math.floor(1.9)

重复字符串

'someval'.repeat(times:number)

查找数组中的子大致和最小值

直接调用API

Math.max(...arr)
Math.min(...arr)

获取字符串的某个字符

const str = 'str'
str[2] //r

指数幂简化

2**3 === Math.pow(2,3)

标签: 代码, func, 变量, 函数, repeat, false, 对象, var, 模板, , 前言, 字符, find, 符号, let, 操作, else, 计数, key, 数据, function, const, 简化

知识共享许可协议
本作品采用知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议进行许可。

发送一条友善的评论

  • 目录