后端又炸了,进度又滞后了一天,又是前端的锅,不行!!!这个锅不接,闲来无事,写点东西吧,高级 JavaScript 的一些技巧
1. 处理真/假值:初学者与专业人士
初学者:
let name = ""
if(!name){
name="zhansan"
}
他们经常用if(!name)处理虚假值,但它可能无法涵盖所有边缘情况。
专业:
let name=""
name ||="zhansan"
优点是利用逻辑空赋值运算符 ( ||=) 来简洁、更安全地处理假值。
2. 增强对象创建:初学者与专业人士
初学者:
const name="zhangsan";
const age = 25;
const user = {
name:name,
age:age
}
对于这样的方式来看并没有什么问题,但是就是看起来很冗长,不专业而已
专业:
const name="zhangsan";
const age = 25;
const user = {
name,
age
}
这样看起来是不是好看多了,专业性是不是嘎一下就上来了,也比较的简洁了,对于我们来说写多一个属性都是浪费(类似于大学的60分吧)
3. 处理 Null 或未定义:初学者与专业人士
初学者:
let name;
if(name !==null &&name!==undefined){
name="zhangsan"
}else{
name="lisi"
}
对于这种null或者undefined用这种显示的情况来进行检查
专业:
let name ="zhangsan"??"lisi"
这是省了多少代码啊
4. 确保数组中的元素唯一:初学者与专业人士
初学者:
const num =[1,2,3,4,2,5,6,1,5]
const uniquenum = Array.from(new Set(num))
用这种方式from的方式加Set 也确实可以,就是不够优美
专业:
const num =[1,2,3,4,2,5,6,1,5]
const uniquenum = [...new Set(num)]
用 ***...***用扩展运算符不是更加的简洁,优美嘛
5. 简化幂运算:初学者与专业人士
初学者:
let num = Math.pow(2,2);
专业:
let num = 2**2;
求幂运算符 ( **) 来获得更清晰、更简洁的求幂语法。
6. 处理浮点数学:初学者与专业人士
初学者:
let num =(1.2+0.2).toFixed(2);
专业:
let num =Number((1.2+0.2).toFixed(2));
Number()将固定数字转换回数值以获得更高的准确性。
7. 简化对象属性分配:初学者与专业人士
初学者:
const person = {name:"zhangsan",age:25}
const upPerson = Object.assign({},person,{age="30"})
专业:
const person = {name:"zhangsan",age:25}
const upPerson = {...person,age:30}
扩展运算符以更简洁、更清晰的方式更新对象属性。
8. 简化数组过滤:初学者与专业人士
初学者:
const num = [1,2,5,6,3,4,8]
const upNum = num.filter(num=>num%2===0)
专业:
const num = [1,2,5,6,3,4,8]
const upNum = num.filter(num=>!(num%2))
JavaScript 中 0 的真实性来进行更简洁的过滤。