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

掌握JavaScript的练习之道:十个手写函数让你信手拈来!

在这里插入图片描述

🤍 前端开发工程师(主业)、技术博主(副业)、已过CET6
🍨 阿珊和她的猫_CSDN个人主页
🕠 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》
🍚 蓝桥云课签约作者、已在蓝桥云课上架的前后端实战课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

当涉及到练习JavaScript函数时,有许多不同的函数可以学习和实现。以下是十个常见的手写JavaScript函数,可以作为练习的绝佳选择:

  1. 数组求和
function sumArray(arr) {return arr.reduce((total, num) => total + num, 0);
}

在这里插入图片描述

  1. 数组平均值
function averageArray(arr) {if (arr.length === 0) {return 0;}return sumArray(arr) / arr.length;
}

在这里插入图片描述

  1. 找出最大值
function findMax(arr) {return Math.max(...arr);
}

在这里插入图片描述

  1. 颠倒字符串
function reverseString(str) {return str.split('').reverse().join('');
}

代码 str.split('').reverse().join('') 的作用是将字符串 str 反转。

下面是对每个方法的解释:

  1. split(''): 这个方法将字符串 str 拆分成一个字符数组。通过传递空字符串 '' 作为分隔符,字符串中的每个字符都会成为数组中的一个元素。

    例如,对于字符串 'Hello'split('') 的结果将是 ['H', 'e', 'l', 'l', 'o']

  2. reverse(): 这个方法用于反转数组中的元素顺序。它会改变原始数组,将数组中的第一个元素变为最后一个元素,第二个元素变为倒数第二个元素,以此类推。

    例如,对于数组 ['H', 'e', 'l', 'l', 'o']reverse() 的结果将是 ['o', 'l', 'l', 'e', 'H']

  3. join(''): 这个方法将数组中的所有元素按照指定的分隔符连接成一个字符串。通过传递空字符串 '' 作为分隔符,元素之间不会有任何字符间隔。

    例如,对于数组 ['o', 'l', 'l', 'e', 'H']join('') 的结果将是 'olleH'

综合起来看,str.split('').reverse().join('') 的实际效果是将字符串 str 反转,并返回反转后的字符串。

例如,对于字符串 'Hello',这行代码将返回 'olleH'
在这里插入图片描述

  1. 判断回文字符串
function isPalindrome(str) {const cleanedStr = str.toLowerCase().replace(/[\W_]/g, '');const reversedStr = reverseString(cleanedStr);return cleanedStr === reversedStr;
}

在这里插入图片描述

  1. 数组去重
function removeDuplicates(arr) {return [...new Set(arr)];
}

代码 [...new Set(arr)] 的作用是从数组 arr 中去除重复的元素,并返回一个由非重复元素组成的新数组。

下面是对代码中的每个部分的解释:

  1. Set: Set 是 JavaScript 中的一种数据结构,它允许你存储唯一的值,这意味着集合中不会有重复的元素。当你使用 new Set() 创建一个新的 Set 对象时,它将包含从 arr 中的元素创建的一组唯一值。

  2. new: new 关键字用于创建 Set 对象的实例。

  3. [...]: 这是扩展运算符(Spread Operator),它用于将一个可迭代对象(如数组)展开为独立的元素。在这个代码片段中,它将 Set 对象转换为一个数组。

综合起来看,[...new Set(arr)] 的效果是将数组 arr 转换为一个 Set 对象以去除重复元素,然后将其转换回一个数组。最后,返回的数组中将包含 arr 中的非重复元素。

例如,对于数组 [1, 2, 2, 3, 3, 4, 5, 5],这行代码将返回 [1, 2, 3, 4, 5],去除了重复的元素。
在这里插入图片描述

  1. 统计字符串中某个字符出现的次数
function countOccurrences(str, char) {const regex = new RegExp(char, 'g');const matches = str.match(regex);return matches ? matches.length : 0;
}

在这里插入图片描述

  1. 斐波那契数列
function fibonacci(n) {if (n <= 1) {return n;}return fibonacci(n - 1) + fibonacci(n - 2);
}

这段代码实现了一个递归函数来计算斐波那契数列中第 n 个数的值。

