使用jQuery $.grep筛选File对象数组（按文件名过滤）的问题

Hey there! Let's break down your current implementation and get that file filtering working correctly, plus look at some cleaner alternatives.

First: The Issue with Your Current $.grep Code #

Your callback function for $.grep has the parameter order reversed! The $.grep method passes the current array element as the first argument, and the index as the second. In your code, you're treating fileBuffers (which is actually a single File object) like an array and trying to access fileBuffers[value]—that's going to throw errors because a single File isn't an array.

Correct $.grep Implementation #

Here's the fixed version that will correctly exclude the file with the matching filename:

// Step 1: Build your file array (your existing line works, but we'll optimize this below)
Array.prototype.push.apply(fileBuffers, e.originalEvent.dataTransfer.files);

// Step 2: Filter correctly with $.grep
var arr = $.grep(fileBuffers, function(file, index) {
  // 'file' is the current File object in the array
  return file.name !== filename;
});

Better Optimization: Use Native JavaScript filter() #

Unless you're stuck supporting very old browsers, using the native Array.filter() method is a cleaner, more modern approach—no jQuery dependency needed, and it's just as performant.

First, let's optimize Step 1 to convert the FileList (from dataTransfer.files) into a proper array more cleanly:

// Replace your Step 1 with one of these cleaner options:
const fileBuffers = [...e.originalEvent.dataTransfer.files]; // ES6 spread syntax
// OR
const fileBuffers = Array.from(e.originalEvent.dataTransfer.files); // ES6 Array.from

Then filter with native filter():

// ES5 compatible version
var arr = fileBuffers.filter(function(file) {
  return file.name !== filename;
});

// ES6+ arrow function for shorter code
const arr = fileBuffers.filter(file => file.name !== filename);

Key Notes #

• dataTransfer.files returns a FileList (a read-only array-like object), so converting it to a proper array first (like you did with push.apply or the ES6 methods above) is necessary to use array methods like filter() or $.grep.
• The native filter() method is widely supported in all modern browsers (Chrome, Firefox, Edge, Safari 9+), so it's a great replacement for jQuery's $.grep unless you need to support legacy IE versions.

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