05.【JS数组】内置方法:forEach()与map()方法

1.forEach —— 遍历

forEach遍历数组,对原来的数据操作,改变原数组

函数声明:

[].forEach( function(value, index, array) { 
    //… 
}, [thisArg] );
  1. forEach方法中第一个参数是回调函数,它支持3个参数:
  • 第1个是遍历的数组内容
  • 第2个是对应索引
  • 第3个是数组自身

注意:对比jQuery中的$.each方法,参数位置有变化(第1个参数和第2个刚好相反)

$.each([], function(index, value, array) {
  // ...
});
例子

eg1:

[1, 2 ,3, 4].forEach(console.log);
// 1, 0, [1, 2, 3, 4]
// 2, 1, [1, 2, 3, 4]
// 3, 2, [1, 2, 3, 4]
// 4, 3, [1, 2, 3, 4]

eg2:数组求和

var sum = 0;
[1, 2, 3, 4].forEach(function (item, index, array) {
  sum += item;      //注:(array[index] == item)为 true
});
console.log(sum); // 10  

2.第二个参数thisArg可选,可用于以改变回调函数里面的this指针 :如果这第2个可选参数不指定,则使用全局对象代替(在浏览器是为window),严格模式下甚至是undefined.

2.map —— 映射

映射,创建新数组

函数声明:

[].map( function(value, index, array) {
    //… 
}, [thisArg] );

类似于forEach,但需要注意的是:回调函数需要有return值,否则新数组都是undefined

例子

eg1:

//求平方值
var data = [1, 2, 3, 4];
var arrayOfSquares = data.map(function (item) {
  return item * item;       //必须要有return
});
alert(arrayOfSquares); // 1, 4, 9, 16

eg2:可以利用map方法方便获得对象数组中的特定属性值们

var users = [
  {name: "张含韵", "email": "zhang@email.com"},
  {name: "江一燕",   "email": "jiang@email.com"},
  {name: "李小璐",  "email": "li@email.com"}
];
var emails = users.map(function (user) { return user.email; });
console.log(emails.join(", ")); // zhang@email.com, jiang@email.com, li@email.com

个人理解

map能做的事forEach都能做,map可以视为forEach的一个特例,专门用于“通过现有的数组建立新数组”。在没有map之前是通过forEach来创建新数组。需要预先定义空数组,再通过push操作添加元素。有map之后,更进一步优化代码了。

for循环优点

  • 可随意跳出或退出循环
  • for 循环还可以隔几个去取值
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 第5章 引用类型(返回首页) 本章内容 使用对象 创建并操作数组 理解基本的JavaScript类型 使用基本类型...
    大学一百阅读 3,265评论 0 4
  • JavaScript数组的应用应该都比较熟悉了。先上一张神图,转自右下角大神。 forEach,map,filte...
    张歆琳阅读 1,087评论 2 17
  • (一) 数组的定义 数组(array)是按次序排列的一组值。每个值的位置都有编号(从0开始),整个数组用方括号表示...
    woow_wu7阅读 46,868评论 0 6
  • 人生中有两种基本算法:加法和减法。 加法是促进你成功的因素,它可以让你的生活过的更加美好,更加有趣。减法是你的阻碍...
    明轩在雨中阅读 178评论 4 1
  • RSets 在实现部分垃圾收集(partial GC)时,如分代(CMS+ParNew)、分区(G1),为了部分收...
    数码资讯站阅读 1,480评论 0 50