JavaScript实现订单日期筛选时推入对象报push不存在错误的问题排查

直接触发报错的核心问题 #

• 你在代码中写的let filteredOrders = Array，实际是将filteredOrders赋值为JS内置的Array构造函数本身，而非初始化完成的空数组实例。Array构造函数不存在数组实例专属的push方法，调用时自然抛出TypeError: filteredOrders.push is not a function。正确的空数组初始化写法是let filteredOrders = []。

其他会导致功能失效的逻辑问题 #

• 筛选逻辑完全反向：你在forEach遍历中，将符合日期范围的分支写在了if判断内部，命中条件时直接return跳过后续代码，反而把不符合筛选要求的订单推入了结果数组，完全达不到筛选效果。
• 日期比较逻辑存在缺陷：你直接把订单的createdAt字段和moment格式化后的字符串做大小比较，既存在类型不匹配的比较失真问题，且DD-MM-Y格式的字符串按照字典序排序的结果，和日期实际先后顺序并不一致，跨月、跨年场景下会出现判断完全错误的情况。
• 代码实现冗余：筛选数组本身可直接通过JS原生数组的filter方法完成构建，不需要手动遍历后逐次push，能大幅减少人为逻辑失误。

修复后的代码实现 #

优先推荐使用原生filter方法的简洁写法：

methods: {
    applyFilter: function () {
        // 统一将日期范围转成时间戳做数值比较，覆盖选中当天的完整时间区间
        const rangeStart = moment(this.selectedDateFrom).startOf('day').valueOf()
        const rangeEnd = moment(this.selectedDateTill).endOf('day').valueOf()

        // filter方法自动返回符合条件的订单组成的新数组
        this.filteredOrders = this.orders.filter(order => {
            const orderCreateTime = moment(order.createdAt).valueOf()
            return orderCreateTime >= rangeStart && orderCreateTime <= rangeEnd
        })

        this.isFilterShown = false
    }
}

如果需要保留手动遍历push的实现逻辑，调整后的可运行版本如下：

methods: {
    applyFilter: function () {
        const dateFrom = this.selectedDateFrom
        const dateTill = this.selectedDateTill
        // 正确初始化空数组
        let filteredOrders = []
        const rangeStart = moment(dateFrom).startOf('day').valueOf()
        const rangeEnd = moment(dateTill).endOf('day').valueOf()

        this.orders.forEach(function (order) {
            const orderCreateTime = moment(order.createdAt).valueOf()
            // 命中筛选条件时再推入数组，逻辑放在判断分支内部
            if (orderCreateTime >= rangeStart && orderCreateTime <= rangeEnd) {
                filteredOrders.push(order)
            }
        })
        this.orders = filteredOrders
        this.isFilterShown = false
    }
}

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