js中数组的常用处理方法

1.归纳

方法作用说明返回值是否修改原数组
forEach遍历数组遍历数组并对每一个元素进行操作无/undefined视具体处理而定
filter过滤数组返回一个满足筛选条件的新数组新数组
map映射数组按照规则对原数组的元素进行映射新数组
reduce累计器返回累计处理的结果,常用于求和一般为一个数
join元素拼接将数组元素拼接为字符串字符串
find查找元素返回符合条件的第一个数组元素值原数组的某一项/undefined
findIndex查找索引返回符合条件的第一个数组元素的索引索引或undefined
every检测判断判断数组中是否每一个元素都满足给定的条件true/false
some检测判断判断数组中是否至少存在一个元素满足给定的条件true/false
concat数组合并合并两个数组,返回新生成的数组新数组
sort数组排序对数组内的元素按照升序或降序的方式排序排序后的原数组
splice删除/替换根据输入的索引将原数组中的元素抽出为一个新数组新数组
reverse翻转数组将原数组元素顺序进行倒序无/undefined
from对象转换数组将要转换为数组的对象转换为数组新数组

2.使用

2.1 forEach

forEach 方法接受一个回调函数作为参数,并在数组的每个元素上调用该回调函数。回调函数接受三个参数:当前元素的值、当前元素的索引和当前整个数组。回调函数在每个元素上执行时,无法通过返回值来改变原始数组。

const array = [1, 2, 3, 4, 5];array.forEach((element, index) => {console.log(`Element at index ${index}: ${element}`);
});// 输出:
// Element at index 0: 1
// Element at index 1: 2
// Element at index 2: 3
// Element at index 3: 4
// Element at index 4: 5

2.2 filter

filter 方法接受一个回调函数作为参数,并对数组中的每个元素调用该回调函数。回调函数需要返回一个布尔值,用于指示元素是否应该包含在新数组中。如果回调函数返回 true,则元素将包含在新数组中;如果回调函数返回 false,则元素将被过滤掉。filter 方法会返回一个新的数组,其中包含满足过滤条件的元素

const array = [1, 2, 3, 4, 5];const filteredArray = array.filter(element => element % 2 === 0);console.log(filteredArray); // [2, 4]

2.3 map

map() 方法会接受一个函数作为参数,该函数会在数组的每个元素上被调用。这个函数会接收三个参数:元素值、元素索引和原始数组。函数可以返回一个新的值,该值将被放入新的数组中。

const numbers = [1, 2, 3, 4, 5];const doubledNumbers = numbers.map(function (number) {return number * 2;
});console.log(doubledNumbers); // [2, 4, 6, 8, 10]

2.4 reduce

reduce() 方法接受两个参数:一个回调函数和一个可选的初始值。回调函数在数组中的每个元素上执行,并将前一个回调的结果和当前元素作为参数。它返回一个经过聚合处理的单个值,该值会在下一次迭代中作为前一个回调的结果。

const numbers = [1, 2, 3, 4, 5];const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);console.log(sum); // 15

2.5 join

join() 方法接受一个可选的分隔符作为参数,该分隔符将用于连接数组的元素。如果没有提供分隔符,则默认使用逗号作为分隔符。

const fruits = ['apple', 'banana', 'orange'];const result = fruits.join(', ');console.log(result); // 'apple, banana, orange'

2.6 find

find() 方法接受一个回调函数作为参数,该回调函数用于定义查找的条件。回调函数会对数组中的每个元素进行调用,并传入三个参数:当前元素、当前索引和整个数组。在回调函数中,你可以使用逻辑表达式或其他操作来定义查找的条件。

const numbers = [1, 2, 3, 4, 5];const result = numbers.find((element) => element > 3);console.log(result); // 4

2.7 findIndex

findIndex() 方法接受一个回调函数作为参数,该回调函数用于定义查找的条件。回调函数会对数组中的每个元素进行调用,并传入三个参数:当前元素、当前索引和整个数组。在回调函数中,你可以使用逻辑表达式或其他操作来定义查找的条件。

const numbers = [1, 2, 3, 4, 5];const result = numbers.findIndex((element) => element > 3);console.log(result); // 3

2.8 every

every() 方法接受一个回调函数作为参数,该回调函数用于定义检测条件。回调函数会对数组中的每个元素进行调用,并传入三个参数:当前元素、当前索引和整个数组。在回调函数中,你可以使用逻辑表达式或其他操作来定义检测的条件。

const numbers = [1, 3, 5, 7, 9];const result = numbers.every((element) => element % 2 !== 0);console.log(result); // true

2.9 some

some() 方法接受一个回调函数作为参数,该回调函数用于定义检测条件。回调函数会对数组中的每个元素进行调用,并传入三个参数:当前元素、当前索引和整个数组。在回调函数中,你可以使用逻辑表达式或其他操作来定义检测的条件。

