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

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_32657025/article/details/79537340

for…in

for…in以原始插入顺序访问对象的可枚举属性，包括从原型继承而来的可枚举属性。

let obj = {
    a:123,
    b:"abc"
}
for(let pro in obj){
    console.log(pro+':' + obj[pro])
}
//a:123
//b:abc

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

let obj = {
    a:123,
    b:"abc"
}
let arr = [123,'abc']
for(let pro in arr){
    console.log(pro+':' + arr[pro])
}
//0:123
//1:abc

for…of

for…of语句在可迭代对象（Array，Map，Set，String，TypedArray，arguments 对象等等）上创建一个迭代循环，为每个不同属性的值执行语句。

let arr = [123,'abc']
for(let item of arr){
    console.log(item)
}
//123
//abc

使用for…in循环时，获得的是数组的下标；使用for…of循环时，获得的是数组的元素值。
for…of遍历Map时，可以获得整个键值对对象：

let iterable = new Map([["a", 1], ["b", 2], ["c", 3]]);

for (let entry of iterable) {
  console.log(entry);
}
// ["a", 1]
// ["b", 2]
// ["c", 3]

也可以只获得键值：

let iterable = new Map([["a", 1], ["b", 2], ["c", 3]]);

for (let [key] of iterable) {
  console.log(key);
}
//a
//b
//c

或者分别获得键与值：

let iterable = new Map([["a", 1], ["b", 2], ["c", 3]]);

for (let [key,value] of iterable) {
  console.log(key+':'+value);
}
//a:1
//b:2
//c:3

forEach

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

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

let arr = [1,2,3,4]
arr.forEach(function(value,index,currentArr){
    currentArr[index]=value + 1
})
console.log(arr)//[ 2, 3, 4, 5 ]

map

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

• 当前元素
• 当前索引
• 当前被调用的数组

var numbers = [1, 4, 9];
var roots = numbers.map(Math.sqrt);
// roots的值为[1, 2, 3], numbers的值仍为[1, 4, 9]