掌握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的函数和常用数据结构有更好的理解。

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

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

相关文章

MySQL事务MVCC详解

一、概述 MVCC (MultiVersion Concurrency Control) 叫做多版本并发控制机制。主要是通过数据多版本来实现读-写分离&#xff0c;做到即使有读写冲突时&#xff0c;也能做到不加锁&#xff0c;非阻塞并发读&#xff0c;从而提高数据库并发性能。 MVCC只在已提交读&#xff08…

行业追踪,2023-10-18

自动复盘 2023-10-18 凡所有相&#xff0c;皆是虚妄。若见诸相非相&#xff0c;即见如来。 k 线图是最好的老师&#xff0c;每天持续发布板块的rps排名&#xff0c;追踪板块&#xff0c;板块来开仓&#xff0c;板块去清仓&#xff0c;丢弃自以为是的想法&#xff0c;板块去留让…

Docker是一个流行的容器化平台,用于构建、部署和运行应用程序。

文章目录 Web应用程序数据库服务器微服务应用开发环境持续集成和持续部署 (CI/CD)应用程序依赖项云原生应用程序研究和教育 &#x1f388;个人主页&#xff1a;程序员 小侯 &#x1f390;CSDN新晋作者 &#x1f389;欢迎 &#x1f44d;点赞✍评论⭐收藏 ✨收录专栏&#xff1a;…

mysql查看连接池的命令

查看实时连接的个数 &#xff08;瞬时值&#xff09; SHOW STATUS LIKE Threads_connected; 查看具体的链接信息 show full processlist; 数据库链接池常见的报错 Cannot create PoolableConnectionFactory (Data source rejected establishment of connection, message fr…

Android Fragment 基本概念和基本使用

Android Fragment 基本概念和基本使用 一、基本概念 Fragment&#xff0c;简称碎片&#xff0c;是Android 3.0&#xff08;API 11&#xff09;提出的&#xff0c;为了兼容低版本&#xff0c;support-v4库中也开发了一套Fragment API&#xff0c;最低兼容Android 1.6。 过去s…

Swift使用Embassy库进行数据采集:热点新闻自动生成器

概述 爬虫程序是一种可以自动从网页上抓取数据的软件。爬虫程序可以用于各种目的&#xff0c;例如搜索引擎、数据分析、内容聚合等。本文将介绍如何使用Swift语言和Embassy库编写一个简单的爬虫程序&#xff0c;该程序可以从新闻网站上采集热点信息&#xff0c;并生成一个简单…

Redis的五大基础数据类型

String 字符串类型&#xff0c;通过set关键字和get关键字来设置字符串键值对和获取字符串键值对。 hash 哈希类型&#xff0c;结构和Map<String,Map<String,stirng>>类似。 使用hset来设置哈希&#xff0c;使用hget来获取哈希&#xff0c;hget要精确到第二个key…

苍穹外卖(八) 使用WebSocket协议完成来单提醒及客户催单功能

WebSocket介绍 WebSocket 是基于 TCP 的一种新的网络协议。它实现了浏览器与服务器全双工通信(双向传输)——浏览器和服务器只需要完成一次握手&#xff0c;两者之间就可以创建持久性的连接&#xff0c; 并进行双向数据传输。 HTTP协议和WebSocket协议对比&#xff1a; HTTP…

2022年下半年 软件设计师 上午试卷(前21题)

以下关于RISC&#xff08;精简指令集计算机&#xff09;特点的叙述中&#xff0c;错误的是 &#xff08;1&#xff09; 。 &#xff08;1&#xff09; A. 对存储器操作进行限制&#xff0c;使控制简单化 B. 指令种类多&#xff0c;指令功能强 C. 设置大量通用寄存器 D. 选…

【算法|动态规划No.23】leetcode376. 摆动序列

个人主页&#xff1a;兜里有颗棉花糖 欢迎 点赞&#x1f44d; 收藏✨ 留言✉ 加关注&#x1f493;本文由 兜里有颗棉花糖 原创 收录于专栏【手撕算法系列专栏】【LeetCode】 &#x1f354;本专栏旨在提高自己算法能力的同时&#xff0c;记录一下自己的学习过程&#xff0c;希望…

