当前位置: 首页 > news >正文

React - 高阶函数-函数柯里化

在 JavaScript 和 React 中,高阶函数是指能够接收其它函数作为参数,或者返回一个函数的函数。柯里化是一种将函数的多个参数转化为一系列嵌套函数的技术,通常用于简化函数的使用和提高其可组合性。

使用前:

import React,{Component} from "react";export default class Sum extends Component{// 初始化状态state = {username: '',// 账号password:'',// 密码}// 保存账号saveUsername = (event) => {const {target} = eventthis.setState({username:target.value})}// 保存密码savePassword = (event) => {const {target} = eventthis.setState({password:target.value})}// 表单提交的回调handleSubmit = (event) => {event.preventDefault() // 阻止表单提交默认行为const { username, password } = this.stateconsole.log(username,password);}render() {return (<div>   <form onSubmit={this.handleSubmit}>账号:<input onChange={this.saveUsername} type="text" name="username" />密码:<input onChange={this.savePassword} type="password" name="password" /><button>登录</button></form></div>)}
}

高阶函数写法:

高阶函数:若一个函数符合下面 2 个规范中的任何一个,那该函数就是高阶函数。

  1. 若 A 函数,接收的参数是一个函数,那么 A 就可以称之为高阶函数;
  2. 若 A 函数,调用的返回值依然是一个函数,那么 A 就可以称之为高阶函数。

常见的高阶函数有:Promise,setTimeout,arr.map()等

import React,{Component} from "react";export default class Sum extends Component{// 初始化状态state = {username: '',// 账号password:'',// 密码}// 保存账号 密码 到状态中saveFormData = (dataType) => {return (event) => {this.setState({[dataType]:event.target.value})console.log(dataType,event.target.value);}}// 表单提交的回调handleSubmit = (event) => {event.preventDefault() // 阻止表单提交默认行为const { username, password } = this.stateconsole.log(username,password);}render() {return (<div>   <form onSubmit={this.handleSubmit}>账号:<input onChange={this.saveFormData('username')} type="text" name="username" />密码:<input onChange={this.saveFormData('password')} type="password" name="password" /><button>登录</button></form></div>)}
}

 

函数柯里化:

函数的柯里化:通过函数调用继续返回函数的方式,实现多次接收参数最后统一处理的函数编码形式。

补充:方括号语法 [ ] 

在 JavaScript 中,方括号语法 [] 用于动态地访问或设置对象属性的值。这种语法允许使用变量或表达式作为属性名,而不是只使用静态字符串。这在处理动态属性名时尤其有用。

1. 变量作为属性名

当知道属性名在运行时是动态变化的(例如在循环中、条件判断中或处理用户输入时),可以将变量作为属性名来访问或修改对象的属性。

const fieldName = 'username';
const user = {username: 'john_doe',password: '123456'
};// 使用方括号语法动态访问
console.log(user[fieldName]); // 输出: john_doe
2. 使用表达式

方括号语法允许使用表达式来计算属性名。例如,可以根据某些条件来决定要访问的属性。

const prefix = 'user_';
const user = {user_name: 'john_doe',user_age: 30
};// 使用表达式
console.log(user[prefix + 'name']); // 输出: john_doe
console.log(user[prefix + 'age']); // 输出: 30
3. 在对象字面量中动态创建属性名

在对象字面量中,也可以使用方括号语法来动态地为对象创建属性名。这使得可以在对象初始化时动态设置属性。

const key = 'xx';
const value = 'blue';// 使用方括号语法来创建带有动态键名的对象
const obj = {[key]: value
};console.log(obj.xx); // 输出: blue
4. 在 React 中状态管理

在 React 中,在更新 state 时,使用方括号语法来动态设置键名是非常常见的,特别是在根据输入框等动态生成的字段名来更新状态时。

this.setState({ [dataType]: event.target.value });

在这个例子中,dataType 可能是 'username' 或 'password',使用方括号语法允许灵活地根据不同键名更新状态,而不需要写多个 setState 调用。

总结

