JavaScript 处理字符串数组数据方法

news2024/10/6 18:27:24

323d3e8852994204b2cb57cda9f5be95.png

        前端三件套中 JavaScript 就是充电处理业务逻辑的一个角色,在很多情况之下,或像在做项目之中去发起一些数据请求之后待服务器响应回馈给到客户端的时候,对于返回的数据需要进行一个格式的处理,比如有JSON,字符串,XML等等这些数据格式,有时需要格式转化,有时需要简单的截取其中的某个字符等等,那么本篇讲关于Javascript中一些处理的方法。

substring

         substring() 方法是比较常见和常用的方法,可以从字符串中提取一些字符,下面来用一下:

substring(0, i)

        从下标为 0 开始截取到下标为 i 中间的内容。

var str = 'I am a teacher!'

str.substring(0,3)    // I a
str.substring(0,4)    // I am
str.substring(0,5)    // I am 

da9e25c3ce40408d9017810f8b4d1414.png


substring(i)

        从下标为 i 开始往后截取,即下标为 i 之前的内容均去除。

var str = 'I am a teacher!'

str.substring(5)        // a teacher!

a856f2aa5871457baf7a5880a4de58e7.png36a4ea729b724dac95a57cd061a98042.png


 substring(str.length - i) 

        从右边的第 i 个字符开始截取,str.length 是长度,长度是从1开始计数,所以从右边的第 i 个,不是右边开始倒数下标;(这里有人理解为长度- i = Number,那么对应不就是从下标第几个开始吗?如果这么想的话直接用substring(i)这个方便吗?所以这个是方便比较长度字符串且内容是靠后,从右边截取会更快),substring(str.length - i,str.length) 皆可。

var str = 'I am a teacher!'

str.substring(str.length - 6)        // acher!

635c4ee69b154097b2ceed34e130b7e0.pngef793d1b682f488fbfefa91824730672.png 


substring(0,str.length - i)

        从右边的第 i 个字符开始截取掉获取前面的内容。

        substring(str.length - i)截取的是从右边第 i 个字符开始的内容,前面的内容则通通不要,反而substring(0,str.lenght - i)反过来,截取除去从右边第 i 个字符开始的内容,即第 i 个之前的内容。

var str = 'I am a teacher!'

str.substring(0, str.length - 6)        // a teacher!

e29448aeb27449bb8f86a911b6fd0856.png56cec7e7ea5647e7b33882e57b572325.png


substring(0,indexOf(midChar))

        从开始截取到某个字符出现,indexOf() 返回第一次出现的元素。

var str = 'I am a teacher!'

str.substring(0, str.indexOf('c'))        // I am a tea

38b887eb695b412dae9e2e6afce67b05.png6f676eb4947949dba2c7b9673bc2f70c.png


 subString(0, str.indexOf(midStr)+midStr.length)

        从开始截取到某个字段出现,截取该字段的第一次出现,midStr 指指定的某个字段。

var str = 'I am a teacher!'
var sub = 'ch'

str.substring(0, (str.indexOf(sub))+sub.length)    // I am a teach

d257e0d59bc8402d8f1476ebd310fc71.pngc4537cc8f2184078bc3afd45e88e7a93.png65b830c874524ab39ce4fdf991cbe439.png


replace

        替换,将字符串中的某个字符或字段进行替换,replace 也是非常常见的。

var str = 'I am a teacher!'


str.replace("teacher","student")    // I am a student!

2d410a22925a4584bf2cca03a6f851ec.pngfc90d121c65445f08bd6ad2b6b0d9e2e.png


        讲到这个substring,当然就有这个substr,相信大家也使用碰到过,可以来看一下substr的用法,区别substring 和 substr.

substr(start,length) 

        start 下标 ,length 截取长度;

        根据上述substring的用法知道substring用法是substring(from,to),从from要截取开始的下标to去到截取末尾的位置,或者只有开始下标substring(to);substr的第二个参数是截取的长度,下面来看一下使用对比:

f50e3c4a517349c2ae06584e6339bdf7.png

         好像没什么区别啊,substring(from,to)中的第一个参数下标基本都是0,那么可以负数吗?而substr是否可以是负数,下面来看一下:

var str = 'I am a teacher!'

str.substring(0,8)     // I am a t
str.substring(-1,8)    // I am a t
str.substring(-2,8)    // I am a t
str.substring(-3,8)    // I am a t

88652b24e5e84788b8c7c0dbabe84c7e.png

        来看一下 substr 的第一个参数是负数: 

var str = 'I am a teacher!'

