34种你需要了解的JavaScript优化技术

缺乏、安全感 2023-01-13 10:10 266阅读 0赞

![f19a7c0d947f914cf56a122ab9e44886.gif][]

### **文末送《Web前端性能优化》书籍** ###

### **希望你坚持看完并带走彩蛋** ###

英文 | https://javascript.plainenglish.io/34-javascript-optimization-techniques-to-know-in-2021-d561afdf73c3

翻译 | https://www.dsiab.com/post/3922

开发人员的生活总是在学习新事物，并且跟上变化的难度不应该比现在已经难，我的动机是介绍所有JavaScript最佳实践，例如，速记和功能，我们作为前端开发人员必须知道这些使我们的生活在2021年变得更加轻松。

您可能已经进行了很长时间的JavaScript开发，但是有时您可能没有使用不需要解决或编写一些额外代码即可解决问题的最新功能。这些技术可以帮助您编写干净且优化的JavaScript代码。此外，这些主题可以帮助您为2021年的JavaScript采访做好准备。

在这里，我将提供一个新系列，介绍速记技术，这些速记技术可帮助您编写更干净和优化的JavaScript代码。这是您在2021年必须知道的JavaScript编码的备忘单。

# **1、如果有多个条件** #

我们可以在数组中存储多个值，并且可以使用数组include方法。

//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或未定义。JavaScript确实具有实现这些功能的非常好的捷径。

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

# **5、空值检查和分配默认值** #

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

# **6、未定义值检查和分配默认值** #

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

正常值检查

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

# 空位合并运算符 #

空合并运算符??如果左侧为null或未定义，则返回右侧的值。默认情况下，它将返回左侧的值。

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、如果存在速记** #

这是我们大家都在使用的常用速记之一，但仍然值得一提。

// Longhand
    if (test1 === true)
    
    
    // Shorthand
    if (test1)

注意：如果test1有任何值，它将在if循环后进入逻辑，该运算符通常用于null或未定义的检查。

# **10、多个条件的AND（&&）运算符** #

如果仅在变量为true的情况下才调用函数，则可以使用&&运算符。

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

# **11、foreach循环速记** #

这是迭代的常用速记技术之一。

// 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)();

# **15、Switch速记** #

我们可以将条件保存在键值对象中，并可以根据条件使用。

// Longhand
    switch (data) {
      case 1:
        test1();
      break;
    
    
      case 2:
        test2();
      break;
    
    
      case 3:
        test();
      break;
      // And so on...
    }
    
    
    // Shorthand
    var data = {
      1: test1,
      2: test2,
      3: test
    };
    
    
    data[something] && data[something]();

# **16、隐式返回速记** #

使用箭头功能，我们可以直接返回值，而不必编写return语句。

//longhand
    function calculate(diameter) {
      return Math.PI * diameter
    }
    //shorthand
    calculate = diameter => (
      Math.PI * diameter;
    )

# **17、小数基指数** #