下面是对代码的解释:

  1. if (n <= 1) { return n; }: 这是递归函数的终止条件。当 n 小于或等于 1 时,直接返回 n 的值。在斐波那契数列中,第一个数和第二个数都是 1,所以当 n 为 0 或 1 时,递归终止并返回相应的值。

  2. return fibonacci(n - 1) + fibonacci(n - 2);: 这是递归调用部分。当 n 大于 1 时,递归调用 fibonacci 函数来计算前两个数的和。fibonacci(n - 1) 表示计算第 n-1 个数的值,fibonacci(n - 2) 表示计算第 n-2 个数的值。然后将它们相加并返回结果。这样,递归会一直进行直到达到终止条件。

综合起来看,这段代码实现了一个递归函数来计算斐波那契数列的第 n 个数的值。通过不断递归调用自身并根据终止条件返回结果,可以计算出斐波那契数列中任意位置的数。

请注意,对于较大的 n 值,这种递归实现可能效率较低,因为它可能会进行重复的计算。在实际应用中,可以考虑使用循环或其他更高效的方法来计算斐波那契数列。
在这里插入图片描述

  1. 判断质数
function isPrime(num) {if (num < 2) {return false;}for (let i = 2; i <= Math.sqrt(num); i++) {if (num % i === 0) {return false;}}return true;
}

在这里插入图片描述

  1. 找出字符串中最长的单词
function longestWord(str) {const words = str.split(' ');let maxLength = 0;let longestWord = '';for (let i = 0; i < words.length; i++) {if (words[i].length > maxLength) {maxLength = words[i].length;longestWord = words[i];}}return longestWord;
}

在这里插入图片描述

这是一些练习手写JavaScript函数的例子,它们涵盖了不同的问题和技巧。当你逐步实现这些函数时,你会对JavaScript的函数和常用数据结构有更好的理解。

相关文章:

掌握JavaScript的练习之道:十个手写函数让你信手拈来!

&#x1f90d; 前端开发工程师&#xff08;主业&#xff09;、技术博主&#xff08;副业&#xff09;、已过CET6 &#x1f368; 阿珊和她的猫_CSDN个人主页 &#x1f560; 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 &#x1f35a; 蓝桥云课签约作者、已在蓝桥云…...

买卖股票的最佳时机 II[中等]

优质博文&#xff1a;IT-BLOG-CN 一、题目 给你一个整数数组prices&#xff0c;其中prices[i]表示某支股票第i天的价格。在每一天&#xff0c;你可以决定是否购买和/或出售股票。你在任何时候最多只能持有一股股票。你也可以先购买&#xff0c;然后在同一天出售。返回你能获得…...

前端开发调试技巧:如何在Component下选中当前插件并且查看当前插件信息

在react开发项目中&#xff0c;在Component下选中组件&#xff0c;然后在控制台输$r 按回车键即可输出该组件信息。例如 $r.props输出该组件的props参数。例子详情见如下截图...

你是否还迷茫要不要学习Linux?

近几年Linux这个词好像很流行&#xff0c;无论是现实工作中&#xff0c;还是在网络信息中均可以听到或者看到有关Linux相关的内容&#xff0c;可以说Linux无处不在。说到这&#xff0c;有人可能会问了&#xff0c;我对Linux比较感兴趣&#xff0c;但是没有接触过Linux&#xff…...

leetcode(1)链表

# 1. 定义一个链表节点 class ListNode:def __init__(self, val0, next_nodeNone):self.val valself.next_node next_node# 2. 定义一个 node头节点 class LinkedList:def __init__(self):self.head None# 3.链表查找元素 get(index)&#xff1a; def get_node(self, index)…...

spring boot Rabbit高级教程

消息可靠性 生产者重试机制 首先第一种情况&#xff0c;就是生产者发送消息时&#xff0c;出现了网络故障&#xff0c;导致与MQ的连接中断。 为了解决这个问题&#xff0c;SpringAMQP提供的消息发送时的重试机制。即&#xff1a;当RabbitTemplate与MQ连接超时后&#xff0c;…...

FTP的魅力:构建高效的文件传输基础

1 ftp介绍 1.1 ftp服务器安装 dnf install vsftpd-3.0.3-31.el8.x86_64 -y # 安装ftp服务 systemctl enable --now vsftpd # 启动ftp服务 systemctl stop --now firewalld.service # 关闭防火墙&#xff0c;允许客户端访问anonymous_enableYES #启动匿名用户访问功能1.2 客户…...

70、window11+visual studio2019+共享内存进行数据传输

