map(映射), reduce(规约), forEach(遍历), filter(过滤),它们都是高阶函数,都是以传入不同的函数来以不同的方式操作数组元。ie都不支持

一.map方法

*概述

map() 方法返回一个由原数组中的每个元素调用一个指定方法后的返回值组成的新数组。(ps:map函数作用于数组)

1.语法

array.map(callback[, thisArg])

2.参数

callback
原数组中的元素经过该方法后返回一个新的元素。
currentValue
callback 的第一个参数,数组中当前被传递的元素。
index
callback 的第二个参数,数组中当前被传递的元素的索引。
array
callback 的第三个参数,调用 map 方法的数组。
thisArg
执行 callback 函数时 this 指向的对象。

3.返回值

由回调函数的返回值组成的新数组。

4.描述

map 方法会给原数组中的每个元素都按顺序调用一次 callback 函数。使用map方法处理数组时,数组在调用callback之前已经是确定了,也就是在callback过程中数组新增元素都不被调用。

*map方法示例

1.map的常用方法(采用ES6箭头函数的方法启动回调函数)

// 定义一个数组
var radii = [10, 20, 30]; // 由直径求圆的面积
var areas = radii.map((radius)=>{
var area = Math.PI * (radius * radius);
return area.toFixed(0);
}); console.log(areas);
//输出结果 ["314", "1257", "2827"]

2.阐释 thisArg 参数的用法,该参数指定 this 关键字可引用的对象。

//定义一个对象,里面有一个值和一个方法
var obj = {
divisor: 10,
remainder: function (value) { //求得到的余数
return value % this.divisor;
}
}
//定义一个数组
var array = [6, 12, 25, 30]; //obj参数指定的回调函数
var result = array.map(obj.remainder, obj);
console.log(result); //输出 [6, 2, 5, 0]

3.内置 JavaScript 方法用作回调函数。

var numbers = [9, 16];
var result = numbers.map(Math.sqrt); console.log(result);
// 输出: 3,4

4.一个 String  上使用 map 方法获取字符串中每个字符所对应的 ASCII 码组成的数组:

var map = Array.prototype.map

 var a = map.call("Hello World", (x) =>{
  return x.charCodeAt(0);
 })

// a的值为[72, 101, 108, 108, 111, 32, 87, 111, 114, 108, 100]

5.易犯错误

["1", "2", "3"].map(parseInt);
// 你可能觉的会是[1, 2, 3]
// 但实际的结果是 [1, NaN, NaN]
//通常上parseInt是接收一个参数,但实际上parseInt有两个参数,第二个参数是表示进制, map方法在调用callback函数时,会给它传递三个参数:当前正在遍历的元素, 元素索引, 原数组本身. //应该使用如下的用户函数returnInt function returnInt(element){
return parseInt(element,10);
} ["1", "2", "3"].map(returnInt);
// 返回[1,2,3]

 二、reduce方法

*概述

reduce() 方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终为一个值,是ES5中新增的又一个数组逐项处理方法

1.语法

array .reducecallback,[ initialValue]

2.参数

  • callback(一个在数组中每一项上调用的函数,接受四个函数:)

    • previousValue(上一次调用回调函数时的返回值,或者初始值)
    • currentValue(当前正在处理的数组元素)
    • currentIndex(当前正在处理的数组元素下标)
    • array(调用reduce()方法的数组)
  • initialValue(可选的初始值。作为第一次调用回调函数时传给previousValue的值)

3.返回值

由回调函数缩减产生的值

4.描述

reduce对数组中存在的每个元素执行一次callback函数,排除数组中的空洞,如果未提供initialValue ,则reduce将从索引1开始执行回调函数,跳过第一个索引。 如果提供了initialValue ,它将从索引0开始。

ie下Array.prototype.reduce为underfine不支持

*reduce方法示例

1.reduce有无传入initialValue

//不传initialValue值
var arr = [1,2,3];
arr.reduce(function(pre,cur,index,arr){return pre+cur});
//结果 6
//累加了两次
// 传入initialValue 值

var arr = [1,2,3]
arr.reduce(function(pre,cur,index,arr){return pre+cur},10);
//结果16
//累加了3次,初始值为10

2.拼接所有数组

var flattened = [[0, 1], [2, 3], [4, 5]].reduce( ( acc, cur ) => acc.concat(cur));

//输出[0, 1, 2, 3, 4, 5]

