聊聊JavaScript遍历方法

1. for循环
   最简单的一种循环遍历方法，也是使用频率最高的一种。（建议使用临时变量将长度缓存起来，避免重复获取数组长度，这种优化只有当数组较大时效果才会比较明显）

var arr = ['a', 'b', 'c', 'd', 'e', 'f']
var len = arr.length
for(var i = 0; i < len; i++) {
    console.log(arr[i])
}
// a b c d e f

2. for in
   用于以原始插入顺序遍历Json对象 (除for in外以下几种都不可用于遍历Json对象)。索引取的是数组的下标

var arr = ['a', 'b', 'c', 'd', 'e', 'f']
for(key in arr) {
    console.log(key)
}
// 1 2 3 4 5 6

const obj = { name: '张三',gender: '男',age: 20}
for(key in obj){
  console.log(obj[key])
}
// 张三 男  20

用于遍历数组时，可以将数组看作对象，数组下标看作属性名。但用for in遍历数组时不一定会按照数组的索引顺序。

3. for of
   用于遍历可迭代对象（Array，Map，Set，String，TypedArray，arguments 对象等等）。索引取的是元素的值

var arr = ['a', 'b', 'c', 'd', 'e', 'f']
for(key in arr) {
    console.log(key)
}
// a b c d e f

4. forEach
   forEach方法对(数组/Map/Set)中的每个元素执行一次提供的函数。该函数接受三个参数：

• 正在处理的当前元素，对于Map元素，代表其值；
• 正在处理的当前元素的索引，对于Map元素，代表其键，对于Set而言，索引与值一样。
• forEach()方法正在操作的数组对象。

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]
})

5. map
   map() 方法创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。该函数接受的三个参数为：

• 当前元素
• 当前索引
• 当前被调用的数组
  （与forEach的区别是创建了一个新数组）

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

6. filter
   filter对原数组进行过滤筛选，生成符合条件的新数组,使用和map一样有三个参数。filter不会改变原数组。不可改变普通类型，可改变引用类型

const arr = [
  { id: 1, name: '买笔', done: true },
  { id: 2, name: '买笔记本', done: true },
  { id: 3, name: '练字', done: false },
];
const newArr = arr.filter(function(item) {
  return item.done;
});
console.log(newArr); 
<!--[{ id: 1, name: '买笔', done: true },{ id: 2, name: '买笔记本', done: true }]-->

7. every
   对数组中的每一项运行给定函数，如果该函数对每一项返回true,则返回true。

const arr = [
  { id: 1, name: '买笔', done: true },
  { id: 2, name: '买笔记本', done: true },
  { id: 3, name: '练字', done: false },
];
const bool= arr.every(function(item) {
  return item.done;
});
console.log(bool);    // false

8. some
   对数组中每一项运行指定函数，如果该函数对任一项返回true，则返回true。

const arr = [
  { id: 1, name: '买笔', done: true },
  { id: 2, name: '买笔记本', done: true },
  { id: 3, name: '练字', done: false },
];
const bool= arr.some(function(item) {
  return item.done;
});
console.log(bool);    // true

9. find
   对数组中每一项运行指定函数，返回数组中符合测试函数条件的第一个元素。否则返回undefined

const arr = [
  { id: 1, name: '买笔', done: true },
  { id: 2, name: '买笔记本', done: true },
  { id: 3, name: '练字', done: false },
];
const arrDone= arr.some(function(item) {
  return item.done;
});
console.log(arrDone);  
<!-- { id: 1, name: '买笔', done: true }-->

补充：数组对象剩余的几种方法

1. reduce
   reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，将其结果汇总为单个返回值。
   语法：array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

var arr = [1, 2, 3, 4];
var sum = arr.reduce(function(prev, cur, index, arr) {
    console.log(prev, cur, index);
    return prev + cur;
})
console.log(arr, sum);
// 1 2 1
// 3 3 2
// 6 4 3
// [1, 2, 3, 4] 10

var arr = [1, 2, 3, 4];
var sum = arr.reduce(function(prev, cur, index, arr) {
    console.log(prev, cur, index);
    return prev + cur;
}，0) //注意这里设置了初始值
console.log(arr, sum);
// 0 1 0
// 1 2 1
// 3 3 2
// 6 4 3
// [1, 2, 3, 4] 10

callback：执行数组中每个值的函数（如果没有提供initialValue，reduce 会从索引1的地方开始执行 callback 方法，跳过第一个索引。如果提供initialValue，从索引0开始）。包含四个参数：

• total：累计器累计回调的返回值;上一次调用时返回的累计值，初始时为 initialValue，必传
• currentValue：数组中当前被处理的元素，必传
• currentIndex：当前元素在数组中的索引，非必传
• arr：调用 reduce()的数组，非必传

initialValue：作为第一次调用 callback 函数时的第一个参数的值。如果没有提供初始值，则将使用数组中的第一个元素。在没有初始值的空数组上调用 reduce 将报错

可用场景：

• 数组里所有值的和
• 累加对象数组里的值
• 计算数组中每个元素出现的次数
• 数组去重
• 数组扁平化

2. concat
   concat() 方法用于连接两个或多个数组。
   该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。

var hege = ["Cecilie", "Lone"];
var stale = ["Emil", "Tobias", "Linus"];
var kai = ["Robin"];
var children = hege.concat(stale,kai);
console.log(children); // Cecilie,Lone,Emil,Tobias,Linus,Robin

3. reverse() 方法用于颠倒数组中元素的顺序。
4. includes() 方法用来判断一个数组是否包含一个指定的值，如果是返回 true，否则false。
5. sort
   sort() 方法用于对数组的元素进行排序。
   排序顺序可以是字母或数字，并按升序或降序。
   默认排序顺序为按字母升序。

语法： array.sort(sortfunction)
sortfunction：非必选。规定排序顺序，必须是函数

var points = [40,100,1,5,25,10];
points.sort(function(a,b){return a-b});
console.log(points); // 1,5,10,25,40,100