JavaScript Reduce使用详解

目录

• map
• filter
• some
• every
• findIndex
• pipe

• 参考答案

• 一、返回函数接受一个参数
• 二、返回函数接受不定参数

• 参考答案

/**
 * 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((acc, item, index) => [...acc, mapping(item, index, arr)], []);
}

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

/**
 * 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((acc, item, index) => predicate(item, index, arr) ? [...acc, item] : acc, []);
}

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

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

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

acc || predicate(val, idx, arr)

predicate(val, idx, arr) || acc

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

function findIndex(arr, predicate) {
 const NOT_FOUND_INDEX = -1;
 return arr.reduce((acc, val, idx) => {
 if (acc === NOT_FOUND_INDEX) {
 return predicate(val, idx, arr) ? idx : NOT_FOUND_INDEX;
 }
 return acc;
 }, NOT_FOUND_INDEX)
}

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

/**
 * 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((acc, { val }) => acc + val, 0)
);
process([{ val: -10 }, { val: 20 }, { val: -0.1 }, { val: 10 }]) // 3

/**
 * 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 up the numbers.
 * @param args number[]
 * @returns {number} the total sum.
 */
function sum(...args) {
 return args.reduce((a, b) => a + b);
}

/**
 * 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(
 (acc, func) => func(acc),
 arg
 )
 }
}

/**
 * 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(
 (acc, func, idx) => idx === 0 ? func(...acc) : func(acc),
 args
 )
 }
}

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

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((acc, key) => acc[key], obj);
}

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

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

function flatDeep(arr) {
 return arr.reduce((acc, item) => 
 Array.isArray(item) ? [...acc, ...flatDeep(item)] : [...acc, 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((acc, key) => {
 if (!isNil(obj[key])) {
 acc[key] = obj[key];
 }
 return acc;
 }, {});
}

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://www.typescriptlang.org/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((acc, key) => {
 acc[key] = obj[key];
 acc[obj[key]] = key;
 return acc;
 }, {});
}