总结的17个JavaScript开发技巧
# async/await
// 标准用法:
function testAwait (x) {
return new Promise(resolve => {
setTimeout(() => {
resolve(x);
}, 2000);
});
}
async function helloAsync() {
var x = await testAwait ("hello world");
console.log(x);
// 或者:
// var x = testAwait ("hello world");//此处x是一个Promise对象
// x.then(function(value){
// console.log(value);
// });
}
helloAsync ();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# 宽松相等 ==
[ ] == [ ] // false 2 3 解析:两个引用类型,==比较的是引用地址
1
# == 和 ! 优先级
[ ] == ![ ] // true
/*
解析:
(1)! 的优先级高于== ,右边Boolean([])是true,取返等于 false
(2)一个引用类型和一个值去比较 把引用类型转化成值类型,左边0
(3)所以 0 == false 答案是true
*/
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# 数字与字符串相加减
'5' + 3
'5' - 3
// 解析:加号有拼接功能,减号就是逻辑运算
// 巩固:typeof (+"1") // "number" 对非数值+—常被用来做类型转换相当于Number()
1
2
3
4
2
3
4
# 补零
var FillZero = (num, len) => num.toString().padStart(len, "0");
var num = FillZero(156, 5); // FillZero(数字, 位数)
// num => "00156"
1
2
3
2
3
# 是否为空数组
var arr = [];
var flag = Array.isArray(arr) && !arr.length;
// flag => true
1
2
3
2
3
# 是否为空对象
var obj = {};
var flag = DataType(obj, "object") && !Object.keys(obj).length; // Object.keys(data).length !== 0
// flag => true
1
2
3
2
3
# 数组比较大小
var a = [1, 2, 3],
b = [1, 2, 3],
c = [1, 2, 4];
a == b
a === b
a > c
a < c
/*
答案:false, false, false, true
解析:相等(==)和全等(===)还是比较引用地址
引用类型间比较大小是按照字典序比较,就是先比第一项谁大,相同再去比第二项。
*/
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
# String.fromCharCode()
方法返回根据指定的UTF-16代码单元序列创建的字符串
let letterArr = []
// 选出26个字母
for (let i = 65; i < 91; i++) {
letterArr.push(String.fromCharCode(i))
}
letterArr = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"]
1
2
3
4
5
6
2
3
4
5
6
# 数组去重
var arr = [...new Set([0, 2, 2, null, null])];
// arr => [0, 2, null]
1
2
2
# if多条件判断
觉得这个简直不要太好用,代码看起来舒服多了。
// 冗余
if (x === 'a' || x === 'b' || x === 'c' || x ==='d') {
// something
}
// 简洁
// 返回的是布尔值
if (['a', 'b', 'c', 'd'].includes(x)) {
// something
}
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# 优化if else,switch
let code; // code有多个值 1 2 3 4 5, 分别做不一样的事情
// 常见 if 写法, 看起来密密麻麻,简直让人头皮发麻
if (code === 1) {
TodoA();
} else if (code === 2) {
TodoB();
} else if (code === 3) {
TodoC();
} else if (code === 4) {
TodoD();
} else if (code === 5) {
TodoE();
}
// switch 优化一下, 这样的代码本身也没什么,只是可读性差一些,看起来有点费劲
switch (code) {
case 1:
TodoA();
break;
case 2:
TodoB();
break;
case 3:
TodoC();
break;
case 4:
TodoD();
break;
case 5:
TodoE();
break;
default:
break;
}
// 最后的最后,巧用对象来“优雅”解决这一长串代码
const codeNum = {
1: TodoA,
2: TodoB,
3: TodoC,
4: TodoD,
5: TodoE,
}
if (codeNum[code]) {
codeNum[code]();
}
// 看看这代码,简直不要太简洁,又可以舒舒服服躺着摸鱼了
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
# find
方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。
语法:array.find(mapfuc)
let array = [0,12,22,55,44]
console.log(array.find((item,index) => item >= 18)) // 22
1
2
2
# 提前退出机制
相信大家看过这样一份代码
function test(form) {
if (form) {
let flag = form.status;
if (flag) {
// something code
}
}
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
当一个条件所需的值位于某个值下的时候,我们就要进行两次判断
那我们换一种写法呢
function test(form) {
if (!form && !form.status) {
return;
}
// something code
}
1
2
3
4
5
6
2
3
4
5
6
大家都知道,且运算符(&) 只有当两者为真值时才为true,那如果if这个语句为假,程序就不会执行其他代码。
# 对象变量属性
这是什么意思呢?红宝书中是这样解释可计算属性的: 在引入可计算属性之前,如果想使用变量的值作为属性,那么必须先声明对象,然后使用中括号语法来添加属性。换句话说,不能在对象字面量中直接动态命名属性。
var flag = false;
var obj = {
a: 0,
b: 1,
[flag ? "c" : "d"]: 2
};
// obj => { a: 0, b: 1, d: 2 }
1
2
3
4
5
6
7
2
3
4
5
6
7
对于这个写法,我也有用于axios中,
用于动态控制axios的params(get请求),data(post请求) --------- 对象键值可以使用 [变量或表达式]
let method = plat == 'xxx' ? 'get' : 'post'; // 当 plat等于某个值时是get请求,否则为post请求
axios({
method, // 请求方式
[ method == 'get' ? 'params' : 'data' ]: data // 对象键值可以使用 [ 变量或表达式 ] data就是传回后端的数据
}).then(() => {}).catch(() => {})
1
2
3
4
5
6
2
3
4
5
6
# 函数退出代替条件分支退出
if (flag) {
Func();
return false;
}
// 换成
if (flag) {
return Func();
}
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# 格式化金钱
let formatMoney = num => num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
let money = formatMoney(986542135);
console.log('money ==> ', money); // ""986,542,135""
1
2
3
2
3
在线编辑 (opens new window)
上次更新: 2021/11/14, 07:48:46