js性能优化小技巧(已更新)

news2024/12/23 17:21:56

1、if多条件判断

如果if里面包含多个判断条件,可以把判断条件存到一个数组,然后在去这个数组中检索”输入的值“是否满足条件;

function testIf(x) {
      // 冗余
      if (x === 'a' || x === 'b' || x === 'c' || x === 'd') {
            console.log(x)
      }
      // 简洁
      if (['a', 'b', 'c', 'd'].includes(x)) {
            console.log(x)
      }
}
testIf('c')

2、if…else…

单个if else可以直接使用变量赋值替代,省时省力

function testIfElse(x) {
      // 冗余
      let flag = false
      if (x > 100) {
            flag = true
      } else {
            flag = false
      }
      // 简洁
      let flag = x > 100
      console.log(flag)
}
testIfElse(20)

3、Switch条件

如果需要根据条件判断,执行不同的函数,并且此时判断的条件比较多的时候;可以使用,将条件进行对象存储,然后在判断对象中是否存在”该条件“进行,函数执行处理;

function test1() {
      console.log('条件1')
}
function test2() {
      console.log('条件2')
}
function test3() {
      console.log('条件3')
}
function testSwitch(key) {
      // 冗余
      switch (key) {
            case 1:
                  test1()
                  break;
            case 2:
                  test2()
                  break;
            case 3:
                  test3()
                  break;
            default:
                  break;
      }
      // 简洁
      var data = {
            1: test1,
            2: test2,
            3: test3
      }
      data[key] && data[key]() //先判断存在该条件 再执行
}
testSwitch(2)

如果需要根据条件判断,执行不同的函数。

function testIfFun(x) {
      // 冗余
      if (x == 1) {
            test1()
      } else {
            test2()
      }
      // 简洁
      (x == 1 ? test1 : test2)()
}
testIfFun(3)

4、 隐式返回

如果返回只有一行代码,可以使用箭头函数代替普通函数,并且不用再写 return

// 冗余
function testReturn(x) {
      return x * 10
}
// 简洁
let num = x => x * 11
console.log(testReturn(10),num(10)) //100,110

5、幂乘

某个数的几次方,一般使用Math.pow(),也可以使用**直接次方。

 console.log(Math.pow(2,4),2**4) //16,16

6、扩展运算符

拷贝一个数组可以用点运算符,注意是深拷贝。

var A = [{
      name: 'sh',
      age: 20
}]
var B = [1, 2, 4]
var newA = [...A]
var newB = [...B]
newA[0].name = 'wq'
newB[0] = 3
console.log(newB, B) //[3, 2, 4], [1, 2, 4] 算是深拷贝,只能深拷贝一层
console.log(newA, A) //[{name: 'wq', age: 20}],[{name: 'wq', age: 20}] 浅拷贝

7、find过滤

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];
            }
      }
}
// 简洁
let filterStudent = data.find(item => 
      item.type === 'student' && item.name === 'Shanguagua'
)
console.log(findStudent('Shanguagua'),filterStudent) 
//{type: 'student', name: 'Shanguagua'},{type: 'student', name: 'Shanguagua'}

注意:箭头函数有花括号{}与没有的区别

  • () => {} 默认没有返回值,如果需要返回值需要写```return```

  • () => 1 + 1 默认返回

8、在数组中查找最大值和最小值

const arr = [1, 2, 5]
console.log(Math.max(...arr)) //5
console.log(Math.min(...arr)) //1

9、优化循环

  • 减值迭代

大多数循环使用一个从0开始、增加到某个特定值的迭代器,在很多情况下,从最大值开始,在循环中不断减值的迭代器更加高效

  • 简化终止条件

由于每次循环过程都会计算终止条件,所以必须保证它尽可能快,也就是说避免属性查找或者其它的操作,最好是将循环控制量保存到局部变量中,也就是说对数组或列表对象的遍历时,提前将length保存到局部变量中,避免在循环的每一步重复取值。

var list = [1,2,5];
for (var i = 0; i < list.length; i++) {
    //……
}

