使用Select2构建辅助多选框时Object.assign合并对象的异常问题

Let's break down what's going wrong with your Select2 multi-select setup and that tricky Object.assign behavior, and fix it up.

The Root of the Issue #

It looks like you’re trying to merge arrays of selected items from Select2 using Object.assign—but this method is designed for copying object properties, not combining arrays. When you pass arrays to Object.assign, it treats array indices as object keys, leading to unexpected overwrites or incomplete merges (like the truncated Object { ... } you saw in the Plot 18 selection).

From your output, the merged result looks like an array, but Object.assign is handling it like an object under the hood, which is why you’re getting inconsistent behavior.

Fixes to Get the Right Merge #

1. Use Array-Friendly Methods for Merging

Ditch Object.assign entirely for combining Select2’s selected item arrays. Use one of these straightforward approaches:

Option A: Spread Operator (Clean & Modern)

// Grab selected data from your Select2 controls
const plot18Selections = $('#plot18-select').select2('data');
const otherSelections = $('#other-select').select2('data');

// Merge the arrays
const mergedSelections = [...plot18Selections, ...otherSelections];

Option B: concat() Method (Classic & Reliable)

const mergedSelections = plot18Selections.concat(otherSelections);

2. Add Deduplication (If You Need It)

If multiple Select2 controls might share the same id values, you can remove duplicates using a Map to ensure unique entries:

// Merge first, then deduplicate (keeps the last occurrence of each id)
const uniqueMerged = [...new Map(mergedSelections.map(item => [item.id, item])).values()];

// To keep the first occurrence instead:
const uniqueMerged = [...new Map([...mergedSelections].reverse().map(item => [item.id, item])).values()].reverse();

3. Avoid Shallow Copy Issues (If You Modify Merged Data)

If you plan to edit the merged objects later without affecting the original Select2 data, make deep copies of each item:

// Create fresh copies of each selection object
const mergedSelections = [
  ...plot18Selections.map(item => ({...item})),
  ...otherSelections.map(item => ({...item}))
];

(Note: For objects with nested properties, use JSON.parse(JSON.stringify(item)) instead—just avoid this if your objects contain functions or special types like Dates.)

Why Object.assign Fails Here #

Let’s use a quick example to illustrate:

const arr1 = [{id:1, text:1}, {id:2, text:2}];
const arr2 = [{id:3, text:3}, {id:4, text:4}];

// This will NOT give you [1,2,3,4]
const badMerge = Object.assign([], arr1, arr2);
// Result: [{id:3, text:3}, {id:4, text:4}] (arr2 overwrites arr1's indices)

Object.assign treats array indices as object keys, so later arrays overwrite earlier ones at matching indices. This is never what you want for combining lists of Select2 selections.

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