javascript - 使用过滤器和每个过滤器过滤多个属性的数组

问题描述

我想过滤多个属性的对象数组，但我总是得到整个数据。我只想获取过滤后的数据，例如['data_x']。我的代码有什么问题？

export const testData= [

      {
        "data_z": {
          "points": [
            {
              "name": "Juli",
              "geb": "27.12.1982",
              "lastname": 'Peter'
            }
          ]
        },
        "data_x": {
          "points": [
            {
              "name": "Dennis",
              "geb": "27.12.1981",
              "lastname": 'Peter'
            }
          ]
        },
        "data_p": {
          "points": [
            {
              "name": "Janni",
              "geb": "27.12.1980",
              "lastname": 'Peter'
            }
          ]
        }
      }
    ]


let filterData = ['data_x', 'data_y'];

let testData = this.filterChartData(filterData);
console.log(testData);// ---> here I am getting the entire data

filterChartData(filterKeys){
    return this.testData.filter((item) => {
        return filterKeys.every(key => item[key]);
 });
  }

标签： javascript

诺亚，我从您的评论中了解到，您主要想了解为什么您的代码没有产生预期的结果，而不是收到有效的解决方案。干得好：

问题 1：

“过滤器”方法不会过滤您认为它正在过滤的内容。在 'testData' 数组中调用了 'filter' 方法，该数组中只有一个对象元素。您尝试过滤的对象嵌套在该单个对象中。因此，在“testData”上调用“过滤器”只能返回：

一个包含单个对象的数组，就像 'testData' 或
一个空数组

问题2：

我不认为“每个”方法都在做你认为它正在做的事情。如所写，您提供给“每个”的条件是测试以确保所有过滤器键都作为对象上的属性键存在并且具有真实值。因此，在您的代码中，'every' 将执行以下操作：

如果所有键都是 'item' 上的属性并且每个属性都引用了一个真实值，则返回 true
如果某些键不作为 'item' 的属性存在，则返回 false
如果某些引用的值是虚假的，则返回 false

我已经用下面的一些代码证明了这一点：

// simplifying testData to make it easier to read and understand

let testData = [ // this is the array that testData references

  { // this is the 'parent' object that constitutes the single element of testData

    // these are nested objects within that single object element
    'data_z': { 'points': 'this is data_z' },
    'data_x': { 'points': 'this is data_x' },
    'data_p': { 'points': 'this is data_p' },

  }

];

function filterChartData(filterKeys) {
  return testData.filter((item) => {
    return filterKeys.every(key => item[key]);
  });
}

// returns an array like the original testData, because the single object in testData matches the test condition put forward by 'every':
// Why? 'data_x' and 'data_z' are present as property keys on the object, and both reference truthy values
console.log('Result #1: ', filterChartData(['data_x', 'data_z']));

// returns an empty array, because the single object in testData does NOT match the test condition put forward by 'every':
// Why? 'data_y' is not present as a property key on the object
console.log('Result #2: ', filterChartData(['data_x', 'data_y']));


// assigning a different value to testData to show a different condition

testData = [

  {

    'data_z': { 'points': 'this is data_z' },
    'data_x': { 'points': 'this is data_x' },
    'data_p': undefined,

  }

];

// returns an empty array, because the single object in testData does NOT match the test condition put forward by 'every':
// Why? 'data_p' is present as a property key but is undefined and therefore falsy
console.log('Result #3: ', filterChartData(['data_x', 'data_p']));

javascript - 使用过滤器和每个过滤器过滤多个属性的数组

问题描述

解决方案

推荐阅读