//替换为:
var list = [1,2,5];
for (var i = 0, l = list.length; i < l; i++) {
    //……
}
  • 简化循环体

循环体是执行最多的,所以要确保其被最大限度的优化

  • 使用后测试循环

在JavaScript中,我们可以使用for(;;),while(),for(in)三种循环,事实上,这三种循环中for(in)的效率极差,因为他需要查询散列键,只要可以,就应该尽量少用。for(;;)和while循环,while循环的效率要优于for(;;),可能是因为for(;;)结构的问题,需要经常跳转回去。

var arr = [1, 2, 3, 4, 5, 6, 7];
// 常规写法
var sum = 0;
for (var i = 0, l = arr.length; i < l; i++) {
      sum += arr[i];
}
// 优化
var sum = 0, l = arr.length
while (l--) {
      sum += arr[l]
}
console.log(sum)

最常用的for循环和while循环都是前测试循环,而如do-while这种后测试循环,可以避免最初终止条件的计算,因此运行更快。

前测试循环while和后测试循环do-while区别

(1)从定义上看,前置检测循环在程序开头有测试条件(决定循环体能否得到执行的语句);后置检测循环的测试条件在程序最后。

(2)后置检测循环的循环体总会至少执行一次;对于前置检测循环,如果循环条件在第一轮就为假,循环体根本不会被执行。

(3)在进入前置检测循环之前,循环条件中的变量必须初始化;后置监测循环的循环条件中的变量可以在循环体中被初始化。

10、避免全局量

尽可能避免全局变量和函数, 尽量减少全局变量的使用,因为在一个页面中包含的所有JavaScript都在同一个域中运行。所以如果你的代码中声明了全局变量或者全局函数的话,后面的代码中载入的脚本文件中的同名变量和函数会覆盖掉(overwrite)你的。

// 不推荐方式:定义全局变量和全局函数
var current = null;

function init() {
      console.log('init')
}

function change() {
      console.log('change')
}

function verify() {
      console.log('verify')
}
// 避免全局变量和全局函数
// 解决方法1 如果变量和函数不需要在“外面”引用,那么就可以使用一个没有名字的方法将他们全都包起来。
(function () {
      var current = null;

      function init() {
            console.log('init')
      }

      function change() {
            console.log('change')
      }

      function verify() {
            console.log('verify')
      }
})()
// 解决方法2 如果变量和函数需要在“外面”引用,需要把你的变量和函数放在一个“命名空间”中。
// 我们这里用一个function做命名空间而不是一个var,因为在前者中声明function更简单,而且能保护隐私数据
myNameSpace = function () {
      var current = '000';

      function init() {
            console.log('init')
      }

      function change() {
            console.log('change')
      }

      function verify() {
            console.log('verify')
      }
//所有需要在命名空间外调用的函数和属性都要写在return里面
      return {
            init:init,
            change:change,
            verifyNew:verify,//可以为函数和属性命名一个别名
            current
      }
}
console.log(myNameSpace())

11、性能方面的注意事项

1、尽量使用原生方法

2、switch语句相对if较快

通过将case语句按照最可能到最不可能的顺序进行组织

3、位运算较快

当进行数字运算时,位运算操作要比任何布尔运算或者算数运算快

4、巧用||和&&布尔运算符

function eventHandler(e) {
    if (!e) e = window.event;
}
//可以替换为:
function eventHandler(e) {
    e = e || window.event;
}
if (myobj) {
    doSomething(myobj);
}
//可以替换为:
myobj && doSomething(myobj);

12、何时用单引号,何时用双引号

虽然在JavaScript当中,双引号和单引号都可以表示字符串, 为了避免混乱,我们建议在HTML中使用双引号,在JavaScript中使用单引号,但为了兼容各个浏览器,也为了解析时不会出错,定义JSON对象时,最好使用双引号

13、正确使用==和===

避免在if和while语句的条件部分进行赋值,如if (a = b),应该写成if (a == b),但是在比较是否相等的情况下,最好使用全等运行符,也就是使用===和!==操作符会相对于==和!=会好点。==和!=操作符会进行类型强制转换

