遍历的方法总结

1.for循环

2.forEach((item,index,arry)=>{ })

3.for key in array/object

4.for key of array/string

for..in 和for..of的区别

5.map() 映射

6.filter() 过滤

7.some((item,index,array)=>{}) 

8.every((item,index,array)=>{}) 

8.reduce(callback,[initialValue]) 实现数据的累加

9.find() 指定元素查找

10.findIndex()指定元素查找下标

---

1.for循环

优化:使用临时变量,将length缓存起来,避免重复获取length,在length较大时效果才比较明显.

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.forEach((item,index,arry)=>{ })

效率较for高,默认没有返回值

循环基本数据类型时,不会改变原数据;

循环复杂数据类型时,会改变原数据的对象属性值;

var arr = [1, 2, 3, 4, 5, 6]

arr.forEach((item, idnex, array) => {  console.log(item)    // 1 2 3 4 5 6 

console.log(array)    // [1, 2, 3, 4, 5, 6]  })

// 循环的数组元素是基本数据类型，不会改变原数据的数据

var arr1 = [1, 2, 3, 4, 5, 6]

arr1.forEach((item) => { item = 10  })   console.log(arr1) // [1, 2, 3, 4, 5, 6]

// 循环的数组元素为对象，会改变原数组的对象属性的值

var arr2 = [ { a:1, b:2 } , { a:11, b:12 } ]

arr2.forEach((item) => { item.a = 10 })

console.log(arr2) //  [{a: 10, b: 2}, {a: 10, b: 2}]

// 使用try...catch...可以跳出循环

try {

  let arr = [1, 2, 3, 4];

  arr.forEach((item) => { // 跳出条件

if (item === 3) { throw new Error("LoopTerminates") ; }  console.log(item) ; }); } 

catch (e) { if (e.message !== "LoopTerminates") throw e ; } ; // 1 2

3.for key in array/object

不可以遍历空数组,效率最低

遍历数组时,key为数组的下标;

遍历对象时,key为对象的属性名;

var arr = ['我', '是', '谁', '我', '在', '哪']

for(let key in arr) { console.log(key) } // 0 1 2 3 4 5

let obj = { a: 11, b: 22 , c: 33 }

for(let key in obj) { console.log(key) } // a b c

4.for key of array/string

性能较for .. in .. 好,较for差.

注意:不能遍历循环对象,因为任何数据只要部署interator接口,就可以完成遍历操作,有些数据结构原生具备interator接口,如array/map/set/string等,而interator接口是部署在Symbol.interator属性上的,而对象object没有Symbol.interator属性,所以无法遍历.

var arr = ['我', '是', '谁', '我', '在', '哪']

for(var key of arr) { console.log(key) } // 我 是 谁 我 在 哪

for..in 和for..of的区别

for..in只能获取对象的键名,不能获得键值; for..of允许遍历获得键值;

5.map() 映射

性能较forEach差,不会改变原数组

遍历每一个元素并返回处理后的值,返回数组长度与原数组长度一致

注意:不能使用break/continue跳出数组,会报错,可以使用try..catch跳出数组

var array = arr.map((item,index)=>{ return  })

// 一、会改变原数组

var arr = [1, 2, 3, 4, 5, 6]

var newArr = arr.map(function (item, idnex) { return item * item })

console.log(arr)      // [1, 2, 3, 4, 5, 6]    console.log(newArr)  // [1, 4, 9, 16, 25, 36]

// 二、会改变原数组元素中对象的属性值

var arr = [{a: 1, b: 2},{a: 11, b: 12}]

let newARR = arr.map((item)=>{ item.b = 111 ; return item })

console.log('arr数组',arr) // [{a: 1, b: 111},{a: 11, b: 111}]

console.log('newARR',newARR) // [{a: 1, b: 111},{a: 11, b: 111}]

// 三、不会改变原数组

var arr = [{a: 1, b: 2},{a: 11, b: 12}]

let newARR = arr.map((item)=>{ return { ...item , b:111 } })

console.log('arr数组',arr) // [{a: 1, b: 2},{a: 11, b: 12}]

console.log('newARR',newARR) // [{a: 1, b: 111},{a: 11, b: 111}]

// 四、使用try...catch...可以跳出循环

try { var arr = [1, 2, 3, 4];

arr.map((item) => { //跳出条件

if (item === 3) { throw new Error("LoopTerminates") ; }  console.log(item) ; return item });

} catch (e) { if (e.message !== "LoopTerminates") throw e ; } ; // 1 2

6.filter() 过滤

遍历数组,过滤筛选出符合条件的元素返回一个新的数组,没有符合条件时,返回空数组

var newarr = arr.filter((item,index)=>{ return 条件 })

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((item,index,array)=>{}) 

遍历数组,只要有满足条件的元素就返回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((item,index,array)=>{}) 

遍历数组,所有元素都满足条件返回true,否则返回false

注意:空数组调用every返回true

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

8.reduce(callback,[initialValue]) 实现数据的累加

arr.reduce(function(prev, cur, index, array){ // array:原数组 prev:上一次调用回调时的返回值，或者初始值  initcur:当前正在处理的数组元素index:当前正在处理的数组元素的索引  init:初始值}, init)

array.reduce( ( accumulator,currentValue,currentIndex,array )=>{

accumulator：累加器 每次迭代的结果

currentValue：当前数组中的元素 会遍历数组 得到数组中的值

currentIndex：当前元素在数组中的下标

array：数组对象本身

initialValue：可选参数，会影响accumulator的初始值，分两种情况：

如果没给initialValue,那么accumulator取自数组中的第一个元素，此时currentValue会取自数组中的第二个元素，开始迭代

如果给定了initialValue，那么initialValue会作为accumulator的初始值，此时currentValue会取自数组中的第一个元素，开始迭代

} [initialValue：初始值])

//求和varsum = arr.reduce(function (prev, cur) { return prev + cur; } , 0 ) ;

//取最大值varmax = arr.reduce(function (prev, cur) { return Math.max(prev,cur ) ; });

9.find() 指定元素查找

遍历数组,原数组不改变返回符合条件的第一个元素,没有符合条件的元素时返回undefined

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.findIndex()指定元素查找下标

遍历数组,不会改变原数组,返回符合条件的第一个元素的下标,没有符合条件的元素时返回-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