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的神秘面纱。

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

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

相关文章

元宇宙3D品牌营销虚拟场景提升客户对企业的黏性

在这个充满创意与想象的3D元宇宙时代&#xff0c;我们为您推出了全新的3D元宇宙场景在线制作编辑平台&#xff0c;让您轻松构建专属的虚拟展厅&#xff0c;展现无限可能。 3D元宇宙场景在线制作编辑平台允许您快速完成空间设计&#xff0c;根据您的个性化需求&#xff0c;自由设…

适合初学者人手一本的LLM大语言模型综述,爆火全网

今天给大家推荐一本大模型&#xff08;LLM&#xff09;这块的一本外文书&#xff0c;经过整理已经出中文版了&#xff0c;就是这本《大型语言模型综述》&#xff01;本书在git上有9.2k star&#xff0c;还是很不错的一本大模型方面的书。 本教程内容主要内容&#xff1a;中文版…

python cs socket通信

#server import socket import threading import json import select def send_data(client,addr): while(1): ssinput(f"要发送给{addr}输入&#xff1a;") client.send(ss.encode("utf-8")) pass def recv_data(client,add…

牛客热题:矩阵最长递增路径

&#x1f4df;作者主页&#xff1a;慢热的陕西人 &#x1f334;专栏链接&#xff1a;力扣刷题日记 &#x1f4e3;欢迎各位大佬&#x1f44d;点赞&#x1f525;关注&#x1f693;收藏&#xff0c;&#x1f349;留言 文章目录 牛客热题&#xff1a;矩阵最长递增路径题目链接方法一…

leetcode155 最小栈

题目 设计一个支持 push &#xff0c;pop &#xff0c;top 操作&#xff0c;并能在常数时间内检索到最小元素的栈。 实现 MinStack 类: MinStack() 初始化堆栈对象。void push(int val) 将元素val推入堆栈。void pop() 删除堆栈顶部的元素。int top() 获取堆栈顶部的元素。i…

关于LPC1768在线升级的实现的注意事项

开发环境&#xff1a;Keil 5 uVision V5.38.0.0 1、使用IAP的方式&#xff08;应用程序在线编程&#xff09; 2、在Flash中构建用于升级的不同区域 &#xff08;1&#xff09;引导区 &#xff08;2&#xff09;APP区 &#xff08;3&#xff09;升级代码存放区域 注意&…

阿里影业业绩大涨,除了沸腾的文娱市场还有什么原因?

影视文娱市场的火热仍在延续&#xff0c;新定档的电影和演出&#xff0c;不断引人关注这个行业的生机。而这个行业的支持者、受益者&#xff0c;就站在一线。 5月29日晚&#xff0c;阿里影业发布截至2024年3月31日的2024财年业绩公告。社会文娱消费的热情&#xff0c;对优质项…

深度学习笔记:2.Jupyter Notebook

Jupyter Notebook 常用操作快捷键魔法指令_jupyter notebook快捷键调用函数-CSDN博客https://blog.csdn.net/qq_26917905/article/details/137211336?ops_request_misc%257B%2522request%255Fid%2522%253A%2522171748112816800182160793%2522%252C%2522scm%2522%253A%25222014…

Linux 下安装docker

Linux 下安装docker 本机是centos 7 非root 用户安装 如果是root用户安装则以下所有命令去掉 sudo 安装gcc 查看虚拟机是否安装 这是安装好了的 命令 gcc --version[nullDocker module]$ gcc --version gcc (GCC) 4.8.5 20150623 (Red Hat 4.8.5-44) Copyright ? 2015 Fr…

视频生成框架EasyAnimate正式开源!

近期&#xff0c;Sora模型的热度持续上涨&#xff0c;社区中涌现了一些类Sora的开源项目&#xff0c;这些项目均基于Diffusion Transformer结构&#xff0c;使用Transformer结构取代了UNet作为扩散模型的基线&#xff0c;旨在生成更长、更高分辨率、且效果更好的视频。EasyAnim…

罗德与施瓦茨RS SMA100A 9KHZ-3GHZ或6GHZ信号发生器

