js遍历总结

let publicArray = [{
    name: 'Grape',
    color: 'purple',
    weight: 100,
    price: 12
}, {
    name: 'Apple',
    color: 'red',
    weight: 50,
    price: 34
}, {
    name: 'Pear',
    color: 'yellow',
    weight: 80,
    price: 10
}, {
    name: 'Orange',
    color: 'orange',
    weight: 10,
    price: 20
}]

// 运行时间比forEach慢好多
// 可以遍历对象
// 不建议遍历数组

// for in：i是索引，arr[i]是数组元素值；for of：i是数组元素值，没有索引
// 可能会有遍历两遍的情况
console.time('time span')
for (let i in publicArray) {
    // console.log('for')
    // console.log(i)
    // console.log(publicArray[i])
}
console.timeEnd('time span')

// 效率最高的
// 可以用break中断
// 数组特别大的时候,可以暂存数组长度提升效率 避免重复获取数组长度
for(let i = 0, len = publicArray.length; i < len; i++) {}
console.time('normal for')
for (let i = 0; i < publicArray.length; i++) {
    // console.log(i)
    // console.log(publicArray[i])
}
console.timeEnd('normal for')

// 性能比for in 好,能避免for in的缺陷,性能比不上普通的for
// 可以响应return break continue

// for in：i是索引，arr[i]是数组元素值；for of：i是数组元素值，没有索引
for (let i of publicArray) {
    console.log(i)
    console.log(publicArray[i])
}

// 没有返回值
// 可以对某一项进行修改
// 不能遍历对象
// 不能用break中断循环,不能用return返回到外层函数
// 运行时间比for in 更快
// $.each()可以遍历对象 有返回值
console.time('time foreach')
publicArray.forEach((item, index, array) => {
    // console.log('foreach')
    // console.log(item)
    // console.log(index)
    // console.log(array)
})
console.timeEnd('time foreach')

// 比for还慢好多
// 有返回值
// 效率不如foreach
// 只能加工,不能筛选
// 按照原始数组元素顺序依次处理元素

// 没有返回值的时候默认返回undefined
console.time('map')
publicArray.map((item, index, arr) => {
    // console.log('map for')
    // console.log(item)
    // console.log(index)
    // console.log(arr)
})
console.timeEnd('map')

// 和foreach速度差不错
// 不检测空数组
// 不改变原始数组
// 可以用来筛选 没有符合条件的返回空数组
console.time('filter')
publicArray.filter((item, index, arr) => {
    // console.log('filter')
    // console.log(item)
    // console.log(index)
    // console.log(arr)
})
console.timeEnd('filter')

// 检测数组是否满足一些条件的函数存在
// 如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测
// 当任一callback返回值匹配为true则会直接返回true，如果所有的callback匹配均为false，则返回false
publicArray.some((item, index, arr) => { 
    console.log(item)
    console.log(index)
    console.log(arr) 
})

// 检测数组所有元素是否都符合指定条件（通过函数提供）
// 如果所有元素都满足条件，则返回 true
// 如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测
publicArray.every((item, index, arr) => { 
    console.log(item)
    console.log(index)
    console.log(arr) 
})