JS之for循环

一、JS之for循环

1、 JS的 for循环主要包含如下几种: for(let i= 0; i< len; i++), for-in, for-of, for-each。

2、至于第一种 for循环，地球人都会，按下不表。难点在于 for-in， for-of, for-each直接有什么区别，看起来都差不多的样子。

3、一句话概述 for-in与 for-of： for-in遍历得到的是 key值，适用于对象的遍历， for-of得到的是 value值，适合数组的遍历。只要有 iterator接口的数据结构,都可以使用 for-of循环，包括： Array, Map, Set, String, arguments对象, Nodelist对象

4、当给数组的原型添加属性时，for in会遍历到原型链上的属性

5、这时候只要判断是不是本身所有的属性就行了

6、传入匿名的回调函数，匿名函数的参数为：当前项item，索引index（可省），当前数组array（可省）

7、 for-of这个方法避开了for-in循环的所有缺陷

8、与forEach()不同的是，它可以正确响应break、continue和return语句

9、 map遍历与foreach类似，支持使用return语句，支持return返回值

二、js循环对象

js循环对象的语句是怎样的呢？下面就让我们一起来了解一下吧：

js中与循环对象有关的语句一般是for/in语句，for/in语句通常是用于循环对象属性。循环中的代码每次执行一次，就会对于数组的元素或是对象的属性进行一次操作。

在JavaScript其实是支持不同类型的循环的，具体介绍如下：

3、while-当指定的条件为true时循环指定的代码块

4、do/while-同样当指定的条件为true时循环指定的代码块

需要注意的是，最好不要使用for/in语句来循环数组的索引，不过可以使用for语句来进行替代。

var必须。指定的变量可以为数组元素，也能够是对象的属性。

object必须。指定迭代的的对象。

varperson={fname:"John",lname:"Doe",age:25};

for(varkineg){//定义一个k变量在eg对象中遍历

console.log(k);//nameageportk表示对象中的属性名

console.log(eg[k]);//张三30显老的程序员

以上就是小编的分享了，希望能够帮助到大家。

三、JS这DIV循环

1、在开发网页时，我们常常会遇到需要重复使用某些HTML结构的情况。比如，我们可能需要在页面上展示一系列相同格式的信息块，这时可以利用JavaScript来简化代码，提高开发效率。一个常见的方法是先构建一个基本的HTML页面和对应的CSS样式文件。接着，将那些需要重复使用的元素的模板代码抽取出来，并使用for循环将其多次插入到页面中。

2、具体来说，我们可以定义一个HTML模板，比如：

3、<div class="item"><h2>标题</h2><p>内容</p></div>

4、然后在JavaScript中使用for循环来实例化这个模板，并根据需要添加到页面中。例如：

5、let template= document.createElement('div');

6、template.classList.add('item');

7、template.innerHTML='<h2>标题</h2><p>内容</p>';

8、let clone= template.cloneNode(true);

9、clone.querySelector('h2').innerText= `标题${i+1}`;

10、clone.querySelector('p').innerText= `内容${i+1}`;

11、document.body.appendChild(clone);

12、通过这种方式，我们可以轻松地在页面上生成多个相同格式的元素，而不需要手动复制粘贴代码，大大提高了开发效率。

13、此外，这种方法还具有高度的可维护性。如果将来需要修改模板中的内容，只需调整一次模板代码，而不需要逐个修改各个实例。