R&S SMA100A 提供信号质量、速度和灵活性。R&S SMA100A 是一款高级模拟发生器&#xff0c;因其出色的特性而树立了标准。 它结合了卓越的信号质量和极高的设置速度。无论是在开发、生产、服务还是维护方面&#xff0c;R&SSMA100A 都能出色地完成任务。 罗德与施瓦茨…

空调外机清洁机器人设计

现在的空调&#xff0c;有很多安装在高层&#xff0c;一旦安装使用后&#xff0c;外机几乎不可能再清洗。因为费用高&#xff0c;清洁工人的钱应该是好几百还不止&#xff1b;清洁风险高&#xff0c;空调师傅需要高空作业&#xff0c;如果发生意外业主难以承担。但空调运行几年…

Web IDE 在线编辑器综合实践(Web IDE 技术探索 三)

前言 前面两篇文章&#xff0c;我们简单讲述了 WebContainer/api 、Terminal 的基本使用&#xff0c;离完备的在线代码编辑器就差一个代码编辑了。今天通过 monaco editor &#xff0c;来实现初级代码编辑功能&#xff0c;讲述的是整个应用的搭建&#xff0c;并不单独针对monac…

LeetCode-43. 字符串相乘【数学 字符串 模拟】

LeetCode-43. 字符串相乘【数学 字符串 模拟】 题目描述&#xff1a;解题思路一&#xff1a;模拟乘法&#xff0c;两个数中每一位数相乘的时候乘上他们各自的进制数&#xff0c;之后求和。循环时&#xff0c;分别记录各自的进制数背诵版&#xff1a;解题思路三&#xff1a;0 题…

项目-双人五子棋对战:匹配模块的实现(3)

完整代码见: 邹锦辉个人所有代码: 测试仓库 - Gitee.com 模块详细讲解 功能需求 匹配就类似于大家平常玩的王者荣耀这样的匹配功能, 当玩家点击匹配之后, 就会进入到一个匹配队列, 当匹配到足够数量的玩家后, 就会进入确认页. 在这里, 我们主要实现的是1 - 1匹配功能, 首先先…

注册windows系统服务

目录 一、把任意exe程序注册成windows系统服务 二、将bat文件或exe程序注册成windows服务 三、设置window服务示例 1、redis 2、ActiveMQ 3、tomcat 4、nginx 一、把任意exe程序注册成windows系统服务 1、方法一&#xff1a;使用windows自带的命令InstallUtil.exe 步骤…

每日一练 - BGP协议报文发送机制

01 真题题目 BGP 协议的报文都是周期性发送. A.正确 B.错误 02 真题答案 B 03 答案解析 BGP&#xff08;Border Gateway Protocol&#xff09;边界网关协议并不定期或周期性发送其报文。与某些路由协议&#xff08;如RIP&#xff09;不同&#xff0c;BGP采用触发更新&#x…

pycharm链接auto al服务器

研0提前进组&#xff0c;最近阻力需求是把一个大模型复现&#xff0c;笔者电脑18年老机子&#xff0c;无法满足相应的需求。因此租用auto dl服务器。本文记录自己使用pycharm&#xff08;专业版&#xff09;链接auto dl期间踩过的坑。 1.下载pycharm专业版 这一步不解释了&am…

逐步掌握最佳Ai Agents框架-AutoGen 九 RAG应用

在最近的几篇文章里&#xff0c;我们使用AutoGen实现了一些Demo。这篇文章&#xff0c;我们将使用AutoGen来完成RAG应用开发。 RAG应用 RAG全称"Retrieval-Augmented Generation",即检索增强生成&#xff0c;它是自然语言处理中的一项技术。这种模型结合了检索式&a…

Latex之图片排列的简单使用(以MiKTeX工具为例)

一、参考资料 Latex如何插入图片 Latex 学术撰写工具推荐&#xff08;在线、Windows、Mac、Linux&#xff09; 关于Latex并排多张图片及加入图片说明的方法 二、准备工作 1. 在线LaTex工具 Overleaf 2. 本地LaTex工具 MiKTeX 3. 测试用例 \documentclass{article} \ti…