// Longhand
    for (var i = 0; i < 10000; i++) { ... }
    
    
    // Shorthand
    for (var i = 0; i < 1e4; i++) {

# **18、默认参数值** #

//Longhand
    function add(test1, test2) {
      if (test1 === undefined)
        test1 = 1;
      if (test2 === undefined)
        test2 = 2;
      return test1 + test2;
    }
    //shorthand
    add = (test1 = 1, test2 = 2) => (test1 + test2);
    add() //output: 3

# **19、点差运算符速记** #

//longhand
    // joining arrays using concat
    const data = [1, 2, 3];
    const test = [4 ,5 , 6].concat(data);
    //shorthand
    // joining arrays
    const data = [1, 2, 3];
    const test = [4 ,5 , 6, ...data];
    console.log(test); // [ 4, 5, 6, 1, 2, 3]

对于克隆，我们也可以使用传播运算符。

//longhand
    
    
    // cloning arrays
    const test1 = [1, 2, 3];
    const test2 = test1.slice()
    //shorthand
    
    
    // cloning arrays
    const test1 = [1, 2, 3];
    const test2 = [...test1];

# **20、模板文字** #

如果您厌倦了在单个字符串中使用+来连接多个变量，那么这种速记方式将消除您的头痛。

//longhand
    const welcome = 'Hi ' + test1 + ' ' + test2 + '.'
    //shorthand
    const welcome = `Hi ${test1} ${test2}`;

# **21、多行字符串速记** #

当我们在代码中处理多行字符串时，可以使用以下功能：

//longhand
    const data = 'abc abc abc abc abc abc\n\t'
        + 'test test,test test test test\n\t'
    //shorthand
    const data = `abc abc abc abc abc abc
             test test,test test test test`

# **22、对象属性分配** #

let test1 = 'a'; 
    let test2 = 'b';
    //Longhand 
    let obj = {test1: test1, test2: test2}; 
    //Shorthand 
    let obj = {test1, test2};

# **23、字符串成数字** #

//Longhand 
    let test1 = parseInt('123'); 
    let test2 = parseFloat('12.3'); 
    //Shorthand 
    let test1 = +'123'; 
    let test2 = +'12.3';

# **24、分配速记** #

//longhand
    const test1 = this.data.test1;
    const test2 = this.data.test2;
    const test2 = this.data.test3;
    //shorthand
    const { test1, test2, test3 } = this.data;

# **25、 Array.find的简写** #

当我们确实有一个对象数组并且我们想要根据对象属性查找特定对象时，find方法确实很有用。

# **26、查找条件速记** #

如果我们有代码来检查类型，并且基于类型需要调用不同的方法，我们可以选择使用多个else if或进行切换，但是如果我们的速记比这更好呢？

// Longhand
    if (type === 'test1') {
      test1();
    }
    else if (type === 'test2') {
      test2();
    }
    else if (type === 'test3') {
      test3();
    }
    else if (type === 'test4') {
      test4();
    } else {
      throw new Error('Invalid value ' + type);
    }
    // Shorthand
    var types = {
      test1: test1,
      test2: test2,
      test3: test3,
      test4: test4
    };
    
    
    var func = types[type];
    (!func) && throw new Error('Invalid value ' + type); func();

# **27、速记按位索引** #

当我们迭代数组以查找特定值时，我们确实使用indexOf（）方法，如果我们找到更好的方法呢？让我们看看这个例子。

//longhand
    if(arr.indexOf(item) > -1) { // item found 
    }
    if(arr.indexOf(item) === -1) { // item not found
    }
    //shorthand
    if(~arr.indexOf(item)) { // item found
    }
    if(!~arr.indexOf(item)) { // item not found
    }

按位（〜）运算符将返回非-1的真实值。取反就像做！〜一样简单。另外，我们也可以使用include（）函数：

if (arr.includes(item)) { 
    // true if the item found
    }

# **28、 Object.entries（）** #

此功能有助于将对象转换为对象数组。

const data = { test1: 'abc', test2: 'cde', test3: 'efg' };
    const arr = Object.entries(data);
    console.log(arr);
    /** Output:
    [ [ 'test1', 'abc' ],
      [ 'test2', 'cde' ],
      [ 'test3', 'efg' ]
    ]
    **/

# **29、 Object.values（）** #

这也是ES8中引入的一项新功能，它执行与Object.entries（）类似的功能，但没有关键部分：

const data = { test1: 'abc', test2: 'cde' };
    const arr = Object.values(data);
    console.log(arr);
    /** Output:
    [ 'abc', 'cde']
    **/

# **30、Double Bitwise简写** #

（双重NOT按位运算符方法仅适用于32位整数）

// Longhand
    Math.floor(1.9) === 1 // true
    
    
    // Shorthand
    ~~1.9 === 1 // true

# **31、重复一个字符串多次** #

要一次又一次地重复相同的字符，我们可以使用for循环并将它们添加到同一循环中，但是如果我们有一个简写方法呢？

//longhand 
    let test = ''; 
    for(let i = 0; i < 5; i ++) { 
      test += 'test '; 
    } 
    console.log(str); // test test test test test 
    //shorthand 
    'test '.repeat(5);

# **32、在数组中查找最大值和最小值** #

const arr = [1, 2, 3]; 
    Math.max(…arr); // 3
    Math.min(…arr); // 1

# **33、从字符串中获取字符** #

let str = 'abc';
    //Longhand 
    str.charAt(2); // c
    //Shorthand 
    Note: If we know the index of the array then we can directly use index insted of character.If we are not sure about index it can throw undefined
    str[2]; // c

# **34、功率速记** #

数学指数幂函数的简写：

//longhand
    Math.pow(2,3); // 8
    //shorthand
    2**3 // 8

## 福利时间 ##

最后，我又来给大家送福利了，这么好的书不送几本给大家怎么行呢？

![48042cd257ba70933549bcb6f0387161.png][]

本书简介

*  只要项目还在用，前端性能就永远是时刻要关注的问题，阅读本书掌握前端系统、实用、专业的性能优化解决方案。
 *  构筑前端性能知识体系，将零散知识点聚沙成塔，理清脉络
 *  针对6大优化场景，层层剥茧式分析，让读者知其然也知其所以然
 *  沉淀作者5年一线大厂开发经验，逐个性能点解析实践场景
 *  汇集12年专业知识，带你全面理解关乎性能的前因后果

这次准备了2种方式抽奖，**「评论点赞、朋友圈点赞」**这两种方式都可以参与！感谢亲爱的读者们，你们的支持也是我持续更文最大的动力。

本次开奖时间为 2021.4.18 22:00

为了避免中奖后失联，提前加我微信哈

![d89acf0ac2d6d6f2f43415089163cf82.png][]

留言点赞（2本）

*  留言点赞数「第一、二名」可获得一本 `《Web前端性能优化》`

PS：买点赞数等作弊无效，一切解释权归前端Q所有

## 朋友圈点赞抽奖（2本） ##

记得先添加我微信，不然我看不到哪些小伙伴点赞

![e93f26ec1fa8ffae039618f8f2f7d2a2.png][]

*  大奖：本文章我会转发朋友圈，给第n位(具体数值看朋友圈发布时的规则)点赞朋友圈的同学送出一本 `《Web前端性能优化》`，共2位幸运儿。
 *  参与奖：朋友圈点赞者中给第n位(具体数值看朋友圈发布时的规则)送出「5.2元」红包，共5位幸运儿。

最后

*  欢迎加我微信(winty230)，拉你进技术群，长期交流学习...  
    
 *  欢迎关注「前端Q」,认真学前端，做个专业的技术人...

![2b3b879f616320d311532131f807e4ed.png][]

点个**在看**支持我吧

![335ef9b662d0e9a0d37d599dbec1ab77.gif][]

[f19a7c0d947f914cf56a122ab9e44886.gif]: /images/20221022/9a4ee5a0aa544badb7f9457040519863.png
[48042cd257ba70933549bcb6f0387161.png]: /images/20221022/1c7d7b5640f74102869abb89df3d8d89.png
[d89acf0ac2d6d6f2f43415089163cf82.png]: /images/20221022/bd4e1233f9114b6f892a68df5bc8b968.png
[e93f26ec1fa8ffae039618f8f2f7d2a2.png]: /images/20221022/26cda7e6c7df46ba866da396a8a53af8.png
[2b3b879f616320d311532131f807e4ed.png]: /images/20221022/4cbeb3c7a2dd48b79ae6cc77e0aac4c8.png
[335ef9b662d0e9a0d37d599dbec1ab77.gif]: /images/20221022/8a8064e9793a4fadb579af702af3795a.png