js技术之循环for
案例:把所有单词以空格为分割并将首字母转为大写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="js/jquery.min.js"></script>
<script language=javascript>
function titlecs() {
var wzwSku = "wzw i live you";、
// 按照 空格 来进行分割
let arr = wzwSku.split(/[\s\n]/);
//循环遍历
for (i = 0; i < arr.length; i++) {
// 截取首字母
let s1 = arr[i].substring(0, 1);
// 将首字母转换为大小姐
let s = s1.toUpperCase() + arr[i].substring(1);
// 拼接单词
if (i == 0) {
wzwSku = s;
} else {
wzwSku += " " + s;
}
}
// 弹窗
alert(wzwSku);
}
</script>
</head>
<body>
<!-- 单击控件 -->
<button type="button" onclick="titlecs()">标题测试</button>
</body>
</html>
结果:

扩展:其他循环方法
1,for循环
对于循环应该是最常用的一种遍历方式了,通常用来遍历数组结构。
let arr = [a,b,d];
for (let i=0; i<arr.length; i++){
console.log(i,arr[i]);
}
2,for...in循环
for...in语句用于对数组或者对象的属性进行循环操作。
for...in循环中的代码每执行一次,就会对数组或者对象的属性进行一次操作。
let obj={'name':'programmer','age':'22','height':'180'};
for(let i in obj){
console.log(i,obj[i])
}
3,while循环
while用于循环作用基本一致,通常用来循环数组
cars=["BMW","Volvo","Saab","Ford"]; var i=0;
while (cars[i]){
console.log(cars[i] + "<br>")
i++;
};
4,do while循环
do while 是while的一个亲戚,它在循环开始前先执行一次操作,然后才进行判断,true就继续执行,false就结束循环。
let i = 3;
do{
console.log(i)
i--;
}
while(i>0);
5,forEach循环
forEach方法用于调用数组的每个元素,并将元素传递给回调函数。对于空数组不会执行回调函数。
let arr = [1,2,3];
arr.forEach(function(i,index){
console.log(i,index)
})
// 1 0
// 2 1
// 3 2
6,map方法
map返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。
let arr = [1,2,3];
let tt = arr.map(function(i){
console.log(i)
return i*2;
})
// 结果:[2,4,6] tt
7,for...in循环
因为是es6引入到新特性中的,借鉴c ++,java,c#和python语言,引入for...in循环,作为遍历所有数据结构的统一方法。
var arr = ['a', 'b', 'c', 'd'];
for (let a of arr) {
console.log(a); // a b c d
}
详细具体用法英语谚语详见阮一峰老师的ES6入门这本书 https://es6.ruanyifeng.com/#docs/iterator%23for---of-%E5%BE%AA%E7%8E%AF
8,其他有遍历的数组API也有很多,不一一赘述了,上面ES6新特性里面就有很多类似的方法。
参考原文:https://blog.csdn.net/weixin_40776188/article/details/81865986
总结:
1.不同的循环使用在不同的格式中,要对应格式来套用循环
2.注意需要导入的js文件路径==》 <script src="js/jquery.min.js"></script>
3.其他的在看其他文章的介绍
js技术之循环for的更多相关文章
- JS 循环遍历JSON数据 分类: JS技术 JS JQuery 2010-12-01 13:56 43646人阅读 评论(5) 收藏 举报 jsonc JSON数据如:{"options":"[{
JS 循环遍历JSON数据 分类: JS技术 JS JQuery2010-12-01 13:56 43646人阅读 评论(5) 收藏 举报 jsonc JSON数据如:{"options&q ...
- 文献综述六:基于JS 技术的电子商品管理系统设计及实现
一.基本信息 标题:基于JS 技术的电子商品管理系统设计及实现 时间:2017 出版源:无线互联科技 文件分类:js技术的研究 二.研究背景 主要对Js下电商管理系统的设计及实现进行了探讨,利用软件工 ...
- js 控制Div循环显示 非插件版
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js种的循环语句
//js种的循环语句 //while与do while的区别是while是满足条件后才执行 //do while是不管满不满足条件都会执行一次 //for 循环与while,do while相比循环结 ...
- js中的循环语句
js中的循环语句可分为三种:1.while:2.do……while:3.for. while的语法为 while (exp) { //statements;} var a=1,b=0; whil ...
- js的事件循环绑定和jQuery的隐式迭代
js的事件循环绑定和jQuery的隐式迭代 js事件循环绑定 jQuery隐式迭代 先举一个例子:给定一个ul,点击列表内的每一个li元素,使它的背景色变红,下边分别用js代码和jQuery实现. & ...
- 原生JS—实现图片循环切换的两种方法
今天我们主要讲讲如何使用原生JS实现图片的循环切换的方法.多余的话我们就不多说了,我们一个一个开始讲吧. 1 原生JS实现图片循环切换 -- 方法一 在上栗子之前我们先简单介绍一下所用的一些知识点. ...
- 原生JS—实现图片循环切换及监测鼠标滚动切换图片
今天我们主要讲讲如何使用原生JS实现图片的循环切换的方法以及如何检测鼠标滚动循环切换图片.多余的话我们就不多说了,我们一个一个开始讲吧. 1 原生JS实现图片循环切换 -- 方法一 在上栗子之前我们 ...
- js中的循环
js中的循环是我们经常要用到的,现在进行一些归纳. 一.javascript种的循环. 1.循环对象 var o = { name: 'Jack', age: 20, city: 'Beijing' ...
随机推荐
- 【C#表达式树 五】工厂模式创建表达式树节点
常量 1.值常量 (p)=>100+88+p ParameterExpression par = Expression.Parameter(typeof(int), "p" ...
- C#委托Action、Action<T>、Func<T>、Predicate<T>系统自带的委托
C#委托Action.Action<T>.Func<T>.Predicate<T> CLR环境中给我们内置了几个常用委托Action. Action<T& ...
- mapreduce 中 groupingComparator 用法
groupingComparator是对reduce输入的数据进行分组,比如 public int compare(WritableComparable a, WritableComparable b ...
- 2020.10.6 ThreadLocal
在多线程环境下,每个线程都有自己的数据.一个线程使用自己的局部变量比使用全局变量要好,因为局部变量不会被其他线程改变. 但是局部变量也存在问题--在函数调用的时候,传递起来很麻烦: def proce ...
- 非常详细的python和pycharm下载安装教程
目录 引言 为什么要学python 下载网址 python下载及安装 pycharm下载及安装 你人生中的第一句python 引言 Python诞生于1989年的一个圣诞节,其创作者Guido v ...
- 将ISO镜像文件制作成USB disk
制作USB Live盘有Universal USB Installer.UNetbootin.WinSetupFromUSB.LinuxLive USB Creator.YUMI(Your Unive ...
- 面试官:Redis中集合数据类型的内部实现方式是什么?
虽然已经是阳春三月,但骑着共享单车骑了这么远,还有有点冷的.我搓了搓的被冻的麻木的手,对着前台的小姐姐说:"您好,我是来面试的."小姐姐问:"您好,您叫什么名字?&quo ...
- mybatis crud 学习总结02
1.db.properties 原因:数据库的连接直接写到配置(mybati-config.xml)里存在安全隐患 解决:将配置的信息放到一个文件中管理 右键resources --> File ...
- java高并发之ConcurrentSkipListMap的那些事
注意:本文内容基于JDK11,不同版本会有差异 ConcurrentSkipListMap的结构 ConcurrentSkipListMap是以链表(自然排序)的形式进行数据存储的.即在类中通过定义N ...
- web自动化之selenium(三)文件上传
1.上传标签为input #若上传文件的标签为<input>可以直接定位标签,然后send_keys(文件路径)可以直接上传 2.利用第三方软件Autoit上传 1.下载Autoit:ht ...