循环可以将代码块执行指定的次数。
JavaScript 循环
如果您希望一遍又一遍地运行相同的代码,并且每次的值都不同,那么使用循环是很方便的。
我们可以这样输出数组的值:
一般写法:
document.write(cars[0] + "<br>");
document.write(cars[1] + "<br>");
document.write(cars[2] + "<br>");
document.write(cars[3] + "<br>");
document.write(cars[4] + "<br>");
document.write(cars[5] + "<br>");
使用for循环
for (var i=0;i<cars.length;i++)
{
document.write(cars[i] + "<br>");
}
不同类型的循环
JavaScript 支持不同类型的循环:
for - 循环代码块一定的次数
for/in - 循环遍历对象的属性
while - 当指定的条件为 true 时循环指定的代码块
do/while - 同样当指定的条件为 true 时循环指定的代码块
For 循环
for 循环是您在希望创建循环时常会用到的工具。
下面是 for 循环的语法:
for (语句 1; 语句 2; 语句 3)
{
被执行的代码块
}
语句 1 (代码块)开始前执行 starts.
语句 2 定义运行循环(代码块)的条件
语句 3 在循环(代码块)已被执行之后执行
实例
for (var i=0; i<5; i++)
{
x=x + "该数字为 " + i + "<br>";
}
从上面的例子中,您可以看到:
Statement 1 在循环开始之前设置变量 (var i=0)。
Statement 2 定义循环运行的条件(i 必须小于 5)。
Statement 3 在每次代码块已被执行后增加一个值 (i++)。
语句 1
通常我们会使用语句 1 初始化循环中所用的变量 (var i=0)。
语句 1 是可选的,也就是说不使用语句 1 也可以。
您可以在语句 1 中初始化任意(或者多个)值:
实例:
for (var i=0,len=cars.length; i<len; i++)
{
document.write(cars[i] + "<br>");
}
同时您还可以省略语句 1(比如在循环开始前已经设置了值时):
实例:
var i=2,len=cars.length;
for (; i<len; i++)
{
document.write(cars[i] + "<br>");
}
语句 2
通常语句 2 用于评估初始变量的条件。
语句 2 同样是可选的。
如果语句 2 返回 true,则循环再次开始,如果返回 false,则循环将结束。
如果您省略了语句 2,那么必须在循环内提供 break。否则循环就无法停下来。这样有可能令浏览器崩溃。请在本教程稍后的章节阅读有关 break 的内容。 |
语句 3
通常语句 3 会增加初始变量的值。
语句 3 也是可选的。
语句 3 有多种用法。增量可以是负数 (i--),或者更大 (i=i+15)。
语句 3 也可以省略(比如当循环内部有相应的代码时):
实例:
var i=0,len=cars.length;
for (; i<len; )
{
document.write(cars[i] + "<br>");
i++;
}
for/In 循环
JavaScript for/in 语句循环遍历对象的属性:
实例
var person={fname:"John",lname:"Doe",age:25};
for (x in person)
{
txt=txt + person[x];
}
您将在有关 JavaScript 对象的章节学到更多有关 for / in 循环的知识。
While 循环
我们将在下一章为您讲解 while 循环和 do/while 循环。
如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039,我们一起飞!
定义:循环可多次执行代码块。
如现在要求在页面上输出从1-10的数字
普通情况下我们就需要写十行
document.write("1"+<br/>) document.write("2"+<br/>) document.write("3"+<br/>)
以此类推
那么现在有了for循环呢,我们就可以用循环一次性输出以上的内容
示例如下
for(var i=1;i<11;i++) { document.write(i+"<br/>"); }
这就是for循环的基本语法,那么接下来看一下 它是怎么执行的 运算规则是什么 语法是什么
for (语句 1; 语句 2; 语句 3) { 要执行的代码块 语句 1 在循环(代码块)开始之前执行也就是定义循环变量的初始值 语句 2 定义运行循环(代码块)的条件,定义循环变量的终止数 语句 3 会在循环(代码块)每次被执行后执行,每次执行的变化 自增或者自减 根据需求定义
如上面的案例
定义了一个变量i 初始值为1 循环的最大值为11,也就是i的值必须小于11,每次执行完了i的值自增1
avaScript 中的 for 循环语句相信大家都已经快用厌了,现在有好多文章都在讲怎么减少代码中的 for 循环语句,但是,你又不得不承认它们真的很有用。今天,我来总结一下前端 JavaScript 中三种 for 循环语句。
这大概是应用最广的循环语句了吧,简单实用,且大多数时候性能还是在线的,唯一的缺点大概就是太普通,没有特色,导致很多人现在不愿用它。
const array=[4, 7, 9, 2, 6];
for (const index=0; index < array.length; index++) {
const element=array[index];
console.log(element);
}
// 4, 7, 9, 2, 6
for...in 语句可以以任意顺序遍历一个对象的除 Symbol 以外的可枚举属性。
const temp={name: "temp"};
function Apple() {
this.color='red';
}
Apple.prototype=temp;
const obj=new Apple();
for (const prop in obj) {
console.log(`obj.${ prop }=${ obj[prop] }`);
}
// obj.color=red
// obj.name=temp
如果你只要考虑对象本身的属性,而不是它的原型,那么使用 getOwnPropertyNames() 或执行 hasOwnProperty() 来确定某属性是否是对象本身的属性。
const temp={name: "temp"};
function Apple() {
this.color='red';
}
Apple.prototype=temp;
const obj=new Apple();
for (const prop in obj) {
if (obj.hasOwnProperty(prop)) {
console.log(`obj.${ prop }=${ obj[prop] }`);
}
}
// obj.color=red
当然,也可以用来遍历数组。
const arr=[1, 2, 3, 4, 5];
for (const key in arr) {
console.log(key)
}
// 0,1,2,3,4
使用 for...in 可以遍历数组,但是会存在以下问题:
所以一般不建议使用 for...in 来遍历数组。
for...of 语句在可迭代对象(包括 Array,Map,Set,String,TypedArray,arguments 对象等等)上创建一个迭代循环,调用自定义迭代钩子,并为每个不同属性的值执行语句。
const array=['a', 'b', 'c'];
for (const element of array) {
console.log(element);
}
// a
// b
// c
for...of 和 for...in 的区别:
Object.prototype.objCustom=function () { };
Array.prototype.arrCustom=function () { };
let iterable=[3, 5, 7];
iterable.foo='hello';
for (const key in iterable) {
console.log(key); // logs 0, 1, 2, "foo", "arrCustom", "objCustom"
}
// 0, 1, 2, "foo", "arrCustom", "objCustom"
for (const key of iterable) {
console.log(key);
}
// 3, 5, 7
使用 for...of 遍历 Map 结构:
let nodes=new Map();
nodes.set("node1", "t1")
.set("node2", "t2")
.set("node3", "t3");
for (const [node, content] of nodes) {
console.log(node, content);
}
// node1 t1
// node2 t2
// node3 t3
可以看出,使用 for...of 遍历 Map 结构还是挺方便的,推荐使用!
~
~ 本文完,感谢阅读!
~
学习有趣的知识,结识有趣的朋友,塑造有趣的灵魂!
我是〖编程三昧〗的作者 隐逸王,我的公众号是『编程三昧』,欢迎关注,希望大家多多指教!
你来,怀揣期望,我有墨香相迎! 你归,无论得失,唯以余韵相赠!
知识与技能并重,内力和外功兼修,理论和实践两手都要抓、两手都要硬!
*请认真填写需求信息,我们会在24小时内与您取得联系。