前端 JS 经典:通用性函数封装思路

简介: 前端 JS 经典:通用性函数封装思路

前言:设计通用性函数,我们需要考虑两个方面,一个是函数传参的可能性,如果可能性很多,我们可以将处理参数的方法暴露出去,让使用者去设计。为了调用的方便性,我们还可以做参数的归一化

举个例子:有一个 people 数组如下,现在需要开发者给这个数组按 sex 分组。man 的一组,woman 的一组。

const people = [
  { name: "a", age: 1, sex: "man" },
  { name: "b", age: 2, sex: "woman" },
  { name: "c", age: 3, sex: "man" },
  { name: "d", age: 4, sex: "man" },
  { name: "e", age: 1, sex: "woman" },
  { name: "f", age: 1, sex: "man" },
  { name: "g", age: 1, sex: "man" },
  { name: "h", age: 2, sex: "woman" },
];

1. 普通函数的封装

构建一个函数,传入两个参数,数组和决定分组的 key。

这样看着还挺好,但是有个问题,就是这个函数的局限性。我们只能确定我们第一个传入的是数组,但是我们不能确定数组里面的项是什么,这个函数就固定了传入的数组必须是对象数组,且第二个参数,必须是对象里的属性,这个函数才能生效。

const groupBy = (arr, key) => {
  let result = {};
 
  arr.forEach((item) => {
    const _key = item[key];
    if (result[_key]) {
      result[_key].push(item);
    } else {
      result[_key] = [item];
    }
  });
  return result;
};

2. 公共函数的封装

构建一个函数,功能和上面那个一样。

但是这个函数将第二个参数暴露给了开发人员,开发人员需要按照什么形式分组,都可以自己定义,而且我们也做了参数的归一化,如果第二个参数没有传回调函数,而是传的字符串,我们可以将这个字符串,在函数的内部转换成回调函数。就相当于开发者还是传入的回调函数。

const groupBy = (arr, callback) => {
  if (typeof callback === "string") {
    const keyName = callback;
    callback = (item) => item[keyName];
  }
  let result = {};
 
  arr.forEach((item, index) => {
    const _key = callback(item, index, arr);
    if (result[_key]) {
      result[_key].push(item);
    } else {
      result[_key] = [item];
    }
  });
  return result;
};

用公共函数,我们实现按 "性别-年龄" 的形式完成分组

groupBy(people, (item) => `${item.sex}-${item.age}`);

目录
相关文章
|
6天前
|
JavaScript 前端开发 API
详解队列在前端的应用,深剖JS中的事件循环Eventloop,再了解微任务和宏任务
该文章详细讲解了队列数据结构在前端开发中的应用,并深入探讨了JavaScript的事件循环机制,区分了宏任务和微任务的执行顺序及其对前端性能的影响。
|
4天前
|
JavaScript 前端开发 小程序
一小时入门Vue.js前端开发
本文是作者关于Vue.js前端开发的快速入门教程,包括结果展示、参考链接、注意事项以及常见问题的解决方法。文章提供了Vue.js的基础使用介绍,如何安装和使用cnpm,以及如何解决命令行中遇到的一些常见问题。
一小时入门Vue.js前端开发
|
6天前
|
JavaScript 前端开发 安全
JavaScript函数详解
JavaScript函数的详细解析,包括函数的定义和调用方式(如一般格式、匿名函数、构造函数、自调用函数、箭头函数和严格模式)、函数参数(arguments对象、可变参数、默认参数值)、闭包的概念和应用实例。
JavaScript函数详解
|
5天前
|
JavaScript 前端开发
JavaScript函数可以返回两个值
JavaScript函数可以返回两个值
|
5天前
|
自然语言处理 分布式计算 JavaScript
JavaScript函数
JavaScript函数
|
6天前
|
缓存 JavaScript 前端开发
了解js基础知识中的作用域和闭包以及闭包的一些应用场景,浅析函数柯里化
该文章详细讲解了JavaScript中的作用域、闭包概念及其应用场景,并简要分析了函数柯里化的使用。
了解js基础知识中的作用域和闭包以及闭包的一些应用场景,浅析函数柯里化
|
6天前
|
JavaScript 前端开发 开发者
深入浅出 Vue.js:构建响应式前端应用
Vue.js 是一个流行的前端框架,以其简洁、高效和易学著称。它采用响应式和组件化设计,简化了交互式用户界面的构建。本文详细介绍 Vue.js 的核心概念、基本用法及如何构建响应式前端应用,包括实例、模板、响应式数据和组件等关键要素,并介绍了项目结构、Vue CLI、路由管理和状态管理等内容,帮助开发者高效地开发现代化前端应用。
|
6天前
|
JavaScript 前端开发
网页前端课程设计-【模仿】香港中文大学官网,轮播图及div+css布局,js的dom操作
这篇文章介绍了如何模仿香港中文大学官网进行网页前端课程设计,包括使用div+css布局、js的DOM操作以及实现轮播图等技术细节。
|
19天前
|
SpringCloudAlibaba JavaScript 前端开发
谷粒商城笔记+踩坑(2)——分布式组件、前端基础,nacos+feign+gateway+ES6+vue脚手架
分布式组件、nacos注册配置中心、openfegin远程调用、网关gateway、ES6脚本语言规范、vue、elementUI
谷粒商城笔记+踩坑(2)——分布式组件、前端基础,nacos+feign+gateway+ES6+vue脚手架
|
2月前
|
存储 前端开发 JavaScript
前端语言串讲 | 青训营笔记
前端语言串讲 | 青训营笔记
29 0
下一篇
无影云桌面