基本思想:服务端和客户端 写共享内存 #include <windows.h> #include <iostream> using namespace std;HANDLE g_EventRead; // 读信号灯 HANDLE g_EventWrite; // 写信号灯 // 定义共享数据class Writer { public:Writer(const int buf_size, const wchar_t…...

SSTI模板注入(flask) 学习总结

文章目录 Flask-jinja2 SSTI 一般利用姿势SSTI 中常用的魔术方法内建函数 利用 SSTI 读取文件Python 2Python 3 利用 SSTI 执行命令寻找内建函数 eval 执行命令寻找 os 模块执行命令寻找 popen 函数执行命令寻找 importlib 类执行命令寻找 linecache 函数执行命令寻找 subproce…...

最近的工作和生活

大家好&#xff0c;我是记得诚。 聊一聊最近的工作和生活。 不知不觉在管理岗位&#xff0c;快干一年了。技术管理还是比较纯粹&#xff0c;主要还是以解决问题为主&#xff0c;对自己的考验也更大了&#xff0c;要关注更广的技术&#xff0c;也要专注更深的技术细节。 技术…...

第六节:Word中对象的层次结构

《VBA之Word应用》&#xff08;10178982&#xff09;&#xff0c;是我推出第八套教程&#xff0c;教程是专门讲解VBA在Word中的应用&#xff0c;围绕“面向对象编程”讲解&#xff0c;首先让大家认识Word中VBA的对象&#xff0c;以及对象的属性、方法&#xff0c;然后通过实例让…...

ARJ_DenseNet BMR模型训练

废话不多数&#xff0c;模型训练代码 densenet_arj_BMR.py &#xff1a; import timefrom tensorflow.keras.applications.xception import Xception from tensorflow.keras.applications.densenet import DenseNet169 from tensorflow.keras.preprocessing.image import Im…...

React之Hook

一、是什么 Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性 至于为什么引入hook&#xff0c;官方给出的动机是解决长时间使用和维护react过程中常遇到的问题&#xff0c;例如&#xff1a; 难以重用和共享组件中的与状态…...

OSG嵌入QT的简明总结2

正文 我之前在这篇博文《OSG嵌入QT的简明总结》中论述了OSG在QT中显示的可视化问题。其中提到官方提供的osgQt项目&#xff08;地址&#xff1a;https://github.com/openscenegraph/osgQt &#xff09;很久前已经更新了。但是我一直没有时间同步更新&#xff0c;最近重新尝试了…...

日常中msvcp71.dll丢失怎样修复?分享5个修复方法

在 Windows 系统中&#xff0c;msvcp71.dll 是一个非常重要的动态链接库文件&#xff0c;它承载了许多应用程序和游戏的运行。如果您的系统中丢失了这个文件&#xff0c;那么您可能会遇到无法打开程序、程序崩溃或出现错误提示等问题。本文将介绍 5 个快速修复 msvcp71.dll 丢失…...

【腾讯云TDSQL-C Serverless 产品体验】使用 Python向TDSQL-C添加读取数据实现词云图

关于TDSQL-C Serverless介绍 TDSQL-C 是腾讯云自主研发的新一代云原生关系型数据库。 它融合了传统数据库、云计算和新硬件技术的优势,100%兼容 MySQL,为用户提供具有极致弹性、高性能、高可用性、高可靠性和安全性的数据库服务。 TDSQL-C 实现了超过百万每秒的高吞吐量,支持…...

服务器感染了.360、.halo勒索病毒,如何确保数据文件完整恢复?

导言&#xff1a; 数据的安全性至关重要&#xff0c;但威胁不断进化&#xff0c;.360、.halo勒索病毒是其中的令人担忧的勒索软件。本文91数据恢复将深入介绍.360、.halo勒索病毒&#xff0c;包括其威胁本质、数据恢复方法和如何采取预防措施来保护您的数据。 如果受感染的数据…...

BAT028:批量将文件修改日期后缀更新为最新修改日期

引言&#xff1a;编写批处理程序&#xff0c;实现批量将文件修改日期后缀更新为最新修改日期。 一、新建Windows批处理文件 参考博客&#xff1a; CSDNhttps://mp.csdn.net/mp_blog/creation/editor/132137544 二、写入批处理代码 1.右键新建的批处理文件&#xff0c;点击【…...

Visual Studio C++ 的 头文件和源文件

