列举几个能够提高前端开发的效率、高效地处理问题的方法

118 阅读3分钟

列举几个能够提高前端开发的效率、高效地处理问题的方法

一、根据属性(例如: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);

所得的结果如下: image.png

二、可以自选属性(例如: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)所得的结果如下: image.png

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)所得的结果如下: image.png