JS数组的一些方法

前言

忘了在哪里听说JS是用来处理各种各样的数据的,所以掌握一些数组的处理方法极其重要

而最近学校要进行测试,本着复习回顾的想法,决定将一些我所知道的数组处理方法整理整理

不过难免有遗漏与错误,还望各位大佬指正

forEach()遍历方法

forEach() 方法用于遍历调用数组的每个元素

传入一个回调函数,并将元素传递给回调函数

回调函数传入两个参数:

  • item为数组元素,而且必须传递
  • index为数组索引,可以不写
javascript 复制代码
        const arr=[1,2,3]
        arr.forEach((item,index)=>{
            console.log(item,index);
        })

map()遍历方法

map方法用于遍历调用数组的每个元素

其用法基本同forEach 遍历方法

不同之处在于,map ()遍历方法需要返回return ,将返回值赋给一个新数组

javascript 复制代码
        arr = [1, 2, 3, 4]
        let Arr = arr.map((item) => {
            return item * 10
        })
        console.log(arr, Arr);

join()拼接方法

join() 方法用于将一个数组的所有元素拼接 成一个字符串并返回这个字符串

如果不传入分隔符,则默认用逗号进行拼接。

传入分隔符,则用指定的分隔符字符串分隔。

如果数组只有一个元素,那么将返回该元素而不使用分隔符。

javascript 复制代码
        const arr = [1, 2, 3]
        const String01 = arr.join()
        const String02 = arr.join(' ')
        const String03 = arr.join('+')
        console.log(String01);
        console.log(String02);
        console.log(String03);

reduce()数值累计方法

reduce()方法可以用于累加之类的操作

也会对数组进行遍历,并返回新数组

需要传入一个回调函数和一个初始值

javascript 复制代码
reduce(回调函数,初始值)

关于回调函数

在对数组进行遍历时,每遍历一个元素就会调用一次回调函数

回调函数传入两个参数:

  • 回调函数第一次调用时,prev为默认值。其他情况为上一次的返回值
  • item为当前遍历的元素

注意:回调函数一定要有返回值,不然输出为undefined

javascript 复制代码
        const arr = [1, 2, 3, 4]
        const x = 0
        const num = arr.reduce((prev, item) => {
            return prev + item
        }, x)

        console.log(arr);
        console.log(num);

关于初始值

初始值可写可不写,如果不写,初始值默认为数组第一个元素

filter()过滤方法

filter()方法会遍历数组,过滤出符合条件的数组元素,返回给一个新数组

传入一个回调函数,回调函数传参item为当前遍历的元素

注意写返回值

javascript 复制代码
        const arr = [1, 2, 3, 4, 5, 6]
        const Arr = arr.filter((item) => {
            return item > 3
        })
        console.log(Arr);

every()与some()方法

every()方法

every()方法测试一个数组内的所有元素是否都满足一定条件。

它返回一个布尔值

传入一个回调函数,回调函数传参item为当前遍历的元素,注意写返回值

javascript 复制代码
        arr = [1, 2, 3, 4]
        const Boole = arr.every((item) => {
            return item <= 4
        })
        console.log(Boole);

some()方法

some()方法与every()方法相反

用于测试一个数组内的元素是否有至少一个元素满足条件

用法同every()方法

javascript 复制代码
        arr = [1, 2, 3, 4]
        const Boole0 = arr.some((item) => {
            return item >= 4
        })
        console.log(Boole0);

concat()合并方法

concat()方法用于合并两个或多个数组。

此方法不会更改现有数组,而是返回一个新数组。

javascript 复制代码
        const arr01 = [1, 2]
        const arr02 = [3, 4]
        const arr03 = [5, 6]
        const ARR01 = arr01.concat(arr02)
        const ARR02 = arr01.concat(arr02, arr03)
        console.log(ARR01);
        console.log(ARR02);

splice()替换方法

splice()方法用于移除 或者替换 已存在的元素或添加新的元素

可以传三个及以上个参数

javascript 复制代码
splice(start, deleteCount, item1)
  • start 为索引值
  • deleteCount表示删除的元素数量(可以不写)
  • item1 表示要添加的元素(可以写多个,也可以不写)

整句表达的意思为:在索引start处,删除deleteCount个数量的元素,并插入item1元素

javascript 复制代码
        let Arr = [1, 2, 3, 4]
        Arr.splice(1, 2, 'test')
        console.log(Arr);

如上代码,意为: 在索引1处,删除2个元素,并插入test元素

其他方法

|---------------------------|--------------------------------------|
| arr.length | 获取数组长度 |
| arr.push()/arr.pop() | 添加/删除最后一个元素。push传参,传入的参数为最后一个元素 |
| arr.shift()/arr.unshift() | 删除/添加第一个元素。unshift传参,传入的参数作为第一个元素 |
| arr.reverse() | 翻转数组 |
| arr.indexOf() | 返回数组中元素位置(第一个匹配元素), 从前往后找,-1为没找到(传参) |
| arr.lastIndexOf() | 返回数组中元素位置(第一个匹配元素), 从后往前找,-1为没找到(传参) |
| arr.sort() | 排序,根据ASCII码顺序 |

相关推荐
gnip7 分钟前
SSE技术介绍
前端·javascript
yinke小琪22 分钟前
JavaScript DOM节点操作(增删改)常用方法
前端·javascript
枣把儿26 分钟前
Vercel 收购 NuxtLabs!Nuxt UI Pro 即将免费!
前端·vue.js·nuxt.js
望获linux27 分钟前
【Linux基础知识系列】第四十三篇 - 基础正则表达式与 grep/sed
linux·运维·服务器·开发语言·前端·操作系统·嵌入式软件
爱编程的喵29 分钟前
从XMLHttpRequest到Fetch:前端异步请求的演进之路
前端·javascript
喜欢吃豆31 分钟前
深入企业内部的MCP知识(三):FastMCP工具转换(Tool Transformation)全解析:从适配到增强的工具进化指南
java·前端·人工智能·大模型·github·mcp
豆苗学前端35 分钟前
手把手实现支持百万级数据量、高可用和可扩展性的穿梭框组件
前端·javascript·面试
不见_35 分钟前
不想再写周报了?来看看这个吧!
前端·命令行
yinke小琪37 分钟前
JavaScript 事件冒泡与事件捕获
前端·javascript
pany38 分钟前
写代码的节奏,正在被 AI 改写
前端·人工智能·aigc