在Visual Studio C中&#xff0c;头文件&#xff08;Header Files&#xff09;和源文件&#xff08;Source Files&#xff09;是两种不同的文件类型&#xff0c;用于组织和管理C代码。 头文件&#xff08;Header Files&#xff09;&#xff1a; 后缀名为.h或.hpp的文件&#xf…...

Scrapy框架中的Middleware扩展与Scrapy-Redis分布式爬虫

在爬虫开发中&#xff0c;Scrapy框架是一个非常强大且灵活的选择。在本文中&#xff0c;我将与大家分享两个关键的主题&#xff1a;Scrapy框架中的Middleware扩展和Scrapy-Redis分布式爬虫。这些主题将帮助你更好地理解和应用Scrapy框架&#xff0c;并提升你的爬虫开发技能。 …...

深入浅出Asp.Net Core MVC应用开发系列-AspNetCore中的日志记录

ASP.NET Core 是一个跨平台的开源框架&#xff0c;用于在 Windows、macOS 或 Linux 上生成基于云的新式 Web 应用。 ASP.NET Core 中的日志记录 .NET 通过 ILogger API 支持高性能结构化日志记录&#xff0c;以帮助监视应用程序行为和诊断问题。 可以通过配置不同的记录提供程…...

PHP和Node.js哪个更爽?

先说结论&#xff0c;rust完胜。 php&#xff1a;laravel&#xff0c;swoole&#xff0c;webman&#xff0c;最开始在苏宁的时候写了几年php&#xff0c;当时觉得php真的是世界上最好的语言&#xff0c;因为当初活在舒适圈里&#xff0c;不愿意跳出来&#xff0c;就好比当初活在…...

FFmpeg 低延迟同屏方案

引言 在实时互动需求激增的当下&#xff0c;无论是在线教育中的师生同屏演示、远程办公的屏幕共享协作&#xff0c;还是游戏直播的画面实时传输&#xff0c;低延迟同屏已成为保障用户体验的核心指标。FFmpeg 作为一款功能强大的多媒体框架&#xff0c;凭借其灵活的编解码、数据…...

在Ubuntu中设置开机自动运行(sudo)指令的指南

在Ubuntu系统中&#xff0c;有时需要在系统启动时自动执行某些命令&#xff0c;特别是需要 sudo权限的指令。为了实现这一功能&#xff0c;可以使用多种方法&#xff0c;包括编写Systemd服务、配置 rc.local文件或使用 cron任务计划。本文将详细介绍这些方法&#xff0c;并提供…...

C# 求圆面积的程序(Program to find area of a circle)

给定半径r&#xff0c;求圆的面积。圆的面积应精确到小数点后5位。 例子&#xff1a; 输入&#xff1a;r 5 输出&#xff1a;78.53982 解释&#xff1a;由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982&#xff0c;因为我们只保留小数点后 5 位数字。 输…...

人工智能(大型语言模型 LLMs)对不同学科的影响以及由此产生的新学习方式

今天是关于AI如何在教学中增强学生的学习体验&#xff0c;我把重要信息标红了。人文学科的价值被低估了 ⬇️ 转型与必要性 人工智能正在深刻地改变教育&#xff0c;这并非炒作&#xff0c;而是已经发生的巨大变革。教育机构和教育者不能忽视它&#xff0c;试图简单地禁止学生使…...

JavaScript 数据类型详解

JavaScript 数据类型详解 JavaScript 数据类型分为 原始类型&#xff08;Primitive&#xff09; 和 对象类型&#xff08;Object&#xff09; 两大类&#xff0c;共 8 种&#xff08;ES11&#xff09;&#xff1a; 一、原始类型&#xff08;7种&#xff09; 1. undefined 定…...

stm32wle5 lpuart DMA数据不接收

配置波特率9600时&#xff0c;需要使用外部低速晶振...

云原生安全实战:API网关Envoy的鉴权与限流详解

&#x1f525;「炎码工坊」技术弹药已装填&#xff01; 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】 一、基础概念 1. API网关 作为微服务架构的统一入口&#xff0c;负责路由转发、安全控制、流量管理等核心功能。 2. Envoy 由Lyft开源的高性能云原生…...

Easy Excel

Easy Excel 一、依赖引入二、基本使用1. 定义实体类&#xff08;导入/导出共用&#xff09;2. 写 Excel3. 读 Excel 三、常用注解说明&#xff08;完整列表&#xff09;四、进阶&#xff1a;自定义转换器&#xff08;Converter&#xff09; 其它自定义转换器没生效 Easy Excel在…...