【JavaScript-基础】map、forEach、for、for in、for of等的区别

tips:循环虽好，大家都得按自己所需场景进行使用。个人建议，不喜勿喷

forEach

forEach: forEach(item,index,array), item:当前处理的数据，index:下标，
array:整个数组
遍历全部数据，不能通过return结束循环，消耗性能
用于不转换数据的全部遍历。
tips: 除了抛出异常以外，没有办法中止或跳出 forEach() 循环。如果你需要中止或跳出循环，forEach() 方法不是应当使用的工具。

 // forEach 跳出循环
      const inventory = [
        { name: "apples", quantity: 2 },
        { name: "bananas", quantity: 0 },
        { name: "cherries", quantity: 5 },
      ];

      function  fn(arr){
        console.log('回调函数',arr)
      }
      function getItem(arr,name,fn){
        let item = null
        try {
            arr.forEach((element,i,arr) => {
                console.log(element,i,arr)
                if(element.name === name){
                    item = element;
                    fn(arr)
                    throw Error();
                }
            });
        } catch (error) {}
        return item;
      }

// forEach 和 map 的原生实现,都可挂载Array的原型上去实现你想要的方法
Array.prototype.myForEach = function (fn) {
    for(let i = 0; i < this.length; i++){
    	fn(this[i], i, this);
    }
};
arr.myForEach(function (currentValue, currentIndex, currentArray) {
   console.log(currentValue, currentIndex, currentArray);
});
// map 和这个类似

Map

map(item,index,array), item:当前处理的数据，index:下标，
array:整个数组
一定遍历全部数据，不能通过return结束，消耗性能，不要常用。
常用于转换数据结构，比forEach快。和forEach都不影响原有的数组结构。

 const inventory = [
        { name: "apples", quantity: 2 },
        { name: "bananas", quantity: 0 },
        { name: "cherries", quantity: 5 },
      ];
 const newarr = inventory.map(({ name, quantity }) => ({
        [name]: quantity,
 }));

for…of

一般的对象是不能使用for…of 进行遍历。具有 iterator 接口，就可以用for…of循环遍历它的成员(属性值value)。for…of循环可以使用的范围包括数组、Set 和 Map 结构、某些类似数组的对象、Generator 对象，以及字符串。for…of循环调用遍历器接口，数组的遍历器接口只返回具有数字索引的属性。对于普通的对象，for…of结构不能直接使用，会报错，必须部署了 Iterator 接口后才能使用。可以中断循环。

一个对象如果要具备可被 for…of 循环调用的 Iterator 接口，就必须在其 Symbol.iterator 的属性上部署遍历器生成方法(或者原型链上的对象具有该方法)

tips: 遍历器对象根本特征就是具有next方法。每次调用next方法，都会返回一个代表当前成员的信息对象，具有value和done两个属性。

实例代码如下:
普通对象是不具备遍历器接口，例如：

 let obj = {
   name:'jack',
   age:20,
   job:'web engineer'
}

for(const item of obj){
	console.log(item) //Uncaught TypeError: obj is not iterable
}

给普通对象增加Iterator 才能进行遍历：
想了解为啥要这么使用点击该链接

let obj = {
        name:'jack',
        age:20,
        job:'web engineer',
        [Symbol.iterator](){
            const self = this;
            const keys = Object.keys(self);
            let index = 0;
            return{
                next(){
                    if(index < keys.length){
                        return {
                            value:self[keys[index++]],
                            done:false
                        }
                    }else{
                        return {
                            value:undefined,
                            done:true
                        }
                    }
                }
            }
        }
    }
     for(const item of obj){
        console.log(item) 
		//name:'jack',
        //age:20,
        //job:'web engineer'
    }

注意:
原生具备 Iterator 接口的数据结构有：

• Array
• Map
• Set
• String
• TypedArray
• 函数的 arguments 对象
• NodeList 对象
• ES6 的数组、Set、Map 都部署了以下三个方法: entries() / keys() / values()，调用后都返回遍历器对象。

for…in

不但可以遍历数组，还可以遍历对象，数组遍历下标，对象遍历属性。
大多场景用来遍历对象。遍历对象自身的和继承的可枚举的属性，也就是说会包括那些原型链上的属性。如果想要仅迭代自身的属性，那么在使用 for…in 的同时还需要配合 getOwnPropertyNames() 或 hasOwnProperty()。可以中断循环。

let obj = {
    name:'jack',
    age:20,
    job:'web engineer',
}
for(const key in obj){
	console.log(key); // name,age,job
	 console.log(obj[key]) // jack,20,web engineer
}

let arr1 = ['name','age','job']
for(const key in arr1){
   console.log(key); // 1,2,3
   console.log(arr1[key]) // name,age,job
}

xdm,再不睡觉头发丝又得掉几根…