for of，for in，forEach 和 map 的区别

for in

for…in 语句以原始插入顺序迭代一个对象的除 Symbol 以外的可枚举属性，包括继承的可枚举属性。for...in 是为遍历对象属性而构建的，不建议与数组一起使用，因为输出的顺序是不固定的。

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

仅迭代自身的属性

如果你只要考虑对象本身的属性，而不是它的原型，那么使用 hasOwnProperty() 来确定某属性是否是对象本身的属性。和 in 运算符不同，该方法会忽略掉那些从原型链上继承到的属性。

var triangle = {a: 1, b: 2, c: 3};

function ColoredTriangle() {
  this.color = 'red';
}

ColoredTriangle.prototype = triangle;

var obj = new ColoredTriangle();

for (var prop in obj) {
  if (obj.hasOwnProperty(prop)) {
    console.log(`obj.${prop} = ${obj[prop]}`);
  }
}
// "obj.color = red"

for in 语句除了遍历对象自身的属性外，还会遍历从原型链上继承到的属性。

for (var prop in obj) {
 console.log(`obj.${prop} = ${obj[prop]}`);
}
// obj.color = red
// obj.a = 1
// obj.b = 2
// obj.c = 3

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...of与for...in的区别

使用for…in循环时，获得的是数组的下标；使用for…of循环时，获得的是数组的元素值。

forEach()

forEach() 方法对数组的每个元素执行一次给定的函数。

const array1 = ['a', 'b', 'c'];

array1.forEach(element => console.log(element));

// expected output: "a"
// expected output: "b"
// expected output: "c"

map()

map() 方法创建一个新数组，其结果为这个新数组中的每个元素是调用一次提供的函数后的返回值。

const array1 = [1, 4, 9, 16];

// pass a function to map
const map1 = array1.map(x => x * 2);

console.log(map1);
// expected output: Array [2, 8, 18, 32]

查看全部文章

博文系列目录

JavaScript 深入系列
JavaScript 专题系列
JavaScript 基础系列
网络系列
浏览器系列
Webpack 系列
Vue 系列
性能优化与网络安全系列
HTML 应知应会系列
CSS 应知应会系列

交流

各系列文章汇总：https://github.com/yuanyuanbyte/Blog

我是圆圆，一名深耕于前端开发的攻城狮。

weixin

yuanyuanbyte / Blog

JavaScript 基础系列之 for of，for in，forEach 和 map 的区别 #100