// 循环遍历数组的方法
<script>
// 方法1: 通过for循环,生成所有的索引下标
/*
for(var i = 0 ; i <= arr.length-1 ; i++){ 程序内容 }
*/
// 方法2: 通过JavaScript程序,给我们提供的方法来实现循环遍历
// 语法:
/*
数组.forEach(function(形参1,形参2,形参3){})
形参1: 存储的是当前循环次数时,获取的单元数据
参数2: 存储的是当前循环次数时,获取的单元索引下标
参数3: 存储的是原始数组
三个形参,不一定都要定义,可以根据实际需求
形参可以任意定义,只要符合命名规范就可以
forEach() 只能循环遍历数组,不能循环遍历对象
*/
/*
for...in
for(var 自定义变量 in 数组){程序}
会将 数组的索引下标,存储在自定义变量中
通过自定义变量存储的索引,来获取数组的单元数据信息
只能获取索引,别的不能获取
*/
// 总结
// forEach() 专门针对数组的循环遍历
// 语法形式:
// 数组.forEach(function(参数1,参数2,参数3){程序})
// 参数1 : 存储 数组单元数据
// 参数2 : 存储 数组单元索引
// 参数3 : 存储 原始数组
// 参数名称可以任意定义,参数个数,根据需求来定义
// for...in 数组,对象都可以使用的循环
// 语法形式:
// for(var 自定义变量 in 数组){程序}
// 自定义变量 : 存储 数组单元索引
// 存储的索引的数据类型是字符串类型
// 如果要执行加法运算,需要转化为数值类型
// 只有for...in需要转化
// for循环 forEach()循环 for...in循环
// 针对数组而言,都可以完成我们的需求
// 只是针对不同的情况
// 推荐使用 forEach() 最简单最方便
// for循环的优点是,可以控制循环的起始和结束
// for...in一般是针对对象的循环
// for...in 数组,对象都可以使用的循环遍历
var arr = ['北京','上海','广州','重庆','天津'];
/*
第一次循环,循环对象是 第一个单元
val : 存储数据 '北京' key : 存储索引 0 arr : 存储原始数组
第二次循环,循环对象是 第二个单元
val : 存储数据 '上海' key : 存储索引 1 arr : 存储原始数组
第三次循环,循环对象是 第三个单元
val : 存储数据 '广州' key : 存储索引 2 arr : 存储原始数组
第四次循环,循环对象是 第四个单元
val : 存储数据 '重庆' key : 存储索引 3 arr : 存储原始数组
第五次循环,循环对象是 第五个单元
val : 存储数据 '天津' key : 存储索引 4 arr : 存储原始数组
*/
// arr.forEach(function(val,key,arr){
// console.log(val,key,arr);
// })
var arr = ['北京','上海','广州','重庆','天津'];
for(var key in arr){ // 自定义变量,存储索引 0 1 2 3 4 ....
console.log(key,arr[key]); // arr[key] 就是索引对应的数据
}
</script>
forEach
<style>
table{
border-collapse: collapse;
}
table td{
border:1px solid #000;
width: 100px;
line-height: 40px;
text-align: center;
font-size: 30px;
}
</style>
序号姓名性别年龄城市
<script>
var arr = [
['张三1' , '男' , 18 , '北京'],
['张三2' , '男' , 18 , '北京'],
['张三3' , '男' , 18 , '北京'],
['张三4' , '男' , 18 , '北京'],
['张三5' , '男' , 18 , '北京'],
['张三6' , '男' , 18 , '北京']
];
setTab();
function setTab(){
var str = '';
// val 存储的是 二维数组 ['张三1' , '男' , 18 , '北京'] ['张三2' , '男' , 18 , '北京'] ....
// key 存储的是 一维索引 0 1 2 3 ....
// 就相当于for循环中的 i
arr.forEach(function(val , key){
str += '<tr>';
str += `<td>${key+1}</td>`; // key+1 就相当于 i+1
val.forEach(function(v){ // 二维数组的数据 : 张三1 男 18 北京
str += `<td>${v}</td>`; // v就是二维数组数据,相当于for循环中 $arr[i][j]
})
str += '</tr>';
})
tb.innerHTML = str;
}
</script>
for…in
序号姓名性别年龄城市
<script>
var arr = [
['张三1' , '男' , 18 , '北京'],
['张三2' , '男' , 18 , '北京'],
['张三3' , '男' , 18 , '北京'],
['张三4' , '男' , 18 , '北京'],
['张三5' , '男' , 18 , '北京'],
['张三6' , '男' , 18 , '北京']
];
console.log(arr);
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;
}
</script>
Processed:
0.009, SQL:
8
