2021年不可错过的17种JS优化技巧（一）

╰+攻爆jí腚メ 2022-10-09 00:47 173阅读 0赞

![129c46f20984fa02f0c92b04ae6c11ac.png][]

开发者总是在学习新东西，而跟上这些技术的变化不应该比之前更难。我写这篇文章的目的是介绍 JavaScript 的一些最佳实践，作为前端开发人员，掌握了这些最佳实践会让我们在 2021 年的工作变得更轻松。

你可能做了很长时间的 JavaScript 开发，但有时候你可能没有使用最新的 JavaScript 特性或技巧，这些特性和技巧可以在不需要编写额外代码的情况下解决你的问题。它们可以帮助你写出干净且优化的 JavaScript 代码。此外，如果你在 2021 年准备去参加面试，可以参考本文的内容。

## 1. 带有多个条件的 if 语句 ##

把多个值放在一个数组中，然后调用数组的 includes 方法。

//longhand  
    if (x === 'abc' || x === 'def' || x === 'ghi' || x ==='jkl') {  
        //logic  
    }  
    //shorthand  
    if (['abc', 'def', 'ghi', 'jkl'].includes(x)) {  
       //logic  
    }

## 2. 简化 if true…else ##

对于不包含大逻辑的 if-else 条件，可以使用下面的快捷写法。我们可以简单地使用三元运算符来实现这种简化。

// Longhand  
    let test: boolean;  
    if (x > 100) {  
        test = true;  
    } else {  
        test = false;  
    }  
    // Shorthand  
    let test = (x > 10) ? true : false;  
    //or we can use directly  
    let test = x > 10;  
    console.log(test);

如果有嵌套的条件，可以这么做。

let x = 300,  
    test2 = (x > 100) ? 'greater 100' : (x < 50) ? 'less 50' : 'between 50 and 100';  
    console.log(test2); // "greater than 100"

## 3. 声明变量 ##

当我们想要声明两个具有相同的值或相同类型的变量时，可以使用这种简写。

//Longhand   
    let test1;  
    let test2 = 1;  
    //Shorthand   
    let test1, test2 = 1;

## 4. null、undefined 和空值检查 ##

当我们创建了新变量，有时候想要检查引用的变量是不是为非 null 或 undefined。JavaScript 确实有一个很好的快捷方式来实现这种检查。

// Longhand  
    if (test1 !== null || test1 !== undefined || test1 !== '') {  
        let test2 = test1;  
    }  
    // Shorthand  
    let test2 = test1 || '';

## 5. null 检查和默认赋值 ##

let test1 = null,  
        test2 = test1 || '';  
    console.log("null check", test2); // output will be ""

## 6. undefined 检查和默认赋值 ##

let test1 = undefined,  
        test2 = test1 || '';  
    console.log("undefined check", test2); // output will be ""

一般值检查

let test1 = 'test',  
        test2 = test1 || '';  
    console.log(test2); // output: 'test'

另外，对于上述的 4、5、6 点，都可以使用?? 操作符。

如果左边值为 null 或 undefined，就返回右边的值。默认情况下，它将返回左边的值。

const test= null ?? 'default';  
    console.log(test);  
    // expected output: "default"  
    const test1 = 0 ?? 2;  
    console.log(test1);  
    // expected output: 0

## 7. 给多个变量赋值 ##

当我们想给多个不同的变量赋值时，这种技巧非常有用。

//Longhand   
    let test1, test2, test3;  
    test1 = 1;  
    test2 = 2;  
    test3 = 3;  
    //Shorthand   
    let [test1, test2, test3] = [1, 2, 3];

## 8. 简便的赋值操作符 ##

在编程过程中，我们要处理大量的算术运算符。这是 JavaScript 变量赋值操作符的有用技巧之一。

// Longhand  
    test1 = test1 + 1;  
    test2 = test2 - 1;  
    test3 = test3 * 20;  
    // Shorthand  
    test1++;  
    test2--;  
    test3 *= 20;

## 9. if 判断值是否存在 ##

这是我们都在使用的一种常用的简便技巧，在这里仍然值得再提一下。

// Longhand  
    if (test1 === true) or if (test1 !== "") or if (test1 !== null)  
    // Shorthand //it will check empty string,null and undefined too  
    if (test1)

注意：如果 test1 有值，将执行 if 之后的逻辑，这个操作符主要用于 null 或 undefinded 检查。

## 10. 用于多个条件判断的 && 操作符 ##

如果只在变量为 true 时才调用函数，可以使用 && 操作符。

