正文

15个javascript优化技巧

李不要熬夜  2022-02-12  419

关键词：

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

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站上互动噢！**

有个开发者总结这15优雅的javascript个技巧(代码片段)

...xff0c;有一线大厂面试完整考点、资料以及我的系列文章。JavaScript有很多很酷的特性&#x 查看详情

聊聊sql优化的15个小技巧(代码片段)

前言sql优化是一个大家都比较关注的热门话题，无论你在面试，还是工作中，都很有可能会遇到。如果某天你负责的某个线上接口，出现了性能问题，需要做优化。那么你首先想到的很有可能是优化sql语句，因为它的改造成本相... 查看详情

javascript的工作原理：解析抽象语法树（ast）+提升编译速度5个技巧(代码片段)

这是专门探索JavaScript及其所构建的组件的系列文章的第14篇。如果你错过了前面的章节，可以在这里找到它们：JavaScript是如何工作的：引擎，运行时和调用堆栈的概述！JavaScript是如何工作的：深入V8引擎&编写优化代码的5个... 查看详情

优雅编程|7个你应该掌握的javascript编码技巧

JavaScript是一个灵活性很强的语言，有很多和其他语言不一样的特性，本文分享7个日常开发中可以用到的JavaScript编码技巧，享受其优雅编程的快感。更多的编码技巧可以参阅《18个JavaScript代码的小技巧》和《24个Javascript代码优化... 查看详情

mysql15个有用的mysql/mariadb性能调整和优化技巧(代码片段)

...。这篇文章将告诉你一些基本的，但非常有用的关于如何优化MySQL/MariaDB性能的技巧。注意，本文假定您已经安装了MySQL或MariaDB。如果你仍然不知道如何在系统上安装它们，你可以按照以下说明去安装：在RHEL/CentOS7上安装LAMP在Fedo... 查看详情

10个技巧！实现vue.js极致性能优化（建议收藏）

导语 | Vue是一套用于构建用户界面的渐进式的JavaScript框架。它具有体积小，更高的运行效率，双向数据绑定，生态丰富、学习成本低等优点，所以Vue也被广泛用在移动端跨平台框架上。接下来，我将为大家... 查看详情

高性能的javascript代码，优化技巧分享

JavaScript作为当前最为常见的直译式脚本语言，已经广泛应用于Web应用开发中。为了提高Web应用的性能，从JavaScript的性能优化方向入手，会是一个很好的选择。本文从加载、上下文、解析、编译、执行和捆绑等多个方... 查看详情

javascript优化项目代码技巧之语言基础

...eval7.消除switch歧义8.不要省略块标志{} Javascript的弱类型以及函数作用域等规则使用编写Javascript代码极为容易，但是编写可维护、高质量的代码却变得十分困难，这个系列的文章将总结查看详情

101个mysql调试和优化技巧

101个MySQL调试和优化技巧MySQL是一个功能强大的开源数据库。随着越来越多的数据库驱动的应用程序，人们一直在推动MySQL发展到它的极限。这里是101条调节和优化MySQL安装的技巧。一些技巧是针对特定的安装环境的，但这... 查看详情

聊聊sql优化的15个小技巧(代码片段)

前言sql优化是一个大家都比较关注的热门话题，无论你在面试，还是工作中，都很有可能会遇到。如果某天你负责的某个线上接口，出现了性能问题，需要做优化。那么你首先想到的很有可能是优化sql语句ÿ... 查看详情

howjavascriptworks(javascript工作原理)渲染引擎及性能优化小技巧(代码片段)

...　　　　 |----> RenderTreeCSSOMtree ----| 这是JavaScript工作原理的第十一章。迄今为止，之前的JavaScript工作原理系列文章集中于关注JavaScri 查看详情

20个实用而专业的javascript技巧

我为你收集了一系列有用的JavaScript技巧，让你的代码看起来更优雅和专业。我希望你会喜欢它！1、单线If-Else在JavaScript中，你可以使用三元条件运算符来压缩if-else语句。例如：constage=10;letgroup;//LONGVERSIONif(age>=18){group="Adult";}els... 查看详情

pytorch中，18个速度和内存效率优化技巧(代码片段)

PyTorch中，18个速度和内存效率优化技巧文章目录PyTorch中，18个速度和内存效率优化技巧你为什么要读这篇文章？列表:示例代码指导思想1、把数据移动到SSD中2.在加载数据和数据增强的时候异步处理3.使用pinnedmemory来降... 查看详情

生成对抗网络gans15个常用训练技巧

目录1、Normalizetheinputs标准化输入2、Amodifiedlossfunction改进损失函数3、UseasphericalZ使用sphericalZ4、BatchNorm 查看详情

21个值得收藏的javascript技巧(代码片段)

　在本文中列出了21个值得收藏的Javascript技巧,在实际工作中,如果能适当运用,则大大提高工作效率。　　1?Javascript数组转换为CSV格式　　首先考虑如下的应用场景,有一个Javscript的字符型(或者数值型)数组,现在需要转换为以逗号... 查看详情

聊聊sql优化的15个小技巧(代码片段)

前端知识：12个非常实用的javascript小技巧

在这篇文章中将给大家分享12个有关于JavaScript的小技巧。这些小技巧可能在你的实际工作中或许能帮助你解决一些问题。使用!!操作符转换布尔值有时候我们需要对一个变量查检其是否存在或者检查值是否有一个有效值，如果存... 查看详情

几个优雅的javascript运算符使用技巧

...能的更新，比如销毁，箭头功能，模块，它们极大的改变JavaScript编写方式，可能有些人喜欢，有些人不喜欢，但像每个新功能一样，我们最终会习惯它们。新版本的ECMAScript引入了三个新的逻辑赋值运算符：空运算符，AND和OR运... 查看详情