JS的排序算法高阶函数及字符串的方法_js高阶函数冒泡排序-优快云博客

本文深入讲解了冒泡排序、选择排序及快速排序等经典排序算法的实现原理与代码实现，并探讨了JavaScript高阶函数的应用，如forEach、map、reduce等在数组操作中的高效使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

冒泡排序 function maopao(arr) {
for(var i=0;i<arr.length-1;i++){
for(var j=0,temp;j<arr.length-1-i;j++){
if(arr[j]>arr[j+1]){
temp=arr[j+1]
arr[j+1]=arr[j]
arr[j]=temp
}
}
}
return arr
}

选择排序

外层循环-1,为什么?因为最后一个数没有值可以比较

一开始选定下标为i的值(起始值)是最大值

一轮循环结束后如果找到最大值则两者交换位置

快速排序

利用递归

如果arr长度小于二则返回arr

若大于二,则找到中间数下标并取出值

准备两个空数组

让数组里的数与中间数比较,小于中间数的放在左边,反之放在右边

将左右两边的数组拼接起来

function quickSort(arr) {
if(arr.length<2){
return arr
}
var minddleIndex=parseInt(arr.length/2)
var minddelValue=arr.splice(minddleIndex,1)[0]
var left=[],right=[]
for(var i=0;i<arr.length;i++){
if (arr[i]>minddelValue) {
right.push(arr[i])
}else{
left.push(arr[i])
}
}
return quickSort(left).concat(minddelValue,quickSort(right))
}

高阶函数

ES:ecmascript 定义语法规范

高阶函数:ES5推出对数组的增强

forEach() map() some() every() filter() reduce()

forEach()

只能做遍历,返回undefined,没有返回值,不能被中断,如果一定要中断,可以使用异常捕获+throw抛出异常

try ... catch 捕获异常,性能比较差,尽量少使用,可以用在网络连接的地方

var arr=[11,22,33,44,55,66]
try{
var res=arr.forEach( (item,index) =>{
console.log(item,index);
if(index==2){
throw new Error('制造异常')
}
})
}catch(error){

}

map()

也可以用作数组遍历,它会返回一个新的数组,数组的内容,跟回调函数的返回结果有关

var arr=[11,22,33,44,55,66]
var res =arr.map((item,index,a/*形参名*/)=>{
console.log(item,index,a);
return item*10
})
console.log(res);
/*
11 0 [11, 22, 33, 44, 55, 66]
22 1 [11, 22, 33, 44, 55, 66]
33 2 [11, 22, 33, 44, 55, 66]
44 3 [11, 22, 33, 44, 55, 66]
55 4 [11, 22, 33, 44, 55, 66]
66 5 [11, 22, 33, 44, 55, 66]
返回值 item*10 [110, 220, 330, 440, 550, 660]
*/

some()

如果数组的成员至少有一个满足了当前的条件,则返回true 默认返回false

var arr=[11,22,33,44,55,66]
        var res=arr.some((item,index,a)=>{
            return item>50
        })
        console.log(res);//true

every()

如果数组的成员,都满足了当前的条件,则返回true 默认返回false

var arr=[11,22,33,44,55,66]
        var res=arr.every((item,index,a)=>{
            return item>50
        })
        console.log(res);//false

filter()

在css3中是滤镜属性,会让图片变灰暗

过滤: 返回是一个新的数组,数组的内容根据条件决定个数

var arr=[11,22,33,44,55,66]
        var res=arr.filter((item,index,a)=>{
            return item>30
        })
        console.log(res);//[33, 44, 55, 66]

reduce()

可以用作数组求和或者求积

信息搜索

获取页面上的元素

遍历数组,把数据渲染到页面上

点击搜索拿到内容进行匹配

把搜索到的新数据渲染到页面

table,tr,td,th{
            border: 1px solid #000;
            text-align: center;
        }
        table{
            width: 400px;
            border-collapse: collapse;
            border-spacing: 0;
        }

<input type="text" id="txt"><button id="search">搜索</button>
    <table>
        <thead>
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
            </tr>
        </thead>
        <tbody id="content">

        </tbody>
    </table>

