20 个 JS 工具函数助力高效开发
1、条件判断代码
复杂逻辑推荐使用对象Map写法
1),普通的if else
let txt = '';
if (falg) {
txt = "成功"
} else {
txt = "失败"
}
2),三元运算符
let txt = flag ? "成功" : "失败";
3),多个if else
// param {status} status 活动状态:1:成功 2:失败 3:进行中 4:未开始
let txt = '';
if (status == 1) {
txt = "成功";
} else if (status == 2) {
txt = "失败";
} else if (status == 3) {
txt = "进行中";
} else {
txt = "未开始";
}
4),switch case
let txt = '';
switch (status) {
case 1:
txt = "成功";
break;
case 2:
txt = "成功";
break;
case 3:
txt = "进行中";
break;
default:
txt = "未开始";
}
5),对象写法
const statusMap = {
1: "成功",
2: "失败",
3: "进行中",
4: "未开始"
}
//调用直接 statusMapp[status]
6),Map写法
Map 对象
Map 对象保存键值对。任何值(对象或者原始值) 都可以作为一个键或一个值。
const actions = new Map([
[1, "成功"],
[2, "失败"],
[3, "进行中"],
[4, "未开始"]
])
// 调用直接 actions.get(status)
let map=new Map([
["fun1",()=>{console.log('fun1:map函数值')}],
['fun2',()=>{console.log('fun2函数')}]
]);
map2.get('fun1')();//fun1:map函数值
map2.get('fun2')();//fun2函数
Maps 和 Objects 的区别
一个 Object 的键只能是字符串或者 Symbols,但一个 Map 的键可以是任意值。
Map 中的键值是有序的(FIFO 原则),而添加到对象中的键则不是。
Map 的键值对个数可以从 size 属性获取,而 Object 的键值对个数只能手动计算。
Object 都有自己的原型,原型链上的键名有可能和你自己在对象上的设置的键名产生冲突。
2、使用方法链
链式写法也是代码优雅之道的重头戏。
实现链式反应的本质为:每次该对象(Object-A)调用其方法(Method-1)时,返回值仍为本对象(Object-A),从而后面使用链式的方式再调用另外一个方法(Method-2)时,得到的this仍为原对象(Object-A),然后返回值同样(Object-A),从而仍可通过链式的方式再调用该对象上的别的方法(Method-3),以此类推
在js上常见的链式编程有以下几种具体应用:
- 对象方法return this的链式操作
- Promise
- 责任链(Chain of responsibility)
// 不好的
class Car {
constructor() {
this.make = 'Honda';
this.model = 'Accord';
this.color = 'white';
}
setMake(make) {
this.make = make;
}
save() {
console.log(this.make, this.model, this.color);
}
}
const car = new Car();
car.setMake('Ford');
car.save();
// 好的
class Car {
constructor() {
this.make = 'Honda';
this.model = 'Accord';
this.color = 'white';
}
setMake(make) {
this.make = make;
// NOTE: return this是为了用链式写法
return this;
}
save() {
console.log(this.make, this.model, this.color);
// NOTE:return this是为了用链式写法
return this;
}
}
const car = new Car()
.setMake('Ford')
.save();
3、位运算符
双位非运算符有一个非常实用的用途,可以用它来替代Math.floor()函数,它在执行相同的操作时速度更快。
注意
:双非位运算符只适用于 32 位整数,即范围为 -(2^31) 到 (2^31)-1,即 -2147483648 到 2147483647。对于大于 2147483647 或小于 0 的数字,双非位运算符(~~)会给出错误的结果,因此建议在这种情况下使用 Math.floor() 方法。
传统写法:
Math.floor(4.9) === 4 //true
简化写法:
~~4.9 === 4 //true
4、多值匹配
传统写法
if (value === 1 || value === 'one' || value === 2 || value === 'two') {
// ...
}
简化写法
if ([1, 'one', 2, 'two'].includes(value)) {
// ...
}
5、扩展运算符...
拓展运算符是深拷贝还是浅拷贝是看具体拷贝内容的,当拷贝的内容只有一层时是深拷贝,层数很多时是浅拷贝([{name:‘zs’,age:18,sex:“男”},{name:‘ls’,age:16,sex:“女”}];)
传统写法
// 合并数组
const odd = [1, 3, 5];
const nums = [2, 4, 6].concat(odd);
// 克隆数组(深复制)
const arr = [1, 2, 3, 4];
const arr2 = arr.slice();
//合并对象
let fname = { firstName : '前端' };
let lname = { lastName : '充电宝'}
let full_names = Object.assign(fname, lname);
简化写法:
// 合并数组
const odd = [1, 3, 5];
const nums = [2, 4, 6, ...odd];
console.log(nums); // [ 2, 4, 6, 1, 3, 5 ]
// 克隆数组(深复制) 也可用于对象深复制
const arr = [1, 2, 3, 4];
const arr2 = [...arr];
//合并对象
let full_names = {...fname, ...lname};