案例:把所有单词以空格为分割并将首字母转为大写

<!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的更多相关文章

  1. JS 循环遍历JSON数据 分类: JS技术 JS JQuery 2010-12-01 13:56 43646人阅读 评论(5) 收藏 举报 jsonc JSON数据如:{&quot;options&quot;:&quot;[{

    JS 循环遍历JSON数据 分类: JS技术 JS JQuery2010-12-01 13:56 43646人阅读 评论(5) 收藏 举报 jsonc JSON数据如:{"options&q ...

  2. 文献综述六:基于JS 技术的电子商品管理系统设计及实现

    一.基本信息 标题:基于JS 技术的电子商品管理系统设计及实现 时间:2017 出版源:无线互联科技 文件分类:js技术的研究 二.研究背景 主要对Js下电商管理系统的设计及实现进行了探讨,利用软件工 ...

  3. js 控制Div循环显示 非插件版

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

  4. js种的循环语句

    //js种的循环语句 //while与do while的区别是while是满足条件后才执行 //do while是不管满不满足条件都会执行一次 //for 循环与while,do while相比循环结 ...

  5. js中的循环语句

    js中的循环语句可分为三种:1.while:2.do……while:3.for. while的语法为 while (exp) {    //statements;} var a=1,b=0; whil ...

  6. js的事件循环绑定和jQuery的隐式迭代

    js的事件循环绑定和jQuery的隐式迭代 js事件循环绑定 jQuery隐式迭代 先举一个例子:给定一个ul,点击列表内的每一个li元素,使它的背景色变红,下边分别用js代码和jQuery实现. & ...

  7. 原生JS—实现图片循环切换的两种方法

    今天我们主要讲讲如何使用原生JS实现图片的循环切换的方法.多余的话我们就不多说了,我们一个一个开始讲吧. 1  原生JS实现图片循环切换 -- 方法一 在上栗子之前我们先简单介绍一下所用的一些知识点. ...

  8. 原生JS—实现图片循环切换及监测鼠标滚动切换图片

    今天我们主要讲讲如何使用原生JS实现图片的循环切换的方法以及如何检测鼠标滚动循环切换图片.多余的话我们就不多说了,我们一个一个开始讲吧. 1  原生JS实现图片循环切换 -- 方法一 在上栗子之前我们 ...

  9. js中的循环

    js中的循环是我们经常要用到的,现在进行一些归纳. 一.javascript种的循环. 1.循环对象 var o = { name: 'Jack', age: 20, city: 'Beijing' ...

随机推荐

  1. .NET NuGet整理

    分布式缓存框架: Microsoft Velocity:微软自家分布式缓存服务框架. Memcahed:一套分布式的高速缓存系统,目前被许多网站使用以提升网站的访问速度. Redis:是一个高性能的K ...

  2. bool 类型位逻辑运算符(| & ^)与条件逻辑运算符(|| &&)的区别

    bool 类型的运算符 & ^|   &&  ||   ! 运算符&&和|| 是短路的,这意味着如果左侧表达式的值足以确定结果,则它们将不会评估其右侧表达式. ...

  3. shell脚本的调试sh-x

    转至:https://blog.csdn.net/yjgithub/article/details/80908079 目录 一.简介 二.sh -x 脚本名.sh 三.set -x 一.简介 使用sh ...

  4. 使用Filter过滤器,解决中文乱码问题

    首先是建立一个filter.java文件,注意implements的是Filter的servlet的那个包: public class filter11 implements Filter { @Ov ...

  5. parquet和orc选型以及压缩格式

    Hive表压缩功能 除了直接配置MapReduce压缩功能外,Hive的ORC表和Parquet表直接支持表的压缩属性. 但支持的压缩格式有限,ORC表支持None.Zlib.Snappy压缩,默认为 ...

  6. MySQL:输入密码后闪退的解决方法

    原因:MySQL服务没有启动 解决方法:在 "服务" 中启动MySQL

  7. 使用windows自带linux子系统开发esp32

    步骤: 1.打开windows商店,搜索ubuntu,安装18.04版本. 2.控制面板 /程序和功能 /打开或关闭windows功能 3.关机重启 4.打开刚安装得ubuntu,设置用户名和密码. ...

  8. JZ-022-从上往下打印二叉树

    从上往下打印二叉树 题目描述 从上往下打印出二叉树的每个节点,同层节点从左至右打印. 题目链接: 从上往下打印二叉树 代码 import java.util.ArrayList; import jav ...

  9. 【高并发】两种异步模型与深度解析Future接口

    大家好,我是冰河~~ 本文有点长,但是满满的干货,以实际案例的形式分析了两种异步模型,并从源码角度深度解析Future接口和FutureTask类,希望大家踏下心来,打开你的IDE,跟着文章看源码,相 ...

  10. 论文翻译:2020_DCCRN: Deep Complex Convolution Recurrent Network for Phase-Aware Speech Enhancement

    论文地址:DCCRN:用于相位感知语音增强的深度复杂卷积循环网络 论文代码:https://paperswithcode.com/paper/dccrn-deep-complex-convolutio ...