【C#】【winform】Microsoft Visual Studio Installer Project 打包应用程序全部过程

提示&#xff1a;只针对扩展包来完成打包的工作过程。 文章目录 前言一、Microsoft Visual Studio Installer Project 是什么&#xff1f;二、安装1.安装Microsoft Visual Studio Installer Project 三、安开始打包1.添加setup1.在解决方案上面右键&#xff0c;添加-新建项目2.…

H5+Vue3编写官网,并打包发布到同一个域名下

背景 因为html5有利于搜索引擎抓取和收录我们网站更多的内容&#xff0c;对SEO很友好&#xff0c;可以为网站带来更多的流量,并且多端适配&#xff0c;兼容性和性能都非常不错&#xff0c;所以使用h5来编写官网首页。 因为用户个人中心可以通过官网跳转&#xff0c;不需要被浏…

双目视觉实战--单视图测量方法

目录 一.简介 二、2D变换 1. 等距变换&#xff08;欧式变换&#xff09; 2. 相似变换 3. 仿射变换 4. 射影变换&#xff08;透视变换&#xff09; 5. 结论 三、影消点与影消线 1. 平面上的线 2. 直线的交点 3. 2D无穷远点 4. 无穷远直线 5. 无穷远点的透视变换与仿…

【01】LVGL-CodeBlock模拟器安装 | LVGL工程下载 | PC端模拟LVGL步骤

LVGL模拟器 1.LVGL模拟器介绍2.Windows环境搭建CodeBlock及获取LVGL工程3.PC端模拟LVGL4.总结 1.LVGL模拟器介绍 LVGL模拟器&#xff1a;使用PC端软件模拟LVGL运行&#xff0c;而不需要任何嵌入式硬件。优点&#xff1a;便于学习、跨平台协同开发 2.Windows环境搭建CodeBlock及…

【Python、Qt】使用QItemDelegate实现单元格的富文本显示+复选框功能

[2023-10-19]代码已更新&#xff0c;完善了单元格宽度不足时省略号的显示问题。 [2023-10-18]代码已更新&#xff0c;追加单元格的文本对齐功能(使用成员函数QStandardItem.setTextAlignment设置单元格的Align。 主打一个 折磨 坑多 陪伴。代码为Python&#xff0c;C的就自己逐…

Python万圣节蝙蝠

目录 系列文章 前言 蝙蝠 程序设计 程序分析 运行结果 尾声 系列文章 序号文章目录直达链接1浪漫520表白代码https://want595.blog.csdn.net/article/details/1306668812满屏表白代码https://want595.blog.csdn.net/article/details/1297945183跳动的爱心https://want5…

云务器迁移(腾讯云>华为云)

自己平时除了写些bug外还喜欢玩玩服务器&#xff0c;这不前几年买了一个域名&#xff0c;当时服务器买的是阿里云的&#xff0c;想着域名备案挺麻烦的就一直用着&#xff0c;只是在服务器到期后会重新购买其他运营商的&#xff08;关键是续不起&#x1f92b;&#xff09; 这不最…

C/C++ 快速入门

参考&#xff1a;https://blog.csdn.net/gao_zhennan/article/details/128769439 1 下载Visual Studio Code并安装中文插件&#xff0c;此处不再叙述 2 插件安装C/C插件 3 使用快捷键【Ctr ~】打打开终端 验证并未安装编译器 4 我们即将使用【MinGW-64】做为编译器 https:…

程序环境和预处理

导言&#xff1a; 在编写代码的过程中&#xff0c;我们一般都是在一些图形化软件的编译器中实现&#xff0c;编译器帮我们实现了很多操作&#xff0c;这里就一些简单的过程进行说明。本文主要阐述了c语言程序的编译链接以及一些预处理知识&#xff0c;和宏定义的使用。 目录 …

IDEA提高工作效率的实用技巧

IDEA是一款备受开发者喜爱的集成开发环境&#xff0c;它提供了许多实用的功能&#xff0c;可以帮助我们更快速、更高效地编写代码。本文将介绍一些IDEA的使用技巧提高工作效率的实用技巧。 验证正则表达式 要验证编写的正则表达式是否正确&#xff0c;只需将光标放在要检查的…