前端基础函数算法整理应用(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…...
Docker 运行 Kafka 带 SASL 认证教程
Docker 运行 Kafka 带 SASL 认证教程 Docker 运行 Kafka 带 SASL 认证教程一、说明二、环境准备三、编写 Docker Compose 和 jaas文件docker-compose.yml代码说明:server_jaas.conf 四、启动服务五、验证服务六、连接kafka服务七、总结 Docker 运行 Kafka 带 SASL 认…...
CMake基础:构建流程详解
目录 1.CMake构建过程的基本流程 2.CMake构建的具体步骤 2.1.创建构建目录 2.2.使用 CMake 生成构建文件 2.3.编译和构建 2.4.清理构建文件 2.5.重新配置和构建 3.跨平台构建示例 4.工具链与交叉编译 5.CMake构建后的项目结构解析 5.1.CMake构建后的目录结构 5.2.构…...
数据链路层的主要功能是什么
数据链路层(OSI模型第2层)的核心功能是在相邻网络节点(如交换机、主机)间提供可靠的数据帧传输服务,主要职责包括: 🔑 核心功能详解: 帧封装与解封装 封装: 将网络层下发…...
【android bluetooth 框架分析 04】【bt-framework 层详解 1】【BluetoothProperties介绍】
1. BluetoothProperties介绍 libsysprop/srcs/android/sysprop/BluetoothProperties.sysprop BluetoothProperties.sysprop 是 Android AOSP 中的一种 系统属性定义文件(System Property Definition File),用于声明和管理 Bluetooth 模块相…...
新能源汽车智慧充电桩管理方案:新能源充电桩散热问题及消防安全监管方案
随着新能源汽车的快速普及,充电桩作为核心配套设施,其安全性与可靠性备受关注。然而,在高温、高负荷运行环境下,充电桩的散热问题与消防安全隐患日益凸显,成为制约行业发展的关键瓶颈。 如何通过智慧化管理手段优化散…...
拉力测试cuda pytorch 把 4070显卡拉满
import torch import timedef stress_test_gpu(matrix_size16384, duration300):"""对GPU进行压力测试,通过持续的矩阵乘法来最大化GPU利用率参数:matrix_size: 矩阵维度大小,增大可提高计算复杂度duration: 测试持续时间(秒&…...
爬虫基础学习day2
# 爬虫设计领域 工商:企查查、天眼查短视频:抖音、快手、西瓜 ---> 飞瓜电商:京东、淘宝、聚美优品、亚马逊 ---> 分析店铺经营决策标题、排名航空:抓取所有航空公司价格 ---> 去哪儿自媒体:采集自媒体数据进…...
iOS性能调优实战:借助克魔(KeyMob)与常用工具深度洞察App瓶颈
在日常iOS开发过程中,性能问题往往是最令人头疼的一类Bug。尤其是在App上线前的压测阶段或是处理用户反馈的高发期,开发者往往需要面对卡顿、崩溃、能耗异常、日志混乱等一系列问题。这些问题表面上看似偶发,但背后往往隐藏着系统资源调度不当…...
【JavaSE】多线程基础学习笔记
多线程基础 -线程相关概念 程序(Program) 是为完成特定任务、用某种语言编写的一组指令的集合简单的说:就是我们写的代码 进程 进程是指运行中的程序,比如我们使用QQ,就启动了一个进程,操作系统就会为该进程分配内存…...
BLEU评分:机器翻译质量评估的黄金标准
BLEU评分:机器翻译质量评估的黄金标准 1. 引言 在自然语言处理(NLP)领域,衡量一个机器翻译模型的性能至关重要。BLEU (Bilingual Evaluation Understudy) 作为一种自动化评估指标,自2002年由IBM的Kishore Papineni等人提出以来,…...
