摘要:我们需要先判断特定String里是否包含我们需要的元素,针对这个元素对这个字符串进行拆分,遍历各个元素。

本文分享自华为云社区《JavaScript/TypeScript项目里如何对特定String进行拆分然后遍历各个元素》,作者:gentle_zhou。

我们可以把题目的这个需求拆分一下,变为如下几步:判断特定String里是否包含我们需要的元素,针对这个元素对这个字符串进行拆分,遍历各个元素。

判断特定String里是否包含我们需要的元素

我们可以用includes()方法来判断我们要找的一个字符串是否包含在我们特定的字符串中,根据情况返回 true 或 false。

注:include()方法是区分大小写的。

该方法的默认语法是:str.includes(searchString[, position])。

searchString是我们要在特定字符串中去搜索的字符串;position则是可选的参数,从当前字符串的哪个索引位置开始搜寻子字符串,默认值为 0。

代码示例:

  1. let question = 'To be, or not to be, it is a question.';
  2.  
  3. // 判断question字符串里是否包含我们需要的元素,
  4. console.log(question.includes(',')); // 会打印出true

针对这个元素对这个字符串进行拆分

JavaScript里,split()方法根据 splitter(分隔符)将字符串拆分为两个或多个子字符串。分隔符可以是单个字符、另一个字符串甚至是一个正则表达式。

将字符串拆分为多个子字符串后,split()方法会将所有子字符串放入一个数组中并返回;它不会对原始字符串进行任何修改。

代码示例:

  1. let question = 'To be, or not to be, it is a question.';
  2.  
  3. let quesArr = question.split(',');
  4. console.log(quesArr); // 会打印出["To be", "or not to be", "it is a question."]
  5.  
  6. console.log(arr[0]); // 打印出"To be"
  7. console.log(arr[2]); // 打印出"it is a question."

遍历各个元素

我们有4种方法去遍历我们刚得到的数组quesArr。

  1. // 方法1
  2. for (let i = 0; i < quesArr.length; ++i) {
  3. console.log(quesArr[i]);
  4. }
  5.  
  6. // 方法2
  7. for (let i in quesArr) {
  8. console.log(quesArr[i]);
  9. }
  10.  
  11. // 方法3
  12. for (const v of quesArr) {
  13. console.log(v);
  14. }
  15.  
  16. // 方法4
  17. quesArr.forEach((v, i) => console.log(v));

这里面,我最喜欢用第一种方法,因为我可以在满足获取到所有元素要求的同时,还可以获取到特定的某个元素。

参考资料

  1. https://www.runoob.com/jsref/jsref-includes.html
  2. https://flexiple.com/javascript-split-string/
  3. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in
  4. https://stackoverflow.com/questions/8312459/iterate-through-object-properties

点击关注,第一时间了解华为云新鲜技术~

