前端 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}`);

目录
相关文章
|
3月前
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
|
3月前
|
JavaScript 前端开发 Java
springboot解决js前端跨域问题,javascript跨域问题解决
本文介绍了如何在Spring Boot项目中编写Filter过滤器以处理跨域问题,并通过一个示例展示了使用JavaScript进行跨域请求的方法。首先,在Spring Boot应用中添加一个实现了`Filter`接口的类,设置响应头允许所有来源的跨域请求。接着,通过一个简单的HTML页面和jQuery发送AJAX请求到指定URL,验证跨域请求是否成功。文中还提供了请求成功的响应数据样例及请求效果截图。
springboot解决js前端跨域问题,javascript跨域问题解决
|
3月前
|
JavaScript 前端开发 Java
[JS]同事:这次就算了,下班回去赶紧补补内置函数,再犯肯定被主管骂
本文介绍了JavaScript中常用的函数和方法,包括通用函数、Global对象函数以及数组相关函数。详细列出了每个函数的参数、返回值及使用说明,并提供了示例代码。文章强调了函数的学习应结合源码和实践,适合JavaScript初学者和进阶开发者参考。
52 2
[JS]同事:这次就算了,下班回去赶紧补补内置函数,再犯肯定被主管骂
|
3月前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
79 5
|
3月前
|
缓存 前端开发 JavaScript
JavaScript前端路由的实现原理及其在单页应用中的重要性,涵盖前端路由概念、基本原理、常见实现方式
本文深入解析了JavaScript前端路由的实现原理及其在单页应用中的重要性,涵盖前端路由概念、基本原理、常见实现方式(Hash路由和History路由)、优点及挑战,并通过实际案例分析,帮助开发者更好地理解和应用这一关键技术,提升用户体验。
119 1
|
3月前
|
JSON 前端开发 JavaScript
聊聊 Go 语言中的 JSON 序列化与 js 前端交互类型失真问题
在Web开发中,后端与前端的数据交换常使用JSON格式,但JavaScript的数字类型仅能安全处理-2^53到2^53间的整数,超出此范围会导致精度丢失。本文通过Go语言的`encoding/json`包,介绍如何通过将大整数以字符串形式序列化和反序列化,有效解决这一问题,确保前后端数据交换的准确性。
68 4
|
3月前
|
机器学习/深度学习 自然语言处理 前端开发
前端神经网络入门:Brain.js - 详细介绍和对比不同的实现 - CNN、RNN、DNN、FFNN -无需准备环境打开浏览器即可测试运行-支持WebGPU加速
本文介绍了如何使用 JavaScript 神经网络库 **Brain.js** 实现不同类型的神经网络,包括前馈神经网络(FFNN)、深度神经网络(DNN)和循环神经网络(RNN)。通过简单的示例和代码,帮助前端开发者快速入门并理解神经网络的基本概念。文章还对比了各类神经网络的特点和适用场景,并简要介绍了卷积神经网络(CNN)的替代方案。
430 1
|
3月前
|
前端开发 JavaScript 开发者
除了 Generator 函数,还有哪些 JavaScript 异步编程解决方案?
【10月更文挑战第30天】开发者可以根据具体的项目情况选择合适的方式来处理异步操作,以实现高效、可读和易于维护的代码。
|
前端开发 JavaScript
Javascript 面向对象编程(一):封装
作者:阮一峰 Javascript是一种基于对象(object-based)的语言,你遇到的所有东西几乎都是对象。但是,它又不是一种真正的面向对象编程(OOP)语言,因为它的语法中没有class(类)。
794 0

热门文章

最新文章