const numbers = [5, 8, 12, 3, 9];const result = numbers.some((element) => element > 10);console.log(result); // true

2.10 concat

concat() 方法可以接受任意数量的参数,每个参数可以是一个数组或一个值。这些参数会按照传入的顺序依次合并到新数组中。

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];const newArray = array1.concat(array2);console.log(newArray); // [1, 2, 3, 4, 5, 6]

2.11 sort

sort() 方法根据元素比较的结果,对数组进行排序。排序是在原始数组上进行的,也就是说,会修改原始数组,并返回排序后的数组。

我们提供了一个箭头函数作为参数,指定了如何比较两个数字。比较函数接受两个参数 a 和 b,如果 a 小于 b,则返回一个负数;如果 a 大于 b,则返回一个正数;如果 a 等于 b,则返回 0。通过这个比较函数,sort 方法会按照数字的大小对元素进行排序。

const numbers = [10, 2, 7, 5, 1];numbers.sort((a, b) => a - b);console.log(numbers); // 输出 [1, 2, 5, 7, 10]

2.12 splice

splice 是数组的一个方法,用于修改数组,可以删除、插入或替换数组的元素。splice 方法会直接修改原始数组,并返回被删除的元素组成的新数组。

删除

const fruits = ['apple', 'banana', 'pear', 'orange'];const deleted = fruits.splice(1, 2);console.log(fruits); // 输出 ["apple", "orange"]
console.log(deleted); // 输出 ["banana", "pear"]

插入

const fruits = ['apple', 'banana', 'pear'];fruits.splice(1, 0, 'orange', 'kiwi');console.log(fruits); // 输出 ["apple", "orange", "kiwi", "banana", "pear"]

替换

const fruits = ['apple', 'banana', 'pear'];fruits.splice(1, 1, 'orange', 'kiwi');console.log(fruits); // 输出 ["apple", "orange", "kiwi"]

2.13 reverse

reverse() 方法会将原始数组中的元素按照相反的顺序重新排列,并将修改后的数组返回。

const array = [1, 2, 3, 4, 5];array.reverse();console.log(array); // [5, 4, 3, 2, 1]

2.14 from

Array.from 方法接受两个参数:第一个参数是要被转换为数组的对象,第二个参数是一个可选的映射函数,用于对数组中的每个元素进行转换。

// 使用字符串创建数组
const str = 'Hello';
const array = Array.from(str);console.log(array); // ['H', 'e', 'l', 'l', 'o']

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/659320.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【ARM Trace32(劳特巴赫) 使用介绍 3.1 -- 不 attach core 直接访问 memory】

文章目录 背景介绍背景介绍 在使用 trace32 时在有些场景需要不 attach core 然后去读写 memory,比如在某些情况下 core 已经挂死连接不上了,这个时候需要dump内存,这个时候需要怎做呢? print "test for memory access directly";SYStem.OPTION WAITRESET OF…

推荐系统|排序_多目标模型

文章目录 四大特征用户特征物品特征统计特征场景特征 训练过程中会遇到的问题 四大特征 ID相当于是人拥有的身份证,能够唯一确定出一个人 用户特征 主要指的是用户ID和用户画像 物品特征 主要是指物品ID和物品画像以及物品持有人。 统计特征 统计特征既包括对…

miniReact<一>

一、工程化配置 1.1 目录结构 1.1.1 Multi-repo VS Mono-repo Multi-repo 每个库有自己独立的仓库,逻辑清晰,协同管理复杂 Mono-repo 很方便管理不同独立的库的生命周期,会有更高的操作复杂度 项目有很多包,同时管理多个不同的…

Android Compose 使用 SVG 作为图标

