js中for、for in、foreach、for of和$.each、$().each的区别

在es5中有3种遍历的方式，分别为for、for in 、 foreach。

一、for

这算是js中最常用的遍历方式。

let arr = [1,2,3,4,5];
for(let i = 0;i<arr.length;i++){
   console.log(i);   //1 2 3 4 5
}

for中最好将len先读取出来，如果按上面的写法，每次循环都会读取一次数组的长度，可以做一下优化。

let arr = [1,2,3,4,5];
for(let i = 0，len=arr.length;i<len;i++){
   console.log(i);   //1 2 3 4 5
}

二、foreach

foreach无需知道数组的长度，可直接遍历进行操作，但其不能使用break、continue、return来中止或跳过遍历。其接受3个可选参数。

let arr = [1,2,3,4,5];
arr.forEach(function (val, index, arr) {
    console.log(`${val}+++${index}+++${arr}`);
})
//1+++0+++1,2,3,4,5
//2+++1+++1,2,3,4,5
//3+++2+++1,2,3,4,5
//4+++3+++1,2,3,4,5
//5+++4+++1,2,3,4,5

其第一个参数为元素的值，第二参数为元素的索引，第三参数为遍历的数组

三、for in

for in一般用来遍历对象或数组，其可以遍历一个对象的所有属性.for in的性能消耗是什么大的，其每次遍历都会遍历原型链。性能消耗上大概是前两种的7倍。一般不建议使用。

let maps = new Map([
    ['a', 1],
    ['b', 2],
    ['c', 3]
])
for (let i in obj) {
    console.log(i);
}
// a b c

四、for of

ES6中新增加的语法 for of 语句创建一个循环来迭代可迭代的对象。在 ES6 中引入的 for of 循环，以替代 for in 和 forEach() ，并支持新的迭代协议。for of 允许你遍历 Arrays（数组）, Strings（字符串）, Maps（映射）, Sets（集合）等可迭代的数据结构等。

let arr = ['A', 'B', 'C']
let iterable = "abc";
for (let val of arr) {
    console.log(val) 
}
for (let value of iterable) {
  console.log(value);
}

// A B C
//a b c

let iterable = new Map([["a", 1], ["b", 2], ["c", 3]]);    
for (let [key, value] of iterable) {
  console.log(value);
}
// 1
// 2
// 3

for (let entry of iterable) {
  console.log(entry);
}
// [a, 1]
// [b, 2]
// [c, 3]

$.each

$.each(arr|obj, function(k, v))
可以用来遍历数组和对象，其中k表示索引值或者key值，v表示value值

var arr = ['a','b','c']
$.each(arr, function(key, val) {
    console.log(key, val);
})
//0 a
//1 b
//2 c

$().each()

$().each()在dom处理上面用的较多,主要是用来遍历DOMList。如果页面有多个input标签类型为checkbox，对于这时用$().each()来处理多个checkbox

$(“input[name=’checkbox’]”).each(function(i){
if($(this).attr(‘checked’)==true){
//操作代码
}