var valueA = "1";
var valueB = 1;
if (valueA == valueB) {
    alert("Equal");
}
else {
    alert("Not equal");
}
//output: "Equal"
if (valueA === valueB) {
    alert("Equal");
}
else {
    alert("Not equal");
}
//output: "Not equal"

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/154958.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

前端vue3+typescript搭建vite项目(初识vite+项目配置完善+屏幕适配)

一、文章引导 #mermaid-svg-zCCPryl8cvuE0QpI {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-zCCPryl8cvuE0QpI .error-icon{fill:#552222;}#mermaid-svg-zCCPryl8cvuE0QpI .error-text{fill:#552222;stroke:#55222…

MySQL (五)------多表查询练习

我们在开发中&#xff0c;根据不同的业务需求往往需要通过2张及以上的表中去查询需要的数据。所以我们有必要学习2张及以上的表的查询。其实不管是几张表的查询&#xff0c;都是有规律可循的。 1.1 准备数据 -- 部门表 CREATE TABLE dept (id INT PRIMARY KEY PRIMARY KEY, --…

Databend 开源周报 第 75 期

Databend 是一款强大的云数仓。专为弹性和高效设计。自由且开源。即刻体验云服务&#xff1a;https://app.databend.com 。 What’s New 探索 Databend 本周新进展&#xff0c;遇到更贴近你心意的 Databend 。 Features & Improvements ✨ Format 实现 JSON 输出格式 …

C++模板进阶(非类型模板参数 + 模板特化)

我们另一篇模板初阶介绍链接&#xff1a;http://t.csdn.cn/Ox8Dm 目录 一、非类型模板参数 1.1 非类型模板参数概念 1.2 模板类型的静态数组 二、模板特化 2.1 函数模板特化 2.2 类模板特化 2.2.1 类模板全特化 2.2.2 类模板半特化&#xff08;偏特化&#xff09; 2.2.…

Facebook运营主页需要注意的几个问题

Facebook运营主页需要注意的几个问题主页的权重和流量都是决定流量的关键因素&#xff0c;也就是我们常说的引流&#xff0c;而流量又是需要转化的&#xff0c;因为只有用户认可你&#xff0c;才会有更多的点击、收藏、分享和主页的链接。在社交媒体时代要想更好地推广品牌产品…

openssl 编译动态库 win11 vs2022

官网 openssl官网 安装perl activestate_perl_官网 需要下载cli_installer 下载后双击下载好的exe 一般就是下面这个执行文件 state-remote-installer.exe 需要按照提示在powershell中执行网页提示的命令。 安装nasm nasm官网 以管理员方式运行安装 并加入环境变量中…

《MySQL高级篇》十、数据库其他调优策略

文章目录1.数据库调优的措施1.1调优的目标1.2 如何定位调优问题1.3 调优的维度和步骤第1步&#xff1a;选择适合的DBMS第2步:优化表设计第3步:优化逻辑查询第4步:优化物理查询第5步:使用Redis或 Memcached 作为缓存第6步&#xff1a;库级优化2. 优化MySQL服务器2.1 优化服务器硬…

定时任务、cron表达式、springBoot整合定时任务和异步任务-59

一&#xff1a;定时任务 1.1 官网地址 http://www.quartz-scheduler.org/documentation/quartz-2.3.0/tutorials/crontrigger.html 1.2 cron表达式 Cron表达式是一个字符串&#xff0c;字符串以5或6个空格隔开&#xff0c;分为6或7个域&#xff0c;每一个域代表一个含义&am…

【Nacos】一文为你揭露它的强大

注&#xff1a;为什么要使用nacos作为注册中心呢&#xff1f;这样的好处在哪呢&#xff1f;一、 什么是nacosNacos 是 Dynamic Naming and Configuration Service 的首字母简称&#xff1b;一个更易于构建云原生应用的动态服务发现、配置管理和服务管理平台。Nacos 致力于帮助您…

java 方法看这一篇文章就够了

第一章 方法概念 1实现特定功能的一段代码,可反复被调用计算机 — 模拟现实 — 通过软件控制硬件 比如豆浆机 — 里面的微控制器 — 控制豆浆机 右图面板上有很多种模式 每一种模式对应不同的搅拌次数、搅拌时间、烧水温度等… 这些硬件的动作都需要软件的控制 硬件的每一种模式…

