前端基础函数算法整理应用(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…...

UE5 学习系列(二)用户操作界面及介绍
这篇博客是 UE5 学习系列博客的第二篇,在第一篇的基础上展开这篇内容。博客参考的 B 站视频资料和第一篇的链接如下: 【Note】:如果你已经完成安装等操作,可以只执行第一篇博客中 2. 新建一个空白游戏项目 章节操作,重…...
PHP和Node.js哪个更爽?
先说结论,rust完胜。 php:laravel,swoole,webman,最开始在苏宁的时候写了几年php,当时觉得php真的是世界上最好的语言,因为当初活在舒适圈里,不愿意跳出来,就好比当初活在…...
使用van-uploader 的UI组件,结合vue2如何实现图片上传组件的封装
以下是基于 vant-ui(适配 Vue2 版本 )实现截图中照片上传预览、删除功能,并封装成可复用组件的完整代码,包含样式和逻辑实现,可直接在 Vue2 项目中使用: 1. 封装的图片上传组件 ImageUploader.vue <te…...
【Go】3、Go语言进阶与依赖管理
前言 本系列文章参考自稀土掘金上的 【字节内部课】公开课,做自我学习总结整理。 Go语言并发编程 Go语言原生支持并发编程,它的核心机制是 Goroutine 协程、Channel 通道,并基于CSP(Communicating Sequential Processes࿰…...

论文浅尝 | 基于判别指令微调生成式大语言模型的知识图谱补全方法(ISWC2024)
笔记整理:刘治强,浙江大学硕士生,研究方向为知识图谱表示学习,大语言模型 论文链接:http://arxiv.org/abs/2407.16127 发表会议:ISWC 2024 1. 动机 传统的知识图谱补全(KGC)模型通过…...
相机Camera日志分析之三十一:高通Camx HAL十种流程基础分析关键字汇总(后续持续更新中)
【关注我,后续持续新增专题博文,谢谢!!!】 上一篇我们讲了:有对最普通的场景进行各个日志注释讲解,但相机场景太多,日志差异也巨大。后面将展示各种场景下的日志。 通过notepad++打开场景下的日志,通过下列分类关键字搜索,即可清晰的分析不同场景的相机运行流程差异…...
Axios请求超时重发机制
Axios 超时重新请求实现方案 在 Axios 中实现超时重新请求可以通过以下几种方式: 1. 使用拦截器实现自动重试 import axios from axios;// 创建axios实例 const instance axios.create();// 设置超时时间 instance.defaults.timeout 5000;// 最大重试次数 cons…...
CRMEB 框架中 PHP 上传扩展开发:涵盖本地上传及阿里云 OSS、腾讯云 COS、七牛云
目前已有本地上传、阿里云OSS上传、腾讯云COS上传、七牛云上传扩展 扩展入口文件 文件目录 crmeb\services\upload\Upload.php namespace crmeb\services\upload;use crmeb\basic\BaseManager; use think\facade\Config;/*** Class Upload* package crmeb\services\upload* …...

c#开发AI模型对话
AI模型 前面已经介绍了一般AI模型本地部署,直接调用现成的模型数据。这里主要讲述讲接口集成到我们自己的程序中使用方式。 微软提供了ML.NET来开发和使用AI模型,但是目前国内可能使用不多,至少实践例子很少看见。开发训练模型就不介绍了&am…...

Java面试专项一-准备篇
一、企业简历筛选规则 一般企业的简历筛选流程:首先由HR先筛选一部分简历后,在将简历给到对应的项目负责人后再进行下一步的操作。 HR如何筛选简历 例如:Boss直聘(招聘方平台) 直接按照条件进行筛选 例如:…...