javascript - Lodash cloneDeepWith 省略 undefined

Question

我写了一个 customozer 函数来省略对象的未定义值 cloneDeepWith .然而，在不可变的返回上，它并没有递归地挖掘。这是我的代码:

import { cloneDeepWith, pickBy, omit } from 'lodash';

const obj = {
  a0: true,
  b0: true,
  c0: undefined,
  obj1: {
    a1: true,
    b1: true,
    c1: undefined
  }
};

cloneDeepWith(obj, value => {
    const objWithUndefinedValue = pickBy(obj, (value) => value === undefined);
    const keysWithUndefinedValue = Object.keys(objWithUndefinedValue);
    return omit(obj, keysWithUndefinedValue);
});

但是它在第一次返回后不会递归。是否可以使用 lodash 库存功能来实现这一点？

Answer 1

据我所知_.cloneDeepWith()定制器有点误导。定制器应该只处理非对象值。如果它处理对象值，它也应该自己继续递归。例如，您可以看到在调用自定义程序时，克隆由 value.cloneNode(true) 处理。 .如您所见，只有 body出现在控制台中。

const { cloneDeepWith, isObject } = _;

function customizer(value) {
  console.log(value);
  if (_.isElement(value)) {
    return value.cloneNode(true);
  }
}
 
var el = _.cloneDeepWith(document.body, customizer);

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script>

但是，如果您只是自定义非对象值，并返回 undefined对于对象值，它会提示处理它们的方法(记录在 cloneDeep 中)，它会迭代所有内容:

const { cloneDeepWith, isObject, isUndefined } = _;

const obj = {
  a0: true,
  b0: true,
  c0: undefined,
  obj1: {
    a1: true,
    b1: true,
    c1: undefined
  }
};

const result = cloneDeepWith(obj, v => {
  console.log(v);
  
  return isObject(v) ? undefined : 'custom value';
});

console.log(result);

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script>

要解决您的问题，您可以使用_.transform()递归地取所有不是 undefined 的值:

const { transform, isObject, isUndefined } = _;

const obj = {
  a0: true,
  b0: true,
  c0: undefined,
  obj1: {
    a1: true,
    b1: true,
    c1: undefined
  }
};

const cloneDeepWithoutUndefined = (obj) =>
  transform(obj, (r, v, k) => {
    if(isUndefined(v)) return;
    r[k] = isObject(v) ? cloneDeepWithoutUndefined(v) : v;
  });
  
const result = cloneDeepWithoutUndefined(obj);

console.log(result);

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script>