浅谈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 提供了四种已知的终止循环执行的方法:breakcontinuereturnthrow

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

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值