例子:

const array1 = [, , , ];
const reducer = (accumulator, currentValue) => accumulator + currentValue; // 1 + 2 + 3 + 4
console.log(array1.reduce(reducer));
// expected output: 10 // 5 + 1 + 2 + 3 + 4
console.log(array1.reduce(reducer, ));
// expected output: 15

reducer 函数接收4个参数:

  1. Accumulator (acc) (累计器)
  2. Current Value (cur) (当前值)
  3. Current Index (idx) (当前索引)
  4. Source Array (src) (源数组)

您的 reducer 函数的返回值分配给累计器,该返回值在数组的每个迭代中被记住,并最后成为最终的单个结果值。

例子

数组里所有值的和

函数表示伐:

var sum = [, , , ].reduce(function (accumulator, currentValue) {
return accumulator + currentValue;
}, ); console.log(sum)

你也可以写成箭头函数的形式:

var total = [ , , ,  ].reduce(
( acc, cur ) => acc + cur, );
console.log(total);

累加对象数组里的值

要累加对象数组中包含的值,必须提供初始值,以便各个item正确通过你的函数。

var initialValue = ;
var sum = [{x: }, {x:}, {x:}].reduce(function (accumulator, currentValue) {
return accumulator + currentValue.x;
},initialValue) console.log(sum) // logs 6

你也可以写成箭头函数的形式

var initialValue = ;
var sum = [{x: }, {x:}, {x:}].reduce(
(accumulator, currentValue) => accumulator + currentValue.x
,initialValue
); console.log(sum)

将二维数组转化为一维

var flattened = [[, ], [, ], [, ]].reduce(
function(a, b) {
return a.concat(b);
},
[]
);
// flattened is [0, 1, 2, 3, 4, 5]

你也可以写成箭头函数的形式

var flattened = [[, ], [, ], [, ]].reduce(
( acc, cur ) => acc.concat(cur),
[]
);

计算数组中每个元素出现的次数

var names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];

var countedNames = names.reduce(function (allNames, name) {
if (name in allNames) {
allNames[name]++;
}
else {
allNames[name] = ;
}
return allNames;
}, {});
// countedNames is:
// { 'Alice': 2, 'Bob': 1, 'Tiff': 1, 'Bruce': 1 }

按属性对object分类

var people = [
{ name: 'Alice', age: },
{ name: 'Max', age: },
{ name: 'Jane', age: }
]; function groupBy(objectArray, property) {
return objectArray.reduce(function (acc, obj) {
var key = obj[property];
if (!acc[key]) {
acc[key] = [];
}
acc[key].push(obj);
return acc;
}, {});
} var groupedPeople = groupBy(people, 'age');
// groupedPeople is:
// {
// 20: [
// { name: 'Max', age: 20 },
// { name: 'Jane', age: 20 }
// ],
// 21: [{ name: 'Alice', age: 21 }]
// }

使用扩展运算符和initialValue绑定包含在对象数组中的数组

// friends - 对象数组
// where object field "books" - list of favorite books
var friends = [{
name: 'Anna',
books: ['Bible', 'Harry Potter'],
age:
}, {
name: 'Bob',
books: ['War and peace', 'Romeo and Juliet'],
age:
}, {
name: 'Alice',
books: ['The Lord of the Rings', 'The Shining'],
age:
}]; // allbooks - list which will contain all friends' books +
// additional list contained in initialValue
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'
// ]

数组去重

let arr = [,,,,,,,,,,,,];
let result = arr.sort().reduce((init, current)=>{
if(init.length=== || init[init.length-]!==current){
init.push(current);
}
return init;
}, []);
console.log(result); //[1,2,3,4,5]

按顺序运行Promise

/**
* Runs promises from array of functions that can return promises
* in chained manner
*
* @param {array} arr - promise arr
* @return {Object} promise object
*/
function runPromiseInSequence(arr, input) {
return arr.reduce(
(promiseChain, currentFunction) => promiseChain.then(currentFunction),
Promise.resolve(input)
);
} // promise function 1
function p1(a) {
return new Promise((resolve, reject) => {
resolve(a * );
});
} // promise function 2
function p2(a) {
return new Promise((resolve, reject) => {
resolve(a * );
});
} // function 3 - will be wrapped in a resolved promise by .then()
function f3(a) {
return a * ;
} // promise function 4
function p4(a) {
return new Promise((resolve, reject) => {
resolve(a * );
});
} const promiseArr = [p1, p2, f3, p4];
runPromiseInSequence(promiseArr, )
.then(console.log); //

功能型函数管道

// Building-blocks to use for composition
const double = x => x + x;
const triple = x => * x;
const quadruple = x => * x; // Function composition enabling pipe functionality
const pipe = (...functions) => input => functions.reduce(
(acc, fn) => fn(acc),
input
); // Composed functions for multiplication of specific values
const multiply6 = pipe(double, triple);
const multiply9 = pipe(triple, triple);
const multiply16 = pipe(quadruple, quadruple);
const multiply24 = pipe(double, triple, quadruple); // Usage
multiply6(); //
multiply9(); //
multiply16(); //
multiply24(); //

Polyfill

