javascript - 如果值发生更改，如何清空对象的所有后续字段？

Question

我正在使用一个数据集，其中包含字段 continent、country、city 和 `street。可以想象，每个字段都依赖于前一个字段。

现在假设有一个(部分)完整的数据集并且用户更改了 country 值。然后所有以下字段都必须为空。

这就是我这样做的方式(在我的例子中，数据作为状态存储在 react 组件中 - 但这在这里无关紧要)。但对我来说，这看起来非常不动态。我希望这可以做得更“程式化”一点。

我的问题是，我不能只迭代对象，因为字段的顺序在 js 对象中不是固定的。它会在一个数组中，但这里不是这种情况......

if (data.name === 'continent') {
  this.setState({
    continent: undefined,
    country: undefined,
    city: undefined,
    street: undefined
  })
} else if (data.name === 'country') {
  this.setState({
    country: undefined,
    city: undefined,
    street: undefined
  })
} else if (data.name === 'city') {
  this.setState({
    city: undefined,
    street: undefined
  })
} else if (data.name === 'street') {
  this.setState({
    street: undefined
  })
}

Answer 1

由于字段确实具有层次结构和顺序，因此您可以将名称存储在数组中。然后将更改的字段和所有后续字段设置为未定义，然后使用 Object.assign() 创建新状态，如下所示:

var data = {name: "country"};
var fields = ["continent", "country", "city", "street"];
var state = {
  continent: "North America",
  country: "United States",
  city: "Orlando",
  street: "123 Main Street"
}
function clearFields (fieldName) {
  var fieldIndex = fields.indexOf(fieldName);
  var updatedState = {};
  if (~fieldIndex) {
    updatedState = fields.slice(fieldIndex).reduce(function (newState, currField) {
      newState[currField] = undefined;
      return newState;
    }, {});
  }
  return Object.assign({}, state, updatedState);
}

console.log("Clear Continent...");
console.log(clearFields("continent"));

console.log("Clear Country...");
console.log(clearFields("country"));

console.log("Clear City...");
console.log(clearFields("city"));

console.log("Clear Street...");
console.log(clearFields("street"));

// to update react state...
//this.setState(clearFields(data.name));