Android Compose 使用 SVG 作为图标 依赖 val coilVersion "2.5.0"dependencies {// ...implementation("io.coil-kt:coil-compose:$coilVersion")implementation("io.coil-kt:coil-svg:$coilVersion") }工具类 package com.example.mapdraw…

数据可视化工具之选,三选一?

在数据可视化的世界中,选择一款合适的工具对于提升工作效率和洞察力至关重要。本文将对三款主流数据可视化工具进行详细比较,包括山海鲸可视化、Echarts和D3.js,以帮助您做出明智的选择。 山海鲸可视化 山海鲸可视化是一款免费且功能强大的…

深入理解Django与Redis的集成实践

在现代的Web开发中,高效的数据存取和缓存策略是提升应用性能的关键。Django作为一个广泛使用的Python Web框架,提供了丰富的功能以支持高效的Web应用开发。而Redis,作为一个高性能的键值存储系统,常被用于缓存、会话管理等多种场景…

Kafka 生产者缓存

不建议使用&#xff1a; public void produce(String message) {DmsProducer<String, String> producer new DmsProducer<String, String>();try {producer.produce("test1",0, "key", message);} finally {producer.close();} }原因&#x…

【开源】基于JAVA+Vue+SpringBoot的康复中心管理系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 普通用户模块2.2 护工模块2.3 管理员模块 三、系统展示四、核心代码4.1 查询康复护理4.2 新增康复训练4.3 查询房间4.4 查询来访4.5 新增用药 五、免责说明 一、摘要 1.1 项目介绍 基于JAVAVueSpringBootMySQL的康复中…

【Leetcode】2808. 使循环数组所有元素相等的最少秒数

文章目录 题目思路代码结果 题目 题目链接 给你一个下标从 0 开始长度为 n 的数组 nums 。 每一秒&#xff0c;你可以对数组执行以下操作&#xff1a; 对于范围在 [0, n - 1] 内的每一个下标 i &#xff0c;将 nums[i] 替换成 nums[i] &#xff0c;nums[(i - 1 n) % n] 或者…

汤姆·齐格弗里德《纳什均衡与博弈论》笔记(7)博弈论与概率论

第十一章 帕斯卡的赌注——博弈、概率、信息与无知 在与费马就这个问题的通信过程中&#xff0c;帕斯卡创造出了概率论。另外&#xff0c;帕斯卡在进行严谨的宗教反思中&#xff0c;得出了概率这个概念&#xff0c;它在此几百年后&#xff0c;成为一个关键的、对博弈论的提出有…

QT仪表盘小工具

头文件: /**************************************************************************** ** ** Copyright (C) 2016 The Qt Company Ltd. ** Contact: https://www.qt.io/licensing/ ** ** This file is part of the examples of the Qt Toolkit. ** ** $QT_BEGIN_LICENSE…

单细胞转录组数据分析的10大软件/流程

单细胞数据分析现在已经有上千个软件工具可供使用了&#xff0c;这为用户带来便利的同时也造成了选择困难。就像时间一样&#xff0c;一个表&#xff0c;没问题&#xff0c;但如果有两个表&#xff0c;时间还不一样&#xff0c;该信谁的呢&#xff1f; 正好我们前面一篇文章介绍…

LRU 缓存置换策略:提升系统效率的秘密武器(上)

&#x1f90d; 前端开发工程师、技术日更博主、已过CET6 &#x1f368; 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 &#x1f560; 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 &#x1f35a; 蓝桥云课签约作者、上架课程《Vue.js 和 E…

坚持刷题 | 完全二叉树的节点个数

Hello&#xff0c;大家好&#xff0c;我是阿月&#xff01;坚持刷题&#xff0c;老年痴呆追不上我&#xff0c;今天刷&#xff1a;完全二叉树的节点个数 题目 222.完全二叉树的节点个数 代码实现 class TreeNode {int val;TreeNode left, right;public TreeNode(int val) …

我用Java语言写了一个贪心算法小案例

贪心算法是一种在每一步选择中都采取在当前状态下最好或最优&#xff08;即最有利&#xff09;的选择&#xff0c;从而希望导致结果是最好或最优的算法。贪心算法在有最优子结构的问题中尤为有效。最优子结构的意思是局部最优解能决定全局最优解。 下面是一个使用Java实现的贪…

LeetCode765. Couples Holding Hands——并查集

文章目录 一、题目二、题解 一、题目 There are n couples sitting in 2n seats arranged in a row and want to hold hands. The people and seats are represented by an integer array row where row[i] is the ID of the person sitting in the ith seat. The couples ar…

springboot141夕阳红公寓管理系统的设计与实现

基于Spring Boot的夕阳红公寓管理系统的设计与实现 摘 要 如今社会上各行各业&#xff0c;都在用属于自己专用的软件来进行工作&#xff0c;互联网发展到这个时候&#xff0c;人们已经发现离不开了互联网。互联网的发展&#xff0c;离不开一些新的技术&#xff0c;而新技术的…

Lua脚本

1.准备 1.简介 1.Lua是一种轻量小巧的脚本语言&#xff0c;用标准C语言编写并以源代码形式开放 2.目标 1.其设计目的是为了嵌入应用程序中&#xff0c;从而为应用程序提供灵活的扩展和定制功能 3.特点 1.轻量级&#xff1a;用标准C语言编写并以源代码形式开放&#xff0c;编译后…

【Qt】—— Qt Creator界⾯认识

目录 &#xff08;一&#xff09;左边栏 &#xff08;二&#xff09;代码编辑区 &#xff08;三&#xff09;UI设计界⾯ &#xff08;四&#xff09;构建区 &#xff08;一&#xff09;左边栏 在编辑模式下&#xff0c;左边竖排的两个窗⼝叫做"边栏"。 ①是项⽬…

动手实践WebVR 全景

前言 近年来VR概念越来越火&#xff0c;相信大家在网上都有过VR的浏览体验&#xff0c;比如VR全景看房[1]、VR全景看车[2]、VR全景旅游[3]等等&#xff0c;VR全景给了我们视觉上的沉浸式体验。本文将会简单探究Web VR全景的实现原理&#xff0c;同时也会用threejs实现两个小的…