el-table使用sortablejs实现行、列拖拽

效果图 代码如下 <script src"//unpkg.com/sortablejs1.7.0/Sortable.js"></script> <script src"https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <link rel"stylesheet" href"//unpkg.com/eleme…

文件或目录损坏且无法读取?正确恢复文件的4个方法

你有没有遇到过“文件损坏已无法读取”的提示窗口&#xff1f;相信使用电脑的你&#xff0c;或多或少都会遇到过&#xff0c;尤其是我们使用硬盘或者移动硬盘的时候。 遇到这种问题&#xff0c;我们第一时间不是按照系统提示去删除或者格式化&#xff0c;而是要寻找合适的方法…

DES算法笔记

文章目录DES简介FeistelDES算法流程EncipheringKey ScheduleDecipheringThe Cipher Function f(R, K)Triple DES算法OpenSSL接口S-box实现参考资料DES简介 发布文档&#xff1a;FIPS 46-3, 1977 block size: 8 bytes.Key Size: 8 bytes 64 bits, 原本设计每隔7 bits保留一个…

关于string boot项目实训课(准备工作)

一、页面–web页面–java代码之间的逻辑关系 首先在java文件夹下创建一个java类 Controller//类上面要加入注解 public class TestController {GetMapping("login")//对应web请求--localhost:9991/Login//类方法&#xff0c;用于处理逻辑public String login(Strin…

实时Windows AD用户帐户锁定分析器工具

实时帐户锁定工具提供有关域帐户锁定原因的实时报表。本机Windows Active Directory帐户锁定策略是阻止连续、时限性、寻求登录的密码猜测尝试的一种实用方法&#xff0c;这会由于使用错误的密码而导致帐户锁定。帐户锁定的其他原因可能包括&#xff1a;由于采用严格的密码设置…

【项目】 改造原前端ViewUI框架,使其支持ElementUI 与 Avue

一、背景说明 因为原来前端的同事习惯用&#xff0c;ViewUI框架&#xff0c;于是基线版本的项目&#xff0c;都是使用的ViewUI框架搭建的。 但是&#xff0c;这个ViewUI的表格&#xff0c;是引用的第三方的vux的框架&#xff0c;在网上很少人使用&#xff0c;所以遇到问题&…

如果为产业互联网时代的发展寻找一个注脚的话,新产业无疑是一个最主要的特征

如果为产业互联网时代的发展寻找一个注脚的话&#xff0c;新产业无疑是一个最主要的特征。在这个时代&#xff0c;诸多原本看似无法改变的产业有了改变的可能性&#xff0c;诸多看似无法破解的痛点和难题有了新的解决方案。如果一定要找到导致这一蜕变的根本原因的话&#xff0…

用户积分和积分排行榜功能微服务实现

文章目录需求分析什么是积分积分的获取为啥需要积分服务数据库表创建 ms-points 积分微服务新增用户积分功能用户积分实体积分控制层积分业务逻辑层数据交互mapper层网关 ms-gateway 服务添加积分微服务路由用户服务中添加用户积分逻辑项目测试积分排行榜TopN(关系型数据库)构造…

記錄centos8 升級Python3.6到Python3.9以及可能遇到的問題

目录下载Python3.9.9可能出現的問題及解決方案安裝python3.9可能出現的問題及解決方案建立Python3和pip3的软鏈接:查看Python3和Pip3是否正确的被安装&#xff1a;将/usr/local/python3/bin加入PATHCentos8-默认的Python、python2版本为2.7&#xff0c;python3版本為3.6&#x…

迭代器深入理解

目录 vector 例子引入 迭代器的价值 通过vector和list 迭代器的差异再次深入理解 vector 例子引入 在学习vector底层erase&#xff0c;碰到迭代器失效的时候我有个疑惑&#xff0c;为什么sgi 版&#xff08;Linux g使用的&#xff09;库里实现的迭代器对于有些迭代器失效情…