str.substr(0,8)     // I am a t
str.substr(-1,8)    // I am a t
str.substr(-2,8)    // I am a t
str.substr(-3,8)    // I am a t

8b931af520ec4ac6a7817ee5ed77e7c1.png

        差别到这里就看出来,-1 是倒数的第一个字符,-2 则是倒数的第二个字符,以此类推。而 (-1,8)就是倒数第一个字符开始截取8个长度。下面来多测试几个:

874d9cb1546a408b9506dcb12f601d1e.pngfc70bd4a2e7e416282c75ff0412c8779.png


substr(start)         

        当然了substr是可以不带第二参数的,substr的第二个参数表示的是截取长度。

var str = 'I am a teacher!'

str.substr(0)     // I am a teacher!
str.substr(1)     //  am a teacher!
str.substr(2)     // am a teacher!
str.substr(-7)    // eacher!

a7baa26527724df998b895655384d7df.png81a2c92aece84419b0165bea119f1863.png


数组

        下面来看一下处理数组的一些方法,下面来一个简单的数组,一般在处理数据中的一些数据也是有数组,二维数组,有值,有对象以及混合型等多元形式,分别演示下:

e058023bfbdc4bc7b7b6e81af5cd01bf.png3fb587b7e84f41b291865871d5f570bd.pnga9e9e1c2a3f04c44a6686a108bc33710.pngb354cba7f73a41b5a6e7b52c55575371.png

         当然还有其他的形式出现,这里不再过多的拓展开来,我们来讲几个方法来处理数组中一些数据处理。


splice

         使用 splice() 方法来处理数据,实现增删改。

        splice 语法格式: array.splice ( start, count , items )

        start 是删除数组元素的开始下标(必须),count 删除元素的个数,items 则是插入数组的元素

删除 splice(i)

        一个参数,数组会删除从给定索引到结束的所有元素,原数组会被修改。

var arr = [1, 2, 3, 4, 5, 6]

var del = arr.splice(2)    

console.log(arr)    // [ 1, 2 ]
console.log(del)    // [ 3, 4 , 5 ,6 ]

c2528fb37a4d4ade97017397ff507268.pngb4013476c1c64a01b103d245f98e849e.png

删除 splice(i,l)

        在 arr 数组中删除了从下标2开始的索引到结束所有元素,那么如果只删除数组中的3,让数组arr为 [ 1,2,4,5,6 ],可以如下操作:

var arr = [1, 2, 3, 4, 5, 6]

var del = arr.splice(2,1)    

console.log(arr)    // [ 1, 2, 4 , 5 ,6 ]
console.log(del)    // [ 3 ]

ff6cd1bf4a7d4c18a3aaf26074352488.png

删除3,4,让数组为 [ 1, 2, 4, 5 ] ,如下:

var arr = [1, 2, 3, 4, 5, 6]

var del = arr.splice(2,2)    

console.log(arr)    // [ 1, 2, 5 ,6 ]
console.log(del)    // [ 3, 4 ]

fc3f12b29a5d4073af044a8a9fb14944.png

        如果这个数组足够长,那么我想删除倒数的数组,还是需要从开始的索引往下数吗?splice()方法的第一个参数可以是正数或者负数。

正数则表示 从左边往右定位索引,而负数则不是,表示从右边到左边指定元素

e6f7e7ac315b46ba87ee3ba7aed7acba.png


 添加 splice(i,l,s)

         使用splice在数组中添加元素,第三个参数则是添加的元素;

2c04687cfc3c405897a28d7a8c88aed9.png

        这是当前arr数组的元素,需要来补全中间的两个数字3,4.

91e2d5700f7440789c22767371548e0a.png

b41aaa204ed04b4ebd3495dba02577cd.png

         加入4也是同理,那么这是一个一个的加,第三个参数其实是可以插入多个元素的。可以这样来修改:

var arr = [ 1, 2, 5, 6 ]

arr.splice(2,0,3,4)    // [ 1, 2, 3, 4, 5, 6 ]

b9b41db1955f43189c213a1607750c40.png


替换 splice(i,l,s)

        在数组中添加元素 splice 中的第二个参数则为0,不删除只往数组添加元素,替换则第二个参数则是要替换的索引下标,第三个参数则是要替换的元素。

var arr = [ 1, 2, 2 ]

arr.splice(2,1,3)

3d5ac282028644e389c97d0e25df20eb.png


slice() 

        slice() 截取数组,splice() 与 slice() 这两个方法很是相近,但是它仅能够截取数组中指定区段的元素,并返回这个子数组,slice() 有两个参数.

slice(s) 

        第一个参数的正负与splice的第一个参数一样;

var arr = [ 1,2,3,4,5,6 ]

