浅谈for、for in 、for of 、map、forEach、each

浅谈for、for in 、for of 、map、forEach、each

for循环多次遍历代码块

for (let i = 0; i < 5; i++) {
    if(i==1){
    	break   //-continue
    }
     console.log(i)
}

语句 1 在循环开始之前设置了一个变量（let i = 0）。

语句 2 定义运行循环的条件（i 必须小于 5）。

语句 3 会在代码块每次执行之后对值进行递增（i++）。

需要跳出循环时可用break，后面的循环不会再执行，continue仅仅不执行满足当前条件的循环，如果后面还有，将继续执行

如果不进行跳出，遇到循环次数多的情况，耗时最久

for in

如果一个属性在一次迭代中被修改，在稍后被访问，其在循环中的值是其在稍后时间的值。通常，在迭代过程中最好不要在对象上进行添加、修改或者删除属性的操作，除非是对当前正在被访问的属性。

不建议用来遍历数组最好用整数索引去进行for循环（或者使用 Array.prototype.forEach() 或 for…of循环），for in遍历数组的话返回数组的下标，遍历对象返回对象的属性名

let cars =  {a:1, b:2, c:3};
for (let i in cars) {
  console.log(i); //--输出 a b c
}

let cars =  [1,2,3];
for (let i in cars) {
  console.log(i); //--输出 0 1 2
}

同样可以使用break 和continue 跳出循环

for of

Es6引入for of 循环，用以替代 for in 和 forEach,可用来遍历 Arrays（数组）, Strings（字符串）, Maps（映射）, Sets（集合）等可迭代的数据结构等。

let arr = [1,32,3];
for (let i of arr){
	console.log(i); //--1,32,3
}
//for of 不可用于循环 {a:1,b:2} Uncaught TypeError: arr is not iterable

输出的时数组中每个的值,循环字符串，会返回字符串的每一项

遍历 maps

for...of 循环将为每次迭代返回一个 key-value(键值) 数组。

const iterable = new Map([['one', 1], ['two', 2]]);
 
for (const [key, value] of iterable) {
  console.log(`Key: ${key} and Value: ${value}`);
}
 
// Output:
// Key: one and Value: 1
// Key: two and Value: 2

map

Map是一组键值对的结构，具有极快的查找速度。一般来说需要返回值时使用Map，而只需要循环的使用forEach或者其他的循环

map()方法返回一个新数组，数组中的元素为原始数组元素调用函数处理的后值。

map()方法按照原始数组元素顺序依次处理元素。

//一行代码可以省略return
const d = array.map( item => console.log(item))  

const d = array.map( item => {
    return console.log(item)
})

//多行代码需要{}
array.map( item => {
    //do someting  如果是纯处理逻辑的,建议使用forEach
})

//返回组件
array.map( item => (
    <div>{item}</div>   //这种比较常出现在react的jsx
))

记录一个小问题

["1", "2", "3"].map(parseInt);
// 通常使用parseInt时,只需要传递一个参数.但实际上,parseInt可以有两个参数.第二个参数是进制数.
// map方法在调用callback函数时,会给它传递三个参数:当前正在遍历的元素, 元素索引, 原数组本身.
// 第三个参数parseInt会忽视, 但第二个参数不会,也就是说,parseInt把传过来的索引值当成进制数来使用.从而返回了NaN.
// so结果是 [1, NaN, NaN]

forEach each

js用的是forEach，jquery用的是each

forEach中为第一个参数为item，第二个为index。each中第一个为index，第二个为item；

forEach中没有返回值，each有返回值，返回被遍历的数组

forEach不能遍历对象

forEach中包含break/continue，运行会直接报错。

如果需要跳出整个循环，可以采用try/catch方式实现。

array.forEach(function(currentValue, index, arr), thisValue)

forEach三个参数 当前循环内容 ，索引值，原数组

thisValue 传递给函数的值一般用 “this” 值。如果这个参数为空， “undefined” 会传递给 “this” 值

each可遍历一维数组、多维数组、DOM, JSON 等

var arr1 = [ "aaa", "bbb", "ccc" ];      
  $.each(arr1, function(i,val){      
      alert(i);   //0，1，2
      alert(val); //aaa，bbb，ccc
  });   

each处理json数据，能循环每一个属性     
var obj = { one:1, two:2, three:3};      
$.each(obj, function(key, val) {      
	alert(key);   //one two three
	alert(val);    //one，1，two，2，three,3  
});   

JavaScript 提供了四种已知的终止循环执行的方法：break、continue、return 和 throw。

map是为了返回值的，forEach是为了处理但不返回值的，filter是过滤值的，如果要跳出循坏，还是用for。