ES6- reduce 编程挑战

reduce 是 ES6 提供的数组 API，能够非常高效、优雅的解决一些常见问题。

它特点之一是将当前计算结果作为下一次的入参，就像一个管道（pipeline），适合应用在连续、累加计算的场景。

求解数组最大值

acc 是上一次的计算结果，即两数较大值。

function MaxInArr(arr) {
  try {
    return arr.reduce((acc, cur) => Math.max(acc, cur));    
  } catch (error) {
    return null
  }
}
复制代码

多维数组展开

function flatArray(arr = [], n = 1) {
  let resArr = arr;
  while (n > 0) {
    resArr = resArr.reduce((acc, val) => {
      return acc.concat(val);
    }, []);
    n += -1;
  }
  return resArr;
}
复制代码

数组去重

const uniq = (arr) =>
  arr.reduce((acc, cur) => {
    if (!acc.includes(cur)) {
      return acc.concat(cur);
    } else {
      return acc;
    }
  }, []);
复制代码

获取嵌套对象属性值

const deepGet = (obj, keys) => keys.reduce((acc, cur) => (acc && acc[cur] ? acc[cur] : null), obj);

const data = {
  foo: {
    foz: [1, 2, 3],
    bar: {
      baz: ['a', 'b', 'c'],
    },
  },
};
deepGet(data, ['foo', 'foz', 'bar']);
复制代码

忽略对象的属性

lodash 中也有对 omit 的实现。

const omit = (obj, uselessKeys) =>
  Object.keys(obj).reduce(
    (acc, key) => (uselessKeys.includes(key) ? acc : { ...acc, [key]: obj[key] }),
    {}
  );

const user = { name: 'sam', age: 30, gender: 'male' };
omit(user, ['age']);
复制代码

替换对象键名

我在渲染表格数据时遇到这个场景，Antd Table 组件内置了相关属性（一时找不到了），当时用起来觉得幸福满满~

// 替换对象的键名，支持传入对象数组/对象
const replaceKeys = (obj, keysMap) => {
  if (Array.isArray(obj)) {
    return obj.map((item) => replaceKeys(item, keysMap));
  } else {
    // 本来只是替换对象的键值，解决这个问题后发现对象数组也可以处理
    // 无意间用到了分治的思想
    return Object.keys(obj).reduce((acc, key) => {
      const newKey = keysMap[key] || key;
      acc[newKey] = obj[key];
      return acc;
    }, {});
  }
};

const userList = [
  { name: 'sam', age: 30, gender: 'male' },
  { name: 'yy', age: 18, gender: 'female' },
];
replaceKeys(userList, { gender: 'sex' });

const user = { name: 'yy', age: 18, gender: 'female' };
replaceKeys(user, { gender: 'sex' });
复制代码

以上，就是 reduce 应用的常见场景，欢迎补充讨论~ ?