Question

我有一个看起来像这样的Json

{
    "score": "1200.65",
    "num_games": "160",
    "wins": "110",
    "year": "2013"
},
{
    "score": "705.23",
    "num_games": "34",
    "wins": "21",
    "year": "2014"
},
{
    "score": "467.12",
    "num_games": "77",
    "wins": "30",
    "year": "2015"
},

我想创建一个对象数组（包含x和y），该数组可以按x年的属性（例如2014年至2015年之间的年份）进行过滤，并将特定属性的值作为y （例如“得分”）。例如，如果我按2014-2015年范围和“得分”属性进行过滤，则结果数组应为：

[{x:'2014', y: 705.23}, {x:'2015', y: 467.12}]

另一个示例，如果我按2014-2015年范围和属性“ num_games”进行过滤，则结果数组应为：

[{x:'2014', y: 34}, {x:'2015', y: 77}]

我应该怎么做？ Array.prototype.filter是正确的工具吗？

Answer 1

使用Array#filter
使用Array#map

var data = [{"score": "1200.65", "num_games": "160", "wins": "110", "year": "2013" }, { "score": "705.23", "num_games": "34", "wins": "21", "year": "2014" }, { "score": "467.12", "num_games": "77", "wins": "30", "year": "2015" }];

function getFilteredData(data, start, end) {
  return data.filter(function(item) {
    return +start <= +item.year && +item.year <= +end;
  }).map(function(item) {
    return {
      x: item.year,
      y: item.score
    };
  });
}

console.log(getFilteredData(data, 2014, 2017));

如果您的日期在合理范围内，则不必将年份转换为number，但是除非将年份转换为数字，否则任何3或5位以上的数字年份都无法正确过滤。

如果您想要该功能的抽象版本，可以执行以下操作：

var data = [{"score": "1200.65", "num_games": "160", "wins": "110", "year": "2013" }, { "score": "705.23", "num_games": "34", "wins": "21", "year": "2014" }, { "score": "467.12", "num_games": "77", "wins": "30", "year": "2015" }];

function getFilteredData(data, filterOptions, mapOptions) {
  return data.filter(function(item) {
    return Object.keys(filterOptions).every(function(key) {
      var option = filterOptions[key];
      if (+option.min <= +item[key] && +item[key] <= +option.max) return true;
    });
  }).map(function(item) {
    return Object.keys(mapOptions).reduce(function(result, key) {
      var option = mapOptions[key];
      result[key] = item[option];
      return result;
    }, {});
  });
}

function registerFilter(filterOptions, mapOptions) {
  return function(data) {
    return getFilteredData(data, filterOptions, mapOptions);
  };
}

var customFilter = registerFilter(
  { year: { min: 2014, max: 2015 },
  { x: "year", y: "score" }
);

console.log(customFilter(data));

您可以使用for循环或Array#reduce一起执行这两种操作。这使代码更快但更难以维护。

var data = [{"score": "1200.65", "num_games": "160", "wins": "110", "year": "2013" }, { "score": "705.23", "num_games": "34", "wins": "21", "year": "2014" }, { "score": "467.12", "num_games": "77", "wins": "30", "year": "2015" }];

function getFilteredData(data, start, end) {
  return data.reduce(function(result, item) {
    if (+start <= +item.year && +item.year <= +end) result.push({
      x: item.year,
      y: item.score
    });
    return result;
  }, []);
}

console.log(getFilteredData(data, 2014, 2017));

Answer 2

Filter，Map，Object Destructing可以完成这项工作：

const y = [{
    "score": "1200.65",
    "num_games": "160",
    "wins": "110",
    "year": "2013"
  },
  {
    "score": "705.23",
    "num_games": "34",
    "wins": "21",
    "year": "2014"
  },
  {
    "score": "467.12",
    "num_games": "77",
    "wins": "30",
    "year": "2015"
  }
];


const res = y.filter(o => o.year == 2014).map(({
  year: x,
  score: y
}) => ({
  x,
  y
}))

console.log(res)

Answer 3

首先按日期过滤数组，然后将过滤后的项目映射为所需的格式。您可以使用解构使代码更短：

const data = [{
    "score": "1200.65",
    "num_games": "160",
    "wins": "110",
    "year": "2013"
}, {
    "score": "705.23",
    "num_games": "34",
    "wins": "21",
    "year": "2014"
}, {
    "score": "467.12",
    "num_games": "77",
    "wins": "30",
    "year": "2015"
}];

const filterBy = (data, [min, max], prop) => data
  .filter(({ year }) => year >= min && year <= max)
  .map(({ year: x, [prop]: y }) => ({ x, y }));

console.log(filterBy(data, [2013, 2014], 'score'));
console.log(filterBy(data, [2013, 2013], 'wins'));

Answer 4

您可以使用.filter获取所需范围内的对象，然后使用.map从过滤列表中创建对象。

请参见以下示例：

const arr = [{
    "score": "1200.65",
    "num_games": "160",
    "wins": "110",
    "year": "2013"
},
{
    "score": "705.23",
    "num_games": "34",
    "wins": "21",
    "year": "2014"
},
{
    "score": "467.12",
    "num_games": "77",
    "wins": "30",
    "year": "2015"
}];

const get_items = (arr, [sY, eY], prop) => 
   arr
    .filter(({year}) => +sY <= year && year <= +eY)
    .map(({year:x, ...rest}) => ({x, y: rest[prop]}));


console.log(get_items(arr, ["2014", "2015"], "score"));

Answer 5

您可以过滤并映射所需的值。

function getParts(array, [min, max], key) {
    return array
        .filter(({ year }) => +min <= year && year <= +max)
        .map(({ year: x, [key]: y }) => ({ x, y }));
}

var data = [{ score: "1200.65", num_games: "160", wins: "110", year: "2013" }, { score: "705.23", num_games: "34", wins: "21", year: "2014" }, { score: "467.12", num_games: "77", wins: "30", year: "2015" }];

console.log(getParts(data, [2014, 2015], 'score'));
console.log(getParts(data, [2014, 2015], 'num_games'));

.as-console-wrapper { max-height: 100% !important; top: 0; }

在重命名结果数组中的对象属性时，如何使用Array.prototype.filter选择性过滤Json数据？

5 个答案: