码迷,mamicode.com
首页 > 其他好文 > 详细

for循环,for…in循环,forEach循环的区别

时间:2020-04-06 17:34:54      阅读:60      评论:0      收藏:0      [点我收藏+]

标签:循环   innerhtml   单元   维数   需要   foreach   索引下标   hellip   就是   

for循环,for…in循环,forEach循环的区别
for循环
通关for循环,生成所有的索引下标
for(var i = 0 ; i <= arr.length-1 ; i++){ 程序内容 }
来执行循环。

forEach循环
数组.forEach(function(形参1,形参2,形参3){})
形参1: 存储的是当前循环次数时,获取的单元数据
形参2.储存的是当前循环次数时,获取的单元索引下标
形参3.储存的是原始数组
三个参数不一定全部定义,看实际项目要求
forEach() 只能循环遍历数组,不能循环遍历对象

forEach() 专门针对数组的循环遍历

for…in
for(var 自定义变量 in 数组){程序}
会将 数组的索引下标,存储在自定义变量中
通过自定义变量存储的索引,来获取数组的单元数据信息
自定义变量 : 存储 数组单元索引
存储的索引的数据类型是字符串类型
需要转化为数值类型

只能获取索引,别的不能获取
数组,对象都可以使用的循环

for循环 和 forEach循环,
只能定义或者储存索引下标 获取数据要求通过索引下标 来获取数据

forEach循环

可以定义参数1直接储存 数据单元数据 不需要通过索引下标来获取

可以定义参数2直接储存 数组单元的索引

具体分析
for循环和forEach循环 生成序号 直接循环变量i +1 或者形参 key+1
for…in循环 自定义key中储存是字符串,必须转化为数值类型 在加+1
parselnt(key)+1
for循环和for…in循环 都是通过 索引下标来获取 二维数组
arr[i] arr[key]
forEach循环 通过自身定义的形参来储存二维数组
val
生成单元格
for循环 和for…in循环 都是通过索引下标方式 获取二维数组
arr[i] [j] arr[key][k]
forEach循环 通过自生定义形参储存的二维数组单元数据
v

代码如下

for循环
<script>
var arr = [3,2123,12,23,1,321,213];

for(var i = 0 ; i <= arr.length-1 -1 ; i++){
var min = i;
for(var j = i+1 ; j <= arr.length-1 ; j++){
if(arr[min] > arr[j] ){
min = j;
}
}

if(min != i){
var m = 0;
m = arr[min];
arr[min] = arr[i];
arr[i] = m;
}
}

console.log(arr);


</script>

 


forEach
setTab();

function setTab(){
var str = ‘‘;
arr.forEach(function(val , key){
str += ‘<tr>‘;
str += `<td>${key+1}</td>`;
val.forEach(function(v){
str += `<td>${v}</td>`;
})
str += ‘</tr>‘;
})

tb.innerHTML = str;

for in循环
setTab();

function setTab(){
var str = ‘‘;
// 这里的key的作用,就是相当于for循环中的i
for(var key in arr){ // key 存储一维索引 arr[key] 索引对应的二维数组
str += ‘<tr>‘;
str += `<td>${ parseInt(key) +1}</td>`; // key是字符串类型,执行加法是拼接操作, parseInt(key) 获取整数部分,转化为数值类型

for(var k in arr[key]){ // 这里的k的作用就相当于 for循环中的j
str += `<td>${arr[key][k]}</td>`; // arr[key][k] 二维数组的索引
}

str += ‘</tr>‘;
}

tb.innerHTML = str;
}

逆战班

for循环,for…in循环,forEach循环的区别

标签:循环   innerhtml   单元   维数   需要   foreach   索引下标   hellip   就是   

原文地址:https://www.cnblogs.com/honghaia/p/12642781.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!