当我工作后遇到实际项目的一些问题后,我把我在网上发现的节省时间的技巧都列了一个清单,让刚入门的初学者和工作人员节省时间。
1、补0操作
适用场景:项目中日期的显示,需要用0或者其他字符占位。
> var time= 12;
('0' + time).slice(-2);
<< "12"
> var number= 7;
('0' + time).slice(-2);
<< "07"
2、数组过滤唯一值
> const array = [2, 3, 1, 2, 5, 5, 1]
const uniqueArray = [...new Set(array)];//Set对象类型是在ES6中引入的,配合展开操作(...)创建一个唯一值数组
<< console.log(uniqueArray); // Result: [2, 3, 1, 5]
3、千分位划分
适用场景:项目中页面展示金额,进行千位数划分。
> const AllMoney = (value) => {
const regExp = /(\d{1,3})(?=(\d{3})+(?:$|\.))/g;
const money= (value + '').replace(regExp, '$1,');
return money;
};
<< console.log(AllMoney(5878652221)); //Result: 5,878,652,221
4、短路运算
三元运算符是编写简单条件语句的快速方法:
a > 20? '20' : '10';
a >10 ? (a > 20 ? 'a>20' : '10-20') : '10';
但当判断条件多几重之后,三元运算符会使代码变得非常笨重,所以就出现了短路运算‘与’和‘或’(&&和||)。
eg:
使用&&将返回第一个条件为假的值。如果每个操作的值都为true,则返回最后一个的表达式。
> let one = 1, two = 2, three = 3;
console.log(one && two && three); // Result: 3
console.log(0 && null); // Result: 0
使用||将返回第一个条件为真的值。如果每个操作结果都为false,则返回最后一个的表达式。
> let one = 1, two = 2, three = 3;
console.log(one || two || three); // Result: 1
console.log(0 || null); // Result: null
在项目中可能不知道对象或其中一个子属性是否存在,假设this.obj里面有一个age属性,但是在成功返回一个获取请求之前,age是未定义的。
return (this.obj.age|| 'Fetching age'); //相对于用if判断更加简洁
5、过滤 "false" 类型元素
> const result= [0, 1 -0, 'undefined',undefined, null, 'null',true, false, NaN, 'NaN'];
result.filter(Boolean);//Result: [1, "undefined", "null", " ", true, "NaN"]
5、localStorage的取值
localStorage.setItem('name', 'Lucas');
localStorage.getItem('name') === localStorage.name;
localStorage.name // Result: 'Lucas'
6、x的y次方计算
Math.pow(2, n);//基础写法
2 << (n - 1); //ES7之前,只有以2为基数的幂才存在简写,使用按位左移操作符<<
2**n;//指数运算符**
2**5===2<<4 //true
3**5===3<<4 //false
7、浮点数转整数
希望将浮点数转换为整数,不仅可以使用Math.floor()、Math.ceil()或Math.round(),还可以使用|(位或运算符)或者~~将浮点数截断为整数。
1.2|0 // 1
1.8|0 // 1
-1.2|0 // -1
~~true // => 1
~~1.9 // => 1
~~-1.9 // => -1
//按位或运算符还可以用于从整数的末尾删除任意数量的数字,就不需要使用substring
console.log(7578 / 10 | 0) // Result: 757
console.log(7578 / 100 | 0) // Result: 75
console.log(7578 / 1000 | 0) // Result: 7
8、字符串、数字转换
数字转为字符串:
将数字转换为字符串,连接运算符+后跟一组空引号""
const val = 7 + "";
console.log(val); // Result: "7"
console.log(typeof val); // Result: "string"
字符串转为数字:
使用加法运算符+
let val=+ "7.18";
console.log(val); // Result: 7.18
console.log(typeof val); // Result: "number"
也可以用于将布尔值转换为数字
+true //1
+false //0
如果想返回一个整数,而不是浮点数,可以使用~~
let int=~~ "7.18";
console.log(val); // Result: 7
如果你们有其它更好用的JS小技巧,评论出来让大家都来学习学习。