基于其他键值统计数组元素出现次数及按type构建对象的JS/Lodash方案

我来帮你解决这两个数组处理的问题，结合原生JavaScript和Lodash给出具体实现方案：

问题1：基于数组元素的其他键值统计指定元素出现次数 #

假设我们有一个包含多个对象的数组，需要根据元素的某个（或多个）键值条件，统计特定元素的出现次数。下面是两种实现方式：

原生JavaScript 实现 #

使用Array.reduce()方法是最灵活的方式，你可以自定义任意判断条件：

// 示例数据
const productList = [
  { category: 'electronics', name: 'phone' },
  { category: 'electronics', name: 'phone' },
  { category: 'home', name: 'phone' },
  { category: 'electronics', name: 'laptop' }
];

// 统计category为"electronics"时，name为"phone"的元素出现次数
const targetCount = productList.reduce((total, item) => {
  // 这里可以添加任意复杂的判断条件
  if (item.category === 'electronics' && item.name === 'phone') {
    return total + 1;
  }
  return total;
}, 0);

console.log(targetCount); // 输出：2

Lodash 实现 #

Lodash提供了更简洁的工具函数组合，比如_.filter()配合_.size()，或者_.countBy()：

const _ = require('lodash');

// 方法1：过滤符合条件的元素后取长度
const count1 = _.size(_.filter(productList, item => item.category === 'electronics' && item.name === 'phone'));

// 方法2：按组合键分组后直接取值
const groupedCounts = _.countBy(productList, item => `${item.category}-${item.name}`);
const count2 = groupedCounts['electronics-phone'] || 0; // 处理不存在的情况，默认返回0

console.log(count1, count2); // 输出：2 2

问题2：根据元素"type"属性构建目标对象 #

需求是将数组元素按type属性（可选值为predefined或custom）归类到目标对象的对应键下，下面是实现方案：

原生JavaScript 实现 #

使用Array.reduce()手动构建目标对象，可灵活控制最终结构：

// 示例数据
const configItems = [
  { type: 'predefined', label: 'Theme', value: 'dark' },
  { type: 'custom', label: 'Custom CSS', value: '* { margin: 0; }' },
  { type: 'predefined', label: 'Language', value: 'en' },
  { type: 'custom', label: 'Custom Script', value: 'console.log("hello")' }
];

// 构建目标对象：将元素按type分组到对应数组中
const targetObj = configItems.reduce((acc, item) => {
  // 初始化对应type的数组（如果不存在）
  if (!acc[item.type]) {
    acc[item.type] = [];
  }
  // 将当前元素加入对应数组，也可以只提取特定属性，比如acc[item.type].push(item.value)
  acc[item.type].push(item);
  return acc;
}, { predefined: [], custom: [] }); // 预先初始化空数组，确保即使无对应类型也保留键

console.log(targetObj);
// 输出：
// {
//   predefined: [
//     { type: 'predefined', label: 'Theme', value: 'dark' },
//     { type: 'predefined', label: 'Language', value: 'en' }
//   ],
//   custom: [
//     { type: 'custom', label: 'Custom CSS', value: '* { margin: 0; }' },
//     { type: 'custom', label: 'Custom Script', value: 'console.log("hello")' }
//   ]
// }

Lodash 实现 #

Lodash的_.groupBy()方法可以一键完成分组，再配合_.defaults()确保目标对象始终包含predefined和custom键：

const _ = require('lodash');

// 直接按type分组
const groupedObj = _.groupBy(configItems, 'type');

// 确保即使原数组无对应类型，目标对象仍保留空数组
const finalTargetObj = _.defaults(groupedObj, { predefined: [], custom: [] });

console.log(finalTargetObj);
// 输出结果和原生实现一致

如果你的目标对象结构不是分组数组（比如需要将custom元素合并为单个对象），可以基于_.groupBy()的结果进一步调整，Lodash的工具链能快速满足各种定制需求。

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