2.使用spread运算符和initialValue来绑定包含在对象数组中的数组

var friends = [
{ name: 'Anna', books: ['Bible', 'Harry Potter'], age: 21 },
{ name: 'Bob', books: ['War and peace', 'Romeo and Juliet'], age: 26 },
{ name: 'Alice', books: ['The Lord of the Rings', 'The Shining'], age: 18 }
] // 用reduce将对象数组中的books项相加起来
var allbooks = friends.reduce(function(prev, curr) {
return [...prev, ...curr.books];
}, ['Alphabet']); // 输出allbooks = ['Alphabet', 'Bible', 'Harry Potter', 'War and peace', 'Romeo and Juliet', 'The Lord of the Rings', 'The Shining']

reduceRight 方法(降序)

reduceRight的语法以及回调函数的规则和reduce方法是一样的,区别就是在与reduce是升序,即角标从0开始,而reduceRight是降序,即角标从arr.length-1开始。如果有初始值,则从最后一个数开始计算,如果没有初始值,则previousValue参数是数组中最后一个元素的值,currentValue是数组中倒数第二个元素的值。

function AppendToArray(previousValue, currentValue) {
return previousValue + currentValue;
}
var word = "retupmoc";
var result = [].reduceRight.call(word, AppendToArray, "the ");
// var result = Array.prototype.reduceRight.call(word, AppendToArray, "the ");
//有初始值,所以从初始值开始拼接 // the computer

三.foreach方法

*概述

foreach() 数组遍历方法

1.语法

  arr .forEach(function callback(currentValue,index,array){ 
//你的迭代器
} [, thisArg ]);

2.参数

callback函数为每个元素执行,采取三个参数:
  currentValue
数组中正在处理的当前元素。
  index
数组中正在处理的当前元素的索引。
  array
正在应用forEach()的数组。
thisArg Optional执行callback时使用的值this

3.返回值

返回新创建的数组

4.描述

forEach()以升序对数组中存在的每个元素执行一次所提供的callback 。 对于已删除或未初始化的索引属性(即稀疏数组),不会调用它。

使用if或者(return true, false)跳出循环

*foreach方法示例

//打印数组的内容
function logArrayElements(element, index, array) {
console.log('a[' + index + '] = ' + element);
} // Notice that index 2 is skipped since there is no item at
// that position in the array.
[2, 5, , 9].forEach(logArrayElements);
// l输出结果
// a[0] = 2
// a[1] = 5
// a[3] = 9
//使用thisArg
function Counter() {
this.sum = 0;
this.count = 0;
}
Counter.prototype.add = function(array) {
array.forEach(function(entry) {
this.sum += entry;
++this.count;
}, this);
//使用this执行callback
}; var obj = new Counter();
obj.add([2, 5, 9]);
obj.count
//
obj.sum
16

四.filter方法

*概述

filter() 方法使用指定的函数测试所有元素,并创建一个包含所有通过测试的元素的新数组。

1.语法

var new_arrary = arr.filter(callback[, thisArg])

2.参数

callback用来测试数组的每个元素的函数。调用时使用参数 (element, index, array)。
返回true表示保留该元素(通过测试),false则不保留。
thisArg可选。执行 callback 时的用于 this 的值。

3.返回值

返回新创建的数组

4.描述

filter 为数组中的每个元素调用一次 callback 函数,并利用所有使得 callback 返回 true 或 等价于 true 的值 的元素创建一个新数组。

*filter 方法示例

//排除掉小于10的值
var isBigEnough=(element)=> {
return element >= 10;
}
var filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
// filtered is [12, 130, 44]

