Question

我使用的数据集包含字段continent，country，city和`street。可以想象，每个字段都取决于前一个字段。

现在假设有一个（部分）已完成的数据集，并且用户更改了country值。然后所有后续字段都必须为空。

这就是我这样做的方式（在我的情况下，数据存储为反应组件中的状态 - 但这在此并不重要）。但对我来说，这看起来非常不动。我希望这可以做得更多一些＆＃39; programatical＆＃39;。

我的问题是，我不能只迭代对象，因为字段的顺序没有在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

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

＆＃13;

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));

＆＃13;

Answer 2

您可以使用直通switch：

switch(data.name) {
  case 'continent':
    this.setState({ continent: undefined });
  case 'country':
    this.setState({ country: undefined });
  case 'city':
    this.setState({ city: undefined });
  case 'street':
    this.setState({ street: undefined });
}

Answer 3

虽然对象文字排序未定义，但数组排序不是。

因此，如果我们使用数组来查找开始取消定义的索引，那么我们就可以从该索引继续。

以下是一个例子。

＆＃13;

let
  seri = ['continent', 'country', 'city', 'street'];
  
  
function clear(name, obj) {
  let p = seri.indexOf(name);
  for (let l = p; l < seri.length; l ++) 
     obj[seri[l]] = undefined;
  return obj;
}

var
  all = {
    continent: 'continent',
    country: 'country',
    city: 'city',
    street: 'street'  
  };

seri.forEach((c) => {
  console.log(`clear ${c}`);
  console.log(clear(c, Object.assign({},all)));
});

＆＃13;

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

3 个答案: