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码顺序 |

相关推荐
Pedantic2 小时前
SwiftUI 手势层级(Gesture Hierarchy)详解
前端
飘尘2 小时前
前端转型全栈(Java后端)的快速上手指引
前端·后端·全栈
一颗烂土豆2 小时前
Meshopt 压缩深度解析,为什么它比 Draco 更快
前端·javascript·webgl
浏览器工程师3 小时前
AI Agent 接浏览器任务,先别让它一路点到底
前端·后端
雨季mo浅忆3 小时前
VSCode自动格式化三要素
前端
爱勇宝4 小时前
深扒 Anthropic 1680 位工程师简历:应届生几乎没机会,AI 公司最缺的不是博士
前端·后端·程序员
kyriewen5 小时前
同事每天催我 Code Review,我写了个脚本让 AI 替我 review PR——现在他反过来催 AI 了
前端·javascript·ai编程
user20585561518137 小时前
Windows 项目安装时报 `node-sass` 错误,如何快速处理
前端
LiaCode7 小时前
Redis 在生产项目的使用
前端·后端