for...of 遍历数组实例

const sleep = sec => new Promise((resolve, reject) => {
	// setTimeout()的回调函数是promise执行成功的resovle()函数
	setTimeout(resolve, sec)
})
async function pickUp(item_ids) {
	if (item_ids.length === 0) return false
	for (let item of item_ids) {
		try {
			console.log('item: ', item)
			// 每次都等待sleep()函数执行完成
			await sleep(300)
		} catch (e) {
			// 捕获异常信息
			console.log(e.msg)
			// 加continue关键字让跳过异常,继续执行后面的迭代
			continue
		}
		console.log('item: ', 'done')
 	} 
}
const arr = ['1', '3', '5', '12', '31']
// 调用函数
pickUp(arr)

再来回顾下js中遍历都有哪些方法:
ES5具有遍历数组方法有:forEach, map、filter、some、every、reduce等,只不过他们的返回结果不一样。
使用foreach遍历数组的话,使用break不能中断循环,使用return也不能返回到外层函数。
map, filter, reduce这几个方法数据高阶方法,参数是一个函数,数组中的每个元素都会经过该函数的处理,返回处理后的结果

// 对数组中的每一个元素执行给定的函数,返回经过函数处理过的元素组成的数组
const mapArr = [1, 2, 3].map(item => item * 2) // [2, 4, 6]
// 对数组中的元素进行筛选,返回符合条件的元素
const filterArr = [1, 2, 3, 5, 6, 9, 4].filter(item => item > 5) // [6, 9]
// some函数,判断数据中是否有一些元素符合某些条件,如果符合则返回True,否则返回false
const someArr = [2, 4, 3, 6].some(item => item > 5) // true
// some函数
const numArr = [1, 3, 3, 5]
function getSum(total, num) {
	return total + num;
}
function myFn() { 
	return numArr.reduce(getSum)
}
// 调用myFn
myFn() // 12

所以for in更适合遍历对象,不要使用for in遍历数组,而用 for…of 遍历数组

// 遍历对象 通常用for in来遍历对象的键名
const userInfo = {
	name: 'zhangsan',
	age: 20,
	gender: 'male'
}
for (let item in userInfo) {
	console.log(item) // 对象的key: name age gender
	console.log(userInfo[item]) // 对象的value: zhangsan 20 male
}

// for in 可以遍历到myObject的原型方法method,如果不想遍历原型方法和属性的话,可以在循环内部做一个判断,
// 用hasOwnProperty方法可以判断某属性是否是该对象的实例属性
for (let key in userInfo) {
	if (userInfo.hasOwnProperty(key)) {
		console.log(key)
	}
}
// 遍历数组
const arr = [1, 2, 3, 4, 5]
for (let value of arr) {
	console.log(value)
}
// 遍历map对象时适合用解构
for (var [key, value] of userInfo) {
   console.log(key + "'s name is: " + value);
}
// for..of适用遍历数组,数组对象,字符串,map,set等拥有迭代器对象的集合.但是不能遍历对象,因为没有迭代器对象.
// 与forEach()不同的是,它可以正确地 使用break、continue和return语句
// for-of循环不支持普通对象,但如果你想迭代一个对象的属性,你可以用for-in循环
  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值