在开发过程中,由于追求开发速度,我们往往很多时候都没有注意代码的可读性与性能,这里介绍几个技巧,让你写出可读性强、简洁的js代码

1、多个条件满足之一时,推荐使用Array.includes// 优化前

function test(val) {

if (val === 'js' || val === 'java' || val === 'python') {

console.log('编程语言')

}

}

// 优化后

function test(val) {

cosnt arr = ['js', 'java', 'python']

if (arr.includes(val)) {

console.log('编程语言')

}

}

2、减少嵌套,尽早返回// 优化前

function test(val) {

if (val) {

if (val === 'js') {

console.log(val)

} else {

console.log('其他')

}

} else {

return

}

}

// 优化后

function test(val) {

if (!val) return

val === 'js' ? console.log(val) : console.log('其他')

}

3、使用函数的默认参数与解构// 优化前

function test(val, num) {

const item = num || 1

console.log(`this is ${item}${val}`)

}

test('js', 4)

// 优化后

function test(val, num = 1) {

console.log(`this is ${num}${val}`)

}

test('java', 4)

如果默认参数是对象呢?我们就可以使用解构了// 优化前

function test(val) {

if (val && val.name) {

console.log(val.name)

} else {

console.log('null')

}

}

test({name: 'js', num: 1})

// 优化后

function test({name} = {}) {

console.log(name)

}

test({name: 'js', num: 1})

4、使用map或者对象字面量替代switch语句// 优化前

function test(num) {

switch(num) {

case 1:

return ['js', 'java']

case 2:

return ['python', 'ruby']

case 3:

return ['php', 'c#']

default

}

conosle.log(num)

}

test(1)

// 优化后,对象字面量方式

function test(num) {

const arr = {

1: ['js', 'java'],

2: ['python', 'ruby'],

3: ['php', 'c#'],

}

console.log(arr[num])

}

test(1)

// map方式

function test(num) {

const arr = new Map()

.set(1, ['js', 'java'])

.set(2, ['python', 'ruby'])

.set(3, ['php', 'c#'])

console.log(arr.get(num))

}

test(1)

5、使用Array.every()或者Array.some()// 优化前

const item = [

{name: 'js', num: 2},

{name: 'java', num: 4},

{name: 'pyton', num: 2},

{name: 'php', num: 1},

]

function test() {

let isNumTwo = true

for (let val of item) {

if (!isNumTwo) break

isNumTwo = (val.num === 2)

}

console.log(isNumTwo) // false

}

test()

// 优化后

const item = [

{name: 'js', num: 2},

{name: 'java', num: 4},

{name: 'pyton', num: 2},

{name: 'php', num: 1},

]

function test() {

const isNumTwo = item.some(val => val.num === 2)

console.log(isNumTwo) // true

}

test()

