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

相关推荐
hackeroink1 小时前
【2024版】最新推荐好用的XSS漏洞扫描利用工具_xss扫描工具
前端·xss
2401_857439692 小时前
SSM 架构下 Vue 电脑测评系统:为电脑性能评估赋能
开发语言·php
迷雾漫步者2 小时前
Flutter组件————FloatingActionButton
前端·flutter·dart
SoraLuna3 小时前
「Mac畅玩鸿蒙与硬件47」UI互动应用篇24 - 虚拟音乐控制台
开发语言·macos·ui·华为·harmonyos
向前看-3 小时前
验证码机制
前端·后端
xlsw_3 小时前
java全栈day20--Web后端实战(Mybatis基础2)
java·开发语言·mybatis
燃先生._.4 小时前
Day-03 Vue(生命周期、生命周期钩子八个函数、工程化开发和脚手架、组件化开发、根组件、局部注册和全局注册的步骤)
前端·javascript·vue.js
Dream_Snowar4 小时前
速通Python 第三节
开发语言·python
高山我梦口香糖5 小时前
[react]searchParams转普通对象
开发语言·前端·javascript