var user=[
            {id:001,name:'张三',age:20,sex:'男'},
            {id:002,name:'李四',age:21,sex:'男'},
            {id:003,name:'王五',age:22,sex:'男'},
            {id:004,name:'赵六',age:23,sex:'男'},
            {id:005,name:'露西',age:24,sex:'女'},
            {id:006,name:'郑妮',age:25,sex:'女'},
            {id:007,name:'李丽',age:26,sex:'女'}
        ]
        //获取页面上的元素
        var oTxt=document.getElementById("txt")
        var oSearch=document.getElementById("search")
        var oCentent=document.getElementById("content")
         //遍历数组,把数据渲染到页面上
         var strHtml=''
         user.forEach((item,index) => {
            strHtml+=`
            <tr>
                <td>${item.id}</td>
                <td>${item.name}</td>
                <td>${item.age}</td>
                <td>${item.sex}</td>
            </tr>
            `
         });
         oCentent.innerHTML=strHtml

        //点击搜索拿到内容进行匹配
         oSearch.onclick=()=>{
            var strName=oTxt.value
            var searchList=user.filter((item)=>{
                return item.name.indexOf(strName)!=-1
            })
            //把搜索到的新数据渲染到页面
            var tabHtml=searchList.reduce((pre,cur)=>{
                pre+=`
                    <tr>
                        <td>${cur.id}</td>
                        <td>${cur.name}</td>
                        <td>${cur.sex}</td>
                        <td>${cur.age}</td>
                    </tr>
                `
                return pre
            },"")
            oCentent.innerHTML=tabHtml
         }

字符串就是一串字符，由双（单）引号括起来。

字符串是 JavaScript 的一种数据类型。

字符串的创建方式

1.字符串的字面量表达式(值类型)

var str = ‘亲’； //基本类型string

2.构造函数创建字符串(引用类型)

var str = new String(“hello”); //引用类型object

3.var str = String(‘hello’);

注意: 用new产生的变量都是引用类型的变量，也叫对象

基本类型: string, number, boolean, undefined,null等

引用类型/对象: Array , Date, Object, String, Function等

字符串有恒定性,字符串不会被修改

字符串的方法

charAt(index) 某个位置有某个字符串

charCodeAt() 将数据转换为Unicode

静态方法 String.fromCharCode() 将Unicode转换为字符

截取

1.slice(开始位置,结束位置)

var str='abc123'
            console.log(str.slice(2,4));//c1

2.substring

与slice的作用是一样的但它的参数可以反着写

str='abc123'
            console.log(str.substring(2,4));//c1
            console.log(str.substring(4,2));//c1

3.substr

第二个参数表示截取的个数

str='abc123'
            console.log(str.substr(2,2));//c1

replace 替换

返回一个新数组该方法支持正则,不会改变原数组

str='asdcv'
            str2=str.replace('v',6)
            console.log(str);//asdcv
            console.log(str2);//asdc6

查找

1.indexOf

找到返回下标,找不到返回-1

第二个参数默认是0,也可以指定开始查找位置

var str='jkhfdbnvkujdshgnkj'
 console.log(str.indexOf('j',2));//10

2.lastIndexOf

某个字符最后出现的位置

var str='jkhfdbnvkujdshgnkj'
console.log(str.lastIndexOf('k'));//16

3.search

找到返回下标,找不到返回-1 与indexOf一样,但是它支持正则

str='1564896749641'
            console.log(str.search('1'));//0
            console.log(str.search(/8/));//4

4.match

找到返回数组,找不到返回null 支持正则

str='abc123'
            console.log(str.match('c'));
//['c', index: 2, input: 'abc123', groups: undefined]
            console.log(str.match('f'));null
            console.log(str.match(/c/));
//['c', index: 2, input: 'abc123', groups: undefined]

合并 + 和 concat

var str1='erwgyh'
            var str2='456'
            console.log(str1+str2);////erwgyh456
            console.log(str1.concat(str2));////erwgyh456

split 切割

返回数组支持正则

str='2022-7-19'
            console.log(str.split());//['2022-7-19']
            console.log(str.split(''));
//['2', '0', '2', '2', '-', '7', '-', '1', '9']
            console.log(str.split('-'));//['2022', '7', '19']

转大小写

toUpperCase() 转大写

var str='ahjfd'
            var str1=str.toUpperCase()
            console.log(str);//ahjfd
            console.log(str1);//AHJFD

toLowerCase() 转小写

var str='SFEDFDG'
            var str1=str.toLowerCase()
            console.log(str);//SFEDFDG
            console.log(str1);//sfedfdg

\:转义符

g:global 全局变量如果存在多个要替换的值是使用

var str="HE  L  **  L ** O ** WO R******L D   *!"
            var str1=str.replace(/\*/g,'').replace(/ /g,'')
            console.log(str1);

Math对象

Math对象可以用于执行数学任务Math对象的常用函数:

Math.round(3.6) //四舍五入

Math.random() //返回0-1之间的随机数

Math.max(num1, num2) //返回较大的数

Math.min(num1, num2) //返回较小的数

Math.abs(num) //绝对值

Math.ceil(19.3) //向上取整

Math.floor(11.8) //向下取整

Math.pow(x,y) //x的y次方

Math.sqrt(num) //开平方