使用方括号语法 [] 的主要原因是能够使用变量或表达式动态访问或设置对象的属性。它使得代码更加灵活和可读,能够处理许多情况,例如动态状态管理、条件逻辑和其他基于用户输入的场景。

相关文章:

React - 高阶函数-函数柯里化

在 JavaScript 和 React 中&#xff0c;高阶函数是指能够接收其它函数作为参数&#xff0c;或者返回一个函数的函数。柯里化是一种将函数的多个参数转化为一系列嵌套函数的技术&#xff0c;通常用于简化函数的使用和提高其可组合性。 使用前&#xff1a; import React,{Compo…...

数据守护者:备份文件的重要性及自动化备份实践

在信息化社会&#xff0c;数据已成为企业运营和个人生活的重要组成部分。无论是企业的核心业务数据&#xff0c;还是个人的珍贵照片、重要文档&#xff0c;数据的丢失或损坏都可能带来无法估量的损失。因此&#xff0c;备份文件的重要性愈发凸显&#xff0c;它不仅是数据安全的…...

【kafka系列】消费者重平衡

目录 流程 1. 消费者组重平衡&#xff08;Rebalance&#xff09;的流程逻辑分析 阶段一&#xff1a;触发重平衡 阶段二&#xff1a;消费者组协调 阶段三&#xff1a;重平衡完成 关键设计思想 2. Mermaid 流程代码 关键点总结 重平衡的影响 1. 重平衡期间的消费行为 2…...

光谱相机在天文学领域的应用

天体成分分析 恒星成分研究&#xff1a;恒星的光谱包含了其大气中各种元素的吸收和发射线特征。通过光谱相机精确测量这些谱线&#xff0c;天文学家能确定恒星大气中氢、氦、碳、氮、氧等元素的含量。如对太阳的光谱分析发现&#xff0c;太阳大气中氢元素占比约 71%&#xff0…...

Java 基于 SpringBoot+Vue 的家政服务管理平台设计与实现

博主介绍&#xff1a;✌程序员徐师兄、8年大厂程序员经历。全网粉丝12w、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战*✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推荐订阅&#x1f447…...

ABC393E/F简要题解

ABC393E 给定数组 A A A,求包含元素 A i A_i Ai​的大小为 k k k的子集中最大的最大公约数。 题解&#xff1a; 首先思考对于整个数组所有包含 k k k个元素的子集中最大的GCD是多少&#xff0c;可以怎么求。 我们发现&#xff0c;如果一个数 x x x,数组中如果存在至少 k k …...

什么是Mustache

Mustache 是一种轻量级模板引擎&#xff0c;用于将变量插入到模板中生成最终的文本输出。它的设计简单且易于使用&#xff0c;适用于多种编程语言&#xff0c;包括 JavaScript、Python、Ruby、Java 等。 Mustache 的模板语法使用双大括号 {{}} 包裹变量或表达式&#xff0c;用…...

GGUF格式的DeepSeek-R1-Distill-Qwen-1.5B模型的字段解析

在将GGUF文件转换为PyTorch格式之前&#xff0c;先要读取文件并了解模型中都有什么字段&#xff0c;会遇到了各种参数不匹配的问题。现在&#xff0c;我们先读取GGUF文件的元数据字段&#xff0c;并希望将这些字段中的内存映射&#xff08;mmap&#xff09;数据转换为字符串显示…...

Java和SQL测试、性能监控中常用工具

下面我会详细列举一些在Java和SQL测试、调试、性能监控中常用的工具&#xff0c;并结合项目中提到的各个技术点说明如何选择合适的工具和方法。 一、Java项目常用的测试、调试与性能监控工具 单元测试与集成测试&#xff1a; JUnit/TestNG&#xff1a; 用于编写单元测试和集成测…...

CAS单点登录(第7版)13.票务

如有疑问&#xff0c;请看视频&#xff1a;CAS单点登录&#xff08;第7版&#xff09; 票务 概述 票务 有两个核心的可配置工单组件&#xff1a; TicketRegistry - 提供持久票证存储。ExpirationPolicy - 提供票证过期语义的策略框架。 工单注册 部署环境和技术专业知识…...

大语言模型入门

