javascript - 如何像另一个对象一样构建一个对象？

Question

有一些输入。我已经根据这些输入的值生成了一个对象。所以，我生成的对象是这样的:

var generate_fields = {
  name: "Mike",
  email: "mike@gmail.com",
  gender: "1",
  hobby: ["travel", "movie"]
}

还有一个引用对象:

var ref_obj = {
    personal_information: {
      name: null,
      password: null,
      gender: null
  },
  business_information: {
    email: null,
    id: null,
  },
  special_information: {
    hobby: null,
    achievement: null
  }
}

我需要使用对象 generate_fields 创建一个新对象，例如引用对象 ref_obj。因此，新对象将是:

var custom_obj = {
    personal_information: {
     name: "Mike",  
     gender: "1",
  },
  business_information: {
    email: "mike@gmail.com",
  },
  special_information: {
    hobby: ["travel", "movie"]
  }
}

如何使用 generate_fields 和 ref_obj 制作 custom_obj？

演示:

var ref_obj = {
	personal_information: {
  	name: null,
    password: null,
    gender: null
  },
  business_information: {
  	email: null,
    id: null,
  },
  special_information: {
  	hobby: null,
    achievement: null
  }
}

//console.log(ref_obj);

$('form').submit(function(event) { 
	event.preventDefault();
  var generated_fields = {};
  $(this).find('input, select').not('input[name=submit]').each(function() {
  	generated_fields[this.name] = $(this).val();
  });
  console.log(generated_fields);
});

.form-group {
  margin-bottom: 20px;
}

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

<form>
  <div class="form-group">
    <laberl>Name: </laberl>
    <input type="text" name="name" id="name" placeholder="Name" />
  </div>
  <div class="form-group">
    <label>Email:</label>
    <input type="text" name="email" id="email" placeholder="Email" />
  </div>
  <div class="form-group">
    <label>Gender:</label>
    <select name="gender" id="gender">
      <option value="1">Male</option>
      <option value="2">Female</option>
      <option value="2">Other</option>
    </select>
  </div>
  <div class="form-group">
    <label>Hobbies:</label>
    <select name="hobby" id="hobby" multiple>
      <option value="books">Reading books</option>
      <option value="travel">Travelling</option>
      <option value="movie">Movie</option>
    </select>
  </div>
  <input type="submit" name="submit" value="submit" />
</form>

Answer 1

我建议您使用通用解决方案 reduce + forEach .让我试着描述一下我的方法。首先，您应该遍历 generated_fields 数组以确定根级字段，然后您必须遍历每个字段并检查原始对象是否包含相同的属性

var a1 = {
  name: "Mike",
  email: "mike@gmail.com",
  gender: "1",
  hobby: ["travel", "movie"]
}

var a2 = {
    personal_information: {
      name: null,
      password: null,
      gender: null
  },
  business_information: {
    email: null,
    id: null,
  },
  special_information: {
    hobby: null,
    achievement: null
  }
}

const arr = Object.keys(a2).reduce((a, key) => {
	Object.keys(a2[key]).forEach(value => {
		if(a1.hasOwnProperty(value)){
			a[key] = a[key] || {};
			a[key][value] = a1[value];
		}	
	});
	return a;
}, {});

console.log(arr);