前端基础函数算法整理应用(sort+reduce+date+双重for循环)
文章目录
- 基础函数算法
- reduce 函数算法
- sort 函数算法
- 时间排序
- 1. 对日期字符串数组进行排序
- 2. 对包含日期对象的数组进行排序
- 3. 对包含时间戳的数组进行排序
- 4. 对包含日期时间信息的对象数组进行排序
基础函数算法
一、排序算法
- 冒泡排序(Bubble Sort)
- 原理:
- 比较相邻的元素。如果第一个比第二个大(升序),就交换它们两个。
- 对每一对相邻元素作同样的工作,从开始第一对到结尾的最后一对。这步做完后,最后的元素会是最大的数。
- 针对所有的元素重复以上的步骤,除了最后一个。
- 持续每次对越来越少的元素重复上面的步骤,直到没有任何一对数字需要比较。
- 代码示例:
- 原理:
function bubbleSort(arr) {var len = arr.length;for (var i = 0; i < len - 1; i++) {for (var j = 0; j < len - 1 - i; j++) {if (arr[j] > arr[j + 1]) {// 交换位置var temp = arr[j];arr[j] = arr[j + 1];arr[j + 1] = temp;}}}return arr;
}
var arr = [5, 4, 3, 2, 1];
console.log(bubbleSort(arr));
- 选择排序(Selection Sort)
- 原理:
- 首先在未排序序列中找到最小(大)元素,存放到排序序列的起始位置。
- 然后,再从剩余未排序元素中继续寻找最小(大)元素,然后放到已排序序列的末尾。
- 以此类推,直到所有元素均排序完毕。
- 代码示例:
- 原理:
function selectionSort(arr) {var len = arr.length;for (var i = 0; i < len - 1; i++) {var minIndex = i;for (var j = i + 1; j < len; j++) {if (arr[j] < arr[minIndex]) {minIndex = j;}}if (minIndex!== i) {var temp = arr[i];arr[i] = arr[minIndex];arr[minIndex] = temp;}}return arr;
}
var arr = [5, 4, 3, 2, 1];
console.log(selectionSort(arr));
- 插入排序(Insertion Sort)
- 原理:
- 从第二个元素开始(索引为1),将当前元素与前面已排序的元素进行比较。
- 如果当前元素小于前面的元素,则将前面的元素后移一位,然后继续向前比较,直到找到合适的位置插入当前元素。
- 重复这个过程,直到所有元素都插入到正确的位置。
- 代码示例:
- 原理:
function insertionSort(arr) {for (var i = 1; i < arr.length; i++) {var current = arr[i];var j = i - 1;while (j >= 0 && arr[j] > current) {arr[j + 1] = arr[j];j--;}arr[j + 1] = current;}return arr;
}
var arr = [5, 4, 3, 2, 1];
console.log(insertionSort(arr));
二、搜索算法
- 线性搜索(Linear Search)
- 原理:
- 从数组的第一个元素开始,逐个检查每个元素,直到找到目标元素或者遍历完整个数组。
- 代码示例:
- 原理:
function linearSearch(arr, target) {for (var i = 0; i < arr.length; i++) {if (arr[i] === target) {return i;}}return -1;
}
var arr = [1, 3, 5, 7, 9];
console.log(linearSearch(arr, 5));
- 二分搜索(Binary Search,要求数组是有序的)
- 原理:
- 首先,比较目标元素和数组中间元素的大小。
- 如果目标元素等于中间元素,则搜索结束。
- 如果目标元素小于中间元素,则在数组的左半部分继续搜索。
- 如果目标元素大于中间元素,则在数组的右半部分继续搜索。
- 重复这个过程,直到找到目标元素或者确定目标元素不存在。
- 代码示例:
- 原理:
function binarySearch(arr, target) {var low = 0;var high = arr.length - 1;while (low <= high) {var mid = Math.floor((low + high)/2);if (arr[mid] === target) {return mid;} else if (arr[mid] < target) {low = mid + 1;} else {high = mid - 1;}}return -1;
}
var arr = [1, 3, 5, 7, 9];
console.log(binarySearch(arr, 5));
三、字符串操作算法
- 字符串反转(String Reversal)
- 原理:
- 可以将字符串转换为数组,然后使用数组的反转方法,最后再将数组转换回字符串。或者通过逐个字符交换的方式来反转字符串。
- 代码示例(使用数组方法):
- 原理:
function reverseString(str) {return str.split("").reverse().join("");
}
console.log(reverseString("hello"));
- 代码示例(逐个交换):
function reverseString2(str) {var newStr = "";for (var i = str.length - 1; i >= 0; i--) {newStr += str[i];}return newStr;
}
console.log(reverseString2("hello"));
- 字符串匹配(简单的模式匹配,例如判断一个字符串是否包含另一个字符串)
- 原理:
- 可以使用JavaScript原生的
indexOf方法来检查一个字符串是否包含另一个字符串。如果indexOf返回的值大于等于0,则表示包含。
- 可以使用JavaScript原生的
- 代码示例:
- 原理:
function containsString(str, subStr) {return str.indexOf(subStr) >= 0;
}
console.log(containsString("hello world", "world"));
reduce 函数算法
- 默认排序(字符串Unicode码点排序)
- 原理:
- 当
sort方法没有传入比较函数时,它会将数组元素转换为字符串,并按照Unicode码点顺序对这些字符串进行排序。对于数字数组,这种排序方式可能不符合预期。例如,[10, 2, 30]排序后可能得到[10, 2, 30],因为在Unicode码点顺序下,"10"会排在"2"之前。
- 当
- 代码示例:
- 原理:
const arr = ["apple", "banana", "cherry"];
arr.sort();
console.log(arr);
- 这里
arr数组中的字符串元素会按照字典序(即字符的Unicode码点顺序)进行排序,结果为["apple", "banana", "cherry"]。
- 数字排序
- 原理:
- 为了正确地对数字数组进行排序,需要传入一个比较函数。比较函数接受两个参数
a和b,如果a小于b,则返回一个小于0的值;如果a等于b,则返回0;如果a大于b,则返回一个大于0的值。对于升序排序,通常返回a - b。
- 为了正确地对数字数组进行排序,需要传入一个比较函数。比较函数接受两个参数
- 代码示例:
- 原理:
const numbers = [10, 2, 30];
numbers.sort((a, b) => a - b);
console.log(numbers);
- 在这个例子中,比较函数
(a, b) => a - b会计算a和b的差值。当a小于b时,a - b小于0,数组会将a排在b之前,最终得到升序排列的数组[2, 10, 30]。
- 降序排序
- 原理:
- 与升序排序类似,只是比较函数返回
b - a,这样当b大于a时,返回值大于0,b就会排在a之前。
- 与升序排序类似,只是比较函数返回
- 代码示例:
- 原理:
const numbers = [10, 2, 30];
numbers.sort((a, b) => b - a);
console.log(numbers);
- 这里的比较函数
(a, b) => b - a使得数组按照降序排列,结果为[30, 10, 2]。
- 对象数组排序
- 原理:
- 对于对象数组,可以根据对象的某个属性值进行排序。比较函数会根据对象属性的值来比较两个对象。
- 代码示例:
- 原理:
const people = [{ name: "Alice", age: 25 },{ name: "Bob", age: 30 },{ name: "Charlie", age: 20 }
];
// 根据年龄升序排序
people.sort((a, b) => a.age - b.age);
console.log(people);
- 在这个对象数组中,比较函数
(a, b) => a.age - b.age根据对象的age属性进行比较。当a.age小于b.age时,a会排在b之前,最终得到按照年龄升序排列的对象数组[{"name": "Charlie", "age": 20}, {"name": "Alice", "age": 25}, {"name": "Bob", "age": 30}]。
- 复杂条件排序(多个属性排序)
- 原理:
- 有时候需要根据多个属性对对象数组进行排序。可以在比较函数中先根据一个属性进行比较,如果该属性值相等,再根据另一个属性进行比较。
- 代码示例:
- 原理:
const students = [{ name: "Alice", grade: "A", age: 20 },{ name: "Bob", grade: "B", age: 22 },{ name: "Charlie", grade: "A", age: 21 }
];
// 先根据成绩升序排序,如果成绩相同,再根据年龄升序排序
students.sort((a, b) => {if (a.grade === b.grade) {return a.age - b.age;}if (a.grade < b.grade) {return -1;}return 1;
});
console.log(students);
- 这个比较函数首先比较对象的
grade属性。如果grade属性相同,就比较age属性。最终得到按照成绩升序排列,成绩相同则按照年龄升序排列的对象数组[{"name": "Bob", "grade": "B", "age": 22}, {"name": "Alice", "grade": "A", "age": 20}, {"name": "Charlie", "grade": "A", "age": 21}]。
sort 函数算法
- 默认排序(字符串Unicode码点排序)
- 原理:
- 当
sort方法没有传入比较函数时,它会将数组元素转换为字符串,并按照Unicode码点顺序对这些字符串进行排序。对于数字数组,这种排序方式可能不符合预期。例如,[10, 2, 30]排序后可能得到[10, 2, 30],因为在Unicode码点顺序下,"10"会排在"2"之前。
- 当
- 代码示例:
- 原理:
const arr = ["apple", "banana", "cherry"];
arr.sort();
console.log(arr);
- 这里
arr数组中的字符串元素会按照字典序(即字符的Unicode码点顺序)进行排序,结果为["apple", "banana", "cherry"]。
- 数字排序
- 原理:
- 为了正确地对数字数组进行排序,需要传入一个比较函数。比较函数接受两个参数
a和b,如果a小于b,则返回一个小于0的值;如果a等于b,则返回0;如果a大于b,则返回一个大于0的值。对于升序排序,通常返回a - b。
- 为了正确地对数字数组进行排序,需要传入一个比较函数。比较函数接受两个参数
- 代码示例:
- 原理:
const numbers = [10, 2, 30];
numbers.sort((a, b) => a - b);
console.log(numbers);
- 在这个例子中,比较函数
(a, b) => a - b会计算a和b的差值。当a小于b时,a - b小于0,数组会将a排在b之前,最终得到升序排列的数组[2, 10, 30]。
- 降序排序
- 原理:
- 与升序排序类似,只是比较函数返回
b - a,这样当b大于a时,返回值大于0,b就会排在a之前。
- 与升序排序类似,只是比较函数返回
- 代码示例:
- 原理:
const numbers = [10, 2, 30];
numbers.sort((a, b) => b - a);
console.log(numbers);
- 这里的比较函数
(a, b) => b - a使得数组按照降序排列,结果为[30, 10, 2]。
- 对象数组排序
- 原理:
- 对于对象数组,可以根据对象的某个属性值进行排序。比较函数会根据对象属性的值来比较两个对象。
- 代码示例:
- 原理:
const people = [{ name: "Alice", age: 25 },{ name: "Bob", age: 30 },{ name: "Charlie", age: 20 }
];
// 根据年龄升序排序
people.sort((a, b) => a.age - b.age);
console.log(people);
- 在这个对象数组中,比较函数
(a, b) => a.age - b.age根据对象的age属性进行比较。当a.age小于b.age时,a会排在b之前,最终得到按照年龄升序排列的对象数组[{"name": "Charlie", "age": 20}, {"name": "Alice", "age": 25}, {"name": "Bob", "age": 30}]。
- 复杂条件排序(多个属性排序)
- 原理:
- 有时候需要根据多个属性对对象数组进行排序。可以在比较函数中先根据一个属性进行比较,如果该属性值相等,再根据另一个属性进行比较。
- 代码示例:
- 原理:
const students = [{ name: "Alice", grade: "A", age: 20 },{ name: "Bob", grade: "B", age: 22 },{ name: "Charlie", grade: "A", age: 21 }
];
// 先根据成绩升序排序,如果成绩相同,再根据年龄升序排序
students.sort((a, b) => {if (a.grade === b.grade) {return a.age - b.age;}if (a.grade < b.grade) {return -1;}return 1;
});
console.log(students);
- 这个比较函数首先比较对象的
grade属性。如果grade属性相同,就比较age属性。最终得到按照成绩升序排列,成绩相同则按照年龄升序排列的对象数组[{"name": "Bob", "grade": "B", "age": 22}, {"name": "Alice", "grade": "A", "age": 20}, {"name": "Charlie", "grade": "A", "age": 21}]。
时间排序
在JavaScript中,如果你有一个包含时间信息(如日期)的数组,想要对其进行排序,可以使用Array.prototype.sort方法,并结合Date对象来实现。以下是几种常见的基于时间的排序场景及实现方法:
1. 对日期字符串数组进行排序
假设数组中的元素是日期字符串,格式为YYYY - MM - DD。
// 日期字符串数组
const dateStrings = ["2023-10-05", "2023-09-15", "2023-11-20"];// 排序函数
dateStrings.sort((a, b) => {return new Date(a) - new Date(b);
});console.log(dateStrings);
在上述代码中:
sort方法接受一个比较函数,该函数接收两个参数a和b。new Date(a)和new Date(b)将日期字符串转换为Date对象。- 通过
new Date(a) - new Date(b)计算两个日期对象的时间差,如果a的日期早于b,则返回一个负数,sort方法会将a排在b之前;如果时间差为0,则保持原顺序;如果a的日期晚于b,则返回一个正数,sort方法会将a排在b之后。
2. 对包含日期对象的数组进行排序
假设数组中直接存储的是Date对象。
// 日期对象数组
const dates = [new Date("2023-10-05"),new Date("2023-09-15"),new Date("2023-11-20")
];// 排序函数
dates.sort((a, b) => {return a - b;
});console.log(dates.map(date => date.toISOString()));
这里,Date对象之间可以直接进行减法运算,其结果是两个日期之间相差的毫秒数。同样,比较函数根据这个差值来确定元素的顺序。
3. 对包含时间戳的数组进行排序
如果数组中的元素是时间戳(从1970年1月1日00:00:00 UTC开始到指定时间的毫秒数)。
// 时间戳数组
const timestamps = [1696502400000, 1694774400000, 1699286400000];// 排序函数
timestamps.sort((a, b) => {return a - b;
});console.log(timestamps.map(timestamp => new Date(timestamp).toISOString()));
时间戳本身就是数字,直接相减就可以得到正确的比较结果,sort方法会根据这个结果对数组进行排序。
4. 对包含日期时间信息的对象数组进行排序
假设数组中的对象包含日期时间信息,例如:
const events = [{ name: 'Event1', date: '2023-10-05' },{ name: 'Event2', date: '2023-09-15' },{ name: 'Event3', date: '2023-11-20' }
];events.sort((a, b) => {return new Date(a.date) - new Date(b.date);
});console.log(events);
在这个例子中,比较函数从对象中提取日期字符串,将其转换为Date对象后进行比较,从而实现对对象数组的排序。
相关文章:
前端基础函数算法整理应用(sort+reduce+date+双重for循环)
文章目录 基础函数算法reduce 函数算法sort 函数算法时间排序1. 对日期字符串数组进行排序2. 对包含日期对象的数组进行排序3. 对包含时间戳的数组进行排序4. 对包含日期时间信息的对象数组进行排序 基础函数算法 一、排序算法 冒泡排序(Bubble Sort) …...
鸿蒙MPChart图表自定义(六)在图表中绘制游标
在鸿蒙开发中,MPChart 是一个非常强大的图表库,它可以帮助我们创建各种精美的图表。今天,我们将继续探索鸿蒙MPChart的自定义功能,重点介绍如何在图表中绘制游标。 OpenHarmony三方库中心仓 一、效果演示 以下是效果演示图&…...
poi-tl+kkviewfile实现生成pdf业务报告
需求背景,需要把ai生成的一些业务数据,生成一份pdf报告 需求分析 简单来说,就是json生成pdf的方案。 直接生成pdf。适合一些pdf样式简单的场景,一般就是纯文本按序渲染,或者是纯表格。如果需要一些复杂的排布&#x…...
【Uniapp-Vue3】scroll-view可滚动视图区域组件
如果我们有一个区域有限的大盒子(黑),而我们要在盒子中装的东西(灰)过多,我们就会用到滚动视图: 表现在代码上就是下面这个样子: <template><view class"scrollView&…...
asp.net core webapi中的数据注解与数据验证
在这一课中,主要讲解了如何在 Web API 中使用数据注解(Data Annotations)和进行数据验证,以确保请求数据的有效性和完整性。 在 Web API 中,数据验证是确保客户端传递的数据符合业务规则和格式要求的关键步骤。数据注…...
PixPin—— 高效截图工具的下载与使用攻略
在日常的工作和学习中,一款好用的截图工具能极大地提高我们的效率。今天就来给大家介绍一款功能强大的截图工具 ——PixPin。 下载篇 PixPin 的下载非常简单,只需访问下载网站,在首页就能找到适合你操作系统的下载链接。如果你使用的是 Win…...
Go语言的 的多态性(Polymorphism)基础知识
Go语言的多态性(Polymorphism)基础知识 在编程语言中,多态性是一个核心概念,它允许同一接口被不同的数据类型所实现,从而在不影响代码结构的情况下增强代码的灵活性和可扩展性。在Go语言中,多态性通过接口…...
Vue框架主要用来做什么?Vue框架的好处和特性.
在快速发展的互联网时代,前端开发技术的变革日新月异,为开发者带来了前所未有的机遇与挑战。Vue.js,作为前端开发领域的一颗璀璨新星,以其轻量级、高效灵活的特性,赢得了广大开发者的青睐。本文将深入探讨Vue框架的主要…...
科普CMOS传感器的工作原理及特点
在当今数字化成像的时代,图像传感器无疑是幕后的关键 “功臣”,它宛如一位神奇的 “光影魔法师”,通过光电效应这一奇妙的物理现象,将光子巧妙地转换成电荷,为图像的诞生奠定基础。而在众多类型的图像传感器中…...
tensorflow 内存错误
使用tensorflow训练多个模型时,训练过程中容易出现内存错误,在这里记录一下解决办法。希望能帮到各位。 2025-01-02 22:31:03.489713: W tensorflow/core/common_runtime/bfc_allocator.cc:275] Allocator (GPU_0_bfc) ran out of memory trying to all…...
spring boot解决swagger中的v2/api-docs泄露漏洞
在配置文件中添加以下配置 #解决/v2/api-docs泄露漏洞 springfox:documentation:swagger-ui:enabled: falseauto-startup: false 处理前: 处理后:...
计算机网络 (25)IPV6
前言 IPv6,全称为“互联网协议第6版”(Internet Protocol Version 6),是由互联网工程任务组(IETF)设计的用于替代IPv4的下一代IP协议。 一、产生背景 IPv4,即互联网协议第4版,是现行…...
小程序组件 —— 30 组件 - 背景图片的使用
在编写小程序的样式文件时,可以使用 background-image 属性来设置元素的背景图像;但是这个属性在微信小程序中使用时存在坑; 注意事项:微信小程序中的 background-iamge 不支持本地路径!需要使用网络图片,…...
《Opencv》信用卡信息识别项目
目录 一、项目介绍 二、数据材料介绍 1、模板图片(1张) 2、需要处理的信用卡图片(5张) 三、实现过程 1、导入需要用到的库 2、设置命令行参数 3、模板图像中数字的定位处理 4、信用卡图像处理 5、模板匹配 四、总结 一…...
Matlab贝叶斯估计MCMC分析药物对不同种群生物生理指标数据评估可视化
全文链接:https://tecdat.cn/?p38756 摘要:本文着重探讨了如何利用Matlab实现贝叶斯估计。阐述了具体的实现流程,涵盖数据加载、先验常数设定、马尔可夫链蒙特卡洛(MCMC)属性指定、模型构建、运行链条以及结果查看等环…...
java 转义 反斜杠 Unexpected internal error near index 1
代码: String str"a\\c"; //出现异常,Unexpected internal error near index 1 //System.out.println(str.replaceAll("\\", "c"));//以下三种都正确 System.out.println(str.replace(\\, c)); System.out.println(str.r…...
网络安全常见的问题
1. 什么是 DDoS 攻击?如何防范? 答:DDoS 攻击是指利用大量的计算机或者其他网络设备,同时向目标网络或者服务器 发送 大量的数据流量,以致其无法正常工作,从而导致网络瘫痪或者服务器宕机的攻击行 为。 …...
在ubuntu22.04中使用bear命令追踪内核编译报错的原因分析和解决方案
1.说明 我在ubuntu22.04中使用bear命令追踪内核编译时发生如下报错: 如图,在链接名为libexec.so的动态库时发生错误 2 分析及解决过程 打印变量 LIB 发现其为空,也就是说 bear会去 /usr/bear/ 去找 libexec.so 去看一下 /usr/bear/是否存…...
【软考网工笔记】操作系统管理与配置——Windows
1-域名解析 Cache 域名解析 Cache 即 DNS 快取,DNS 快取需要应用客户机域名解析服务 DNSClient,其进程名为 svchost.exe -k NetworkService,可以输入命令:net stop dnscache 将其结束。原理是在 Windows 系统中,加入了…...
vue3 css实现文字输出带光标显示,文字输出完毕,光标消失的效果
Vue实现过程如下: <template><div ><p ref"dom_element" class"typing" :class"{over_fill: record_input_over}"></p></div> </template> <script setup> import {onMounted, ref} from…...
(LeetCode 每日一题) 3442. 奇偶频次间的最大差值 I (哈希、字符串)
题目:3442. 奇偶频次间的最大差值 I 思路 :哈希,时间复杂度0(n)。 用哈希表来记录每个字符串中字符的分布情况,哈希表这里用数组即可实现。 C版本: class Solution { public:int maxDifference(string s) {int a[26]…...
Linux应用开发之网络套接字编程(实例篇)
服务端与客户端单连接 服务端代码 #include <sys/socket.h> #include <sys/types.h> #include <netinet/in.h> #include <stdio.h> #include <stdlib.h> #include <string.h> #include <arpa/inet.h> #include <pthread.h> …...
椭圆曲线密码学(ECC)
一、ECC算法概述 椭圆曲线密码学(Elliptic Curve Cryptography)是基于椭圆曲线数学理论的公钥密码系统,由Neal Koblitz和Victor Miller在1985年独立提出。相比RSA,ECC在相同安全强度下密钥更短(256位ECC ≈ 3072位RSA…...
【位运算】消失的两个数字(hard)
消失的两个数字(hard) 题⽬描述:解法(位运算):Java 算法代码:更简便代码 题⽬链接:⾯试题 17.19. 消失的两个数字 题⽬描述: 给定⼀个数组,包含从 1 到 N 所有…...
CentOS下的分布式内存计算Spark环境部署
一、Spark 核心架构与应用场景 1.1 分布式计算引擎的核心优势 Spark 是基于内存的分布式计算框架,相比 MapReduce 具有以下核心优势: 内存计算:数据可常驻内存,迭代计算性能提升 10-100 倍(文档段落:3-79…...
跨链模式:多链互操作架构与性能扩展方案
跨链模式:多链互操作架构与性能扩展方案 ——构建下一代区块链互联网的技术基石 一、跨链架构的核心范式演进 1. 分层协议栈:模块化解耦设计 现代跨链系统采用分层协议栈实现灵活扩展(H2Cross架构): 适配层…...
python如何将word的doc另存为docx
将 DOCX 文件另存为 DOCX 格式(Python 实现) 在 Python 中,你可以使用 python-docx 库来操作 Word 文档。不过需要注意的是,.doc 是旧的 Word 格式,而 .docx 是新的基于 XML 的格式。python-docx 只能处理 .docx 格式…...
CMake 从 GitHub 下载第三方库并使用
有时我们希望直接使用 GitHub 上的开源库,而不想手动下载、编译和安装。 可以利用 CMake 提供的 FetchContent 模块来实现自动下载、构建和链接第三方库。 FetchContent 命令官方文档✅ 示例代码 我们将以 fmt 这个流行的格式化库为例,演示如何: 使用 FetchContent 从 GitH…...
【碎碎念】宝可梦 Mesh GO : 基于MESH网络的口袋妖怪 宝可梦GO游戏自组网系统
目录 游戏说明《宝可梦 Mesh GO》 —— 局域宝可梦探索Pokmon GO 类游戏核心理念应用场景Mesh 特性 宝可梦玩法融合设计游戏构想要素1. 地图探索(基于物理空间 广播范围)2. 野生宝可梦生成与广播3. 对战系统4. 道具与通信5. 延伸玩法 安全性设计 技术选…...
Angular微前端架构:Module Federation + ngx-build-plus (Webpack)
以下是一个完整的 Angular 微前端示例,其中使用的是 Module Federation 和 npx-build-plus 实现了主应用(Shell)与子应用(Remote)的集成。 🛠️ 项目结构 angular-mf/ ├── shell-app/ # 主应用&…...
