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

1、for

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

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

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

1 var arr = [1, 2, 3, 4, 5, 6]
2 var len = arr.length
3 for(var i = 0; i < len; i++) {
4     console.log(arr[i])
5 }
6 
7 // 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(不能循环对象)

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

4、forEach

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

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

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

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

5、map

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

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

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

1 var arr = [1, 2, 3, 4, 5, 6]
2 var newArr = arr.map(function (item, idnex) {
3     return item * item
4 })
5 
6 console.log(newArr)    // [1, 4, 9, 16, 25, 36]

6、filter

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

 1 var arr = [
 2     { id: 1, name: '买笔', done: true },
 3     { id: 2, name: '买笔记本', done: true },
 4     { id: 3, name: '练字', done: false }
 5 ]
 6     
 7 var newArr = arr.filter(function (item, index) {
 8     return item.done
 9 })
10 
11 console.log(newArr)
12 
13 // [{ id: 1, name: '买笔', done: true },{ id: 2, name: '买笔记本', done: true }]

7、some

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

 1 var arr = [
 2     { id: 1, name: '买笔', done: true },
 3     { id: 2, name: '买笔记本', done: true },
 4     { id: 3, name: '练字', done: false }
 5 ]
 6 
 7 var bool = arr.some(function (item, index) {
 8     return item.done
 9 })
10 
11 console.log(bool)    // true

8、every

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

 1 var arr = [
 2     { id: 1, name: '买笔', done: true },
 3     { id: 2, name: '买笔记本', done: true },
 4     { id: 3, name: '练字', done: false }
 5 ]
 6 
 7 var bool = arr.every(function (item, index) {
 8     return item.done
 9 })
10 
11 console.log(bool)    // false

9、find【ES6】

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

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

10、findeIndex【ES6】

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

1 var arr = [1, 1, 2, 2, 3, 3, 4, 5, 6]
2     
3 var num = arr.findIndex(function (item) {
4     return item === 3
5 })
6 
7 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

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

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

猜你喜欢