大家好,最近准备总结一下JS的经验,分享分享,有不对的欢迎讨论哈~
JS作为前端的基础技能,每一位前端开发都要运用熟练,但你真的会写JS吗?js全称JavaScript,是运行在浏览器上的脚本语言,连续多年被评为全球最受欢迎的编程语言。
不是说你对js的函数有多熟,更不是问你英文打次拼写的问题。而是,天天写JS,你有想过怎么让JS写的更优吗?除了codeclean,还有些小技巧和经验可以总结来看看。站在别人的肩膀上,你可以看的更远!~
目录
1.includes判断多条件
2. if-else 条件换成三目运算简写
3.Null, Undefined,空检查等假值判断
4.将值分配给多个变量
5.赋值运算符简写
6.如果仅在变量为 true 的情况下才调用函数,则可以使用 && 运算符
7.return全集返回值
8.使用箭头函数
9.短函数调用
10.Switch简写
【以下例子中图片是not good,代码里是good的,方便区分】
1.includes判断多条件
当if的条件很多,不如用数组的includes来判断
if (['a', 'b', 'c', 'd'].includes(x)) {
//logic
}
2. if-else 条件换成三目运算简写
如图,可以写成:
let test = (x > 50) ? true : false;
// 更短的方式:
let test = x > 50;
又比如嵌套了多条件时:
可以简写成:
let x = 300,
test2 = (x > 100) ? 'greater 100' : (x < 50) ? 'less 50' : 'between 50 and 100';
console.log(test2); // "greater 100"
3.Null, Undefined,空检查等假值判断
我们可以用更简短的方式来排除假值
let test2 = test1 || '';
或者这种场景下:
if (test1) {
//logic
}
4.将值分配给多个变量
一行就可以解决:
let [test1, test2, test3] = [1, 2, 3];
甚至遇到对象,也可能用这样方法:
let {num1:test1, num2:test2, num3:test3} = {num1: 1, num2: 2, num3: 3};
5.赋值运算符简写
test1++;
test2--;
test3 *= 20;
6.如果仅在变量为 true 的情况下才调用函数,则可以使用 && 运算符
test && oneMethod();
7.return全集返回值
function checkReturn() {
return test || callMe('test');
}
8.使用箭头函数
单行返回省略return
const add = (a, b) => a + b;
单个参数省略括号
callName = name => console.log('Hello', name);
9.短函数调用
用三元运算符来实现
(test3 === 1? test1:test2)();
10.Switch简写
多条件触发用对象存储,再调用:
var data = {
1: test1,
2: test2,
3: test
};
data[something] && data[something]();
其他奇技淫巧,当有一个参数时,需要返回结果时,字典的键值对取代switch语句:
let data = ({
1: test1(),
2: () => { return 0 },
3: test2(),
4: () => { return 1 }
})[ num || 0 ]()