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

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

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

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

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

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

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

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

代码示例:

let question = 'To be, or not to be, it is a question.';

// 判断question字符串里是否包含我们需要的元素,
console.log(question.includes(',')); // 会打印出true

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

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

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

代码示例:

let question = 'To be, or not to be, it is a question.';

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

遍历各个元素

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

// 方法1
for (let i = 0; i < quesArr.length; ++i) {
console.log(quesArr[i]);
} // 方法2
for (let i in quesArr) {
console.log(quesArr[i]);
} // 方法3
for (const v of quesArr) {
console.log(v);
} // 方法4
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. maven项目 子父级工程。

    一 .什么是 maven 子父级工程? 建立一个maven项目,然后在该项目 下创建一个module,子级的maven,他继承于父级项目. 1.新建立 maven项目,file  ------new- ...

  2. Spring源码-IOC部分-Bean实例化过程【5】

    实验环境:spring-framework-5.0.2.jdk8.gradle4.3.1 Spring源码-IOC部分-容器简介[1] Spring源码-IOC部分-容器初始化过程[2] Spring ...

  3. CentOS 7中的系统语言包及UTF-8、en_US.UTF-8和zh_CN.UTF-8的区别

    UTF-8.en_US.UTF-8和zh_CN.UTF-8的区别 en_US.UTF-8.zh_CN.UTF-8叫做字符集,就是说'A'.'B'.'中'.'国'等对应的整数值,en_US.UTF-8只 ...

  4. hr虚线

    转载请注明来源:https://www.cnblogs.com/hookjc/ <hr size="1" noshade="noshade" style= ...

  5. js添加元素代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. lua语言:string

    转载请注明来源:https://www.cnblogs.com/hookjc/ 字符串库函数string.len(s)          返回字符串s的长度:string.rep(s, n)      ...

  7. js trim()方法

    从字符串中移除前导空格.尾随空格和行终止符. 语法 stringObj.trim() 参数 stringObj 必选.String 对象或字符串.trim 方法不修改该字符串. 返回值 已移除前导空格 ...

  8. 类(静态)变量和类(静态)static方法以及main方法、代码块,final方法的使用,单例设计模式

    类的加载:时间 1.创建对象实例(new 一个新对象时) 2.创建子类对象实例,父类也会被加载 3.使用类的静态成员时(静态属性,静态方法) 一.static 静态变量:类变量,静态属性(会被该类的所 ...

  9. Sublime Python3编译环境修改

    http://blog.csdn.net/qq_33304418/article/details/63337602     添加编译环境python3.6 Tools -> Build Syst ...

  10. 赠送4本《 PHP 程序员面试笔试宝典》

    < PHP 程序员面试笔试宝典>历时一年,由机械工业出版社出版,在 2018 年 11 月问世.全书共八个章节,涉及 面试笔试经验技巧.PHP 基础知识.PHP 进阶知识,PHP 面向对象 ...