对比两个数组，进行条件判断和替换 |
您所在的位置：网站首页 › if函数的2个条件使用方法 › 对比两个数组，进行条件判断和替换 |
|
有个需求，后端返回的数组在显示时，要有数据显示数据，没有数据显示配置，这个就需要写两个数组，进行数组对比及替换，目的是为得到目标数组，直接上代码： 方法1：使用forEach 来遍历数组，一一对比 function compareAndReplace(arr1, arr2, conditionFn, replaceFn) { // 遍历 arr1 arr1.forEach((item1, index1) => { // 遍历 arr2 arr2.forEach((item2, index2) => { // 判断是否符合条件 if (conditionFn(item1, item2)) { // 替换对象 arr1[index1] = replaceFn(item1, item2); } }); }); return arr1; } // 示例 const array1 = [ { id: 1, name: "John" }, { id: 2, name: "Jane" }, { id: 3, name: "Doe" }, ]; const array2 = [ { id: 1, name: "Johnny" }, { id: 2, name: "Janet" }, { id: 4, name: "Alice" }, ]; // 定义对比条件：ID 相同 const conditionFn = (item1, item2) => item1.id === item2.id; // 定义替换方式：用 array2 中的对象替换 array1 中的对象 const replaceFn = (item1, item2) => item2; const result = compareAndReplace(array1, array2, conditionFn, replaceFn); console.log(result); // 输出: [ // { id: 1, name: 'Johnny' }, // { id: 2, name: 'Janet' }, // { id: 3, name: 'Doe' } // ]这个函数接受四个参数： arr1：要进行替换的数组。arr2：用于替换的数组。conditionFn：判断是否符合条件的函数，接受两个参数 item1 和 item2，对应 arr1 和 arr2 中的元素。如果返回 true，则进行替换。replaceFn：替换方式的函数，接受两个参数 item1 和 item2，对应 arr1 和 arr2 中的元素。返回一个新的元素替换 arr1 中的元素。方法2：使用 map 和 find 通过数组的 map 方法，遍历并根据条件查询和替换元素： function compareAndReplace(arr1, arr2, conditionFn, replaceFn) { return arr1.map(item1 => { const item2 = arr2.find(item2 => conditionFn(item1, item2)); return item2 ? replaceFn(item1, item2) : item1; }); } // 示例与之前相同。使用相同的 array1, array2, conditionFn 和 replaceFn。 const result = compareAndReplace(array1, array2, conditionFn, replaceFn); console.log(result);方法3：使用 for...of 循环 通过 for...of 循环遍历并根据条件查询和替换元素： function compareAndReplace(arr1, arr2, conditionFn, replaceFn) { for (const item1 of arr1) { for (const item2 of arr2) { if (conditionFn(item1, item2)) { const index1 = arr1.indexOf(item1); arr1[index1] = replaceFn(item1, item2); break; } } } return arr1; } // 示例与之前相同。使用相同的 array1, array2, conditionFn 和 replaceFn。 const result = compareAndReplace(array1, array2, conditionFn, replaceFn); console.log(result);这三种方法都可以实现数组比较和替换的功能，可以根据你的需求选择最适合的方法。如果你需要保留原始数组，方法二可能是最佳选择，因为它会返回一个新数组。 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |