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

<!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' ...

随机推荐

【缓存】CPU高速缓存之MESI 性协议 Gif 动画
CPU缓存架构不同的CPU厂商的架构也有些不同,在这里只介绍流行的缓存架构缓存一致性可以分为三个点: 在进程每个写入运算时都立刻采取措施保证资料一致性每个独立的运算,假如它造成资料值的改变,所有 ...
UML 包图详细介绍
6.1 包图的概念包是一种常规用途的组合机制.UML中的一个包直接对应于Java中的一个包,C#中的命名空间.在Java中,一个包可能含有其他包.类或者同时含有这两者.进行建模时,通常使用逻辑性 ...
Windows Server 2012 在桌面上显示”我的电脑”
转至:https://jingyan.baidu.com/article/f25ef2544f6883482c1b82e5.html Windows Server 2012 沒有快捷方式显示我的电脑到 ...
centos7 部署ansible
Ansible默认采用SSH的方式管理客户端,基于python开发,由paramiko和PyYAMl 两个关键模块构建支持非root用户管理,支持sudo ansible作用:通过使用ansible ...
Chrome：开发者模式下复制Element下的代码
Element模块下的代码只能一行一行复制,想要复制一个代码块,可以把该代码块先收起来,再对这个收起来的代码块进行复制就OK了
gdb调试快速入门
编译指令 gcc test.c -o test -g -g是加入调试信息,加入源码信息启动gdb调试 gdb test 进入gdb中设置参数 set args 10 20 显示参数show age ...
Tableau绘图一热图、日历图、人口金字塔、标靶图、凹凸图、帕累托图
Tableau绘图一热图.日历图.人口金字塔.标靶图.凹凸图.帕累托图本文首发于博客冰山一树Sankey,去博客浏览效果更好.直接右上角搜索该标题即可一.热图例子:示例超市可以通过更改颜色来改 ...
SQL Server--设置用IP地址登录
问题概述:新安装的SQL Server数据库无法用IP地址登录. 是因为 SQL Server "服务器网络实用工具"中禁用了"命名管道"所致! 在sqlse ...
Sublime Text 3 build 3103 注册码
分享几个ST3的注册码,第一个我注册到自己电脑上,亲测可用,剩余几个没有测试.→原文链接 -– BEGIN LICENSE -–Michael BarnesSingle User LicenseEA7 ...
30道关于linux的基础命令小题，先练练手
1.修改主机名为yuanlai0224命令是: 2.切换⽬录到/yuchao01/data/,再创建脚本/my_website/scripts/start.sh. 绝对路径.相对路径两种写法 3.查看 ...

js技术之循环for