javaScript 的 map() reduce() foreach() filter()的更多相关文章

  1. Python的函数式编程: map, reduce, sorted, filter, lambda

    Python的函数式编程 摘录: Python对函数式编程提供部分支持.由于Python允许使用变量,因此,Python不是纯函数式编程语言. 函数是Python内建支持的一种封装,我们通过把大段代码 ...

  2. JavaScript 中 map、foreach、reduce 间的区别

    一直对map.foreach.reduce这些函数很是生疏,今天看underscorejs时好好研究了一下,一研究我就更懵了,这不是一样嘛,都是遍历,所以我就去知乎找了一下,整理出了比较好的几个说法. ...

  3. JavaScript中Map和ForEach的区别

    译者按: 惯用Haskell的我更爱map. 原文: JavaScript — Map vs. ForEach - What’s the difference between Map and ForE ...

  4. python笔记十四(高阶函数——map/reduce、filter、sorted)

    一.map/reduce 1.map() map(f,iterable),将一个iterable对象一次作用于函数f,并返回一个迭代器. >>> def f(x): #定义一个函数 ...

  5. map,reduce和filter函数

    numArray = [1, 2, 3, 4, 5] def ercifang(x): return x ** 2 def map_test(func, numArray): li = [] for ...

  6. Javascript的map与forEach的区别

    原理: 高级浏览器支持forEach方法语法:forEach和map都支持2个参数:一个是回调函数(item,index,list)和上下文: forEach:用来遍历数组中的每一项:这个方法执行是没 ...

  7. JavaScript高阶函数map/reduce、filter和sort

    map() 举例说明,比如我们有一个函数f(x)=x²,要把这个函数作用在一个数组[1,2,3,4,5,6,7,8,9]上. 由于map()方法定义在JavaScript的Array中,我们调用Arr ...

  8. 用scheme重写Python的三大函数map reduce 和filter

    重写过程中,发现这种做法能加深对递归的理解,而且reduce还体现了函数式编程是如何通过参数传递来实现命令式编程中的状态改变的. (define (imap f x . y) (if (null? y ...

  9. JavaScript中map函数和filter的简单举例

    JavaScript的数组迭代器函数map和filter,可以遍历数组时产生新的数组,和python的map函数很类似 1> filter是满足条件的留下,是对原数组的过滤:2> map则 ...

随机推荐

  1. python管道pipe,两个进程,使用管道的两端分别执行写文件动作,带锁(lock)

    #coding=utf-8import multiprocessing as mp def write_file(content,lock):    lock.acquire()    with op ...

  2. 360在线网站安全检测,web安全测试AppScan扫描工具,XSS常用的攻击手法

    360在线网站安全检测,web安全测试AppScan扫描工具,XSS常用的攻击手法 如何做好网站的安全性测试 360网站安全检测 - 在线安全检测,网站漏洞修复,网站后门检测http://websca ...

  3. SQL锁机制和事务隔离级别

    摘自:http://www.cnblogs.com/haiyang1985/archive/2009/02/27/1399641.html 锁机制 NOLOCK和READPAST的区别. 1.     ...

  4. Hadoop MapReduce执行过程实例分析

    1.MapReduce是如何执行任务的?2.Mapper任务是怎样的一个过程?3.Reduce是如何执行任务的?4.键值对是如何编号的?5.实例,如何计算没见最高气温? 分析MapReduce执行过程 ...

  5. python集合set{ }、集合函数及集合的交、差、并

    通过大括号括起来,用逗号分隔元素,特点 1.由不同元素组成,如果定义时存在相同元素,处理时会自动去重 2.无序 3.元素只能是不可变类型,即数字.字符串.布尔和元组,但集合本身可变 4.可直接定义集合 ...

  6. JavaScript 实现表格隔行变色

    JavaScript 实现表格隔行变色 版权声明:未经授权,严禁分享! 构建界面 界面HTML代码 <style> #data,th,td{ border: 1px solid #aaaa ...

  7. 20145206邹京儒 web安全基础实践

    20145206邹京儒 web安全基础实践 一.实践过程记录 关于WebGoat 1.我们在命令行里执行:java -jar webgoat-container-7.0.1-war-exec.jar运 ...

  8. liunx查询进程下的线程

    问题:一个进程下面会启动多个线程,通过top命令可以查出某个进程cpu,内存使用情况等信息,但无法知道是哪个线程. 解决方法: 1. 用jstack打印出给定的java进程ID的Java堆栈信息(js ...

  9. 三羊献瑞|2015年蓝桥杯B组题解析第三题-fishers

    三羊献瑞 观察下面的加法算式: 祥 瑞 生 辉 三 羊 献 瑞 三 羊 生 瑞 气 (如果有对齐问题,可以参看[图1.jpg]) 其中,相同的汉字代表相同的数字,不同的汉字代表不同的数字. 请你填写& ...

  10. C#学习笔记(五):while循环和for循环

    while循环 while循环和for循环,可以相互替换,范围和效能一样,理解事物的逻辑不一样 while循环用于条件不确定的逻辑 for循环用于计算次数的逻辑 for循环 快捷写法,按两下TAB i ...