for、for..in、forEach、for..of、map遍历的区别

1、for循环

**
for循环是我们最初学的循环之一，也是初学者最常用的循环，常用于循环数组、字符串。由于对象没有length属性，所以for循环不能用来遍历对象。可以使用break结束循环

for循环

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

2、for…in循环

for…in 被创造出来的初衷是为了遍历对象，其也可用来遍历数组，不过循环的不是数组的下标，而是数组的属性，使用for…in循环时，返回的是所有能够通过对象访问的、可枚举的属性，它不仅仅遍历 array 自身的属性，其还遍历 array 原型链上的所有可枚举的属性。可以提前break
例如：

Array.prototype.fatherName = "Father";
const arr = [1, 2, 3];
arr.name = "Hello world";
let index;
for(index in arr) {
    
    
    console.log("arr[" + index + "] = " + arr[index]);
}

输出结果：
在这里插入图片描述

3、for…of

for…of 循环是Es6 中新添加的一个循环方式,与 for in 循环类似，也是普通 for 循环的一种变体,使用 for of 循环可以轻松的遍历数组或者其它可遍历的对象，例如字符串、对象等。for…of循环遍历对象是遍历的是对象的key值，所以不推荐使用for of来遍历对象。可以提前break
例如：

const obj = {
    
     "name": "Clark", "surname": "Kent", "age": "36" };
// 使用 for of 循环遍历对象中的所有属性
for (let value in obj) {
    
    
    console.log(value + ',')
}

输出结果：
在这里插入图片描述

4、forEach循环

forEach简直就是功能强大，不管是什么数组，集合都可以用forEach搞定.无法使用break等语句跳出遍历, 直到所有元素都传递给调用的函数, 但是可以使用抛出异常, 提前终止循环.
例如：

const arr = [1, 2, 3, 4, 5];
arr.forEach(function(e) {
    
    
    console.log(e);
})

一旦加入break，程序就会报错。
在这里插入图片描述
forEach中使用return不会报错，但rerutn并不会生效
例如：

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

function find(array, num) {
    
    
    array.forEach((self, index) => {
    
    
        if (self === num) {
    
    
            return index;
        };
    });
};
let index = find(arr, 2);
console.log(index);

运行结果：
在这里插入图片描述
index是undefined证明find函数并没有返回数据，因此，在forEach中使用return不会报错，但rerutn并不会生效。forEach只能默认从索引0开始遍历。

5、map遍历

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

（1）注意：

	map（）不会对空数组进行检测
    map()不会改变原始数组

例如：

const num = [1, 2, 3];
const newNum = num.map((ele, index) => {
    
    
    return ele + 3
})
console.log(newNum, num);

运行结果：
在这里插入图片描述

（2）返回值

如上图，他的返回值是一个新数组，数组中的元素为原始数组元素调用函数处理后的值