JS包装类:为什么循环中为什么建议用变量存储str.length进行循环判断?

2024-06-05 19:36

本文主要是介绍JS包装类:为什么循环中为什么建议用变量存储str.length进行循环判断?,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

前言

Javascript通常我们在遍历一个字符串的时候通常使用的方式是

var str ="abcdefg";
for(let i=0;i<str.length;i++){}

但在最近的学习中,有人建议我最好应该是下面这样执行。

var str ="abcdefg";
for(let i=0,len= str.length;i<len;i++){}

我有点疑惑,这用一个变量存储字符串的长度不是多此一举吗?为什么还建议我使用以下代码呢?抱着怀疑的态度我决定进行效率测试。下面是测试代码。

function test1() {let time1 = Date.now();for (let i = 0; i < str.length; i++) { }let time2 = Date.now();return time2 - time1;
}
function test2() {let time1 = Date.now();for (let i = 0,len = str.length; i < len; i++) { }let time2 = Date.now();return time2 - time1;
}
console.log(test1());
console.log(test2());

当测试集长度为10000长度以下基本没有区别,但是当长度来到十万级别百万的时候,时间消耗确实是有差距的,但都是毫秒级差距。但是虽然效率相差不大,但是到底是什么原因导致的时间上的差距呢?这里就得要先介绍一下JS的基本类了。

JS的原始(基本)数据类型

  • 字符串(String) :任何文本信息,用单引号 ' ' 或双引号 " " 包围。
  • 数字(Number) :整数或浮点数,包括 Infinity 和 NaN。
  • 布尔值(Boolean) :只有两个值,truefalse
  • 未定义(Undefined) :表示变量已被声明但没有赋值,或被直接初始化为 undefined
  • Null:表示一个特意设置为空的对象引用,只有一个值 null
  • Symbol(ES6起):一种唯一且不可变的数据类型,常用于对象的键,以避免键名冲突。
  • Bigint (ECMAScript 2020 (ES2020)):能够安全地存储极大或极小的整数值

原始数据类型(也称作基本数据类型或者primitive data types)在JavaScript中是不具备自己的方法和属性的。

问题来了,字符串String是原始数据类型,为什么却拥有.length属性呢?而且不只是.length属性,字符串类型还拥有贼多的方法。。。相信已经有小伙伴疑惑了?这不是自相矛盾吗?

但是事实确是两者都是正确的,原始数据类型确实是没有属性和方法,JS在对原始数据进行属性和方法的相关操作的时候会进行包装,下面引出我们真正的猪脚—包装类

包装类

原始值(字符串、数字、布尔值和Symbol等)在JavaScript中通常不具备属性和方法。然而,包装类(String、Number、Boolean、Symbol对象)的引入,让这些基本类型在特定情境下也能穿上“对象”的外衣,短暂拥有方法和属性。

相信大家都使用过类型强转类似String(),Number()等,这种就是将一个基本类型,先将一个基本类型包装成一个对象,在返回一个原始数据类型后进行销毁。如下面这行代码:

var str ="1231213123123";
console.log(str.length);

这两行代码JS将会这样执行:

  1. 临时创建一个String对象,该对象包装了原始的字符串值
  2. 然后通过这个对象获取长度
  3. 之后这个临时对象会被销毁

难道每次使用方法和属性都要进行对象的创建与销毁吗?答案是:是的,每次使用都要进行创建与销毁。

