javascript - 仅当它们存在时，如何按多个参数过滤数组

Question

我有一个功能可以按几个参数过滤结果，例如name、和日期范围（和）。我希望能够通过这些参数一起过滤结果，但前提是它们存在，即我可以通过and ，但不要通过。我不知道如何在日期范围内做到这一点。现在过滤器只有在我通过and时才起作用，在所有其他情况下，即使存在其他参数并且数组中有相应的数据，它也会返回 null。我如何制作和可选？statustypestartDateendDatenamestatustypestartDateendDatestartDateendDate

这是我的过滤器：

if (params.name || params.status || params.type || params.startDate && params.endDate) {
  const startDate = new Date(params.startDate).setHours(0,0,0);
  const endDate = new Date(params.endDate).setHours(23,59,59);
  dataSource = tableListDataSource.filter(
    (data) =>
      data.name.match(new RegExp(params.name, 'ig')) &&
      data.status.includes(params.status || '') &&
      data.type.includes(params.type || '') &&
      (
        new Date(data.createdAt).getTime() > startDate && new Date(data.createdAt).getTime() < endDate
      )
  );
}

谢谢您的帮助！

编辑：

我在后端的一个函数中使用这个过滤器：

function getRule(req, res, u) {
  let realUrl = u;

  if (!realUrl || Object.prototype.toString.call(realUrl) !== '[object String]') {
    realUrl = req.url;
  }

  const params = parse(realUrl, true).query;

  if (params.name || params.status || params.type || params.startDate && params.endDate) {
    const startDate = new Date(params.startDate).setHours(0,0,0);
    const endDate = new Date(params.endDate).setHours(23,59,59);
    dataSource = tableListDataSource.filter(
      (data) =>
        data.name.match(new RegExp(params.name, 'ig')) &&
        data.status.includes(params.status || '') &&
        data.type.includes(params.type || '') &&
        (
          new Date(data.createdAt).getTime() > startDate && new Date(data.createdAt).getTime() < endDate
        )
    );
  }

  const result = {
    data: dataSource,
    success: true,
  };

  return res.json(result);
}

标签： javascriptfilterfiltering

Answer 1

通过使用您当前的方法，您可以通过以下操作使startDateandendDate可选；

&& (
  (params.startDate && params.endDate) ? 
    (new Date(data.createdAt).getTime() > startDate && new Date(data.createdAt).getTime() < endDate) :
    true
)

所以，上面所做的基本上是检查是否有params.startDate假值；params.endDate

• 如果他们没有，那么用日期做你现有的过滤器；
• 否则，如果其中之一确实具有错误值，则通过返回忽略与日期相关的过滤器true。

这就是您的最终代码的样子；

if (params.name || params.status || params.type || params.startDate && params.endDate) {
  const startDate = new Date(params.startDate).setHours(0,0,0);
  const endDate = new Date(params.endDate).setHours(23,59,59);
  dataSource = tableListDataSource.filter(
    (data) =>
      data.name.match(new RegExp(params.name, 'ig')) &&
      data.status.includes(params.status || '') &&
      data.type.includes(params.type || '') &&
      (
        (params.startDate && params.endDate) ? 
          (new Date(data.createdAt).getTime() > startDate && new Date(data.createdAt).getTime() < endDate) :
          true
      )
  );
}

编辑：

通常，我建议不应该在 FE 中进行过滤，而应该在 BE 堆栈中进行过滤。因此，您只能获取所需的数据以及分页支持。

但是，如果您坚持在 FE 中执行此操作 - 我建议封装过滤器函数和处理参数以过滤数据源。将所有内容列入黑名单，仅将接受的参数列入白名单，并根据需要进行扩展。

以下是我如何做的一个例子。

注意; filterDataSource复杂性随着您支持过滤的字段数量的增加而增加。里面的字段迭代等于多步叠加多个if条件。

/** 
 * @description Filters dataSource with provided fields
 * @param dataSource An array containing the data source
 * @param fields An key-value pair containing { [dataSourceField]: callbackFn(value) | "string" | number }
 */
