菜鸟系列——forEach、map、for...in、for...of

原创 2017年10月03日 20:19:38

作为一个前端菜鸟,有好多容易弄混的名词
我想把搞清楚的一一记录下来,帮助记忆

forEach、map、for...in、for...of

这四个方法都是可以遍历数组或类数组的,很容易就懵了,必须总结一下他们的使用对象和区别,加以区分。
首先,map()和forEach()是Array自带的方法,Map对象也有forEach()方法,而for...in和for...of是对数组/类数组元素进行for循环操作的方法。
也就是说,在使用map()和forEach()的时候,需要用数组调用。(先只说数组的forEach())

var arr=[1,2,3,4,5];
arr.map();
arr.forEach();
for( k in arr ){};
for( k of arr ){};

这么说来,我们可以把他们分为两组分别介绍

第一组:map()和forEach()

相同点:

  • 只能遍历数组,且循环遍历数组中的每一项
  • 包含的匿名函数都是三个参数(item,index,input)(当前项,当前项的索引,原始数组)
  • 在IE6-8下都不兼容

不同点:

  • map()有返回值,可以用'链式'连接;forEach()无返回值,写了也没用
    举个栗子吧~ 建议不要只看看,自己多尝试一下
var arr = [1,2,3,4];
var res1 = arr.map(function(item,index,input){
      return input[index] = item*2;   //返回每一项哦
})
console.log(res1);   //[2,4,6,8]
console.log(arr);    //[2,4,6,8]
 // 如果不想改变原数组,可以return item*2;那么最后arr=[1,2,3,4]
var arr = [1,2,3,4];
var res2 = arr.forEach(function(item,index,input){
      return input[index] = item*2;
})
console.log(res2);   //undefined
console.log(arr);    //[2,4,6,8]
 // 如果写return item*2,原数组也不会改变
  • forEach()不能使用continue, break;
  • map()速度最快

作为 Map 的forEach方法时,与数组的forEach方法类似,也可以实现遍历。

map.forEach(function(value, key, map) {
  console.log("Key: %s, Value: %s", key, value);
});

forEach方法还可以接受第二个参数,用来绑定this。

第二组:for...in和for...of

em....

  • for...in的毛病真是太多了,直接别用了,他作为一个for循环,不能保证遍历的顺序是预期的,还只能访问索引还会把数组属性遍历,实在是很糟糕,唯一能替代for...of的场景就是循环普通对象(for...of不能循环没有遍历器(Iterator)的对象)
  • for...of可以循环具备 Iterator 接口的数据结构,如下

ES6中定义的原生具备 Iterator 接口的数据结构:
Array
Map
Set
String
TypedArray
函数的 arguments 对象
NodeList 对象

另外,通过数组&Map对象包含的三个遍历器生成函数,for...in 还可以循环索引和键值对

keys():返回键名的遍历器。
values():返回键值的遍历器。
entries():返回所有成员的遍历器。

详细的内容大家可以通过阮一峰大大的ES6入门了解

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

for in、for of、forEach的区别

forEachforEach()是数组的一个方法,用于遍历数组的每一项,并对每一项执行一个callback函数。 forEach()没有返回值,返回值总是undefined。let a = ["a"...

js笔记一:js中forEach,for in,for of循环的用法

(这些例子已经在node.js 6.9.x下,运行通过) js中循环语句有forEach,for in,for of 三种了 一般的遍历数组的方法: var array = [1,2,3,4,...

Foundation of Machine Learning 笔记第二部分——Guarantees for Finite Hypothesis Sets in Consistent Case

翻译自书本《Foundation of Machine Learning》2.2节。 证明了假设集有限且一致情况下的PAC保证

Foundation of Machine Learning 笔记第三部分——Guarantees for Finite Hypothesis Sets in Inconsistent Case

《Foundation of Machine Learning》个人翻译 这篇文章来自该书2.3节

浅谈for,for-in,forEach,for-of几种循环

今天主要来给大家说一下for的几种循环,仅代表个人的想法与观点,欢迎各位大神批评。 for循环主要有以下几种:      1.一般的for循环      ...

js中的循环遍历数组中的元素,ES6(for-of)、ES5(forEach、for-in)、通用(for(i=0;i<length;i++))

我们如何遍历数组中的元素?for (var index = 0; index < myArray.length; index++) { console.log(myArray[index]); }...

异步方法中map、forEach和for循环中带来的异步执行问题

异步方法中map、forEach和for循环中带来的异步执行问题

php array_map,for,foreach性能测试

array_map是php自带的使用回调函数的数组批处理函数,看到这类函数的结构我就怀疑其处理效率。做了个小测试

map, foreach, for的用法区别

array.forEach(callback[, thisObject]); 下面是参数的详细信息:    1、 callback : 函数测试数组的每个元素。    2、thisO...
  • YufJi
  • YufJi
  • 2017-01-20 11:44
  • 1082
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)