教你如何解决JS/TS里特定String进行拆分然后遍历各个元素的更多相关文章

  1. JS/TS项目里的Module都是什么?

    摘要:在日常进行JS/TS项目开发的时候,经常会遇到require某个依赖和module.exports来定义某个函数的情况.就很好奇Modules都代表什么和有什么作用呢. 本文分享自华为云社区&l ...

  2. 学以致用:手把手教你撸一个工具库并打包发布,顺便解决JS浮点数计算精度问题

    本文讲解的是怎么实现一个工具库并打包发布到npm给大家使用.本文实现的工具是一个分数计算器,大家考虑如下情况: \[ \sqrt{(((\frac{1}{3}+3.5)*\frac{2}{9}-\fr ...

  3. 解决js跨域问题

    如何解决js跨域问题 Js跨域问题是web开发人员最常碰到的一个问题之一.所谓js跨域问题,是指在一个域下的页面中通过js访问另一个不同域下 的数据对象,出于安全性考 虑,几乎所有浏览器都不允许这种跨 ...

  4. 一些angular/js/ts的坑和吐槽

    ------20190318 ------------- 回头看,很多槽点已经随着升级改掉了   绑定string字面值到子组件@Input <app-overlay-static [name] ...

  5. 如何解决js跨域问题

    Js跨域问题是web开发人员最常碰到的一个问题之一.所谓js跨域问题,是指在一个域下的页面中通过js访问另一个不同域下的数据对象,出于安全性考 虑,几乎所有浏览器都不允许这种跨域访问,这就导致在一些a ...

  6. bower解决js的依赖管理

    bower解决js的依赖管理 前言: 一个新的web项目开始,我们总是很自然地去下载需要用到的js类库文件,比如jQuery,去官网下载名为jquery-1.10.2.min.js文件,放到我们的项目 ...

  7. 在普通js文件里引入vue实例的方法

    首先是我是写了一个 Loading 插件然后 是挂在打vue.prototype 原型上的. 在main.js中use使用了这个插件. 至此vue原型是就被我挂上 $loadding方法了. 然后我想 ...

  8. 在js文件里调用另一个js文件里的函数

    这个是我今天解决的一个小问题,我在创建界面的时候,根据不同的界面需求对应创建了不同的js文件来搭建界面,搭建完毕之后再将各个生成页面的函数汇总到主界面上,通过visibility属性切换显示,这时候出 ...

  9. 一步一步教你用 Vue.js + Vuex 制作专门收藏微信公众号的 app

    一步一步教你用 Vue.js + Vuex 制作专门收藏微信公众号的 app 转载 作者:jrainlau 链接:https://segmentfault.com/a/1190000005844155 ...

随机推荐

  1. C++ 类对象内存模型分析

    编译环境:Windows10 + VS2015 1.空类占用的内存空间 类占内存空间是只类实例化后占用内存空间的大小,类本身是不会占内存空间的.用sizeof计算类的大小时,实际上是计算该类实例化后对 ...

  2. Abp 审计模块源码解读

    Abp 审计模块源码解读 Abp 框架为我们自带了审计日志功能,审计日志可以方便地查看每次请求接口所耗的时间,能够帮助我们快速定位到某些性能有问题的接口.除此之外,审计日志信息还包含有每次调用接口时客 ...

  3. Programiz 中文系列教程·翻译完成

    原文:Programiz 协议:CC BY-NC-SA 4.0 欢迎任何人参与和完善:一个人可以走的很快,但是一群人却可以走的更远. 在线阅读 ApacheCN 学习资源 目录 Programiz C ...

  4. CF Round #530 Div2

    A. 尛你 \(\%\%\%\) B. 题意:你需要在平面上画 \(n(n \le 10 ^ 9)\) 个 \(1 \times 1\) 的正方形,且顶点都在整点上,每次可以画一条长度为 \(1\) ...

  5. 自定义CALayer

    1.如何自定义Layer.     自定义CALayer的方式创建UIView的方式非常相似.      CALayer *layer = [CALayer layer];      layer.fr ...

  6. oracle查看当前正在使用的数据库

    select name from V$DATABASE; 也可以用 select SYS_CONTEXT('USERENV','INSTANCE_NAME') from dual;

  7. JavaWeb中jsp路径斜杆(/)跟没斜杆的路径映射问题

    在JavaWeb开发中,只要是写URL地址,那么建议最好以"/"开头,也就是使用绝对路径的方式,那么这个"/"到底代表什么呢?可以用如下的方式来记忆" ...

  8. 动手写一个LRU缓存

    前言 LRU 是 Least Recently Used 的简写,字面意思则是最近最少使用. 通常用于缓存的淘汰策略实现,由于缓存的内存非常宝贵,所以需要根据某种规则来剔除数据保证内存不被占满. 在r ...

  9. Solution -「多校联训」古老的序列问题

    \(\mathcal{Description}\)   Link.   给定序列 \(\{a_n\}\),和 \(q\) 次形如 \([L,R]\) 的询问,每次回答 \[\sum_{[l,r]\su ...

  10. Solution -「LOJ #6029」「雅礼集训 2017」市场

    \(\mathcal{Description}\)   Link.   维护序列 \(\lang a_n\rang\),支持 \(q\) 次如下操作: 区间加法: 区间下取整除法: 区间求最小值: 区 ...