仙娥小站

2023年了,你确定不试试这几个JavaScript小技巧吗

发表于: 2023-01-05 19:19 分类: js

分享10个JavaScript小技巧

1.使用&&替代if判断

let toggle = true;
const fn = () => {
    console.log("做某件事");
}
//传统方案
if(toggle){
    fn();
}
//优化方案
toggle && fn();

2.判断变量值是否为其中的某个值

let a = "a";
//传统方案
if(a === 'a' || a === 'b' || a === 'c'){
    // ...
}
//优化方案
if(['a','b','c'].includes(a)){
    // ...
}

3.判断函数行参或行参下的某个属性是否存在,不存在便不执行

//传统方案
function handle(event){
    if(event){
        const target = event.target;
        if(target){
            // ...
        }
    }
}
//优化方案
function handle(event){
    if(!event || !event.target){
        return;
    }
}

4.非空判断

//传统方案
const value = response && response.data && response.data.text;
//优化方案
const value = response?.data?.text;

5.获取数组的最后一项值

const arr = [1,2,3,4,5,6];
//传统方案
arr[arr.length-1];
//优化方案
arr.at(-1);

6.字符串转换成数值

const str = '888666';
//传统方案
parseInt(str);//number
//优化方案
+str;//number

7.变量值不存在时给它赋值

let foo = undefined;
//传统方案
if(!foo){
    foo = bar;
}
//优化方案
foo = foo || bar;

8.条件不同时给某个变量赋不同的值

let a = true;
let b = undefined;
//传统方案
if(a === true){
    b = 1;
}else{
    b = 2;
}
//优化方案
b = a?1:2;

9.数组去重

const uniqueArr = (arr) => [...new Set(arr)];

10.去除数组空项

let arr = [1,2,,4,5];
arr.flat();