const filterDataSource = (dataSource, fields) => {
  if (dataSource && dataSource.length) {
    return dataSource.filter((row) => {
      const rowFiltered = [];

      /**
       * @todo Scale the type of filter you want to support and how you want to handle them
       */
      for (const fieldName in fields) {
        if (Object.hasOwnProperty.call(fields, fieldName) && Object.hasOwnProperty.call(row, fieldName)) {
          const filter = fields[fieldName];

          if (typeof filter === 'function') {
            /** Call the callback function which returns boolean */
            rowFiltered.push(!!filter(row));
          }
          else if (typeof filter === 'object' && filter instanceof RegExp) {
            /** Predicate by regex */
            rowFiltered.push(!!row[fieldName].match(filter));
          }
          else if (typeof filter === 'string') {
            /** Exact match of string */
            rowFiltered.push(!!row[fieldName].match(new RegExp(filter, 'ig')));
          }
          else if (typeof filter === "number") {
            /** Exact match of number */
            rowFiltered.push(row[fieldName] === filter);
          }
        }
      }

      /** If this row is part of the filter, ONLY return it if all filters passes */
      if (rowFiltered.length > 0) {
        /** This will check if all filtered return true */
        return rowFiltered.every(Boolean);
      }
      else {
        /** If this row is NOT part of the filter, always return it back */
        return true;
      }
    });
  }

  return dataSource;
}


/**
 * @description Filter your datasource with pre-defined filter function for supported params
 * @param dataSource An array of object containing the data
 * @param params A set of object containing { [param]: value }
 * @todo Safely guard the wathched params here, encode them if needed.
 */
const filterDataByParams = (dataSource, params) => {
  const fieldsToFilter = {};

  if (params.name) {
    fieldsToFilter['name'] = new RegExp(params.name, 'ig');
  }
  
  if (params.status) {
    fieldsToFilter['status'] = params.status;
  }
  
  if (params.type) {
    fieldsToFilter['type'] = params.type;
  }
  
  if (params.startDate && params.endDate) {
    /**
     * Assuming createdAt is EPOCH
     * @todo What is the type of row.createdAt and params.startDate? 
     * @todo Adjust the logic here and apply validation if needed.
     */
    const startMillis = new Date(params.startDate).getTime() / 1e3, // Millis / 1e3 = EPOCH
      endMillis = new Date(params.endDate).getTime() / 1e3; // Millis / 1e3 = EPOCH

    /** Should we give a nice warning if invalid date value is passed? */
    if (isNaN(startMillis) && isNaN(endMillis)) {
      console.error('Invalid date params passed. Check it!');
    }

    /** Random defensive - remove or add more */
    if (startMillis && endMillis && startMillis > 0 && endMillis > 0 && startMillis < endMillis) {
      fieldsToFilter['createdAt'] = (row) => {
        return row.createdAt >= startMillis && row.createdAt <= endMillis;
      };
    }
  }

  if (Object.keys(fieldsToFilter).length) {
    return filterDataSource(dataSource, fieldsToFilter);
  }
  else {
    return [...dataSource];
  }
}


/** 1k Set of mocked data source with createdAt between 1 Jan 2019 to 13 February 2021 */
fetch('https://api.jsonbin.io/b/6027ee0987173a3d2f5c9c3d/3').then((resp) => {
  return resp.json();
}).then((mockDataSource) => {
  mazdaFilteredData = filterDataByParams(mockDataSource, {
    'name': 'Mazda',
    'startDate': '2019-05-04T19:06:20Z',
    'endDate': '2020-08-09T19:06:20Z'
  });
  
  hondaFilteredData = filterDataByParams(mockDataSource, {
    'name': 'honda',
    'startDate': '2019-10-05T00:00:00Z',
    'endDate': '2020-12-09T23:23:59Z'
  });
  
  mercedezFilteredData = filterDataByParams(mockDataSource, {
    'name': 'merce',
    'startDate': '2020-01-01T00:00:00Z',
    'endDate': '2021-12-31T23:23:59Z'
  })
  
  console.log({mazdaFilteredData, hondaFilteredData, mercedezFilteredData});
});