javaScript 的 map() reduce() foreach() filter()

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 .reduce （ callback，[ 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
// 3
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]