js数组Array根据动态条件过滤

数据

[{
    "name": "张三",
    "score": 153
}, {
    "name": "李四",
    "score": 206
}, {
    "name": "王五",
    "score": 68.5
}, {
    "name": "王六",
    "score": 83.5
}]

需求：需要根据动态的条件来对数据进行查询。

步骤1：定义过滤器并初始化，比如我们要查询王五以6分开头的数据，条件定义：`姓名 equal 王五 && 成绩 beginWith 6`

/// 过滤器集合，格式：{field:'',relationType:'',value: ''}
///     field - 用于过滤的属性(字段)
///     relationType - 关联关系(比较方式)，可选值有equal(等于)、notEqual(不等于)、like(模糊匹配)、beginWith(以它开头)、endWith(以它结尾)
///     value - 用于被比较的过滤器值
const filters = []
filters.push({
  field: 'name',
  relationType: 'equal',
  value: '王五'
})
filters.push({
  field: 'score',
  relationType: 'beginWith',
  value: '6'
})

步骤2：定义一个通用的过滤函数，过滤函数传递2个参数，第1个是需要被过滤的数据源，第2个是过滤器集合，函数返回值是过滤后的数据源

 

// 过滤数据源
function filteringDataSources (source, filters) {
  // 动态表达式集合，用于存储判断某个对象是否满足条件的函数
  const expressions = []
  // 遍历过滤器集合，动态添加表达式函数
  filters.forEach(item => {
    // 添加表达式函数，参数为数组的每个数据对象
    expressions.push((obj) => {
      // 是否符合条件
      let isFit = false
      // 数据对象对应的属性值
      let objValue = ''
      // 用于被比较的过滤器值
      const compareValue = item.value
      // 判断数据对象是否存在用于过滤的属性，如果不存在直接判定为不符合条件
      if (typeof (obj[item.field]) === 'undefined') {
        isFit = false
        return isFit
      }

      // 获取数据对象用于比较的属性值，统一转为字符串类型，便于比较
      objValue = String(obj[item.field])

      // 判断逻辑
      if (item.relationType === 'equal') { // 等于
        isFit = objValue === compareValue
      } else if (item.relationType === 'notEqual') { // 不等于
        isFit = objValue !== compareValue
      } else if (item.relationType === 'like') { // 模糊匹配
        isFit = objValue.includes(compareValue)
      } else if (item.relationType === 'beginWith') { // 以它开头
        isFit = objValue.startsWith(compareValue)
      } else if (item.relationType === 'endWith') { // 以它结尾
        isFit = objValue.endsWith(compareValue)
      }

      // 返回当前表达式是否符合条件
      return isFit
    })
  })

  // 遍历数据源
  source = source.filter((item, index) => {
    // 是否符合条件
    let isFit = true
    // 遍历表达式集合，循环判断每个用于过滤的表达式函数是否符合
    for (let index = 0; index < expressions.length; index++) {
      // 获取表达式函数
      const expression = expressions[index]
      // 调用表达式函数，获取结果
      const result = expression(item)
      // 如果结果为false，则终止表达式集合的遍历（即有一个条件不符合，则该条数据则被判定不满足条件）
      if (!result) {
        isFit = false
        break
      }
    }

    // 返回当前数据对象是否符合条件，不符合条件则被过滤掉，不会出现在最终数据中
    return isFit
  })

  // 返回过滤后的数据源
  return source
}

 

步骤3：调用过滤函数得到结果

 

if (filters.length > 0) {
  source = filteringDataSources(source, filters)
}

 

结果：

Array(1)
0: {name(test_scores): "王五", score(test_scores): 68.5}
length: 1

 

完整代码：

// 过滤数据源
function filteringDataSources (source, filters) {
  // 动态表达式集合，用于存储判断某个对象是否满足条件的函数
  const expressions = []
  // 遍历过滤器集合，动态添加表达式函数
  filters.forEach(item => {
    // 添加表达式函数，参数为数组的每个数据对象
    expressions.push((obj) => {
      // 是否符合条件
      let isFit = false
      // 数据对象对应的属性值
      let objValue = ''
      // 用于被比较的过滤器值
      const compareValue = item.value
      // 判断数据对象是否存在用于过滤的属性，如果不存在直接判定为不符合条件
      if (typeof (obj[item.field]) === 'undefined') {
        isFit = false
        return isFit
      }

      // 获取数据对象用于比较的属性值，统一转为字符串类型，便于比较
      objValue = String(obj[item.field])

      // 判断逻辑
      if (item.relationType === 'equal') { // 等于
        isFit = objValue === compareValue
      } else if (item.relationType === 'notEqual') { // 不等于
        isFit = objValue !== compareValue
      } else if (item.relationType === 'like') { // 模糊匹配
        isFit = objValue.includes(compareValue)
      } else if (item.relationType === 'beginWith') { // 以它开头
        isFit = objValue.startsWith(compareValue)
      } else if (item.relationType === 'endWith') { // 以它结尾
        isFit = objValue.endsWith(compareValue)
      }

      // 返回当前表达式是否符合条件
      return isFit
    })
  })

  // 遍历数据源
  source = source.filter((item, index) => {
    // 是否符合条件
    let isFit = true
    // 遍历表达式集合，循环判断每个用于过滤的表达式函数是否符合
    for (let index = 0; index < expressions.length; index++) {
      // 获取表达式函数
      const expression = expressions[index]
      // 调用表达式函数，获取结果
      const result = expression(item)
      // 如果结果为false，则终止表达式集合的遍历（即有一个条件不符合，则该条数据则被判定不满足条件）
      if (!result) {
        isFit = false
        break
      }
    }

    // 返回当前数据对象是否符合条件，不符合条件则被过滤掉，不会出现在最终数据中
    return isFit
  })

  // 返回过滤后的数据源
  return source
}

let source = [{
  'name': '张三',
  'score': 153
}, {
  'name': '李四',
  'score': 206
}, {
  'name': '王五',
  'score': 68.5
}, {
  'name': '王六',
  'score': 83.5
}]
/// 过滤器集合，格式：{field:'',relationType:'',value: ''}
///     field - 用于过滤的属性(字段)
///     relationType - 关联关系(比较方式)，可选值有equal(等于)、notEqual(不等于)、like(模糊匹配)、beginWith(以它开头)、endWith(以它结尾)
///     value - 用于被比较的过滤器值
const filters = []
filters.push({
  field: 'name',
  relationType: 'equal',
  value: '王五'
})
filters.push({
  field: 'score',
  relationType: 'beginWith',
  value: '6'
})
source = filteringDataSources(source, filters)
console.log(source)

 

PS：动态条件过滤来自于工作中的一个需求

过滤前：

过滤后：