个人记录--面试题——实现一个链式调用的query方法

225 阅读2分钟

提供了一个数组结构的 data,要求实现一个 query 方法,返回一个新的数组,query 方法内部有 过滤、排序、分组 等操作,并且支持链式调用,调用最终的 execute 方法返回结果

数组数据

 const data = [
        { id: 1, name: 'Alice', age: 20, gender: 'female' },
        { id: 2, name: 'Bob', age: 25, gender: 'male' },
        { id: 4, name: 'David', age: 35, gender: 'male' },
        { id: 5, name: 'Ella', age: 40, gender: 'female' },
        { id: 3, name: 'Charlie', age: 30, gender: 'male' },
      ];

query方法

 class Query {
        constructor(list) {
          this.list = list;
        }
        where(cb) {
          this.list = this.list.filter(cb);
          return this;
        }

        sortBy(key) {
          this.list = this.list.sort((a, b) => a[key] - b[key]);
          return this;
        }
        groupBy(key) {
          this.list = this.list.reduce((acc, obj) => {
            // if (!acc[obj[key]]) {
            //   acc[obj[key]] = [];
            //   acc[obj[key]].push(obj);
            // } else {
            //   acc[obj[key]].push(obj);
            // }
            // 在 ?? 前面没有值得时候会默认 ?? 后边的值(
            acc[obj[key]] = acc[obj[key]] ?? [];
            acc[obj[key]].push(obj);
            return acc;
          }, {});
          return this;
        }
        execute() {
          return this.list;
        }
      }
  1. 在 Query 类的构造函数中初始化 list 数组为传入的数据数组 data。
  2. 定义 filter 方法,该方法接受一个回调函数作为参数,过滤 list 数组中的元素,并将过滤后的结果存储回 list 数组中,然后返回 this 对象以支持链式调用链式调用的精髓就是返回this,要实现方法链式调用,得在调用方法后得到this指向的对象,实现继续调用内部方法
  3. 定义 sort 方法,该方法接受一个字符串类型的参数 key,排序 list 数组中的元素,并将排序后的结果存储回 list 数组中,然后返回 this 对象以支持链式调用。
  4. 定义 groupBy 方法,该方法接受一个字符串类型的参数 key,按照 key 对 list 数组中的元素进行分组,并将分组后的结果存储回 list 数组中,然后返回 this 对象以支持链式调用。
  5. 定义 execute 方法,该方法返回经过操作后的 list 数组。

使用如下代码调用 query 方法,实现过滤、排序、分组等操作:

 const result = new Query(data)
        .where((item) => item.age > 25)
        .sortBy('id')
        .groupBy('gender')
        .execute();

      console.log(result);

结果如下

image.png