【前端】【ES5】【遍历循环的几种方式】

【前端】【ES5】【遍历循环的几种方式】

一、 JS遍历

一般在HTML里遍历主要针对两种，一个是那些标签（比如列表框，选择框，ul这个成组存放数据的），一个便是ajax获取到的数据，有可能获取的是json对象，转换一下格式就好了（json.parse…）。{获取标签的那些集合是不是就是类数组对象？}

1.1、for循环

略

1.2、for in循环

一维数组

var arr=[2,3,4,5];
var demp=[];
    for(var index in arr){
    demp.push(['number':arr[index]]);//将值以一个新的结构放入一个新数组
    }

二维数组

for (var index in arr) {
                    for (var i in arr[index]) {
                        console.log(arr[index][i]);
                    }
                }

1.3、for of(还支持许多类数组对象)

一维数组


  for(var index of arr){
    
    console.log(arr[index]);
    }

二维数组

for (var index of arr) {
                    for (var i of arr[index]) {
                        console.log(arr[index][i]);
                    }
                }   

1.4、forEach()方法

一维数组

var numbers = [4, 39, 156, 25]；
numbers.forEach(function(item,index){
//获取的数据有多种处理，一个将值存放或者替换到相应标签里展示出来（原生js,jquery写法都可以）
demoP = document.getElementById("demo");
demoP.innerHTML = demoP.innerHTML + "index[" + k + "]: " + v + "<br>";
第二个组成新的数组格式（适用于json对象转化成的数组）
var arr=[];
arr[任意一个变量]=item；

})

二维数组
其实就是遍历两次就好了

var numbers = [[4, 39, 156, 25],
			  [34, 5, 7, 25],
			  [14, 29, 16, 8]];

 numbers.forEach(function (item, index) {
	item.forEach(function(v,k){
		demoP.innerHTML = demoP.innerHTML + "index[" + k + "]: " + v + "<br>";
	});   
});

1.5、map()方法

一维数组

var numbers=[2,4,6,7];
numbers.map(function(value,index,arr){
//value 为值，index为索引，arr为数组本身
console.log(value);
console.log(index);
console.log(arr);
});

二维数组
暂无
标签
获取选择框里所有选项的值，用逗号分隔，组成新的数组str

var str = $("#AwardProp option").map(function () {
                    return $(this).val();
                }).get().join(", ");

1.6、each() (Jquery里的方法，比较常用)

一维数组

var num=[1,2,3,4,7];
//var obj = { ’one‘:'1', ’two‘:'2',’ three‘:'3'};
                $.each(num,function(index,val){
                    console.log(val);
                });

二维数组

 var num = [[1, 2, 3, 4, 7], [1, 2, 5, 4, 7], [1, 2, 9, 4, 71]];
                $.each(num, function (index, val) {
                    $.each(val, function (i, v) {
                        console.log(v);
                    });
                });

标签
1).将列表框里的选项里的值以固定格式存放到AwardProp数组里面

var AwardProp=[];
var object1 = $("#AwardProp option");
                object1.each(function () {
                    var ob = $(this).text();
                    //将option里的值切割展示
                    AwardProp.push({"PropID": $(this).val(), "PropNum": ob.substring(ob.indexOf(',') + 1)});
                });

2).带参数

$("#UserGroup option").each(function(index,ele){
 //index 元素位置，ele代表元素
                    var pe=ele.val();
                    var optionval=pe.substring(0, pe.indexOf(','));
                ....
                }); 

3).

   $.each($("#UserGroup option"),function(index,ele){
         //index 元素位置，ele代表元素
                            var pe=ele.val();
                            var optionval=pe.substring(0, pe.indexOf(','));
                        ....
                        }) 

二、引用

https://www.cnblogs.com/zhaoxinmei-123/p/8927259.html
https://www.cnblogs.com/yizhilin/p/7344675.html