遍历数组/对象的几种方式

常用的方法：for、for in、for of（es6语法）、forEach、map、filter、$.each、$.map
注：本篇文章demo只涉及遍历数组元素

• 只能遍历数组：for、forEach、map、filter（map和filter会返回一个新数组）
• 可以遍历数组和非数组对象：for in、for of（es6语法-只能遍历部署了 Iterator 接口的对象）、$.each、$.map
  注：默认遍历后都不会改变原数组，除非手动在遍历内容体中去改变原数组。

// 声明几个需要用到的变量
var arr = [1, 78, 90, "hello", 22], results = [];

1、 使用for循环遍历

for (var i, len = arr.length; i < len; i++) {
    console.log("for=>index=" + i + "/value=" + arr[i]);
}

注：用for循环遍历，使用临时变量，将长度缓存起来，避免重复获取数组长度，提高效率

2、使用for in循环遍历

for (var i in arr) {
    console.log("for in=>index=" + i + "/value=" + arr[i]);
}

注：据说这个效率是循环遍历中效率最低的

3、使用for of循环遍历[es6语法]

for (let value of arr) {
    console.log("for of=>value=" + value);
}

注：性能优于for in，value代表的是属性值

4、使用forEach遍历

results = arr.forEach(function (value, index, array) {
    console.log("forEach=>" + index + ": " + value + "/" + array[index]);
    return value; 
});
console.log("forEach=>results=" + results);  // =>undefined

其中value参数是必须的，代表当前元素的值。forEach返回值为undefined

5、使用map遍历

results = arr.map(function (value, index, array) {
    console.log("map=>" + index + ": " + value + "/" + array[index]);
    return value + index;
});
console.log("map=>results=" + results); // =>1,79,92,hello3,26

（1）：其中value参数是必须的，代表当前元素的值
（2）：map返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值，不会改变原数组，返回值是什么就是什么，如果不做其它处理的新数组长度和原始数组长度相等*

6、使用filter遍历

results = arr.filter(function (value, index, array) {
    console.log("filter=>" + index + ": " + value + "/" + array[index]);
    return isNaN(value) ? "" : value;
});
console.log("filter=>results=" + results); // =>1,78,90,22

（1）：其中value参数是必须的，代表当前元素的值
（2）：使用filter方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素，不会改变原数组，返回值如果是false类型的即删除该元素
（3）：jquery的方法filter只是对jQuery对象进行一个过滤，筛选出与指定表达式匹配的元素集合。如：$("p").filter(".selected"); // 保留带有select类的p元素*

7、使用jQuery核心方法$.each遍历数组

 $.each(arr, function (index, value) {
    console.log("$.each=>index=" + index + "/value=" + value);
});

注：该方法也可以用来操作jQuery对象，如：$("div").each(callback) // 对匹配到的div元素执行相关操作

8、使用jQuery核心方法$.map遍历数组

results = $.map(arr, function (value, index) {
    console.log("$.each=>index=" + index + "/value=" + value);
    return isNaN(value) ? null : value;
   // 返回null（删除数组中的项目），不能返回""，只是将对应的数组元素置为长度为0的字符串
});
console.log(arr + "=======" + results); // 1,78,90,hello,22=======1,78,90,22

该方法也可以用来操作jQuery对象，如：

$("p").append( $("input").map(function(){
   return $(this).val();
 }).get().join(", ") );