JS Object {} 高级过滤答案

【问题标题】：JS Object {} advanced filteringJS Object {} 高级过滤
【发布时间】：2019-01-21 09:34:29
【问题描述】：

我有大量直接来自数据库的数据，这些数据存储在 JS 对象中：{}，但是我无法使用内置 JS 的 .filter 函数。在我使用 Vue.JS 时避免使用箭头函数。

JS 对象示例：

0:
brand: "Brand A"
compatibilitySetIds:Array(3)
createdAt:"2018-08-13T09:07:50.772Z"
deletedAt:null
id:"e7915261-677d-4527-90c6-09b5170afca8"
model:"Model-1"
series:null
type:"A"
updatedAt:"2018-08-13T09:07:50.772Z"
1:
brand: "Brand B"
compatibilitySetIds:Array(3)
createdAt:"2018-08-13T09:07:50.772Z"
deletedAt:null
id:"e7915261-677d-4527-90c6-09b5170afca8"
model:"Model-51"
series:"S02"
type:"B"
updatedAt:"2018-08-13T09:07:50.772Z"

我需要能够：

按型号过滤
最好也按品牌/系列/类型过滤
能够在所有字段中按 asc/desc 排序

我目前拥有的（作品）

  computed: {
    filteredEquipment: function() {
      if (this.search.selected === '' || !this.search.selected) {
        return this.equipmentItems;
      } else {
        const model = this.search.selected;
        console.log(model);
        const filtered = this.equipmentItems.filter(function(item) {
          return item.model === model;
        });
        return filtered;
      }
    },
  },

附言。使用 Vue-JS 和 TypeScript。

PPS。我必须在客户端进行过滤，而不是在服务器端。

【问题讨论】：

请提供您正在使用的数据对象的更好示例。
如果它们的索引是 0 和 1，为什么不将这些对象存储在数组中？
您的示例对象不是有效的 JS。
当你说你“无法使用内置 JS 的 .filter 函数”时，你的意思是你根本不在一个支持它的环境中？或者您是说使用.filter() 无法使其工作？
你的叙述说，“避免使用箭头函数，因为我正在使用 Vue.JS。”...但是在你目前拥有的示例中，你正在使用箭头函数。

标签： javascript typescript vue.js vuejs2

【解决方案1】：

我假设您的数据项被包装在一个数组中，因为您有对象键“0”和“1”，这对我来说似乎是索引。您还可以在代码中自己使用过滤器。

您有几个选择可以使用.filter()。因此，您可以选择最适合您的编码风格的。

const data = [
  {
    brand: "Brand A",
    compatibilitySetIds: [],
    createdAt:"2018-08-13T09:07:50.772Z",
    deletedAt:null,
    id:"e7915261-677d-4527-90c6-09b5170afca8",
    model:"Model-1",
    series:null,
    type:"A",
    updatedAt:"2018-08-13T09:07:50.772Z"
  },
  {
    brand: "Brand B",
    compatibilitySetIds: [],
    createdAt:"2018-08-13T09:07:50.772Z",
    deletedAt:null,
    id:"e7915261-677d-4527-90c6-09b5170afca8",
    model:"Model-51",
    series:"S02",
    type:"B",
    updatedAt:"2018-08-13T09:07:50.772Z"
  }
];
//Specific one liner to filter all Model-1 models.
const AllModel_1Items = data.filter( item => item.model === 'Model-1' );
console.log( AllModel_1Items );
// Generic function with 3 parameters:
const filterProperty = ( source, property, value ) => source.filter( item => item[ property ] === value );
const allTypeA = filterProperty( data, 'type', 'A' );
console.log( allTypeA );
// Generic function usable with .filter()
const byProperty = ( property, value ) => item => item[ property ] === value;
const allBrandA = data.filter( byProperty( 'brand', 'Brand A' ));
console.log( allBrandA );

这些函数可以过滤任何属性。 asc/desc 排序就是.reverse().sort()之后的数组。

如果由于某种原因无法使用箭头或无法使用过滤器，则可以将相同的结构应用于简单的 for 循环以模仿 .filter()。

但由于您在自己的代码中同时使用了 .filter() 和箭头，我假设您可以使用它们。

【讨论】：

【解决方案2】：

Object.keys(dbObject) 这将转换为数组。然后你应该可以使用所有其他filter 等方法

【讨论】：

【解决方案3】：

您可以使用循环读取数组，并添加过滤数据的条件，例如：

let dataFiltered = [];
let data = [
{
  brand: "Brand A",
  compatibilitySetIds:Array(3),
  createdAt:"2018-08-13T09:07:50.772Z",
  deletedAt:null,
  id:"e7915261-677d-4527-90c6-09b5170afca8",
  model:"Model-1",
  series:null,
  type:"A",
  updatedAt:"2018-08-13T09:07:50.772Z",
},
{
  brand: "Brand B",
  compatibilitySetIds:Array(3),
  createdAt:"2018-08-13T09:07:50.772Z",
  deletedAt:null,
  id:"e7915261-677d-4527-90c6-09b5170afca8",
  model:"Model-51",
  series:"S02",
  type:"B",
  updatedAt:"2018-08-13T09:07:50.772Z",
}];

//Use a loop for read array
data.forEach(function(item){
  if(item.model === 'Model-1'){
    //Add conditions after push item to dataFilter
    dataFiltered.push(item);
  }
})

console.log(dataFiltered);//In dataFilter is data filtered

【讨论】：