大语言模型入门 1 大语言模型步骤1.1 pre-training 预训练1.1.1 从网上爬数据1.1.2 tokenization1.1.2.1 tokenization using byte pair encoding 1.3 预训练1.3.1 context1.3.2 training1.3.3 输出 1.2 post-training1.2.1 token 1.2 SFT监督微调1.3 人类反馈强化学习1.3.1 人…...

从ARM官方获取自己想要的gcc交叉编译工具链接(Arm GNU Toolchain),并在Ubuntu系统中进行配置

前言 本文是博文 https://blog.csdn.net/wenhao_ir/article/details/145547974 的分支博文。 在本博文中我们完成gcc交叉编译工具gcc-arm-9.2-2019.12-x86_64-arm-none-linux-gnueabihf.tar.xz的下载、配置、测试。 下载自己想要的gcc交叉编译工具的源码 目标文件的名字及说…...

LDR6500:重塑充电与数据传输的新篇章

在当今快速发展的数字时代&#xff0c;电子设备对充电速度、数据传输效率和兼容性提出了更高要求。LDR6500&#xff0c;作为一款专为USB Type-C Bridge设备设计的USB-C DRP&#xff08;Dual Role Port&#xff0c;双角色端口&#xff09;接口USB PD&#xff08;Power Delivery&…...

Matlab 机器人 雅可比矩阵

工业机器人运动学与Matlab正逆解算法学习笔记&#xff08;用心总结一文全会&#xff09;&#xff08;四&#xff09;——雅可比矩阵_staubli机器人正逆向运动学实例验证matlab-CSDN博客 matlab求雅可比矩阵_六轴机械臂 矢量积法求解雅可比矩阵-CSDN博客 (63 封私信 / 80 条消息…...

网络安全防护:开源WAF雷池SafeLine本地部署与配置全流程

文章目录 前言1.关于SafeLine2.安装Docker3.本地部署SafeLine4.使用SafeLine5.cpolar内网穿透工具安装6.创建远程连接公网地址7.固定Uptime Kuma公网地址 前言 对于建站新手来说&#xff0c;无论你选择创建的是个人博客、企业官网还是各类应用平台来推广自己的内容或是产品&am…...

vue框架生命周期详细解析

Vue.js 的生命周期钩子函数是理解 Vue 组件行为的关键。每个 Vue 实例在创建、更新和销毁过程中都会经历一系列的生命周期阶段&#xff0c;每个阶段都有对应的钩子函数&#xff0c;开发者可以在这些钩子函数中执行特定的操作。 Vue 生命周期概述 Vue 的生命周期可以分为以下几…...

Ollama 安装使用指南

rootdeepseek-1:/home/zgq/.ollama# lsof -i :11434 COMMAND PID USER FD TYPE DEVICE SIZE/OFF NODE NAME ollama 29005 root 3u IPv4 47359 0t0 TCP localhost:11434 (LISTEN) 从以上提供的 lsof 输出来看&#xff0c;Ollama 服务正在监听 localhost:11434…...

力扣 38. 外观数列 打表 迭代 阅读理解

Problem: 38. 外观数列 &#x1f9d1;‍&#x1f3eb; 参考题目补充说明 &#x1f9d1;‍&#x1f3eb; 参考题解 迭代法 class Solution {public String countAndSay(int n) {String str "1";for (int i 2; i < n; i) {StringBuilder sb new StringBuild…...

文心一言4月起全面免费,6月底开源新模型:AI竞争进入新阶段?

名人说&#xff1a;莫听穿林打叶声&#xff0c;何妨吟啸且徐行。—— 苏轼 Code_流苏(CSDN)&#xff08;一个喜欢古诗词和编程的Coder&#x1f60a;&#xff09; 目录 一、文心一言免费化的背后&#xff1a;AI成本与应用的双重驱动1️⃣成本下降&#xff0c;推动文心一言普及2…...

基于LSTM+前向均值滤波后处理的癫痫发作检测(包含数据集)

