forEach map和for

发表于

forEach

遍历数组中的元素。
为每个元素执行回调。
无返回值。

1
2
3
4
5
6
const a = [1, 2, 3];
const doubled = a.forEach((num, index) => {
  // 执行与 num、index 相关的代码
});

// doubled = undefined

map

遍历数组中的元素
通过对每个元素调用函数，将每个元素“映射（map）”到一个新元素，从而创建一个新数组。

1
2
3
4
5
6
const a = [1, 2, 3];
const doubled = a.map(num => {
  return num * 2;
});

// doubled = [2, 4, 6]

.forEach和.map()的主要区别在于.map()返回一个新的数组。如果你想得到一个结果，但不想改变原始数组，用.map()。如果你只需要在数组上做迭代修改，用forEach。

遍历对象的属性和数组的元素

对象：

  • for循环：
    for (var property in obj) { console.log(property); }
    但是，这还会遍历到它的继承属性，在使用之前，你需要加入obj.hasOwnProperty(property)检查。

  • Object.keys()：
    Object.keys(obj).forEach(function (property) { … })
    Object.keys()方法会返回一个由一个给定对象的自身可枚举属性组成的数组。

  • Object.getOwnPropertyNames()：
    Object.getOwnPropertyNames(obj).forEach(function (property) { … })。
    Object.getOwnPropertyNames()方法返回一个由指定对象的所有自身属性的属性名（包括不可枚举属性但不包括 Symbol 值作为名称的属性）组成的数组。
数组：

  • for loops：
    for (var i = 0; i < arr.length; i++)
    这里的常见错误是var是函数作用域而不是块级作用域，大多数时候你想要迭代变量在块级作用域中。ES2015 引入了具有块级作用域的let，建议使用它。
    所以就变成了：for (let i = 0; i < arr.length; i++)。

  • forEach：
    arr.forEach(function (el, index) { … })
    这个语句结构有时会更精简，因为如果你所需要的只是数组元素，你不必使用index。还有every和some方法可以让你提前终止遍历。

for循环有更强的灵活性，比如使用break提前终止循环，或者递增步数大于一。