JS常用小技巧让你的代码更简洁

数据宇宙探索者
• 阅读 1100

1、简单的if else的简写
当我们只有一层的if判断的时候,我们可以简写这个条件判断

//原
let id = this.id
if(id === 'xxxxxx'){

this.flag = true

}else{

this.flag = false

}
//上面的方法可以简写成
this.flag = (id === 'xxxxxx') ? true : false
复制代码
2、判断空值,null,nudefined
有时候,我们会需要判断某个值是否为空,方便我们来处理下一步;或者检查输入的值是否为空值。

//原
let input = this.value
if(input === null || input === undefined || input === ""){

this.flag = false

}else{

this.flag = true

}
//简写
this.flag = true || ""
复制代码
3、布尔值的判断
我们在仅仅对某个变量的布尔值进行判断,来进行操作。

//原
if(flag === true){}
//简写
if(flag)
复制代码
4、循环
循环是我们在处理数据的时候用的最多的一种方法

for(var i=0;i<list.length;i++)

for (let i in list)

for(let i of list)

list.forEach(item =>{})
复制代码
5、字符串与数值的互相转型
我们对于后端返回的一些数字型的字符串要改成数值,来方便我们进行计算等等之类的操作。数值也需要转换成字符串,因为后端需要的字段类型是字符串。

let string = '123'
let number = 123
//字符串转数值
let num1 = string*1 //这种是最简单的,但是只能是只有数字的字符串
let num2 = parseInt(string); //这是转换成整数的 123;或者在数字与字符的拼接中提取数字
let num3 = parseFloat(string); //这是精度的转换,123.0
let num4 = Number(string) //这是强制性转换

//转换字符串
let s = number.toString()
let s2 = number+""

//输入框最多输入两位小数,并且把单位改成分
let amout=(this.ruleForm.amount)*100
this.ruleForm.amount = (parseFloat(amout)).toString() //这样就不会丢失精度
复制代码
6、字符串的截取,拼接
对某些字符串来进行截取,然后拼接成自己需要的数据

//截取字符串 字符串.substr("从哪开始","截取几个")
let string = 'obj_open123456789'
string.substr(3,5)
string.substr(3) //返回第三位后面的全部
//split
let obj = string.split('_');
let id = 'user_'+obj
//substring(3)
let a = string.substring(3)

//从后面截取数据
let type = (file.name).substring((file.name).lastIndexOf(".")+1)
复制代码
7、判断字符串中是否含有某个字符
判断字符串中是否含有某个特定的字符

//判断是否包含某个字符串 包含返回下标 不包含返回-1
let string = 'obj_open123456789'
var i = string.indexOf("open")
复制代码
8、判断条件比较多的时候的简化
这是一个查询包含的方法,可以用来做多个值的判断;比如在判断上传文件的类型是否正确的时候

let type = file.type
//原
if (type === 'png' || type === 'jpg' || type === 'jpeg' || type ==='svg') {}
//现在
if(['png','jpg','jpeg','svg'].includes(type)){}
//或者
if(['png','jpg','jpeg','svg'].indexOf(type) >= 0){}
复制代码
9、多变量赋值
同时给多个变量赋值

let a= 1
let b = 2
let c= 3
//简写
let [a,b,c] = [1,2,3]

//或者
let x;
let y = true
let x,y=true
复制代码
10、用长度来清空数组
let arr = [1,2,3,4,5]
arr,length = 0
let arr = []
复制代码
11、空位合并运算符
在我们需要检查某个值是否为空的时候,给空值添加一个默认值

//原
if(str === ''){

this.flag = '长期'

}
//简写
this.flag = null ?? '长期'
复制代码
12、数组的合并
concat,创建一个新数组,将array与任何数组 或 值连接在一起。

let arr = ['1','2','3','4']
let arr2 = ['9']
let arr3 = arr.concat(arr2)
console.log(arr3);
//[ '1', '2', '3', '4', '9' ]
复制代码
13、判断对象中是否存在某个字段
if('role_info' in obj){}
复制代码
14、获取指定范围内的随机数
在开发中,我们可能需要用到某些随机生成的字段数值

let num = Math.floor(Math.random() * (max - min + 1)) + min;
复制代码
15、保留小数
let num =2.123456;
num = num.toFixed(2); // 这个数值会被四舍五入 2.12
//如果不想被四舍五入的话
let num2 = parseFloat((num * 100)/100) //

//其他的方法
parseInt(num) //只会取整 2
Math.ceil(num) // 向上取整,有小数就整数部分加1
Math.floor(num) //向下取整
Math.floor(num) //四舍五入
复制代码
16、把对象的键和变变成数值
let obj={id:1,res:true,msg:error}
//把对象的键变成数组
Object.keys(obj) //['id','res','msg']

//把对象的值变成数组
Object.values(obj) // [1,true,error]

//时获取对象的键和值,并返回一个多维数组
Object.entries(obj) // [['id',1],['res',true],['msg',error]]
复制代码
17、判断字符串中有没有特定的字符,检验http
let html = (this.html).trim().toLowerCase() // 变成小写
console.log(html.indexOf('http')== '-1'); //判断url是否存在http
复制代码
18、判断数组中有没有特定的字符
let text = ['TXT','DOC','XLS','PPT','DOCX','XLSX','PPTX','pdf','txt','doc','xls','ppt','docx','xlsx','pptx','zip','rar','ZIP','RAR']
text.indexOf(type)

