jQuery动态日期数组优化：如何合并增删操作的遍历逻辑？

核心思路 #

不用分别处理增删操作，每次操作后直接重新构建日期数组即可——因为不管是添加行还是删除行，我们最终只需要当前表格内所有日期字段的最新值，完全没必要维护旧数组的增删动作，一次遍历就能完成数组更新。

原代码问题分析 #

1. adddatetask函数里的判断if (arr !== element)逻辑错误：arr是数组，element是DOM元素，两者永远不相等，会导致重复添加同一日期到数组中
2. datetaskremove函数逻辑颠倒：遍历所有输入框去删除数组元素，会把数组内的日期全部清空，完全不符合删除行的预期

优化后的代码 #

// 统一的数组更新函数，获取当前表格所有日期值
function updateDateArray() {
    // 从DOM中提取所有有效日期值，生成新数组
    const dateArray = $('table#taskclientcontact input.datetask')
        .map(function() {
            return $(this).val().trim(); // 去除空白字符，过滤无效值
        })
        .get(); // 将jQuery对象转换为普通JS数组
    
    console.log(dateArray);
    return dateArray; // 返回数组，供后续计算起止日期使用
}

// 绑定所有触发数组更新的事件
$("table#taskclientcontact")
    // 日期输入框值变化时更新数组
    .on('change', '.datetask', updateDateArray)
    // 删除按钮点击时，先删行再更新数组
    .on('click', '.remove', function() {
        $(this).closest('tr').remove(); // 删除当前按钮所在的表格行
        updateDateArray();
    });

关于splice的补充说明 #

splice是用于在数组指定位置添加/删除元素的方法，语法为array.splice(起始索引, 删除数量, [要添加的元素...])：

• arr.splice(2, 1)：从索引2的位置开始删除1个元素
• arr.splice(1, 0, '2024-01-01')：在索引1的位置插入新日期值

但在你的场景中，完全不需要用splice手动维护数组，直接从DOM重新生成数组更简单可靠，能避免手动同步DOM和数组时的各类错误。

内容的提问来源于stack exchange，提问作者Ing. Vakulin Oleg