还搞不清JS里for..in for...of forEach map各种遍历方式的区别吗

for

for循环是JS里最简单也是最通用的遍历方式，我们需要知道遍历的次数。
for循环里return,break等关键字都是可以用的

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

for in

for…in 是es5标准， 此方法遍历数组效率比较低，它的作用主要是去遍历对象的可枚举属性。遍历的key,key为string类型，也会循环原型链中的属性，适用于对象。我们可以简单的认为，for...in是为遍历对象而设计的，不适合遍历数组。
遍历数组的缺点：数组的下标index值是数字，for-in遍历的index值"0","1","2"等是字符串

var person = {fname:"John", lname:"Doe", age:25}; 
var text = "";
var x;
for (x in person) {
    text += person[x] + " ";
}
//John Doe 25

for of

for…of是ES6的标准，该方法遍历的是可迭代对象(包括 Array，Map，Set，String，TypedArray，arguments 对象等等）的属性所对应的值(value：键值)。所以它用来遍历数组时得到每个元素的值。

var arr = [
    {id:1,value:'A'},
    {id:2,value:'B'},
    {id:3,value:'C'}
]
var str ='Hello'
for(let item of str){
    console.log(item) //H e l l o 
}
for(let item of arr){
    console.log(item) //{id:1,value:'A'},{id:2,value:'B'},{id:3,value:'C'}
}

forEach

array.forEach(function(currentValue, index, arr), thisValue)
forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数,是最节省内存的一种，但是不能break，也不能return。注意: forEach() 只适用于数组，且对于空数组是不会执行回调函数的

    var arr = [
        {id:1,value:'A'},
        {id:2,value:'B'},
        {id:3,value:'C'}
    ]
    arr.forEach(function(v,key,arr){
        console.log(v,key,arr)
    })

map

array.map(function(currentValue,index,arr), thisValue)
map方法将数组的所有成员依次传入参数函数，然后把每一次的执行结果组成一个新数组返回,即可以return。注意：map仅适用于数组

var arr = [
    {id:1,value:'A'},
    {id:2,value:'B'},
    {id:3,value:'C'}
]
var res = arr.map(function (item,index,ary ) { 
    return item.value='D'; 
}) 
console.log(res);// ["D", "D", "D"];  原数组拷贝了一份，并进行了修改
console.log(arr);// [ {id: 1, value: "A"},{id: 2, value: "B"},{id: 3, value: "C"}]；  原数组并未发生变化

filter

Array.filter(function(currentValue, indedx, arr), thisValue)
filter用于对数组进行过滤。创建一个新数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。

let nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let res = nums.filter((num) => {
  return num > 5;
});
console.log(res);  // [6, 7, 8, 9, 10]

reduce

array.reduce((total,currentValue,currentIndex,arr),initialValue)
接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。reduce() 对于空数组是不会执行回调函数的。

[0, 1, 2, 3, 4].reduce(function(previousValue, currentValue, index, array){
 return previousValue + currentValue;
});
//10

keys，values，entries

ES6 提供三个新的方法 —— entries()，keys()和values() —— 用于遍历数组。它们都返回一个遍历器对象，可以用for...of循环进行遍历，唯一的区别是keys()是对键名的遍历、values()是对键值的遍历，entries()是对键值对的遍历

var arr= [
    {id:1,value:'A'},
    {id:2,value:'B'},
    {id:3,value:'C'},
]
for (let index of arr.keys()) {
console.log(index);
}
// 0
// 1
// 2
for (let elem of arr.values()) {
console.log(elem);
}
// {id: 1, value: "A"}
// {id: 2, value: "B"}
// {id: 3, value: "C"}
for (let [index, elem] of arr.entries()) {
console.log(index, elem);
}
//0 {id: 1, value: "A"}
//1 {id:2,value:'B'}
//2 {id:3,value:'C'}

every/some

返回一个布尔值。当我们需要判定数组中的元素是否满足某些条件时，可以使用every/some。这两个的区别是，every会去判断判断数组中的每一项，而some则是当某一项满足条件时返回。

let foo=[5,1,3,7,4].every(function (item,index) {
                console.log(`索引：${index}，数值：${item}`)
                return item>2
            })
            console.log(foo)

let foo=[5,1,3,7,4].some(function (item,index) {
                console.log(`索引：${index}，数值：${item}`)
                return item>2
            })
            console.log(foo)