数组的基本算法

前端操作数组的算法

  • push方法

    用push方法将元素添加到数组的末尾

javascript 复制代码
 let numbers = [0,1,2,3,4,5,6,7,8,9]
 numbers.push(11)
  • unshift方法

    用unshift方法,可以在数组开始处添加元素

javascript 复制代码
numbers.unshift(2)
  • pop方法

    删除数组最靠后的元素

javascript 复制代码
numbers.pop()
  • shift方法

    删除开头的元素

javascript 复制代码
numbers.shift()
  • splice方法

    在任意的位置添加或删除元素

javascript 复制代码
 numbers.splice(5,3)//从索引5开始的第三个元素进行删除

现在想把数2,3,4插入数组里,放到之前删除元素的位置上,可以再次使用splice方法

javascript 复制代码
numbers.splice(5,0,2,3,4)//第一个元素为插入或删除的元素索引值,第二个参数是删除元素的个数(如果不是删除元素,传入0),第三个参数往后就是添加到数组里的值,

最后执行以下splice方法

javascript 复制代码
numbers.splice(5,3,2,3,4)//从索引5的位置开始删除3个元素,但也从缩影5开始添加2,3,4
  • concat方法

  • 数组的合并

javascript 复制代码
const zero = 0 ;
const array = [1,2,3];
const array2 = [2,3,4];
//zero和array2被合并到array
let number = array.concat(zero,array2)//合并的结果为1,2,3,0,2,3,4
  • every方法

    用于迭代数组中每一个元素,直到返回false

    javascript 复制代码
    //创建一个isEven函数,判断数组中的元素为偶数返回真,奇数为假
    function isEven(number){
        console.log(number);
        return x % 2 === 0 ? true : false
    }
    let number = {1,2,3,4,5,6,7,8,9,10,11,12,13}
    number.every(isEven)//number中的第一个元素为1,他不是2的倍数,因此返回false。然后every执行结束
  • some方法

    和every方法相反,用于迭代数组中每一个元素,直到返回true

  • forEach方法

    迭代整个数组,可以用forEach方法,他和for的循环结果相同

    javascript 复制代码
    let number = {1,2,3,4,5,6,7,8,9,10,11,12,13}
    number.forEach(x=>console.log(x % 2 === 0))
  • map和filter方法

复制代码
 map将数组的结果进行收集,返回新的数组
javascript 复制代码
function isEven(number){
    return x % 2 === 0 ? true : false
}
let number = {1,2,3,4}
const newNumber = number.map(isEven)//newNumber数组里面的值为[false,true,false,true]
newNumber[0] = false

filter方法返回的新数组中,都是为true的元素

javascript 复制代码
function isEven(number){
    return x % 2 === 0 ? true : false
}
let number = {1,2,3,4}
const filterNum = number.filter(isEven)//filterNum数组中的元素都是偶数:[2,4]
  • reduce方法

    reduce方法可以接收一个有四个参数的函数:previous、current、index、array。后两位为可选参数。这个函数会返回一个被叠加到累加器的值,reduce方法停止执行后会返回这个累加器。如果对一个数组中的所有元素求和。

    语法

    javascript 复制代码
    number.reduce(function(prev, current, currentIndex, arr), initialValue)//reduce方法调用多少次,看array的长度

    1、prev:函数传进来的初始值或上一次回调的返回值 2、current:数组中当前处理的元素值 3、currentIndex:当前元素索引 4、initialValue:传给函数的初始值

    javascript 复制代码
       const number = [1, 2, 3, 4];
       //reduce方法有四个参数prev,current,currentIndex,initialValue。前面两个必须传的,reduce方法返回的结果是一个值也就是reduce方法最后一次返回的值。后两个可选传入
       const sum = number.reduce(function (prev, current) {
         return prev+current
       }, 0)
       console.log(sum) //输出的结果为10

    reduce方法的调用分析

    javascript 复制代码
    let number = [{},{},{}]
    //调用三次,第一次调用返回的是initialValue也就是0,第二次调用返回的是上一次调用的返回值也就是undefined,第三次和第二次一样也是undefined。最后reduce只会返回最后一次的返回值也就是第三次的undefined
    const num = number.reduce((pre,current)=>{
        console.log(pre)
        return pre + 1;
    },0)
    //num的值为3
相关推荐
yaaakaaang1 小时前
(八)前端,如此简单!---五组结构
前端·javascript
EstherNi2 小时前
vue3仿照elementui样式的写法,并进行校验,并且有默认值的设置
javascript·elementui
gCode Teacher 格码致知2 小时前
Javascript提高:get和post等请求,对于汉字和空格信息进行编码的原则-由Deepseek产生
开发语言·前端·javascript·node.js·jquery
竹林8182 小时前
从ethers.js迁移到Viem:我在一个DeFi项目前端重构中踩过的坑
前端·javascript
晓13132 小时前
React篇——第三章 状态管理之 Redux 篇
前端·javascript·react.js
子兮曰3 小时前
🚀24k Star 的 Pretext 为何突然爆火:它不是排版库,而是在重写 Web 文本测量
前端·javascript·github
@大迁世界3 小时前
11.在 React.js 中,state 与 props 的差异体现在哪里?
前端·javascript·react.js·前端框架·ecmascript
Giant1003 小时前
🔥前端跨域封神解法:Vite Proxy + Express CORS,一篇搞定所有跨域坑!
前端·javascript·面试
像我这样帅的人丶你还3 小时前
JavaScript 迭代器详解
前端·javascript
Lazy_zheng3 小时前
Map / Set / WeakMap / WeakSet,一次给你讲透
前端·javascript·面试