列举几个能够提高前端开发的效率、高效地处理问题的方法
一、根据属性(例如:id或name等)来合并两个json数组的方法(推荐):
1、直接上代码:
function mergeArraysByKey(array1, array2, Key) {
const mergedMap = new Map();
// Add elements from array1 to the merged map
for (const item of array1) {
mergedMap.set(item[Key], item);
}
// Add or update elements from array2 to the merged map
for (const item of array2) {
const value = item[Key];
if (mergedMap.has(value)) {
Object.assign(mergedMap.get(value), item);
} else {
mergedMap.set(value, item);
}
}
// Convert the merged map back to an array
const mergedArray = Array.from(mergedMap.values());
return mergedArray;
}
2、使用此方法可以更好地处理如下类似问题,例如:有两个json数组,其中一个保存的是员工的基本工资等数据,另一个保存的是员工的绩效工资等数据(注意:在该数组中只保存有绩效工资的员工的数据,因此两个数组的长度有可能不一样),要求合并这两个数组并算出每个员工的总工资。 进一步的代码如下:
// Example usage
const array1 = [
{ id: 1, name: 'A', base: 10000 },
{ id: 2, name: 'B', base: 13000 },
{ id: 3, name: 'C', base: 11500 },
{ id: 4, name: 'D', base: 12500 },
{ id: 5, name: 'E', base: 12000 }
];
const array2 = [
{ id: 1, name: 'A', performance: 3000 },
{ id: 3, name: 'C', performance: 3000 },
{ id: 5, name: 'E', performance: 2500 }
];
const mergedArray = mergeArraysByKey(array1, array2, 'id');
var resultArray = [];
for (const i of mergedArray) {
resultArray.push({
id: i.id,
name: i.name,
sum: i.base+(i.performance || 0)
});
}
console.log(resultArray);
所得的结果如下:
二、可以自选属性(例如:id或name等)来给json数组去重的方法:
1、第一种方法(简便):
(1)代码如下:
// ES6根据一维对象数组某个属性去重且该属性的值为简单数据类型,比较实用的一种的方法,也基本没有什么性能影响
function uniqueArrayByKey(arr, Key) {
const map = new Map()
return arr.filter((item) => !map.has(item[Key] + '') && map.set(item[Key] + '', 1))
}
(2)使用如下:
// Example usage
const array1 = [
{ id: 1, name: 'A', base: 10000 },
{ id: 2, name: 'B', base: 13000 },
{ id: 3, name: 'C', base: 11500 },
{ id: 4, name: 'D', base: 12500 },
{ id: 5, name: 'E', base: 12000 },
{ id: 1, name: 'A', base: 10000 },
{ id: 3, name: 'C', base: 11500 },
{ id: 5, name: 'E', base: 12000 },
{ id: 6, name: 'F', base: 12800 },
{ id: 7, name: 'G', base: 12600 },
{ id: 5, name: 'E', base: 12000 }
];
const uniqueArray1 = uniqueArrayByKey(array1, 'id');
console.log(uniqueArray1);
(3)所得的结果如下:
2、第二种方法:
(1)代码如下:
/**
* JSON数组去重
* @params {Array} arr 传入的JSON数组
* @param {string} attrName 根据哪个属性名去重
* @return {Array} 返回新的去重后的数组
* */
function delRepeatJson(arr = [], attrName = '') {
var temp = {}; //用于attrName判断重复
var result = []; //最后的新数组
arr.forEach((item, index)=> {
if (!temp[item[attrName]]) {
result.push(item);
temp[item[attrName]] = true;
}
});
return result;
}
(2)使用如下:
// Example usage
const array2 = [
{ id: 1, name: 'A', base: 10000 },
{ id: 2, name: 'B', base: 13000 },
{ id: 3, name: 'C', base: 11500 },
{ id: 4, name: 'D', base: 12500 },
{ id: 5, name: 'E', base: 12000 },
{ id: 1, name: 'A', base: 10000 },
{ id: 3, name: 'C', base: 11500 },
{ id: 5, name: 'E', base: 12000 },
{ id: 6, name: 'F', base: 12800 },
{ id: 7, name: 'G', base: 12600 },
{ id: 5, name: 'E', base: 12000 }
];
const uniqueArray2 = delRepeatJson(array2, 'id');
console.log(uniqueArray2);
(3)所得的结果如下: