15个JavaScript优化技巧

Posted 2021-09-14 李不要熬夜

一段精简的代码不仅能让人心情愉悦，而且也会让代码的逼格有所提升。一个优秀的产品往往需要一点一点的打磨才能脱颖而出，精简的代码是其中重要的组成部分。那么，就让我们来了解一下一些常见的优化代码的手段吧。

1、多个条件判断

数组includes方法用来判断是否包含某个元素，如果是返回 true，否则false。

// longhand
if (student === "Tom" || student === "Jack" || student === "Shanguagua") {
  // business
}
 
// shorthand
if ([\'Tom\', \'Jack\', \'Shanguagua\'].includes(student)) {
  // business
}

2、If true ... else 缩写

简单的比较逻辑可以使用这种写法。如果负责的业务这样写，代码可读性就会变差，估计第二天都不敢承认是自己写的。

// longhand
let win;
let score = 70;
 
if (score > 100) {
  win = true;
} else {
  win = false;
}
 
// shorthand
let win = (score > 100) ? true : false;
// 数值的比较会返回一个Boolean值
let win = score > 100;

三元运算符也是一个不错的选择，但是超过2个判断条件就比较不美丽。

let win = (score > 90) ? \'A\' (score > 80) : \'B\'

3、声明变量

如果需要声明两个具有共同值或共同类型的变量时，试一下这种写法。

//Longhand 
let Tom = 1;
let Jack = 1;
 
//Shorthand
let Tom, Jack = 1;

4、空、未定义检查

有时候我们需要是否引用了null或未定义值。

// Longhand
if (Tom !== null || TomTom !== undefined || test1 !== \'\') {
    let Mick = Tom;
}
 
// Shorthand
let Mick = Tom || \'\';

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

如果要给A变量赋值B，而B如果为假值时，就赋值A某个值。

let A = null,
    B = A || \'\';

|| 运算符是短路或运算，被称为短路运算的原因是，当第一个操作数为true时，将不会判断第二个操作数，因为无论第二个操作数为何，最后的运算结果一定是true。
与之对应的还有短路与运算，&&被称为短路运算的原因是，当第一个操作数为false时，将不会判断第二个操作数，因为此时无论第二个操作数为何，最后的运算结果一定是false。

6、多个变量赋值

当我们需要给不同的变量赋不同值的时候，这个方法就有点给力了，代码之美体现的淋漓尽致。

// Longhand 
var Tom, Jack, Shanguagaua;
Tom = \'A\';
Jack = \'B\';
Shanguagaua = \'C\';
 
// Shorthand 
let [Tom, Jack, Shanguagau] = [\'A\', \'B\', \'C\'];

7、多个条件的AND（&&）运算符

如果要在true的情况下再执行其它操作，if是一种方法，但是AND运算符逼格稍高。

// Longhand 
if (ready) {
    goToEat(); 
} 
 
// Shorthand 
ready && goToEat();

8、箭头函数

箭头函数是ES6的特性，简化了函数的写法，还有其他特性。

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

9、短函数调用

根据条件判断两个函数的调用。

// Longhand
function A() {
  console.log("A");
}
function B() {
  console.log("B");
}
 
var c = 5;
if (c == 10) {
  A();
} else {
  B();
}
 
// Shorthand
(c === 1 ? A : B)();

10、Switch速记

根据条件判断多个函数的调用。

// Longhand
switch (key) {
    case 1:
      A();
    break;
    case 2:
      B();
    break;
    case 3:
      C();
    break;
    // And so on...
  }
  
  // Shorthand
  var data = {
    1: A,
    2: B,
    3: C
  };
  
  data[something] && data[something]();

因为某个值如果不存在对象中会得到假值，反之真值，再结合AND运算符就可以了。

11、默认参数值

利用函数的默认值特性，可以避免校验假值操作。

//Longhand
function GoToEat(A, B) {
  if (A === undefined) A = 1;
  if (B === undefined) B = 2;
  return A + B;
}
 
//shorthand
GoToEat = (A = 1, B = 2) => A + B;
GoToEat(); // output: 3

12、点运算符

数组的拼接可以使用点运算符来完成。

//Longhand
const A = [1, 2, 3];
const B = [4, 5, 6].concat(A);
 
// Shorthand
const A = [1, 2, 3];
const B = [4, 5, 6, ...A]; // [ 4, 5, 6, 1, 2, 3]

当然拷贝一个数组也可以用点运算符，注意是深拷贝。

// Longhand
var A = [1, 2, 3];
var B = A.slice();
 
//shorthand
var A = [1, 2, 3];
var B = [...A];

13、Array.find的简写

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

// Longhand
const data = [
  {
    type: "student",
    name: "Tom",
  },
  {
    type: "teacher",
    name: "Mick",
  },
  {
    type: "student",
    name: "Shanguagua",
  },
];
function findStudent(name) {
  for (let i = 0; i < data.length; ++i) {
    if (data[i].type === "student" && data[i].name === name) {
      return data[i];
    }
  }
}
 
//Shorthand
filterdData = data.find(
  (data) => data.type === "student" && data.name === "Shanguagua"
); // { type: \'student\', name: \'Shanguagua\' }

14、重复一个字符串多次

要一次又一次地重复相同的字符，我们可以使用for循环并将它们添加到同一循环中。重复的操作总会有简洁的写法。

// Longhand 
let Tom = \'\'; 
for(let i = 0; i < 5; i ++) { 
  Tom += \'Tom \'; 
} 
console.log(str); // Tom Tom Tom Tom Tom 
 
// Shorthand 
\'Tom \'.repeat(5); // Tom Tom Tom Tom Tom ```
### 15、在数组中查找最大值和最小值
咋一看，额，用for循环吧，哦，不是的。

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

**前端视频方面大家可以关注我的b站,搜索“焖豆不闷”，上面上传了前端入门到精通（1000大合集）、0基础玩转微信小程序、5G时代使用Webview的正确姿势等视频，期待和大家在b站上互动噢！**