30秒学会 JavaScript 片段 · 2018年6月22日

30秒学会 JavaScript 片段 – deepMapKeys

Deep maps an object’s keys.

Creates an object with the same values as the provided object and keys generated by running the provided function for each key.
Use Object.keys(obj) to iterate over the object’s keys.
Use Array.prototype.reduce() to create a new object with the same values and mapped keys using fn.

代码片段

const deepMapKeys = (obj, fn) =>
  Array.isArray(obj)
    ? obj.map(val => deepMapKeys(val, fn))
    : typeof obj === 'object'
    ? Object.keys(obj).reduce((acc, current) => {
        const key = fn(current);
        const val = obj[current];
        acc[key] =
          val !== null && typeof val === 'object' ? deepMapKeys(val, fn) : val;
        return acc;
      }, {})
    : obj;

使用样例

const obj = {
  foo: '1',
  nested: {
    child: {
      withArray: [
        {
          grandChild: ['hello']
        }
      ]
    }
  }
};
const upperKeysObj = deepMapKeys(obj, key => key.toUpperCase());
/*
{
  "FOO":"1",
  "NESTED":{
    "CHILD":{
      "WITHARRAY":[
        {
          "GRANDCHILD":[ 'hello' ]
        }
      ]
    }
  }
}
*/