for 循环 (ES5)

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

针对for循环，循环条件总比循环体要多执行一次

const arr = [1, 2, 3]

 for(let i = 0; i < arr.length; i++) {
     console.log(arr[i])  // 1 2 3
 }

for…in (ES5)

for…in循环非常不建议用在数组上，for…in是为遍历对象属性而构建的，当然数组也可以用

for...in循环在使用过程中要小心一点，可能会出现问题

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];

for(let index in arr) {
    console.log(index);
}
 // 0 1 2 3 4 5 6 7 8

forEach() (ES5)

语法：array.forEach(callbackFn(currentValue, index, arr), thisValue)

其他语法：

// 箭头函数
forEach((element) => { /* … */ })
forEach((element, index) => { /* … */ })
forEach((element, index, array) => { /* … */ })

// 回调函数
forEach(callbackFn)
forEach(callbackFn, thisArg)

// 内联回调函数
forEach(function(element) { /* … */ })
forEach(function(element, index) { /* … */ })
forEach(function(element, index, array){ /* … */ })
forEach(function(element, index, array) { /* … */ }, thisArg)

forEach循环没有返回值，数组里的元素个数有几个，该方法里的回调就会执行几次

forEach 循环本身不支持 continue 和 break语句的

continue可以用 return false 或 return true 代替

break可以用 try catch/every/some 代替

const arr = [1, 2, 3, 4, 5, 6];

arr.forEach((item, index, arr) => {
    console.log(item)  // 当前元素 1 2 3 4 5 6 
    console.log(index)  // 数组里当前元素的索引值 0 1 2 3 4 5 
});

map() (ES5)

map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值

map 循环必须 return

map 循环不会改变原数组

语法：array.map(function(currentValue, index, arr), thisValue)

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

 let newArr = arr.map(item => {
    return item + 1
 })
 console.log(arr,newArr) 
 // 1 2 3 4 5 
 // 2 3 4 5 6

filter() (ES5)

filter() 循环会返回一个符合条件的新数组，新数组中的元素是通过检查指定数组中符合条件的所有元素

filter 循环不会改变原数组

语法：array.filter(function(currentValue,index,arr), thisValue)

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];

const res = arr.filter((item,index,arr)=>{
    return item > 3;
});
console.log(arr,res) 
// 1, 2, 3, 4, 5, 6, 7, 8, 9
// 4, 5, 6, 7, 8, 9

some() (ES5)

some 循环查找数组中任意符合条件的元素并返回boolean值，遍历数组，只要有一个以上的元素满足条件就返回 true，否则返回 false ，退出循环

some 循环不会改变原数组

const arr = [1, 2, 3, 4, 5];

const res = arr.some((item,index,arr) =>{
    return item > 3
})
console.log(res)  // true

every() (ES5)

every 循环查找数组中所有符合条件的元素并返回boolean值，只有当数组中有所有元素都符合条件才返回 true 否则返回 fasle

every 循环不会改变原数组

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];

const res = arr.every((item,index,arr)=>{
    return item > 3
})
console.log(res);  // false

reduce() (ES5)

reduce 循环接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。

语法：array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

reduce的简单用法

const arr = [1, 2, 3, 4];
const mul = arr.reduce((x,y)=>x*y)
console.log( mul );  // 求乘积 24

const arr = [1,2,3,4]
const sum = arr.reduce((pre,cur)=>{
    return pre +cur
})
console.log(sum)  // 求和 10

reduce的高级用法

计算数组中每个元素出现的次数

let person = ['张三','李四','王五','张三','赵六','王五']
let nameObj = person.reduce((pre,cur) =>{
    if( cur in pre){
        pre[cur]++
    }
    else{
        pre[cur] = 1
    }
    return pre
}, {})
console.log(nameObj) // {张三: 2, 李四: 1, 王五: 2, 赵六: 1}

数组去重

indexOf() 可返回某个指定的字符串值在字符串中首次出现的位置

如果没有找到匹配的字符串则返回 -1

let arr = [1,2,3,4,4,1]
let newArr = arr.reduce((pre,cur)=>{
    if(!pre.includes(cur)){
      return pre.concat(cur)
    }else{
      return pre
    }
},[])
console.log(newArr);// [1, 2, 3, 4]


let arr = [1,2,3,4,4,1]
let res = arr.reduce((pre,cur){
     pre.indexOf(cur) == -1 && pre.push(cur)
     return pre
},[])
console.log(pre);// [1, 2, 3, 4]

将二维数组转化为一维

concat() 用于连接两个或多个数组。

concat() 不会更改现有数组，而是返回一个新数组，其中包含已连接数组的值

let arr = [[0, 1], [2, 3], [4, 5]]
let newArr = arr.reduce((pre,cur)=>{
    return pre.concat(cur)
},[])
console.log(newArr); // [0, 1, 2, 3, 4, 5]

将多维数组转化为一维

let arr = [[0, 1], [2, 3], [4,[5,6,7]]]
const newArr = function(arr){
   return arr.reduce((pre,cur)=>pre.concat(Array.isArray(cur)?newArr(cur):cur),[])
}
console.log(newArr(arr)); //[0, 1, 2, 3, 4, 5, 6, 7]

find() (ES6)

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

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

  let arr = [1,2,2,3,3,3,3,4,4,5,6]
  let num = arr.find((item:any) => {
      return item === 10
  })
  console.log(num)  // undefined

findIndex() (ES6)

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

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

 let arr = [1,2,2,3,3,3,3,4,4,5,6]
 let num = arr.findIndex((item:any) => {
     return item === 10
 })
console.log(num)  // -1

for…of…（ES6）

不能循环对象，因为任何数据结构只要部署 Iterator接口，就可以完成遍历操作，有些数据结构原生具备 Iterator 接口，比如Array、Map、Set、String等，而 Iterator 接口是部署在数据结构的Symbol.iterator属性上的，而对象Object恰恰是没有Symbol.iterator属性的，所以无法被for..of遍历

for…of… 返回对应的内容

const arr = ['我', '是', '谁', '我', '在', '哪'];

for(let item of arr) {
    console.log(item);
}
// 我 是 谁 我 在 哪

values()

values方法返回对应的内容

const arr = ['我', '是', '谁', '我', '在', '哪'];

for(let item of arr.values()) {
    console.log(item);
}
// 我 是 谁 我 在 哪

entries()

entries方法返回对应的值和下标值

const arr = ['我', '是', '谁', '我', '在', '哪'];

for(let [index，item] of arr.entries()) {
    console.log(index，item);
}
// 0 我
// 1 是 
// 2 谁 
// 3 我 
// 4 在 
// 5 哪

js 数组遍历的常见方法 (ES5)+(ES6)