//Longhand   
    if (test1) {  
     callMethod();   
    }   
    //Shorthand   
    test1 && callMethod();

## 11. for each 循环 ##

这是一种常见的循环简化技巧。

// Longhand  
    for (var i = 0; i < testData.length; i++)  
    // Shorthand  
    for (let i in testData) or  for (let i of testData)

遍历数组的每一个变量。

function testData(element, index, array) {  
      console.log('test[' + index + '] = ' + element);  
    }  
    [11, 24, 32].forEach(testData);  
    // logs: test[0] = 11, test[1] = 24, test[2] = 32

## 12. 比较后返回 ##

我们也可以在 return 语句中使用比较，它可以将 5 行代码减少到 1 行。

// Longhand  
    let test;  
    function checkReturn() {  
        if (!(test === undefined)) {  
            return test;  
        } else {  
            return callMe('test');  
        }  
    }  
    var data = checkReturn();  
    console.log(data); //output test  
    function callMe(val) {  
        console.log(val);  
    }  
    // Shorthand  
    function checkReturn() {  
        return test || callMe('test');  
    }

## 13. 箭头函数 ##

//Longhand   
    function add(a, b) {   
       return a + b;   
    }   
    //Shorthand   
    const add = (a, b) => a + b;

更多例子：

function callMe(name) {  
      console.log('Hello', name);  
    }  
    callMe = name => console.log('Hello', name);

## 14. 简短的函数调用 ##

我们可以使用三元操作符来实现多个函数调用。

// Longhand  
    function test1() {  
      console.log('test1');  
    };  
    function test2() {  
      console.log('test2');  
    };  
    var test3 = 1;  
    if (test3 == 1) {  
      test1();  
    } else {  
      test2();  
    }  
    // Shorthand  
    (test3 === 1? test1:test2)();

## 最后 ##

为了帮助大家更好温习重点知识、更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。

内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。（本文资料 适合0-2年）

包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。

![d74f8b42f4a63c76b18efc6a818147df.png][]

![6deb905d9655a3f0f54b8920686e1970.png][]

**前端面试题汇总**

![1471537bfd3f5a483690ca477fd3f2b9.png][]

**JavaScript**

![7796de226b373d068d8f5bef31e668ce.png][]

**性能**

![d7f6750332c78eb27cc606540cdce3b4.png][]

**linux**

![ed368cc25284edda453a4c6cb49916ef.png][]

**前端资料汇总**

![6e0ba223f65e063db5b1b4b6aa26129a.png][]

#### 完整版PDF资料免费分享，只需你点赞支持，[动动手指点击此处就可免费领取了][Link 1]。 ####

我一直觉得技术面试不是考试，考前背背题，发给你一张考卷，答完交卷等通知。

首先，技术面试是一个 认识自己 的过程，知道自己和外面世界的差距。

更重要的是，技术面试是一个双向了解的过程，要让对方发现你的闪光点，同时也要 试图去找到对方的闪光点，因为他以后可能就是你的同事或者领导，所以，面试官问你有什么问题的时候，不要说没有了，要去试图了解他的工作内容、了解这个团队的氛围。

找工作无非就是看三点：和什么人、做什么事、给多少钱，要给这三者在自己的心里划分一个比例。

最后，祝愿大家在这并不友好的环境下都能找到自己心仪的归宿

[129c46f20984fa02f0c92b04ae6c11ac.png]: /images/20221005/38e9f7ba298d4e6c840bc9d042366a14.png
[d74f8b42f4a63c76b18efc6a818147df.png]: /images/20221005/c3e1014d64f34dab9f2ed1d09bdb88b8.png
[6deb905d9655a3f0f54b8920686e1970.png]: /images/20221005/b054827fc66f448aa49d540e006a57bc.png
[1471537bfd3f5a483690ca477fd3f2b9.png]: /images/20221005/8899fea047834fcbb1e48427427012c0.png
[7796de226b373d068d8f5bef31e668ce.png]: /images/20221005/27474a22abe0446c8a6f4059943019c2.png
[d7f6750332c78eb27cc606540cdce3b4.png]: /images/20221005/3ae5475c2e914d9d806bb1202c5d13ac.png
[ed368cc25284edda453a4c6cb49916ef.png]: /images/20221005/8db5cfd2b1404611b0ce7d33856470f2.png
[6e0ba223f65e063db5b1b4b6aa26129a.png]: /images/20221005/4c6b158038f046e7b66e8364d8d30ff6.png
[Link 1]: https://jq.qq.com/?_wv=1027&k=VIWqVeW1