前言
早就想写一篇博客来谈谈js中的循环和一些循环的方法,这次有时间来说说。
正文
一. for类循环
1. for — 传统的方式
for (let index = 0; index < arr.length; index++) {
console.log(arr[index])
}
-
范围: 可遍历数组,不可遍历对象
-
迭代中的增减: 在遍历的过程中,如果对数组进行
shift
,unshift
,pop
,push
,增加的元素会被遍历,删除的元素不会被遍历,但已迭代过的元素被删除(即使用shift
)会跳过一个或一些元素 -
跳出循环的方式:
- 跳出整个循环:
break
- 跳出当次循环:
continue
- 跳出整个循环:
-
结果:
2. for in
for (let key in person) {
console.log(key)
console.log(person[key])
person.java = 99
}
for (let index in arr) {
console.log(index) //这里输出的index 是string类型,
console.log(arr[index])
}
-
范围: 可遍历数组和对象
-
迭代中的增减: 增加的元素不会被遍历,删除的元素不会被遍历,但已迭代过的元素被删除(即使用
shift
)会跳过一个或一些元素 -
说明:
- 虽说可以遍历数组,但是for in 是为了遍历对象而设计的,不推荐使用其遍历数组
- 可以遍历对象或者数组,迭代量是数组的下标(string类型的索引值)或者对象的key(属性名)
-
跳出循环的方式:
- 跳出整个循环:
break
- 跳出当次循环:
continue
- 跳出整个循环:
-
结果:
3. for of
for (let item of arr) {
console.log(item)
}
-
范围: 可遍历数组,不能遍历对象
-
迭代中的增减: 增加的元素会被遍历,删除的元素不会被遍历,但已迭代过的元素被删除(即使用
shift
)会跳过一个或一些元素 -
说明:
- 可以很方便的对数组进行遍历操作,但如果要用到索引值的话,就不要用这个。
-
跳出循环的方式:
- 跳出整个循环:
break
- 跳出当次循环:
continue
- 跳出整个循环:
-
结果:
4. jQuery.each()
$.each(person, (key, value) => {
console.log(key, value)
})
$.each(arr, (index, value) => {
console.log(index, value)
})
-
范围: 可遍历数组和对象
-
迭代中的增减: 增加的元素不会被遍历,删除的元素不会被遍历,但已迭代过的元素被删除(即使用
shift
)会跳过一个或一些元素 -
说明:
- 注意each方法的回调函数的参数顺序是键,值。
-
跳出循环的方式:
- 跳出整个循环:
return false
- 跳出当次循环:
return true
或者return
或者return 其他量
- 跳出整个循环:
-
结果:
5. forEach
arr.forEach((item, index, iterable) => {
console.log(item, index, iterable)
})
-
范围: 可遍历数组,不可遍历对象
-
迭代中的增减: 增加的元素不会被遍历,删除的元素不会被遍历,但已迭代过的元素被删除(即使用
shift
)会跳过一个或一些元素 -
说明:
- 索引值是number类型,回调函数的三个参数都是可选的,按顺序是值,索引号,数组本身
- 还可增加一个参数,回调函数中
this
会指向这个参数 - 如果要跳出整个循环,不要使用它
-
跳出循环的方式:
- 跳出整个循环:抛出异常
- 跳出当次循环:任何的
return
都只会跳出当次循环
-
结果:
二. 数组遍历方法
1. filter()
let count = 0
let newArr = arr.filter(item => {
count++
return item < 3
})
console.log(newArr, count)
- 返回值类型: 数组
- 跳出循环时机: 遍历整个数组后
- 说明:
- 返回满足条件的项组成的数组,如果没有满足条件的项,返回空数组
- 结果:
2. map()
let count = 0
let newArr = arr.map(item => {
count++
return item * 10
})
console.log(newArr, count)
- 返回值类型: 数组
- 跳出循环时机: 遍历整个数组后
- 说明:
- 对数组的每一项进行处理,返回一个新的数组
- 结果:
3. some()
let count = 0
let flag = arr.some(item => {
count++
return item > 3
})
console.log(flag, count)
- 返回值类型: 布尔值
- 跳出循环时机: 只要有满足条件的项则立即结束循环
- 说明:
- 返回值true/false,只要有满足条件的项则立即结束循环,返回
true
,否则返回false
- 返回值true/false,只要有满足条件的项则立即结束循环,返回
- 结果:
4. every()
let count = 0
let flag = arr.every(item => {
count++
return item <= 5
})
console.log(flag, count)
- 返回值类型: 布尔值
- 跳出循环时机: 遍历整个数组后
- 说明:
- 返回值true/false,只有当所有的项都满足条件时返回true,否则返回false,一定会循环完整个数组
- 结果:
4. find()
let count = 0
let item = arr.find(item => {
count++
return item === 3
})
console.log(item, count)
- 返回值类型: 数组中的项/
undfined
- 跳出循环时机: 循环到第一个满足条件的项
- 说明:
- 如果没有满足条件的项,返回
undefined
- 如果没有满足条件的项,返回
- 结果:
5. findIndex()
与find()
用法一直,只不过返回的是number
类型的索引值,没有满足条件的项时,返回-1
补充
- 跳出
for
循环可以利用函数的return
(2021/2/26)
function isSuperset(set, subset) {
for (let elem of subset) {
if (!set.has(elem)) {
return false;
}
}
return true;
}
结语
码字不易,如果对你有帮助的话,请点一个赞吧