JS如何将allValues数组值正确赋值给memories对象的原有键

当前循环逻辑直接使用数组的数字索引（0、1、2……）作为memories对象的属性键，和对象预先定义的email、date、relation等字符串键完全不匹配，因此不会覆盖原有键的空值，反而会给对象新增一系列数字键属性，最终表现为值被追加到原有属性后方、新增属性的键是数组序号。

核心逻辑是不要用数组索引直接当对象键，要把数组值和memories的原有键做对应后再赋值，有两种常用实现：

• 按顺序匹配赋值（适合确认input顺序和对象键顺序完全一致的场景）

const memories = {
    email: '',
    date: '',
    relation: '',
    tips: '',
    location: '',
};

const backend = (e) => {
    e.preventDefault();
    const allInputs = Array.from(document.querySelectorAll('input'));
    const allValues = allInputs.map(input => input.value);
    // 提前取出memories的原有键，顺序和对象定义时一致
    const memoryKeys = Object.keys(memories);

    for (const [index, value] of allValues.entries()) {
        // 用对应位置的原有键作为属性名赋值
        if (memoryKeys[index]) {
            memories[memoryKeys[index]] = value;
        }
    }
    console.log(memories);
};

• 按name属性匹配赋值（推荐，无顺序依赖、容错率更高）
  前提是给每个input加上和memories键同名的name属性，比如邮箱输入框写<input name="email">，这种写法不依赖DOM元素的排列顺序，不会因为页面结构调整出现赋值错位

const memories = {
    email: '',
    date: '',
    relation: '',
    tips: '',
    location: '',
};

const backend = (e) => {
    e.preventDefault();
    // 直接遍历memories的原有键，找对应name的输入框取值
    Object.keys(memories).forEach(key => {
        const input = document.querySelector(`input[name="${key}"]`);
        if (input) {
            memories[key] = input.value;
        }
    });
    console.log(memories);
};

注意：第一种顺序匹配的写法要求input数量、排列顺序和memories的键完全对应，只要前端调整了input位置就可能出现值填错键的问题，生产环境优先选第二种name匹配的方案。

内容的提问来源于stack exchange，提问作者rozina