这下知道为什么在循环中最好先使用一个变量存储字符串的长度,而不是每次循环都直接使用字符串.length属性进行判断了吧。因为每次循环都会进行包装类的创建和销毁,虽然在数据集小的情况下效率影响不大但好歹是有点影响不是.![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/7c2c195c128d46278823bd2f7c5a326c.jpeg#pic_center)

结语

总而言之,JavaScript通过对象、包装类以及对未定义属性的处理,展现了其设计哲学的深度与广度。它既是一门灵活多变的语言,也是开发者手中的利器,允许我们在编码的旅途中,以最少的约束,创造无限可能。理解这些机制,不仅能够提升我们的编码技巧,更能在深层次上领悟JavaScript的设计美学,让我们的代码更加优雅、高效。在这条探索之路上,让我们继续前行,揭开更多JavaScript的神秘面纱。

这篇关于JS包装类:为什么循环中为什么建议用变量存储str.length进行循环判断?的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1033976

相关文章

GO语言短变量声明的实现示例

《GO语言短变量声明的实现示例》在Go语言中,短变量声明是一种简洁的变量声明方式,使用:=运算符,可以自动推断变量类型,下面就来具体介绍一下如何使用,感兴趣的可以了解一下... 目录基本语法功能特点与var的区别适用场景注意事项基本语法variableName := value功能特点1、自动类型推

Nginx中配置使用非默认80端口进行服务的完整指南

《Nginx中配置使用非默认80端口进行服务的完整指南》在实际生产环境中,我们经常需要将Nginx配置在其他端口上运行,本文将详细介绍如何在Nginx中配置使用非默认端口进行服务,希望对大家有所帮助... 目录一、为什么需要使用非默认端口二、配置Nginx使用非默认端口的基本方法2.1 修改listen指令

从基础到进阶详解Python条件判断的实用指南

《从基础到进阶详解Python条件判断的实用指南》本文将通过15个实战案例,带你大家掌握条件判断的核心技巧,并从基础语法到高级应用一网打尽,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一... 目录​引言:条件判断为何如此重要一、基础语法:三行代码构建决策系统二、多条件分支:elif的魔法三、

使用SpringBoot+InfluxDB实现高效数据存储与查询

《使用SpringBoot+InfluxDB实现高效数据存储与查询》InfluxDB是一个开源的时间序列数据库,特别适合处理带有时间戳的监控数据、指标数据等,下面详细介绍如何在SpringBoot项目... 目录1、项目介绍2、 InfluxDB 介绍3、Spring Boot 配置 InfluxDB4、I

MySQL按时间维度对亿级数据表进行平滑分表

《MySQL按时间维度对亿级数据表进行平滑分表》本文将以一个真实的4亿数据表分表案例为基础,详细介绍如何在不影响线上业务的情况下,完成按时间维度分表的完整过程,感兴趣的小伙伴可以了解一下... 目录引言一、为什么我们需要分表1.1 单表数据量过大的问题1.2 分表方案选型二、分表前的准备工作2.1 数据评估

MySQL进行分片合并的实现步骤

《MySQL进行分片合并的实现步骤》分片合并是指在分布式数据库系统中,将不同分片上的查询结果进行整合,以获得完整的查询结果,下面就来具体介绍一下,感兴趣的可以了解一下... 目录环境准备项目依赖数据源配置分片上下文分片查询和合并代码实现1. 查询单条记录2. 跨分片查询和合并测试结论分片合并(Shardin

MySQL中读写分离方案对比分析与选型建议

《MySQL中读写分离方案对比分析与选型建议》MySQL读写分离是提升数据库可用性和性能的常见手段,本文将围绕现实生产环境中常见的几种读写分离模式进行系统对比,希望对大家有所帮助... 目录一、问题背景介绍二、多种解决方案对比2.1 原生mysql主从复制2.2 Proxy层中间件:ProxySQL2.3

SpringBoot结合Knife4j进行API分组授权管理配置详解

《SpringBoot结合Knife4j进行API分组授权管理配置详解》在现代的微服务架构中,API文档和授权管理是不可或缺的一部分,本文将介绍如何在SpringBoot应用中集成Knife4j,并进... 目录环境准备配置 Swagger配置 Swagger OpenAPI自定义 Swagger UI 底

基于Python Playwright进行前端性能测试的脚本实现

《基于PythonPlaywright进行前端性能测试的脚本实现》在当今Web应用开发中,性能优化是提升用户体验的关键因素之一,本文将介绍如何使用Playwright构建一个自动化性能测试工具,希望... 目录引言工具概述整体架构核心实现解析1. 浏览器初始化2. 性能数据收集3. 资源分析4. 关键性能指

Nginx进行平滑升级的实战指南(不中断服务版本更新)

《Nginx进行平滑升级的实战指南(不中断服务版本更新)》Nginx的平滑升级(也称为热升级)是一种在不停止服务的情况下更新Nginx版本或添加模块的方法,这种升级方式确保了服务的高可用性,避免了因升... 目录一.下载并编译新版Nginx1.下载解压2.编译二.替换可执行文件,并平滑升级1.替换可执行文件