arr.slice(2)    // 3,4,5,6

2c51b491fe1b4bb49d20000f963f501c.png606b0c0c9bf24a9f9edc3b3e7c381bef.png


splice(s,e)

         第一个参数为起始位置,而第二个参数则为截取的末位置,同理两个参数可正负;

var arr = [ 1,2,3,4,5,6 ]

arr.slice(2,5)    // 3,4,5

c2291dfbc6b643ff8d9b4ffdbb3155aa.png

var arr = [ 1,2,3,4,5,6 ]

arr.slice(-4,-1)    // 3,4,5

45bba33536784153b71cf6a89460bc80.png91c381293c774765aeb932863264213d.png

        slice() 方法将返回数组的一部分(子数组),但不会修改原数组。而 splice() 方法是在原数组基础上进行截取。如果希望在原数组基础上进行截取操作,而不是截取为新的数组,只能使用 splice() 方法。如下:

69093cc374354a728c6a24ab3af17467.png

20ce938bb43d4dbe998822260804cfd7.png

         以上就是本篇的全部内容了,感谢大家的支持!

 

bd48b7f3e1fd482db1eb6434f9b2b510.png

 

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

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

相关文章

Python 集合探索:解密高效数据操作和快速算法的奇妙世界

前言 在 Python 的众多数据结构中,集合(Sets)是一个引人注目且实用的概念。集合提供了一种存储无顺序、唯一元素的数据结构,它们不仅可以帮助我们高效处理数据,还能应用于各种算法和问题。 本博客将带您踏上一段关于…

python 从一个文件夹里面复制 符合要求的文件

记事本格式 import os def copy(src_file, dst_file):import shutil# 执行复制操作shutil.copy2(src_file, dst_file)def main(parent,data,dest_path):_list []for line in open(data, encoding"utf-8"):line line.strip()_list.append(line.split("\t&quo…

渠道归因(二)基于马尔可夫链的渠道归因

渠道归因(二)基于马尔可夫链的渠道归因 在应用当中,序列中的每个点通常映射为一个广告触点,每个触点都有一定概率变成真正的转化。通过这种建模,可以选择最有效,概率最高的触点路径。这种方法需要较多的数…

你知道怎么通过ai绘画图片描述生成图片吗

汤姆: 嘿,听说了吗?有几个特别酷的方法可以通过ai绘画图片描述生成出上面这些惊艳的图像! 玛丽: 真的吗?那听起来好神奇啊!怎么做到的? 汤姆: 其实很简单!你只需要用文字描述你想要的图片&…

POI批量导入和echars图表

