Javascript 笔记(二):闭包(2)与map知识点

需求

要写一个闹钟控件,分为小时和分钟两个部分。两个部分的逻辑是一样的,只有域不同所以为了提高代码利用率,就使用闭包来完成。

问题

function loop_tuple(){let index = 0return function(tuple){index=(index+1)%3return tuple[index]}
}
const a =[4,5,6]
const b = [7,8,9]
const Loop_tuple = loop_tuple()console.log(Loop_tuple(a))//4
console.log(Loop_tuple(a))//5
console.log(Loop_tuple(b))//9
console.log(Loop_tuple(b))//7
console.log(Loop_tuple(a))//5

bug是传入a和b的时候,两者是共用index,而不是两者分别有一个index。

解决方法

方法一:利用字典map

该方法是问了gpt得出来的,同时也是学习一下map的用法。

1️⃣map知识点

  • map是一个字典,其keyvalue是比较自由的
  • .set(key,value):设置键值对
  • .get(key):获取键对应的值
  • .has(key):检查是否含有键
  • .delete(key):删除键
  • .clear():清空字典
  • .size:返回字典的大小

2️⃣代码

function loop_tuple() {// 创建一个对象,用于保存每个数组的indexconst indices = new Map();return function(tuple) {// 如果此数组没有对应的index,初始化为0if (!indices.has(tuple)) {indices.set(tuple, 0);}// 获取此数组的index并更新let index = indices.get(tuple);indices.set(tuple, (index + 1) % tuple.length);return tuple[index];}
}const a = [4, 5, 6];
const b = [7, 8, 9];
const Loop_tuple = loop_tuple();console.log(Loop_tuple(a)); // 4
console.log(Loop_tuple(a)); // 5
console.log(Loop_tuple(a)); // 6
console.log(Loop_tuple(a)); // 4
console.log(Loop_tuple(b)); // 7
console.log(Loop_tuple(a)); // 5

该方法就是建立一个字典,字典的键就是两个数组,然后每当函数传入不同的数组的是,就从字典里取出对应数组的index即可。

方法二:函数工厂

1️⃣思路来源

如我在内部函数里传参就会导致两个函数共用外部函数里面的变量,所以我直接在外部函数传参。

2️⃣代码

function loop_tuple(tuple){let index=0return function(){const value = tuple[index]index=(index+1)%tuple.lengthreturn value}
}
const a =[4,5,6]
const b = [7,8,9]
const Loop_tuple_a = loop_tuple(a)
const Loop_tuple_b = loop_tuple(b)
console.log(Loop_tuple_a())
console.log(Loop_tuple_b())
console.log(Loop_tuple_a())

3️⃣错误记录

此处自己还糊涂了,也记录一下

	return function(){index=(index+1)%tuple.lengthreturn tuple[index]}

如此一写输出值就从第二个元素开始输出了,后面想着调换一下顺序

	return function(){return tuple[index]index=(index+1)%tuple.length}

这个错误太低级了
这样导致现return了,后面的部分根部就不会执行。求助gpt才知道只要先声明一个变量value接受值即可。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/885903.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

RK3568硬解码并与Qt界面融合显示深入探究

1. 最近实在头疼,因为项目换了平台。折腾来折腾去,到今天算是把很多坑踩完了。 RK上实现硬解码方案一共有一下几种方式 1)opencvgstreamer插件,采用硬解码,只能解码出图像,无法解出声音 2)ff…

【Android】webview常用方法和使用

文章目录 前言一、常见用法二、基础属性webView的常用方法WebViewClient的常用方法WebChromeClient的常用方法WebSettings的相关方法 三、加载流程和事件回调四、webview和JS之间的互相调用总结 五、参考链接 前言 最近项目又用到了webview,在回顾复习一次webview相…

django博客项目实现站内搜索功能

Django博客站内搜索功能实现 1. 准备工作 确保Django项目已经创建好,并且有一个用于存储博客文章的模型(例如Post)。 2. 定义搜索表单 在应用目录下创建一个forms.py文件,定义一个搜索表单。 from django import formsclass …

OpenGL ES 共享上下文实现多线程渲染

OpenGL ES 共享上下文时,可以共享哪些资源? 共享上下文实现多线程渲染 EGL 概念回顾 EGL 是 OpenGL ES 和本地窗口系统(Native Window System)之间的通信接口,它的主要作用: 与设备的原生窗口系统通信; 查询绘图表面的可用类型和配置; 创建绘图表面; 在OpenGL ES 和…

0087__DirectX11 With Windows SDK--02 顶点/像素着色器的创建、顶点缓冲区

DirectX11 With Windows SDK--02 顶点/像素着色器的创建、顶点缓冲区-CSDN博客

09C++结构体

/*结构体属于用户自定义的数据类型&#xff0c; 允许用户存储不同的数据类型, 语法:struct 结构体名{结构体成员列表} ;*/ //struct 结构体名 变量名 #include <iostream> #include <string> using namespace std; struct student { string name; int age;int s…

python第七次作业

01.设计一个函数&#xff0c;可以传入一个或多个单词的字符串&#xff0c;并返回该字符串&#xff0c;但所有五个或更多字母的单词都前后颠倒 a input("输入:") print(a) #将一句话以空格为分界拆分为单个单词 b a.split(" ") ls_1 [] ls_2 []for i i…

C++开发基础之使用librabbitmq库实现RabbitMQ消息队列通信

1. 前言 RabbitMQ是一个流行的开源消息队列系统&#xff0c;支持多种消息协议&#xff0c;广泛用于构建分布式系统和微服务架构。可以在不同应用程序之间实现异步消息传递。在本文中&#xff0c;我们将熟悉如何使用C与RabbitMQ进行消息通信。 2. 准备工作 在 Windows 平台上…

【蓝桥杯 2021 省 B2】特殊年份

题目描述&#xff1a; 今年是 2021 年&#xff0c;2021 这个数字非常特殊, 它的千位和十位相等, 个位比百位大 1&#xff0c;我们称满足这样条件的年份为特殊年份。 输入 5 个年份&#xff0c;请计算这里面有多少个特殊年份。 输入格式 输入 5 行&#xff0c;每行一个 4 位十…

谈一谈高代理的一些特质

今天被问到了这样的一个问题&#xff0c;其实这是一个很有说法的话题。在我看来&#xff0c;他既拥有我之前提到的关于代理ip的一些特质&#xff0c;又有一些自己独特的味道。打个比方吧&#xff0c;就好比他很优秀&#xff0c;因为别人有的他也有&#xff0c;但是他过分迷人的…

AI写作(四)预训练语言模型:开启 AI 写作新时代(4/10)

一、预训练语言模型概述 ​ 预训练语言模型在自然语言处理领域占据着至关重要的地位。它以其卓越的语言理解和生成能力&#xff0c;成为众多自然语言处理任务的关键工具。 预训练语言模型的发展历程丰富而曲折。从早期的神经网络语言模型开始&#xff0c;逐渐发展到如今的大规…

图像处理实验一(Matlab Exercises and Image Fundamentals)

一、基本概念介绍 MATLAB是一种广泛使用的高性能语言&#xff0c;特别适用于数学计算、算法开发、数据分析和可视化。在图像处理领域&#xff0c;MATLAB提供了强大的工具和函数&#xff0c;使得图像的读取、处理和分析变得相对简单。通过MATLAB&#xff0c;用户可以实现从基本的…

番外-JDBC:2024年最新java连接数据库教程

前言 JavaScript的内容晚点更新&#xff0c;今天继续更新一点番外&#xff0c;今天更新的是jdbc&#xff0c;如何用java连接数据库 1.导包 要使java能够连接数据库我们需要导入一个包&#xff0c;请按照以下操作安装并导包 1.进入官网 MySQL 以上为官网链接进去后点击下载…

Ubuntu22.04安装DataEase

看到DataEase的驾驶舱&#xff0c;感觉比PowerBI要好用一点&#xff0c;于是搭建起来玩玩。Dataease推荐的操作系统是Ubuntu22.04/Centos 7。 下载了Ubuntu22.04和DataEase 最新版本的离线安装包 一.安装ubuntu22.04 在安装的时候&#xff0c;没有顺手设置IP地址信息&#xff…

vueRouter路由切换时实现页面子元素动画效果, 左右两侧滑入滑出效果

说明 vue路由切换时&#xff0c;当前页面左侧和右侧容器分别从两侧滑出&#xff0c;新页面左右分别从两侧滑入 效果展示 路由切换-滑入滑出效果 难点和踩坑 现路由和新路由始终存在一个页面根容器&#xff0c;通过<transition>组件&#xff0c;效果只能对页面根容器有效…

acwing算法基础03-递归,枚举

cWing 93. 递归实现组合型枚举 1.排序 考虑顺序 2. 组合 不考虑顺序 参数 -核心 递归 模板 1.指数型 选/不选 2. 排列 -考虑顺序 &#xff08;判重数组 不知道哪个数有有没有用过&#xff09;3.组合 不考虑顺序 数据范围 从n个数里选m个数 组合数中间点 取范围 #includ…

3174、清除数字

3174、[简单] 清除数字 1、题目描述 给你一个字符串 s 。你的任务是重复以下操作删除 所有 数字字符&#xff1a; 删除 第一个数字字符 以及它左边 最近 的 非数字 字符。 请你返回删除所有数字字符以后剩下的字符串。 2、解题思路 遍历字符串&#xff1a; 我们需要逐个遍…

服务器主板北桥南桥的发展

服务器是一种为客户机提供服务的高性能计算机。 主板芯片组在 2012 年以前均采用双芯片架构&#xff0c;即 MCHICH&#xff08;北桥芯片南桥芯片&#xff0c;Memory Controller Hub I/O Controller Hub&#xff09;&#xff0c;2012 年 Intel 推出单芯片架构后成为主流&#x…

ASP.NET 部署到IIS,访问其它服务器的共享文件 密码设定

asp.net 修改上面的 IIS需要在 配置文件 添加如下内容 》》》web.config <system.web><!--<identity impersonate"true"/>--><identity impersonate"true" userName"您的账号" password"您的密码" /><co…

多角度审视推荐系统

参考自《深度学习推荐系统》——王喆&#xff0c;用于学习和记录 介绍 推荐工程师需要从不同的维度审视推荐系统&#xff0c;不仅抓住问题的核心&#xff0c;更要从整体上思考推荐问题。 具体包括以下内容&#xff1a; &#xff08;1&#xff09;推荐系统如何选取和处理特征…