如果等于 -1 就说明数组中没有该字符,
复制代码
19、把字符串变成小写模式
let type2 = type.trim().toLowerCase()
复制代码
20、时间格式的转换与时间的获取
var myDate = new Date();
myDate.getYear(); //获取当前年份(2位)
myDate.getFullYear(); //获取完整的年份(4位,1970-????)
myDate.getMonth(); //获取当前月份(0-11,0代表1月) // 所以获取当前月份是myDate.getMonth()+1;
myDate.getDate(); //获取当前日(1-31)
myDate.getDay(); //获取当前星期X(0-6,0代表星期天)
myDate.getTime(); //获取当前时间(从1970.1.1开始的毫秒数)
myDate.getHours(); //获取当前小时数(0-23)
myDate.getMinutes(); //获取当前分钟数(0-59)
myDate.getSeconds(); //获取当前秒数(0-59)
myDate.getMilliseconds(); //获取当前毫秒数(0-999)
myDate.toLocaleDateString(); //获取当前日期
var mytime=myDate.toLocaleTimeString(); //获取当前时间
myDate.toLocaleString( ); //获取日期与时间
复制代码
21、JS获取当前时间戳的方法-JavaScript 获取当前毫秒时间戳有以下三种方法
var timestamp =Date.parse(new Date()); 结果:1280977330000 //不推荐; 毫秒改成了000显示

var timestamp =(new Date()).valueOf(); 结果:1280977330748 //推荐;

var timestamp=new Date().getTime(); 结果:1280977330748 //推荐;

js中单独调用new Date(); 显示这种格式 Mar 31 10:10:43 UTC+0800 2012

但是用new Date() 参与计算会自动转换为从1970.1.1开始的毫秒数
复制代码
总结
如果你觉得此文对你有一丁点帮助,点个赞。或者可以加入我的开发交流群:1025263163相互学习,我们会有专业的技术答疑解惑

如果你觉得这篇文章对你有点用的话,麻烦请给我们的开源项目点点star: http://github.crmeb.net/u/defu 不胜感激 !

点赞
收藏
评论区
推荐文章
晴空闲云 晴空闲云
3年前
javascript实践教程-07-分支结构
本节目标1.掌握js中4种分支结构。内容摘要本篇介绍了js中的4种分支结构:if、ifelse、elseif、switchcase,用来判断在不同的条件下运行不同的代码分支。阅读时间1015分钟。分支结构js中分支结构总共有4种:ififelseelseifswitchcaseifif用来判断某个条件是否成立,如果成立则执行条
待兔 待兔
1年前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
kenx kenx
3年前
mybatis if else if 条件判断SQL片段表达式取值和拼接
前言最近在开发项目的时候涉及到复杂的动态条件查询,但是mybaits本身不支持ifelseif类似的判断但是我们可以间接通过chosewhenotherwise去实现其中choose为一个整体when是ifotherwise是else快速使用以前我们进行条件判断时候使用if标签进行判断,条件并列存在xml
陈占占 陈占占
3年前
python if的选择结构与循环
语句块:可以执行一次或者多次的语句,以冒号为标记,缩进结束就是语句块结束的时候判断条件:以bool类型为标志的,当条件为真就执行,为假就跳过。if的基本结构:if条件:......else:......note:要用冒号来结束代码块,用缩进区分代码块。提示:i
Wesley13 Wesley13
3年前
Java获取接口所有实现类的方式
<prestyle"color:orange"原作者:heaven夏链接:https://www.cnblogs.com/heaveneleven/p/9125228.html</pre有时候,根据业务逻辑的需求,我们想要获取到某个接口的所有实现类。在这里大致介绍两种方式:1\.借助Spring容器实现Spring作为一个
Easter79 Easter79
3年前
TiDB Pre
8月30日,TiDB发布PreGA版。该版本对MySQL兼容性、SQL优化器、系统稳定性、性能做了大量的工作。TiDB:SQL查询优化器调整代价模型优化索引选择,支持不同类型字段比较的索引选择支持基于贪心算法的JoinReorder
Stella981 Stella981
3年前
Pre
PAT甲级1119,我先在CSDN上面发布的这篇文章:https://blog.csdn.net/weixin\_44385565/article/details/89737224(https://www.oschina.net/action/GoToLink?urlhttps%3A%2F%2Fblog.csdn.net%2Fweixin_443855
Stella981 Stella981
3年前
26种JavaScript优化技术
开发人员的生活总是在学习新事物。作为前端开发人员必须知道一些使我们的代码如何更优雅,工作更轻松的技巧。也许你已经进行了很长时间的JavaScript开发,但有时你可能没有使用不需要解决或编写一些额外代码即可解决问题的最新功能。这些技术可以帮助你编写干净且优化的JavaScript代码。1\.多个条件判断//lo
可莉 可莉
3年前
20个常用的JavaScript简写技巧
任何编程语言的简写技巧都能够帮助你编写更简练的代码,让你用更少的代码实现你的目标。让我们一个个来看看JavaScript的简写技巧吧。1\.声明变量//Longhandlet x;let y20;//Shorthandlet x,y20;2\.给多个变量赋值我们可以使用数组解构来在一行中给
Stella981 Stella981
3年前
JavaScript if 条件语句
JavaScriptif条件语句使用:if(条件){}elseif(条件){}elseif(条件){}else{}示例://判断相等if(11){}//判断不等if(1!1){}//
待兔 待兔
1年前
JS的数据类型你了解多少?
JS的数据类型你了解多少?作为JavaScript的⼊⻔级知识点,JS数据类型在整个JavaScript的学习过程中其实尤为重要。因为在JavaScript编程中,经常会遇到边界数据类型条件判断问题,很多代码只有在某种特定的数据类型下,才能可靠地执⾏。希望