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

相关推荐
还是鼠鼠3 分钟前
图书管理系统 Axios 源码__编辑图书
前端·javascript·vscode·ajax·前端框架
北极象5 分钟前
vue3中el-input无法获得焦点的问题
前端·javascript·vue.js
Dr.勿忘15 分钟前
C#面试常考随笔8:using关键字有哪些用法?
开发语言·unity·面试·c#·游戏引擎
百度网站快速收录17 分钟前
网站快速收录:如何优化网站头部与底部信息?
前端·html·百度快速收录·网站快速收录
dal118网工任子仪21 分钟前
92,[8] 攻防世界 web Web_php_wrong_nginx_config
开发语言·php
wjs202429 分钟前
SQLite Update 语句详解
开发语言
加油,旭杏34 分钟前
【go语言】接口
开发语言·后端·golang
Loong_DQX1 小时前
【react+redux】 react使用redux相关内容
前端·react.js·前端框架
GISer_Jing1 小时前
react redux监测值的变化
前端·javascript·react.js
engchina1 小时前
CSS 样式化表格:从基础到高级技巧
前端·css