jquery 如何循环json jquery的循环方法

转载

mob64ca1406d617 2023-08-30 08:08:00

文章标签 jquery 如何循环json javascript html5 jquery 数组 文章分类 jQuery 前端开发

普通for循环

优点：自行指定循环次数。

for (let i = 0; i < 10; i++) {
  console.log(i);
}

forEach

forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数。

注意: forEach() 对于空数组是不会执行回调函数的。

forEach()的回调函数有两个参数，index，value，index为当前元素的索引值，value为当前元素。

var arr = ["你好","我好","大家好","才是","真的好"];
arr.forEach(function(value,index) {
    // 输出为array数组的每一个元素
    // 注意 value在前
    console.log(value);
});

arr必须是一个真正的数组，当arr为伪数组则会报错：

let btns = document.getElementsByTagName("button")
console.log("btns",btns);//得到一个伪数组
btns.forEach(item=>console.log(item)) Uncaught TypeError: btns.forEach is not a function

缺点：

1.不能同时遍历多个集合，在遍历的时候无法修改和删除集合数据，

2.方法不能使用break，continue语句跳出循环，或者使用return从函数体返回，对于空数组不会执行回调函数

each()

方法分两种情况，$().each() 和 $.each()。

$().each()是对页面元素的操作，此时可获取DOM元素直接操作

var resourceInputVal = $("#ResouraceModal form input");
$("#ResouraceModal .btn-default").click(function () {
    // button按钮的点击事件里可以直接修改input输入框的内容
    resourceInputVal.each(function (index, value) {
        // 注意index在前
      value.value = "";
    })
  })

如果要用each方法操作二维数组，可以这样写：

var arr = ["gag","grt","rthr","afds","nttr","fWGW","afgd","cvd","awx"];
$.each(arr,function(index,value) {
    // 此时，each方法可以用于直接操作数组
    // index在前
    console.log(value);
});

for..in

为循环“enumerable”对象设计的
循环遍历对象自身和继承的可枚举属性（不含Symbol）
会循环原型链和手动添加的键，返回键名key
某些情况下，循环顺序随机的

for in的优点：可以遍历数组的键名，遍历对象简洁方便

for in的缺点:

索引是字符串型的数字，因而不能直接进行几何运算
遍历顺序可能不是实际的内部顺序
for in会遍历数组所有的可枚举属性，包括原型。例如的原型方法method和name属性
如果手动向数组添加成员属性，则：虽然数组的length不变，但用for..in遍历数组会遍历到那些新定义的属性。

故而一般用for in遍历对象而不用来遍历数组

这也就是for of存在的意义了,for of 不遍历method和name,适合用来遍历数组

for...of（ES6）

可以使用break,continue,return
支持数组和类数组对象的遍历，循环读取键值
也支持字符串的遍历
for..of循环修复了for..in存在的问题，他只遍历属于对象本身的属性值。
且这个对象必须是iterable可被迭代的。如Array, Map, Set。

for of的优点：避免了for in的所有缺点，可以使用break,continue和return，不仅支持数组的遍历，还可以遍历类似数组的对象，支持字符串的遍历。是最简洁，最直接的遍历数组的语法。还支持map和Set对象遍历

for of的缺点：不支持普通对象，想遍历对象的属性，可以用for in循环, 或内建的Object.keys()方法：

Object.keys(myObject)获取对象的实例属性组成的数组，不包括原型方法和属性

for (var key of Object.keys(Object))
    console.log(key + ": " + Object[key]);

for in和for of最直接的区别就是:

for in遍历的是数组的索引（即键名），而for of遍历的是数组元素值。

Array.prototype.method=function(){}
var myArray=[1,2,4];
myArray.name="数组";
 
for (var index in myArray)
    console.log(myArray[index]);    //0,1,2,method,name
 
for (var value of myArray) 
    console.log(value);    //1,2,4