js 循环遍历几种方式

//默认数组
var arr = [
  {
    id: "1",
    name: "张三",
    age: 13
  },
  {
    id: "2",
    name: "李四",
    age: 24
  }
];

1. for循环

 for (var i = 0; i < arr.length; i++) {
    var item = arr[i];
    var name = item.name;
    console.log(name);//张三 李四
}

2. forEach()方法

//因为原生的for循环写起来太麻烦，所以有了数组提供内置的forEach方法
//forEach方法中的function回调有三个参数：第一个参数是遍历的数组内容，第二个参数是对应的数组索引，第三个参数是数组本身
arr.forEach(function (value,index,array) {
    var name=value.name;
    console.log(name);//张三 李四
});

无法中途跳出forEach循环，break命令或return命令都不能奏效。

3. for...in方法

// keyName：键名
for(var keyName in arr) {
    console.log(keyName);//"0","1"
    var name=arr[keyName].name;
    console.log(name);//张三 李四
}

for...in循环有几个缺点：

• 数组的键名是数字，但是for...in循环是以字符串作为键名“0”、“1”、“2”等等。
• for...in循环不仅遍历数字键名，还会遍历手动添加的其他键，甚至包括原型链上的键。
• 某些情况下，for...in循环会以任意顺序遍历键名。
  总之，for...in循环主要是为遍历对象而设计的，不适用于遍历数组。

4. map()方法

//这里的map不是“地图”的意思，而是指“映射”。[].map(); 基本用法跟forEach方法类似：
arr.map(function(value, index, array) {
    var name=value.name;
    console.log(name);
});

5. jQuery中的$.each()方法

//$.each()方法中的function回调有三个参数：第一个参数是对应的数组索引，第二个参数是遍历的数组内容，第三个参数是数组本身
$.each(arr, function (index, value, array) {
    var name = value.name;
    console.log(name);//张三 李四
});

6. for...of方法(es6新语法)

for (let item of arr) {
    var name = item.name;
    console.log(item);//张三 李四
}