下载模板 userList.jsp <a href"downloadUserExcel">下载模板</a>DownloadUserServlet.java /*** 下载*/ WebServlet("/downloadUserExcel") public class DownloadUserServlet extends HttpServlet {protected void doGet(HttpServletReq…

关于环肽试剂:118477-06-8,Cyclo(L-Phe-trans-4-hydroxy-L-Pro),知识普及

●中文名&#xff1a;环(L-苯丙氨酰-反式-4-羟基-L-脯氨酸) ●英文名&#xff1a;Cyclo(L-Phe-trans-4-hydroxy-L-Pro) 西安凯新生物科技有限公司供应的​各种环肽&#xff0c; 任何结构的环肽&#xff0c;可以进行相应的定制服务。环二肽&#xff1a; 2000/g or 3000/g 纯度…

idea 自带git down分支出现莫名其妙的文件

是个坑 大部分场景下&#xff0c;会先down master 再去down 对应分支 例如dev 会出现一种内容&#xff0c;master里面有但dev没有当前文件&#xff0c;直接报错而且引入包排查没任何问题 解决方式&#xff1a; 用tortoiseGit 直接选对应分支。idea目前2022不支持

uniapp - [全端兼容] 多选弹框选择器,弹框形式的列表多选选择器组件插件(底部弹框式列表多选功能,支持数据回显、动态数据、主题色等配置)

前言 网上的教程都太乱了,各种不兼容且 BUG 太多,注释也没有很难进行改造。 本文 实现了 uniapp 全端兼容的弹框多选选择器,从底部弹出列表项进行多选(可回显已选中和各种主题色、样式配置), 您可以直接复制代码,稍微改改样式就能用了。 如下图所示,数据列表(支持接口…

关于找不到msvcp120.dll,无法继续执行代码的解决方案

小伙伴们知道msvcp120.dll是什么文件吗?那么今天小编就来讲解电脑出现msvcp120.dll丢失的解决方法介绍&#xff0c;希望能够帮助到大家呢。 msvcp120.dll 是windows系统中必备的动态链接库文件。msvcp120.dll可以解决某些大型游戏、程序由于vs2010编译系统中缺失此dll的问题。…

【电子量产工具】大纲分析

前言 最近看了 电子量产工具 这个项目&#xff0c;本专栏是对该项目的一个总结。 项目大纲&#xff1a; 可以看到上面的框图&#xff0c;我们可以分为三大部分&#xff1a; 从最下面的 第 1 层开始。这是整个项目的最底层&#xff0c;主要负责处理数据和逻辑&#xff0c;与板…

Docker发布JAVA vhr微人事后端(确保打包没问题再发布)

本文代码来源于&#xff08;感谢作者&#xff09; GitHub - lenve/vhr: 微人事是一个前后端分离的人力资源管理系统&#xff0c;项目采用SpringBootVue开发。1.创建DockerFile文件 创建mail文件夹 创建web文件夹 以下为mail dockerfile FROM java:8 Add *.jar /app/app.ja…

算法chatgpt回答

算法 红黑树和AVL树区别 红黑树和AVL树区别

Windows系统提示丢失xlive.dll怎么办?

xlive.dll微软的动态链接库&#xff08;DLL&#xff09;的一部分&#xff0c;当它被删除或者损坏时&#xff0c;会出现错误消息&#xff0c;提示xlive.dll丢失或未找到。那么Windows系统提示丢失xlive.dll怎么办呢&#xff1f; Windows计算机丢失xlive.dll如何修复&#xff1f;…

云原生之深入解析Docker容器的核心Cgroups的相关概念和使用实现

一、Cgroups 简介 Cgroups 是 Linux 系统内核提供的一种机制&#xff0c;这种机制可以根据需求将一些列系统任务机器子任务整合或分离到按资源划分登记的不同组内&#xff0c;从而为系统资源管理提供一个的框架。简单地说&#xff0c;Cgroups 可以限制、记录任务组所使用的物理…

HCIP-Cloud Service Solutions Architect v3.0

华为职业认证hcip解决方案架构师v3.0 新增题库200题 HCIP-Cloud Service Solutions Architect v3.0 1.关于创建数据盘镜像的约束条件&#xff0c;以下说法错误的是&#xff1f; A.使用云服务器的数据盘创建数据盘镜像时&#xff0c;要确保该云服务器必须有系统盘 B.通过外部文件…

智能化新服务即将惊艳亮相HDC2023 ——华为云Astro爆发低代码能量

​​HDC期间可参与华为开发者大会Astro新人抽奖活动&#xff0c;活动链接在文末。福利多多&#xff0c;快来参与&#xff01; 跃跃欲试的开发者们&#xff0c;是否对2023华为云开发者大会充满期待&#xff1f;华为云Astro将引领新一轮低代码技术革命&#xff01;贯穿AIGC技术的…

HTML5 游戏开发实战 | 五子棋

五子棋是一种家喻户晓的棋类游戏&#xff0c;它的多变吸引了无数的玩家。本章首先实现单机五子棋游戏(两人轮流下)&#xff0c;而后改进为人机对战版。整个游戏棋盘格数为 1515&#xff0c;单击鼠标落子&#xff0c;黑子先落。在每次下棋子前&#xff0c;程序先判断该处有无棋子…

建安三类人企业主要负责人(A证)安全技术考试题库及答案

本题库是根据最新考试大纲要求&#xff0c;结合近年来考试真题的重难点进行汇编整理组成的全真模拟试题&#xff0c;考生们可以进行专项训练&#xff0c;查漏补缺巩固知识点。本题库对热点考题和重难点题目都进行了仔细的整理和编辑&#xff0c;相信考生在经过了针对性的刷题练…

网络安全(黑客)学习路线

前言&#xff1a; 学基础花费很长时间&#xff0c;光语言都有几门&#xff0c;有些人会倒在学习 linux 系统及命令的路上&#xff0c;更多的人会倒在学习语言上&#xff1b; 1、打基础时间太长 对于网络安全基础内容&#xff0c;很多人不清楚需要学到什么程度&#xff0c;囫…

飞行动力学 - 第2节-推进系统、气动力、重要参数及一点点滑翔 之 基础点摘要

飞行动力学 - 第2节-推进系统、气动力、重要参数及一点点滑翔 之 基础点摘要 1. 推进系统介绍2. 推进系统效率/功率/推力3. 涡桨/涡扇/涡喷 桨叶激波 影响4. 典型喷气式发动机数据5. 空气动力6. 升力&法向过载7. 阻力组成8. 最大升阻比 & 最小阻升比9. 飞机阻力10. 重要…