Question

我有一个Form类（非常多like this），其表单字段是动态设置的。这是一个示例字段集：

示例表单对象数据集

jamb_style: '',
cutouts: '',
door: {
    length: '',
    width: '',
    thickness: '',
},
lock_bore: {
    location: '',
    diameter: '',
},
hinge: {
    size: '',
    pocket_radius: '',
    backset: '',
    locations: {
        first: '',
        second: '',
        third: '',
        fourth: '',
    },
},
face_plate: {
    length: '',
    width: '',
    radius: '',
},

正如你可以看到一些字段是嵌套的而其他字段没有嵌套，如果所有字段都在一个级别上，那么重置表单将是微不足道的：

在平面表单对象中轻松重置字段

reset() {
    for (let field in this.originalData) {
        this[field] = '';
    }
}

但是，因为我的一些表单数据是对象我的 reset()函数如下所示：

警告，您将要看到的内容可能会打扰您

reset() {
    let data = this.originalData;

    for (let key in data) {
        if (typeof data[key] === 'object') {
            let subData = data[key];

            for (let subKey in subData) {
                if (typeof subData[subKey] === 'object') {
                    let subDataData = data[key][subKey];

                    for (let subKeyKey in subDataData) {
                        if (typeof data[key][subKey][subKeyKey] === 'string') {
                            this[key][subKey][subKeyKey] = '';
                        }
                    }
                }

                if (typeof subData[subKey] === 'string') {
                    this[key][subKey] = '';
                }
            }
        }

        if (typeof data[key] === 'string') {
            this[key] = '';
        }
    }
}

我真正喜欢的是通过使这个函数递归来清理它的方法，以便它向下钻取并确保仅当属性不是对象时才清除它。

问题是我不知道如何继续。

Answer 1

您可以尝试使用以下代码作为基线递归执行此操作

TIME

上面的代码试图循环遍历所提供对象的所有键，并在识别出它为单个键值对后重置它，如果它识别出包含在其中的子对象的键，则调用自身。

希望这有助于将其扩展到您自己的想法。快乐的编码。

Answer 2

重置对象的一种新方法是提及您的“清洁”对象。形成并克隆它。

e.g

＆＃13;

  const formTemplate = { //Abridged for brevity
  cutouts: '',
  hinge: {
      size: '',
      pocket_radius: '',
      backset: '',
      locations: {
          first: '',
          second: '',
          third: '',
          fourth: '',
      },
  },
}

function getNewForm(form){
	return JSON.parse(JSON.stringify(form));
}

console.assert(getNewForm(formTemplate)!==formTemplate);	//Assert new form is not equal by reference
console.assert(JSON.stringify(getNewForm(formTemplate))===JSON.stringify(formTemplate)); //Assert new form is equal by value

＆＃13;

我的JavaScript对象值重置功能失控

2 个答案: