JavaScript Reduce使用详解

网络编程 2021-07-04 14:07www.168986.cn编程入门

这篇文章主要介绍了JavaScript Reduce使用的相关资料，帮助大家更好的理解和学习使用JavaScript，感兴趣的朋友可以了解下

reduce 可谓是 JS 数组方法最灵活的一个，因为可以替代数组的其他方法，比如 map / filter / some / every 等，也是最难理解的一个方法，lodash 很多方法也可以用其实现，学会 reduce 将给与开发者另一种函数式（Functional）、声明式（Declarative）的视角解决问题，而不是以往的过程式（Procedual）或命令式（Imperative）

其中一个难点在于判断 a 即 aumulation 的类型以及如何选择初始值，其实有个小技巧，可以帮助我们找到合适的初始值，我们想要的返回值的类型和 a 类型需要是一样的，比如求和最终结果是数字，则 a 应该是数字类型，故其初始化必定是 0。

狼蚁网站SEO优化开始巩固对 reduce 的理解和用法。

map

根据小技巧，map 最终返回值是数组，故 a 也应该是一个数组，初始值使用空数组即可。

/
  Use `reduce` to implement the builtin `Array.prototype.map` method.
  @param {any[]} arr 
  @param {(val: any, index: number, thisArray: any[]) => any} mapping 
  @returns {any[]}
 /
function map(arr, mapping) {
 return arr.reduce((a, item, index) => [...a, mapping(item, index, arr)], []);
}

测试

map([null, false, 1, 0, '', () => {}, NaN], val => !!val);

// [false, false, true, false, false, true, false]

filter

根据小技巧，filter 最终返回值也是数组，故 a 也应该是一个数组，使用空数组即可。

/
  Use `reduce` to implement the builtin `Array.prototype.filter` method.
  @param {any[]} arr 
  @param {(val: any, index: number, thisArray: any[]) => boolean} predicate 
  @returns {any[]}
 /
function filter(arr, predicate) {
 return arr.reduce((a, item, index) => predicate(item, index, arr) ? [...a, item] : a, []);
}

测试

filter([null, false, 1, 0, '', () => {}, NaN], val => !!val);

// [1, () => {}]

some

some 当目标数组为空返回 false，故初始值为 false。

function some(arr, predicate) {
 return arr.reduce((a, val, idx) => a || predicate(val, idx, arr), false)
}

测试

some([null, false, 1, 0, '', () => {}, NaN], val => !!val);
// true

some([null, false, 0, '', NaN], val => !!val);
// false

附带提醒，二者对结果没影响但有性能区别，a 放到前面因为是短路算法，可避免无谓的计算，故性能更高。

a || predicate(val, idx, arr)

和

predicate(val, idx, arr) || a

every

every 目标数组为空则返回 true，故初始值为 true

function every(arr, predicate) {
 return arr.reduce((a, val, idx) => a && predicate(val, idx, arr), true)
}

findIndex

findIndex 目标数组为空返回 -1，故初始值 -1。

function findIndex(arr, predicate) {
 const NOT_FOUND_INDEX = -1;

 return arr.reduce((a, val, idx) => {
 if (a === NOT_FOUND_INDEX) {
 return predicate(val, idx, arr) ? idx : NOT_FOUND_INDEX;
 }
 
 return a;
 }, NOT_FOUND_INDEX)
}

测试

findIndex([5, 12, 8, 130, 44], (element) => element > 8) // 3

pipe

一、实现以下函数

/
  Return a function to make the input value processed by the provided functions in sequence from left the right.
  @param {(funcs: any[]) => any} funcs 
  @returns {(arg: any) => any}
 /
function pipe(...funcs) {}

使得

pipe(val => val  2, Math.sqrt, val => val + 10)(2) // 12

利用该函数可以实现一些比较复杂的处理过程

// 挑选出 val 是正数的项对其 val 乘以 0.1 系数，然后将所有项的 val 相加，最终得到 3
const process = pipe(
 arr => arr.filter(({ val }) => val > 0), 
 arr => arr.map(item => ({ ...item, val: item.val  0.1 })), 
 arr => arr.reduce((a, { val }) => a + val, 0)
);

process([{ val: -10 }, { val: 20 }, { val: -0.1 }, { val: 10 }]) // 3

二、实现以下函数，既能实现上述 pipe 的功能，而且返回函数接纳参数个数可不定

/
  Return a function to make the input values processed by the provided functions in sequence from left the right.
  @param {(funcs: any[]) => any} funcs 
  @returns {(args: any[]) => any}
 /
function pipe(...funcs) {}

使得以下单测通过

pipe(sum, Math.sqrt, val => val + 10)(0.1, 0.2, 0.7, 3) // 12

其中 sum 已实现

/
  Sum up the numbers.
  @param args number[]
  @returns {number} the total sum.
 /
function sum(...args) {
 return args.reduce((a, b) => a + b);
}

参考答案

一、返回函数接受一个参数

省略过滤掉非函数的 func 步骤

/
  Return a function to make the input value processed by the provided functions in sequence from left the right.
  @param {(arg: any) => any} funcs
  @returns {(arg: any) => any}
 /
function pipe(...funcs) {
 return (arg) => {
 return funcs.reduce(
 (a, func) => func(a),
 arg
 )
 }
}

二、返回函数接受不定参数

同样省略了过滤掉非函数的 func 步骤

/
  Return a function to make the input value processed by the provided functions in sequence from left the right.
  @param {Array<(...args: any) => any>} funcs
  @returns {(...args: any[]) => any}
 /
function pipe(...funcs) {
	// const realFuncs = funcs.filter(isFunction);

 return (...args) => {
 return funcs.reduce(
 (a, func, idx) => idx === 0 ? func(...a) : func(a),
 args
 )
 }
}

性能更好的写法，避免无谓的对比，浪费 CPU

function pipe(...funcs) {
 return (...args) => {
 // 第一个已经处理，只需处理剩余的
 return funcs.slice(1).reduce(
 (a, func) => func(a),
 
 // 将特殊情况处理掉当做 `a`
 funcs[0](...args)
 )
 }
}

第二种写法的 funcs[0](...args) 这个坑要注意，数组为空就爆炸了，因为空指针了。

实现 lodash.get

实现 get 使得以下示例返回 'hello world'。

const obj = { a: { b: { c: 'hello world' } } };

get(obj, 'a.b.c');

函数签名

/
  pluck the value by key path
  @param any object
  @param keyPath string 点分隔的 key 路径
  @returns {any} 目标值
 /
function get(obj, keyPath) {}

参考答案

/
  Pluck the value by key path.
  @param any object
  @param keyPath string 点分隔的 key 路径
  @returns {any} 目标值
 /
function get(obj, keyPath) {
 if (!obj) {
 return undefined;
 }

 return keyPath.split('.').reduce((a, key) => a[key], obj);
}

实现 lodash.flattenDeep

虽然使用 concat 和扩展运算符只能够 flatten 一层，但通过递归可以去做到深度 flatten。

方法一扩展运算符

function flatDeep(arr) {
 return arr.reduce((a, item) => 
 Array.isArray(item) ? [...a, ...flatDeep(item)] : [...a, item],
 []
 )
}

方法二concat

function flatDeep(arr) {
 return arr.reduce((a, item) => 
 a.concat(Array.isArray(item) ? flatDeep(item) : item),
 []
 )
}

有趣的性能对比，扩展操作符 7 万次 1098ms，同样的时间 concat 只能执行 2 万次

function flatDeep(arr) {
 return arr.reduce((a, item) => 
 Array.isArray(item) ? [...a, ...flatDeep(item)] : [...a, item],
 []
 )
}

var arr = repeat([1, [2], [[3]], [[[4]]]], 20);

console.log(arr);
console.log(flatDeep(arr));

console.time('concat')
for (i = 0; i < 7  10000; ++i) {
 flatDeep(arr)
}
console.timeEnd('concat')

function repeat(arr, times) { let result = []; for (i = 0; i < times; ++i) { result.push(...arr) } return result; }

过滤掉对象中的空值

实现

clean({ foo: null, bar: undefined, baz: 'hello' })

// { baz: 'hello' }

答案

/
  Filter out the `nil` (null or undefined) values.
  @param {object} obj
  @returns {any}
 
  @example clean({ foo: null, bar: undefined, baz: 'hello' })
 
  // => { baz: 'hello' }
 /
export function clean(obj) {
 if (!obj) {
 return obj;
 }

 return Object.keys(obj).reduce((a, key) => {
 if (!isNil(obj[key])) {
 a[key] = obj[key];
 }

 return a;
 }, {});
}

enumify

将常量对象模拟成 TS 的枚举

实现 enumify 使得

const Direction = {
 UP: 0,
 DOWN: 1,
 LEFT: 2,
 RIGHT: 3,
};

const actual = enumify(Direction);

const expected = {
 UP: 0,
 DOWN: 1,
 LEFT: 2,
 RIGHT: 3,

 0: 'UP',
 1: 'DOWN',
 2: 'LEFT',
 3: 'RIGHT',
};

deepStrictEqual(actual, expected);

答案

/
  Generate enum from object.
  @see https://.typescriptlang./play?#code/KYOwrgtgBAglDeAoKUBOwAmUC8UCMANMmpgEw5SlEC+UiiAxgPYgDOTANsAHQdMDmAChjd0GAJQBuRi3ZdeA4QG08AXSmIgA
  @param {object} obj
  @returns {object}
 /
export function enumify(obj) {
 if (!isPlainObject(obj)) {
 throw new TypeError('the enumify target must be a plain object');
 }

 return Object.keys(obj).reduce((a, key) => {
 a[key] = obj[key];
 a[obj[key]] = key;

 return a;
 }, {});
}

Promise 串行执行器

利用 reduce 我们可以让不定数量的 promises 串行执行，在实际项目中能发挥很大作用。此处不细讲，请参考我的下一篇文章。

拓展

请使用 jest 作为测试框架，给本文的所有方法书写单测
更多习题见 github./you-dont-ne…

以上就是JavaScript Reduce使用详解的详细内容，更多关于JavaScript Reduce使用的资料请关注狼蚁SEO其它相关文章！

上一篇：原生js实现2048小游戏下一篇：JS 实现请求调度器

JavaScript Reduce使用详解

目录

map

filter

some

every

findIndex

pipe

参考答案

一、返回函数接受一个参数

二、返回函数接受不定参数

实现 lodash.get

参考答案

实现 lodash.flattenDeep

过滤掉对象中的空值

enumify

Promise 串行执行器

拓展

狼蚁网络搜索

狼蚁网络导航

长沙seo优化

长沙网络营销

长沙网站建设

JavaScript Reduce使用详解

目录

map

filter

some

every

findIndex

pipe

参考答案

一、返回函数接受一个参数

二、返回函数接受不定参数

实现 lodash.get

参考答案

实现 lodash.flattenDeep

过滤掉对象中的空值

enumify

Promise 串行执行器

拓展

编程语言

狼蚁网络搜索

狼蚁网络导航

长沙seo优化

长沙网络营销

长沙网站建设