1、for循环
这应该是大家耳熟能详的一种循环方式,虽然for循环感觉写法臃肿,但其实for循环才是速度最快、效率最高的,并且可以满足条件跳出循环,后面的就不用执行了,能节省些性能,举个栗子
let _data = [ { name: '张三', age: 18, id: '1' }, { name: '李四', age: 30, id: '2' }, { name: '王五', age: 26, id: '3' }, ] let str = '' for(let i = 0; i < _data.length; i++){ if(_data[i].id === '2'){ str = _data[i].name break } } console.log(str) // 李四
比如这个data是后台反的数据,需要你从中找出id为2的那一项的name值,我们都知道,正常情况下,字段id一般都是唯一的,不会重复,所以在找到那一项的时候,就可以break跳出循环,后面的项就不用再循环了,可以节省部分性能
2、forEach
forEach是遍历整个数组,break无法跳出循环,什么场景下使用呢,还是上边的data数据,如果想给每一项添加一个开关属性,具体用来操作什么呢,这个场景比较多,可以是样式,也可以是其他的,具体看使用场景,这个时候就可以使用到forEach循环了
_data.forEach(item => {
item.flag = false
})
console.log(_data)
// {
// age: 18
// flag: false
// id: "1"
// name: "张三"
// }
// {
// .......
// }
现在就给每一项添加了一个flag属性,默认为false,就可以去在点击事件上或者其他场景,拿到id或者点击事件传过来的下标去操作每一项的flag属性,实现想要的效果
3、map
map循环支持return值,把每一次循环返回的值组成一个新数组,不会修改原数组
如果是计算,则返回计算后的值 判断返回布尔值
let arr = [1, 2, 3, 4, 5, 6]
const li = arr.map(item => {
return item > 2
// return item * 10
})
console.log(arr) // [1, 2, 3, 4, 5, 6]
console.log(li) // [false, false, true, true, true, true]
console.log(li) // [10, 20, 30, 40, 50, 60]
4、filter
又叫过滤器,和map有点相似,因为都是满足条件返回新数组,不会修改原数组,但是也有不同,map循环可以进行计算,返回布尔值,而filter不可以
let arr = [1, 2, 3, 4, 5, 6]
const li = arr.filter(item => item > 2)
const li = arr.filter(item => {
return item > 2
})
console.log(arr) // [1, 2, 3, 4, 5, 6]
console.log(li) // [3, 4, 5, 6]
5、every
给数组的每一项都运行一个函数,如果数组的每一项都满足条件就返回true,否则返回false
let arr = [1, 2, 3, 4, 5, 6]
const li = arr.every(item => {
return item > 2
})
console.log(li) // false
const li = arr.every(item => {
return item > 0
})
console.log(li) // true
6、some
和every相反,every是遍历每一项,some是只要有一项满足条件,就会跳出循环,后边的不再执行,如果都不满足返回false
let arr = [1, 2, 3, 4, 5, 6]
const li = arr.some(item => {
console.log(item) // 1 2 3
return item > 2
})
console.log(li) // true
let arr = [1, 2, 3, 4, 5, 6]
const li = arr.some(item => {
console.log(item) // 1 2 3 4 5 6
return item > 10
})
console.log(li) // false