Javascript - 映射和排序新的数据源对象键值答案

【问题标题】：Javascript - Mapping and sorting new datasource object key valuesJavascript - 映射和排序新的数据源对象键值
【发布时间】：2022-06-15 22:08:05
【问题描述】：

我有一个包含对象的大数据源。我想要做的是，对于每个键的每个新值，将对象放到数组的顶部。每次，对于每个键，我发现一个新值，我希望对象上升到该数据源。因此，最上面的 x 元素将是属性可以具有的 x 个不同值。所以给定：

arr[0] = {name: john, age: 14, adress: xxx}
arr[1] = {name: john, age: 14, adress: xxx}
arr[2] = {name: marie, age: 14, adress: xxx}
arr[3] = {name: marie, age: 14, adress: xxx}
arr[4] = {name: john, age: 15, adress: xxx}

我会得到

arr[0] = {name: john, age: 14, adress: xxx}
arr[1] = {name: marie, age: 14, adress: xxx}
arr[2] = {name: john, age: 15, adress: xxx}
arr[3] = {name: marie, age: 14, adress: xxx}
arr[4] = {name: john, age: 14, adress: xxx}

我目前正在做的是遍历所有对象及其键以找到每个键的新值。这样做，将此值保存到唯一数组中，并将当前对象放在我的数组顶部。对每个具有唯一键值的对象重复此过程，然后依次到达第二个位置、第三个位置，依此类推。

filterDS(dataSource){

    let uniqueColumns;
    let i = 0;
    let j = 0;
    let temp;
    dataSource.forEach(data => {
      let keys = Object.keys(data);
      keys.forEach( key => {
        console.log(key + ":" + data[key]);
        uniqueColumns[key].push(data[key]);
        temp = dataSource[i];
        j = dataSource.indexOf(data);
        dataSource[i] = dataSource[j];
        dataSource[j] = temp;
        i++
      })
    });
    return dataSource;
  }

但是，尝试读取未定义的值似乎会卡住。我尝试检查数据源、当前键值或事件当前对象是否为空，但它没有改变。它进入未定义或空字段并中断。我不知道我在这里做错了什么。

【问题讨论】：

标签： javascript arrays foreach undefined javascript-objects

【解决方案1】：

一种前进的方法是首先对名称进行“分组”，然后迭代最长的组并按索引访问彼此的分组数组。

const arr = [{ name: 'john', age: 14, adress: 'xxx' }, { name: 'john', age: 14, adress: 'xxx' }, { name: 'marie', age: 14, adress: 'xxx' }, { name: 'marie', age: 14, adress: 'xxx' }, { name: 'john', age: 15, adress: 'xxx' }, { name: 'tim', age: 15, adress: 'xxx' },];

// 'group by' object.name
const tempMap = {};
for (const o of arr) {
  (tempMap[o.name] ??= []).push(o);
}
const groups = Object.values(tempMap);

// get the length of the longest grouped array
const maxLen = Math.max(...groups.map(o => o.length))

const result = [];
// iterate the longest array accessing each grouped array by index
for (let i = 0; i < maxLen; i++) {
  for (const arr of groups) {
    if (i < arr.length) {
      result.push(arr[i]);
    }
  }
}

console.log(result);

或者作为一个更通用的函数，接受一个回调来访问要分组的属性和一个可选的排序函数，以便在映射到结果之前对分组的数组进行排序

function filterDS(dataSource, getProp, sortFn) {
  // 'group by' object.name
  const tempMap = {};
  for (const o of dataSource) {
    (tempMap[getProp(o)] ??= []).push(o);
  }
  const groups = Object.values(tempMap);

  // sort if a sortFn has been passed
  if (typeof sortFn === 'function') {
    groups.sort(sortFn);
  }

  // get the length of the longest grouped array
  const maxLen = Math.max(...groups.map(o => o.length))

  const result = [];
  // iterate the longest array accessing each grouped array by index
  for (let i = 0; i < maxLen; i++) {
    for (const arr of groups) {
      if (i < arr.length) {
        result.push(arr[i]);
      }
    }
  }

  return result
}

const arr = [{ name: 'beth', age: 14, adress: 'xxx' }, { name: 'andrew', age: 14, adress: 'xxx' }, { name: 'carrie', age: 14, adress: 'xxx' }, { name: 'xeno', age: 15, adress: 'xxx' }, { name: 'carrie', age: 14, adress: 'xxx' }, { name: 'andrew', age: 15, adress: 'xxx' }, { name: 'andrew', age: 15, adress: 'xxx' },];

console.log(filterDS(arr, (o) => o.name, (a, b) => a[0].name.localeCompare(b[0].name))); // sorted alphabetical asc.
console.log(filterDS(arr, (o) => o.name)); // not sorted

【讨论】：