引言 癫痫是一种常见的神经系统疾病&#xff0c;患者会经历反复的癫痫发作。早期检测和预警对于改善患者的生活质量至关重要。近年来&#xff0c;深度学习技术&#xff0c;尤其是长短期记忆网络&#xff08;LSTM&#xff09;&#xff0c;在时间序列数据分析中表现出色&#xf…...

Window下Redis的安装和部署详细图文教程(Redis的安装和可视化工具的使用)

文章目录 Redis下载地址&#xff1a;一、zip压缩包方式下载安装 1、下载Redis压缩包2、解压到文件夹3、启动Redis服务4、打开Redis客户端进行连接5、使用一些基础操作来测试 二、msi安装包方式下载安装 1、下载Redis安装包2、进行安装3、进行配置4、启动服务5、测试能否正常工…...

什么是交叉熵

交叉熵 定义公式 针对离散变量x的概率分布 p ( x ) p(x) p(x) , q ( x ) q(x) q(x) x 1 x_1 x1​ x 2 x_2 x2​ x 3 x_3 x3​ x 4 x_4 x4​… x n x_n xn​p( x 1 x_1 x1​)p( x 2 x_2 x2​)p( x 3 x_3 x3​)p( x 4 x_4 x4​)…p( x n x_n xn​)q( x 1 x_1 x1​)q( x 2 x_2 …...

虚拟机安装k8s集群

环境准备 - 主节点&#xff08;Master Node&#xff09;: IP地址: 192.168.40.100主机名: k8s-master - 工作节点&#xff08;Worker Node&#xff09;: IP地址: 192.168.40.101主机名: k8s-node1 步骤 1: 配置虚拟机环境 1.1 设置主机名 在每台虚拟机上设置唯一的主机名…...

【mysql部署】在ubuntu22.04上安装和配置mysql教程

一.安装mysql 1. 更新软件包列表: sudo apt-get update2.安装 MySQL 服务器&#xff1a; sudo apt-get install mysql-server3.设置 MySQL 安全性&#xff1a; sudo mysql_secure_installation按照提示输入相关问题的回答&#xff0c;例如删除匿名用户、禁止 root 远程登录…...

机器学习实战(3):线性回归——预测连续变量

第3集&#xff1a;线性回归——预测连续变量 在机器学习的世界中&#xff0c;线性回归是最基础、最直观的算法之一。它用于解决回归问题&#xff0c;即预测连续变量&#xff08;如房价、销售额等&#xff09;。尽管简单&#xff0c;但线性回归却是许多复杂模型的基石。今天我们…...

烧结银在 DeepSeek 中的关键作用与应用前景

烧结银在 DeepSeek 中的关键作用与应用前景 在科技飞速发展的当下&#xff0c;DeepSeek 作为前沿科技领域的重要参与者&#xff0c;正以其独特的技术和创新的应用&#xff0c;在众多行业掀起变革的浪潮。而在 DeepSeek 的核心技术体系中&#xff0c;烧结银这一材料的应用&#…...

C++效率掌握之STL库:string底层剖析

文章目录 1.学习string底层的必要性2.string类对象基本函数实现3.string类对象的遍历4.string类对象的扩容追加5.string类对象的插入、删除6.string类对象的查找、提取、大小调整7.string类对象的流输出、流提取希望读者们多多三连支持小编会继续更新你们的鼓励就是我前进的动力…...

计算机组成原理—— 总线系统(十一)

在追求梦想的旅途中&#xff0c;我们常常会遇到崎岖的道路和难以预料的风暴。然而&#xff0c;正是这些挑战塑造了我们的坚韧和毅力&#xff0c;使我们能够超越自我&#xff0c;触及那些看似遥不可及的目标。不要因为一时的困境而气馁&#xff0c;也不要因为他人的质疑而动摇自…...

电子制造企业数字化转型实战:基于Odoo构建MES平台的深度解决方案

作者背景 拥有8年乙方项目经理经验、8年甲方信息化管理经验&#xff0c;主导过12个Odoo制造业项目落地&#xff0c;服务客户涵盖消费电子、汽车电子、工业设备等领域。本文基于华东某电子企业&#xff08;以下简称"A公司"&#xff09;的实战案例&#xff0c;解析行业…...

【Python爬虫(4)】揭开Python爬虫的神秘面纱:基础概念全解析

【Python爬虫】专栏简介&#xff1a;本专栏是 Python 爬虫领域的集大成之作&#xff0c;共 100 章节。从 Python 基础语法、爬虫入门知识讲起&#xff0c;深入探讨反爬虫、多线程、分布式等进阶技术。以大量实例为支撑&#xff0c;覆盖网页、图片、音频等各类数据爬取&#xff…...

kafka为什么这么快?

前言 Kafka的高效有几个关键点&#xff0c;首先是顺序读写。磁盘的顺序访问速度其实很快&#xff0c;甚至比内存的随机访问还要快。Kafka在设计上利用了这一点&#xff0c;将消息顺序写入日志文件&#xff0c;这样减少了磁盘寻道的时间&#xff0c;提高了吞吐量。与传统数据库的…...

书籍推荐:《书法课》林曦

记得樊登老师说过&#xff0c;如果你想了解一个事物&#xff0c;就去读5本相关的书&#xff0c;你会比大部分人都更了解它。这是我读的第4本和“书法”有关的书&#xff0c;作为一个零基础的成年人&#xff0c;林曦这本《书法课》非常值得一读。&#xff08;无论你是否写字&…...

位图(C语言版)

文章目录 位图模型基本操作实现代码运行结果 应用存储只有两种状态的数据排序并去重 位图 模型 位图是“位”的数组。 为什么需要构建一个专门的数据结构来表示位的数组&#xff1f;&#xff1a;因为计算机最小的寻址单位是字节&#xff0c;而不是位。 位图是一种内存紧凑的…...

使用C#元组实现列表分组汇总拼接字段

文章目录 使用C#元组实现列表分组汇总拼接字段代码运行结果 使用C#元组实现列表分组汇总拼接字段 代码 string message string.empty; var tupleList new List<Tuple<string, string, string>>(); tupleList.Add(new Tuple<string, string, string>("…...

淘宝API数据采集接口||调用步骤详解

### 一、注册与认证 1. **注册淘宝开发者账号**&#xff1a; * 访问淘宝开放平台官网&#xff0c;点击“立即入驻”按钮&#xff0c;按照提示完成注册流程。注册过程中需要提供企业名称、联系人信息等基本信息。 2. **创建应用**&#xff1a; * 注册成功后&#xff0c;登录淘…...

C# 调用 C++ 动态库接口

在 C# 中调用 C 动态库接口&#xff0c;通常需要通过 P/Invoke (Platform Invocation Services) 来与 C 代码交互 1. 准备 C 动态库 假设你有一个 C 动态库&#xff0c;其中包含如下函数&#xff1a; extern "C" char* getLocationURL(const char* package_name, …...

fastadmin 接口请求提示跨域

问题描述 小程序项目&#xff0c;内嵌h5页面&#xff0c;在h5页面调用后端php接口&#xff0c;提示跨域。网上查找解决方案如下&#xff1a; 1&#xff0c;设置header // 在入口文件index.php直接写入直接写入 header("Access-Control-Allow-Origin:*"); header(&q…...

C#_文件写入读取操作

文件写入操作:--------------------------------------------------------------------------- 读取文件:---------------------------------------------------------------------------...

redis的哨兵模式和集群模式

Redis 的 哨兵模式&#xff08;Sentinel Mode&#xff09; 和 集群模式&#xff08;Cluster Mode&#xff09; 是两种常见的高可用部署方式&#xff0c;它们各有优缺点&#xff0c;适用于不同的场景。以下是它们的比较&#xff1a; 1. 哨兵模式&#xff08;Sentinel Mode&#…...

《open3d +pyqt》凸包计算

《open3d +pyqt》凸包计算 一、效果展示二、qt设置2.1界面设置2.2 py文件生成三、核心代码一、效果展示 二、qt设置 2.1界面设置 添加动作Qhull: 布局参数: 2.2 py文件生成 更新Mainwindow.py 生成py文件 三、核心代码 代码如下: main.py文件...

数据库报错1045-Access denied for user ‘root‘@‘localhost‘ (using password: YES)解决方式

MySQL 报错 1045 表示用户root从localhost连接时被拒绝访问&#xff0c;通常是因为密码错误、权限问题或配置问题。以下是解决该问题的常见方法&#xff1a; 方法一&#xff1a;检查用户名和密码 • 确认用户名和密码是否正确&#xff1a; 确保输入的用户名和密码完全正确&am…...

ThreadLocal为什么会内存溢出

每个线程(Thread 对象)内部维护一个 ThreadLocalMap,用于存储该线程的所有 ThreadLocal 变量的键值对: ThreadLocalMap虽然是ThreadLocal的静态内部类,但是Thread 对象的属性,当线程存活时ThreadLocalMap不会被回收。 Key:ThreadLocal 实例的 弱引用(WeakReference)。…...

数据结构------单向链表。

一.实现单向链表的头插&#xff0c;头删&#xff0c;尾插&#xff0c;尾删&#xff0c;按位置插&#xff0c;按位置删&#xff0c;按位置修改&#xff0c;按元素查找&#xff0c;按元素修改&#xff0c;按元素删除&#xff0c;单链表的逆置&#xff0c;查找倒数第几个元素&…...

Python的那些事第二十二篇:基于 Python 的 Django 框架在 Web 开发中的应用研究

基于 Python 的 Django 框架在 Web 开发中的应用研究 摘要 Django 是一个基于 Python 的高级 Web 框架,以其开发效率高、安全性和可扩展性强等特点被广泛应用于现代 Web 开发。本文首先介绍了 Django 的基本架构和核心特性,然后通过一个实际的 Web 开发项目案例,展示了 Dj…...

在 PyCharm 中接入deepseek的API的各种方法

在 PyCharm 中接入 DeepSeek 的 API&#xff0c;通常需要以下步骤&#xff1a; 1. 获取 DeepSeek API 密钥 首先&#xff0c;确保你已经在 DeepSeek 平台上注册并获取了 API 密钥&#xff08;API Key&#xff09;。如果没有&#xff0c;请访问 DeepSeek 的官方网站注册并申请 …...

当扩展屏显示【输入不支持】怎么解决?!

1、why? 当你遇到这个问题的时候&#xff0c;那就表示您的扩展屏偏老旧&#xff0c;这时候需要进行一些参数设置 2、直接改变桌面模式解决不了问题 你是不是尝试过直接在缩放和布局这里设置&#xff1f;在这里直接设置的话&#xff0c;设置的是桌面模式,屏幕大小是会变化但…...

深入剖析 Python 类属性与对象的底层创建与内存分析

各类资料学习下载合集 ​​https://pan.quark.cn/s/8c91ccb5a474​​ 在 Python 中,类和对象是面向对象编程(OOP)的核心组成部分。类属性与实例属性的存储和管理方式,以及类和对象在内存中的分布和结构,对于深入理解 Python 的底层机制至关重要。 本文将带你详细解析 P…...

pdf文件的读取,基于深度学习的方法

需要安装一些依赖解析 PDF 文件的详细指南_unstructured.partition.pdf-CSDN博客文章浏览阅读1.3k次&#xff0c;点赞13次&#xff0c;收藏9次。通过 unstructured.partition.pdf 函数&#xff0c;可以方便地解析 PDF 文件并提取其中的文本和表格内容。尽管在使用过程中可能会遇…...

【指令集】Nginx

本文作者&#xff1a; slience_me 【指令集】Nginx 1. 目录结构 Nginx 的基础目录结构通常包括以下几个主要目录&#xff1a; Nginx的目录结构大致如下&#xff08;以Linux系统为例&#xff09;&#xff1a; /etc/nginx/ # Nginx的配置文件目录 ├── ngin…...

蓝耘云智算|使用 Deepseek R1 模型优化 BERT 在 NLP 任务中的表现

在自然语言处理&#xff08;NLP&#xff09;领域&#xff0c;BERT&#xff08;Bidirectional Encoder Representations from Transformers&#xff09;已成为许多文本分类任务的基准模型。然而&#xff0c;随着新模型的出现和技术的不断进步&#xff0c;BERT在某些情况下可能不…...