java 判断语句 性能_前端性能优化:js中优化条件判断语句相关推荐

  1. mysql 查询后根据值的不同进行判断与修改,SQL中的条件判断语句(case when zhen)用法

    需求: mysql 查询后根据值的不同进行判断与修改 语法结构: SQL中的条件判断语句(case when zhen)用法 SELECT A.品号,属性,        CASE           ...

  2. layui table 每列加标签_【前端】layui表格中根据条件给对应的列加背景色

    [前端]layui表格中根据条件给对应的列加背景色 [前端]layui表格中根据条件给对应的列加背景色 1.效果(根据条件动态给表格加背景色) 2.代码: 在我自己的项目中,由于条件比较多,提取出了一 ...

  3. linux在命令行if,Linux命令之if - Bash中的条件判断语句

    用途说明 Shell中的条件判断语句,与其他编程语言类似. 如果需要知道有哪些条件判断方式,通过man test就可以得到帮助. 常用格式 格式一 if 条件; then 语句 fi 格式二 if 条 ...

  4. 深圳Web前端学习:js中的模块化--【千锋】

    深圳Web前端学习:js中的模块化–[千锋] 0.前言 我们知道最常见的模块化方案有CommonJS.AMD.CMD.ES6,AMD规范一般用于浏览器,异步的,因为模块加载是异步的,js解释是同步的, ...

  5. thymeleaf加载不了js引用_web前端教程之js中的模块化一

    web前端教程之js中的模块化一:我们知道最常见的模块化方案有CommonJS.AMD.CMD.ES6,AMD规范一般用于浏览器,异步的,因为模块加载是异步的,js解释是同步的,所以有时候导致依赖还没 ...

  6. 引入js_好程序员web前端教程分享js中的模块化一

    好程序员web前端教程分享js中的模块化一:我们知道最常见的模块化方案有CommonJS.AMD.CMD.ES6,AMD规范一般用于浏览器,异步的,因为模块加载是异步的,js解释是同步的,所以有时候导 ...

  7. 前端开发:JS中关于正则表达式的使用汇总

    前言 在前端开发过程中,关于正则表达式的使用也是必备技能,尤其是在实际业务需求的时候,需要处理一些不能按照正常语句操作的逻辑,如前端开发中的字符匹配.参数处理等都需要正则表达式来匹配截取处理.虽然正则 ...

  8. 好程序员web前端教程分享js中的模块化一

    好程序员web前端教程分享js中的模块化一:我们知道最常见的模块化方案有CommonJS.AMD.CMD.ES6,AMD规范一般用于浏览器,异步的,因为模块加载是异步的,js解释是同步的,所以有时候导 ...

  9. Makefile中的条件判断(ifeq、ifneq、ifdef、ifndef)

    以下内容源于C语言中文网的学习与整理,非原创,如有侵权请告知删除. 一.条件判断的关键字 日常使用 Makefile 编译文件时,可能会遇到需要分条件执行的情况.比如在一个工程文件中可编译的源文件很多 ...

最新文章

  1. 在Python中连接字符串的首选方法是什么?
  2. 在 .NET Compact Framework 2.0 中宿主 ActiveX 控件
  3. 改进初学者的PID-采样时间
  4. 【MATLAB】Parzen窗与K近邻算法原理与代码详解
  5. mysql数据库表名批量改为小写,MySQL 批量修改表名
  6. C++中 * *的用法与区别----实操才能看明白
  7. 初学linux网络服务之HTTP服务实验
  8. python是什么课程-python是什么(python是什么课程)
  9. Java基础语法-方法的定义、调用以及static关键字的使用
  10. c语言用户给顺序表输入值,C语言与数据结构实验指导(删减程序版)课案.docx
  11. Atitit oodbms的查询,面向对象的sql查询jpa jpql hql
  12. 泛微OA-流程存储数据说明(表单主表+明细表)
  13. MSF之meterpreter权限维持
  14. spring默认redis连接库lettuce性能优化,突破性能天花板,获得官方建议方式2倍吞吐量
  15. Chrome快捷键,电脑高手都这样用
  16. 七、入门python第七课
  17. 人脸识别之FaceNet
  18. 【VS Code配置matlab】
  19. NB-IoT使用笔记(1)实现UDP访问DNS服务获取IP地址
  20. 逐鹿强网,金陵折桂,四届老将0ops战队如何称雄

热门文章

  1. SAP 作业类型主数据
  2. Function ALV可编辑列修改数据后与与内表数据同步问题
  3. SAP库存管理预留功能评测
  4. 通过销售订单领用到成本中心,FI替代实现不同成本中心记账科目不同
  5. 拼多多“京东化”:自建物流重农卖菜是赚谁的钱?
  6. 教育硬件告别“不温不火”:有道首战告捷,教育、科技巨头虎视眈眈
  7. 红米note2移动4g在哪里显示无服务器,红米note2移动版能用联通4g吗?红米note2插联通卡用法介绍...
  8. java 软引用_Java中弱引用和软引用的区别以及虚引用和强引用介绍
  9. java语言的数组描述_下列关于Java语言的数组描述中,错误的是()。_学小易找答案...
  10. Linux配置Java,kafka,Hadoop等环境变量