6、前端知识点--关于遍历汇总

1、for 

　　最简单的一种遍历方法，也是使用频率最高的一种方法，可优化。

var arr = [1, 2, 3, 4, 5, 6]
for(var i = 0; i < arr.length; i++) {
    console.log(arr[i])
}

// 1 2 3 4 5 6

　　优化：使用临时变量，将长度存起来，避免重复获取数组长度，当数组交大时，优化效果才比较明显

var arr = [1, 2, 3, 4, 5, 6]
var len = arr.length
for(var i = 0; i < len; i++) {
    console.log(arr[i])
}

// 1 2 3 4 5 6

2、for ... in...

　　这个循环用的人很多，但是效率最低

var arr = [1,2,3,4,5,6]
for(var key in arr) {
    console.log(arr[key])
}

// 1 2 3 4 5 6

3、for ... of ...【ES6】

　　虽然性能要好于for ... in ... ，但仍比不上最普通的for(不能循环对象)

var arr = [1, 2, 3, 4, 5, 6]
for(var key of arr) {
    console.log(key)
}

// 1 2 3 4 5 6

4、forEach

　　数组里面的元素有几个，放方法里的回调就会执行几次

　　第一个参数时数组里的元素，第二个参数时数组里元素的索引，第三个参数就是它自己本身，

　　数组自带的遍历方法，虽然使用频率较高，但是性能仍然比普通循环略低（只是略低，相对还不错）

var arr = [1, 2, 3, 4, 5, 6]
arr.forEach(function (item, idnex, array) {
    console.log(item)     // 1 2 3 4 5 6
    console.log(array)    // [1, 2, 3, 4, 5, 6]
})

5、map

　　遍历每一个元素，并返回每一个元素，（可以返回处理后的元素）（map映射一一对应）

　　返回的新数组和旧数组长度是一样的。

　　使用比较广泛，但性能还不如forEach

var arr = [1, 2, 3, 4, 5, 6]
var newArr = arr.map(function (item, idnex) {
    return item * item
})

console.log(newArr)    // [1, 4, 9, 16, 25, 36]

6、filter

　　遍历数组，过滤出符合条件的元素并返回一个新数组

var arr = [
    { id: 1, name: '买笔', done: true },
    { id: 2, name: '买笔记本', done: true },
    { id: 3, name: '练字', done: false }
]
    
var newArr = arr.filter(function (item, index) {
    return item.done
})

console.log(newArr)

// [{ id: 1, name: '买笔', done: true },{ id: 2, name: '买笔记本', done: true }]

7、some

　　遍历数组，只要有一个以上的元素符合条件  就返回true，否则返回false

var arr = [
    { id: 1, name: '买笔', done: true },
    { id: 2, name: '买笔记本', done: true },
    { id: 3, name: '练字', done: false }
]

var bool = arr.some(function (item, index) {
    return item.done
})

console.log(bool)    // true

8、every

　　遍历数组，每一个元素都满足条件，就返回true，否则返回false

var arr = [
    { id: 1, name: '买笔', done: true },
    { id: 2, name: '买笔记本', done: true },
    { id: 3, name: '练字', done: false }
]

var bool = arr.every(function (item, index) {
    return item.done
})

console.log(bool)    // false

9、find【ES6】

　　遍历数组，返回符合条件的第一个元素，如果没有符合条件的元素，则返回undefind

var arr = [1, 1, 2, 2, 3, 3, 4, 5, 6]
    
var num = arr.find(function (item, index) {
    return item === 3
})

console.log(num)   //  3

10、findeIndex【ES6】

　　遍历数组，返回符合条件的第一个元素的索引，如果没有符合条件的元素，则返回-1

var arr = [1, 1, 2, 2, 3, 3, 4, 5, 6]
    
var num = arr.findIndex(function (item) {
    return item === 3
})

console.log(num)   //  4

 

总结：forEach、map、filter、reduce、every、some 都会有 break 和 continue 不生效的问题，因为是在function中，但function解决了闭包陷阱的问题；要使用 break、continue 可以使用 for、for...in、for...of、while。 用于遍历数组元素使用：for()，forEach()，map()，for...of 用于循环对象属性使用：for...in

 

心灵寄语：每一次汇总，都是一次升华！