多条件过滤数组元素&&支持数组条件

1
2
3
4
在自我联调、mock 过程中 ，如果无法安装使用数据库，可以使用这个方法 多条件、单条件 单个字段为数组（多选） 过滤数据，

然后通过express或python 返回前端。

1
2
3
4
5
6
7
8
9
10
11
12
const queryFilter = (list, query) => {
  return list?.filter(ele => {
    // 多条件
    return Object.key(query).every(key => {
      if (query[key] instanceof Array) {
        // 当参数为数组 表示选中多个的情况
        return query[key].includes(ele[key])
      }
      return ele[key] === query[key]
    })
  })
}

组件封装的类型

复用型

1
复用性组件，一般是在多个页面有相同页面样式、逻辑的情况下，考虑封装复用型组件。

根据页面结构划分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
在拿到需求后，

我们一般需要对业务模块进行拆分，

体现在页面上的，

就是不同的模块。

比如 头部、中间部分，footer部分。

在更大的页面中， 还要进行更细的划分，比如 “中间部分” 的页面。

根据需要，如果某个组件的一个状态值需要在其他兄弟组件使用，

还要将这个状态 “提升” 到父组件进行维护。

取出对象类型的值类型 组成一个联合类型

1
2
3
4
5
6
type A = {
  a: number;
  b: string
}

type AValueType = A[keyof A] // string | number