// Production steps of ECMA-262, Edition 5, 15.4.4.21
// Reference: http://es5.github.io/#x15.4.4.21
// https://tc39.github.io/ecma262/#sec-array.prototype.reduce
if (!Array.prototype.reduce) {
Object.defineProperty(Array.prototype, 'reduce', {
value: function(callback /*, initialValue*/) {
if (this === null) {
throw new TypeError( 'Array.prototype.reduce ' +
'called on null or undefined' );
}
if (typeof callback !== 'function') {
throw new TypeError( callback +
' is not a function');
} // 1. Let O be ? ToObject(this value).
var o = Object(this); // 2. Let len be ? ToLength(? Get(O, "length")).
var len = o.length >>> ; // Steps 3, 4, 5, 6, 7
var k = ;
var value; if (arguments.length >= ) {
value = arguments[];
} else {
while (k < len && !(k in o)) {
k++;
} // 3. If len is 0 and initialValue is not present,
// throw a TypeError exception.
if (k >= len) {
throw new TypeError( 'Reduce of empty array ' +
'with no initial value' );
}
value = o[k++];
} // 8. Repeat, while k < len
while (k < len) {
// a. Let Pk be ! ToString(k).
// b. Let kPresent be ? HasProperty(O, Pk).
// c. If kPresent is true, then
// i. Let kValue be ? Get(O, Pk).
// ii. Let accumulator be ? Call(
// callbackfn, undefined,
// « accumulator, kValue, k, O »).
if (k in o) {
value = callback(value, o[k], k, o);
} // d. Increase k by 1.
k++;
} // 9. Return accumulator.
return value;
}
});
}

js Array​.prototype​.reduce()的更多相关文章

  1. Array.prototype.reduce()

    reduce() 方法接收一个函数作为累加器(accumulator),数组中的每个值(从左到右)开始缩减,最终为一个值. arr.reduce([callback, initialValue]) c ...

  2. Array.prototype.reduce 的理解与实现

    Array.prototype.reduce 是 JavaScript 中比较实用的一个函数,但是很多人都没有使用过它,因为 reduce 能做的事情其实 forEach 或者 map 函数也能做,而 ...

  3. [JavaScript] Array.prototype.reduce in JavaScript by example

    Let's take a closer look at using Javascript's built in Array reduce function. Reduce is deceptively ...

  4. js Array.prototype.slice.call(arguments,0) 理解

    Array.prototype.slice.call(arguments,0) 经常会看到这段代码用来处理函数的参数 网上很多复制粘帖说:Array.prototype.slice.call(argu ...

  5. 【笔记】js Array.prototype.slice.call(arguments) 将函数的参数转换为数组方法的见解

    我们知道函数里面的参数实际上是一个以数组形式储存的对象 但它并非一个数组 如果我们要将它转换为数组可以调用Array.prototype.slice() 这个方法 分析一下这个方法: Array.pr ...

  6. js Array.prototype.join.call(arguments,",") 理解

    prototype 属性使您有能力向对象添加属性和方法. join() 方法:把数组的所有元素放入一个字符串.元素通过指定的分隔符进行分隔. call() 方法可以用来代替另一个对象调用一个方法. A ...

  7. 数组的方法之(Array.prototype.reduce() 方法)

    reduce函数 reduce() 方法对累加器和数组中的每个元素(从左到右)应用一个函数,将其减少为单个值. 对数组中的所有元素调用指定的回调函数.该回调函数的返回值为累积结果,并且此返回值在下一次 ...

  8. JS - Array.prototype.sort(compare)

    function compare(a, b) { return -1; // a 在 b 前面 return 1; // a 在 b 后面 return 0; // 并列排序,保持在源数组中的先后顺序 ...

  9. JS Array常用方法indexOf/filter/forEach/map/reduce详解

    Array共有九个方法   Array.prototype.indexOf Array.prototype.lastIndexOf Array.prototype.every Array.protot ...

随机推荐

  1. xss脚本绕过限制的方法

    第一关:第一关比较简单,直接写入标签就可以,这里不多说了,payload如下: http://sqler.win/xss/level1.php?name=test%3Csvg/onload=alert ...

  2. EXT的bug 布局border 和 grid的cellediting

    首先 我要的布局是上下两块,并且高度和按自己的喜欢可调节,所以我采用的是border的布局, 上下两块,都放grid列表,上面一块不可编辑,下面这块可编辑,如图 在编辑第二块的时候会出现这个现象 图一 ...

  3. wordpress调用the_excerpt()不带<p>标签

    我们知道wordpress调用摘要内容用<?php the_excerpt(); ?>就可以,但是它会自动添加一个p标签,例如<p>这里是description</p&g ...

  4. git常用命令--tag

    /// 查看标签 // 打印所有标签 git tag // 打印符合检索条件的标签 git tag -l 1.*.* // 查看对应标签状态 git checkout 1.0.0 /// 创建标签(本 ...

  5. C#基础加强(8)之委托和事件

    委托 简介 委托是一种可以声明出指向方法的变量的数据类型. 声明委托的方式 格式: delegate <返回值类型> 委托类型名(参数) ,例如: delegate void MyDel( ...

  6. 极验验证使用-滑动&选字验证码

    准备 SDK下载 首先在极验官网下载好SDK,附上官网链接,点此可直接下载python版zip包. 模块安装 使用该SDK时发现它依赖两个模块,分别是geetest和requests. pip ins ...

  7. spring datasource 使用 proxool

    XmlWebApplicationContext使用的xml配置如下: <?xml version="1.0" encoding="UTF-8"?> ...

  8. java 中 正则 matches vs find

    find()方法在部分匹配时和完全匹配时返回true,匹配不上返回false; matches()方法只有在完全匹配时返回true,匹配不上和部分匹配都返回false.

  9. nodejs 癞子麻将

    'use strict'; var _ = require('lodash'); var quick = require('quick-pomelo'); var P = quick.Promise; ...

  10. windows程序设计 显示一个窗口

    #include <windows.h> HINSTANCE hinst; LRESULT CALLBACK MainWndProc(HWND, UINT, WPARAM, LPARAM) ...