JS中Array数组常用的方法

数组常用实例方法-核心方法

|-------------|----------|------------------------------------|
| 方法 | 作用 | 说明 |
| forEach | 遍历数组 | 不返回,用于不改变值,经常用于查找打印输出值 |
| filter | 过滤数组 | 筛选数组元素,并生成新数组 |
| map | 迭代数组 | 返回新数组,新数组里面的元素里处理之后的值,经常用于处理数据 |
| reduce | 累计器 | 返回函数累计处理的结果,经常用于求和等 |

forEach:遍历数组

作用:不返回,用于不改变值,经常用于查找打印输出值

复制代码
const arr =[10,20,30]

arr.forEach(item=>{
	console.log(item)
	输出三次:
	第一次:10
	  二  :20
	  三  :30
}

map: 迭代数组

返回新数组,新数组里面的元素里处理之后的值,经常用于处理数据

复制代码
const arr = [1, 2, 3];
const result = arr.map(function(item) {
  return item + 1;
});
console.log(result);
/*
索引值   输出值
  0    :   2
  1    :   3
  2    :   4
*/

filter:过滤数组

筛选数组元素,并生成新数组

复制代码
 const arr = [10,20,30]
        const result = arr.filter(function(item,index){
            return item >= 20
        })
        console.log(result);//[20,30]


简写形式
 const newArr = arr.filter(item => item >= 20)
 console.log(newArr);//[20,30]

reduce:累计器

  • 作用:reduce返回累计处理的结果,经常用于求和等

  • 基本语法:

    //数组reduce方法
    //arr.reduce(function(上一次的值 当前值){},初始值)
    const arr = [1,5,8];

    // //1.没有初始值
    // const total = arr.reduce(function(prev,current){
    // return prev + current
    // });
    // console.log(total);//14

    //有初始值
    // const total = arr.reduce(function(prev,current){
    // return prev + current;
    // },10);
    // console.log(total);//24
    const total = arr.reduce((prev,current) => prev+current,10);
    console.log(total);//24

其他方法

every():

测试一个数组内所有的元素是否都能通过某个指定函数的测试,它返回一个布尔值

代码演示:

复制代码
//every每一个是否都符合条件 如果都符合返回true 否则返回false
const arr1 = [10,20,30]
const flag = arr1.every(item => item >= 20);
console.log(flag);//false
some():

检测数组元素是否满足条件,只要有一个满足就返回true

复制代码
 const arr1 = [10,20,30]
 const flag = arr1.some(item => item >= 20);
 console.log(flag);//true
相关推荐
前端小咸鱼一条21 分钟前
16.迭代器 和 生成器
开发语言·前端·javascript
前端小阳1 小时前
JavaScript原型链
javascript
早點睡3901 小时前
ReactNative项目OpenHarmony三方库集成实战:react-native-collapsible
javascript·react native·react.js
前端Hardy1 小时前
别再手写代码了!2026 前端 5 个 AI 杀招,直接解放 80% 重复劳动(附工具+步骤)
前端·javascript·面试
SuperEugene1 小时前
Element Plus/VXE-Table UI 组件库规范:统一用法实战,避开样式冲突与维护混乱|工程化与协作规范篇
前端·javascript·vue.js·ui·前端框架·element plus·vxetable
前端Hardy2 小时前
前端工程师必备的 10 个 AI 万能提示词(Prompt),复制直接用,效率再翻倍!
前端·javascript·面试
BioRunYiXue2 小时前
Nature Methods:CellVoyager 自主 AI 智能体开启生物数据分析新时代
大数据·开发语言·前端·javascript·人工智能·数据挖掘·数据分析
网络点点滴3 小时前
Vue3中Suspense的使用
前端·javascript·vue.js
酉鬼女又兒3 小时前
零基础快速入门前端Web存储(sessionStorage & localStorage)知识点详解与蓝桥杯考点应用(可用于备赛蓝桥杯Web应用开发)
开发语言·前端·javascript·职场和发展·蓝桥杯·html
angerdream4 小时前
最新版vue3+TypeScript开发入门到实战教程之组件通信之二
javascript·vue.js