如何遍历二维数组并修改其值？旅行照片二维数组批量重命名实现问询

Hey there! Let's fix your photo renaming problem and get you sorted with traversing and modifying that 2D array properly.

1. Why Your Current Code Isn't Working #

Your current code uses map() with filter() nested inside, which is not the right approach here. Let's break it down:

• photos.map() iterates over each sub-array in the photos array (each sub-array represents a single photo entry)
• But then you call photo.filter() on each sub-array—filter() is designed to create a new array with elements that pass a test, not to iterate and log elements. That's why you're seeing every single string from all sub-arrays printed out, instead of processing the filenames as intended.

2. Solution: Rename Photos by City with Sequential Numbering #

To get your expected output (kigali01.jpg, kigali02.jpg, kibuye1.jpg, kampala1.jpg), we need to:

• First count how many photos exist per city to track the numbering sequence
• Then iterate over the photos array, generate new filenames using the city name and its sequential number, and optionally update the original array

Here's a working code example:

const photos = [ 
  ['photo.jpg', 'kigali','2013-09-05 14:08:09'], 
  ['demmpa.jpg', 'kigali','2013-09-05 14:08:09'], 
  ['third.jpg', 'kibuye','2013-02-05 12:08:09'],
  ['forthpic.jpg', 'kampala','2013-02-05 12:08:09'] 
];

// Step 1: Count total photos per city to determine number formatting
const cityPhotoCounts = {};
photos.forEach(photo => {
  const city = photo[1];
  cityPhotoCounts[city] = (cityPhotoCounts[city] || 0) + 1;
});

// Step 2: Initialize a counter for each city to track sequential numbering
const cityCounters = {};
Object.keys(cityPhotoCounts).forEach(city => {
  cityCounters[city] = 1;
});

// Step 3: Generate new filenames (and modify original array if needed)
const renamedPhotos = photos.map(photo => {
  const city = photo[1];
  const currentCount = cityCounters[city];
  // Format number: use two digits if city has 2+ photos, else one (matches your expected output)
  const formattedNumber = cityPhotoCounts[city] > 1 ? String(currentCount).padStart(2, '0') : currentCount;
  const newFilename = `${city}${formattedNumber}.jpg`;
  
  // Optional: Update the original array's filename
  photo[0] = newFilename;
  
  // Increment the counter for the next photo in this city
  cityCounters[city]++;
  
  return newFilename;
});

console.log(renamedPhotos); 
// Output: ["kigali01.jpg", "kigali02.jpg", "kibuye1.jpg", "kampala1.jpg"]

3. How to Properly Traverse and Modify a 2D Array #

If you just need to iterate over the 2D array and modify values (like we did above), here are two common, reliable approaches:

Approach 1: Using forEach() (for modifying the original array) #

Great for side effects like updating existing values directly:

photos.forEach((photoEntry, entryIndex) => {
  // photoEntry = the sub-array (e.g., ['photo.jpg', 'kigali', '2013-09-05 14:08:09'])
  // entryIndex = position of the sub-array in the main `photos` array
  
  photoEntry.forEach((item, itemIndex) => {
    // item = individual element in the sub-array (filename, city, date)
    // itemIndex = 0 (filename), 1 (city), 2 (date)
    
    // Example: Update the filename to uppercase
    if (itemIndex === 0) {
      photoEntry[itemIndex] = item.toUpperCase();
    }
  });
});

Approach 2: Using map() (to create a new modified array) #

Ideal if you want to keep the original array intact:

const modifiedPhotos = photos.map(photoEntry => {
  // Create a copy of the sub-array to avoid mutating the original
  const newEntry = [...photoEntry];
  // Modify the filename (index 0)
  newEntry[0] = `renamed-${newEntry[0]}`;
  return newEntry;
});

Key Notes: #

• Use forEach() if you need to mutate the original array directly
• Use map() with spread syntax ([...photoEntry]) if you want to preserve the original data and work with a modified copy

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