【JavaScript】数组函数汇总

news/2024/10/4 7:24:53/
  • JavaScript数组函数是处理和操作数据的基础,对于JavaScript开发至关重要。
  • 函数式编程方法,如map()、filter()和reduce(),能够提高代码的简洁性和功能性。
  • 数据不可变性是现代JavaScript开发中的一个重要概念,函数如concat()和slice()能够在不改变原始数组的情况下进行数据操作。
  • 通过find()、some()和every()等函数,可以更高效地查找和验证数组中的元素。
  • 函数如includes()和indexOf()提供了简便的方式来检查和定位数组元素。
  • 对于需要反转数组或将数组转换为字符串的场景,reverse()和join()提供了便捷的解决方案。

map():创建一个新数组,其中包含对原始数组中每个元素调用所提供函数的结果。

const numbers = [1, 2, 3, 4];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6, 8]

filter():创建一个新数组,其中包含所有通过所提供函数执行的测试的元素。

const words = ['spray', 'limit', 'elite', 'exuberant'];
const longWords = words.filter(word => word.length > 6);
console.log(longWords); // ['exuberant']

reduce():通过对每个元素应用一个函数,将数组还原为单个值,并将结果累加。

const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((total, num) => total + num, 0);
console.log(sum); // 10

find():返回数组中满足所提供测试函数的第一个元素。

const users = [
  { id: 1, name: 'John' },
  { id: 2, name: 'Jane' },
  { id: 3, name: 'Doe' }
];
const user = users.find(user => user.id === 2);
console.log(user); // { id: 2, name: 'Jane' }

some():测试数组中的是否至少有一个元素通过了所提供函数的测试。

const numbers = [1, 2, 3, 4, 5];
const hasEven = numbers.some(num => num % 2 === 0);
console.log(hasEven); // true

every():测试数组中的所有元素是否都通过了所提供函数的测试。

const numbers = [2, 4, 6, 8];
const allEven = numbers.every(num => num % 2 === 0);
console.log(allEven); // true

forEach():为每个数组元素执行一次提供的函数。

const numbers = [1, 2, 3, 4];
numbers.forEach(num => console.log(num * 2)); // 2, 4, 6, 8

concat():将两个或多个数组合并为一个新数组。

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

slice():将数组的一部分浅层拷贝到一个新数组中。

const fruits = ['apple', 'banana', 'orange', 'grape'];
const citrus = fruits.slice(2, 4);
console.log(citrus); // ['orange', 'grape']


splice():通过删除或替换现有元素和/或添加新元素来更改数组的内容。

const numbers = [1, 2, 3, 4, 5];
numbers.splice(2, 1, 99);
console.log(numbers); // [1, 2, 99, 4, 5]

includes():检查数组是否包含某个元素,返回 true 或 false。

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

indexOf():返回给定元素在数组中的第一个索引,如果没有,则返回-1。

const numbers = [1, 2, 3, 4];
const index = numbers.indexOf(3);
console.log(index); // 2

lastIndexOf():返回数组中给定元素的最后一个索引,如果不存在,则返回-1。

const numbers = [1, 2, 3, 4, 3];
const index = numbers.lastIndexOf(3);
console.log(index); // 4

join():将数组的所有元素连接成字符串,并用指定的分隔符分隔。

const words = ['Hello', 'world'];
const sentence = words.join(' ');
console.log(sentence); // "Hello world"

reverse():将数组中元素的顺序就地反转。

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


http://www.ppmy.cn/news/1534287.html

相关文章

C语言 | Leetcode C语言题解之第454题四数相加II

题目&#xff1a; 题解&#xff1a; struct hashTable {int key;int val;UT_hash_handle hh; };int fourSumCount(int* A, int ASize, int* B, int BSize, int* C, int CSize, int* D, int DSize) {struct hashTable* hashtable NULL;for (int i 0; i < ASize; i) {for (…

二值图像的面积求取的两种方法及MATLAB实现

一、引言 面积在数字图像处理中经常用到&#xff0c;在MATLAB中&#xff0c;计算二值图像的面积通常可以通过两种主要方法实现&#xff1a;遍历法和直接利用bwarea函数。下面将分别介绍这两种方法的原理和相应的MATLAB代码示例。 二、遍历法计算二值图像面积的原理和MATLAB代码…

物联网智能项目研究

物联网&#xff08;IoT&#xff09;作为当今数字化转型的重要推动力&#xff0c;正在改变我们的生活方式和工作模式。从智能家居、智慧城市到工业自动化&#xff0c;物联网技术的应用正在实现人们对智能生活的向往。本文将探讨一个具体的物联网智能项目&#xff0c;通过实际操作…

Stm32的bootloader无法使用问题

Stm32的bootloader无法使用问题 用不了一键下载电路 首先简单地对此处涉及的内容进行介绍:如果stm32的BOOT0引脚为低电平时,系统从FLASH中启动,而如果BOOT0引脚为高电平,且BOOT1为低电平时,系统从自举程序(bootloader)中启动. 我在自制照相机设计中加入了ISP一键下载电路,如…

ES索引备份

#!/usr/bin/env python # -*- coding:utf-8 -*-""" /************************************************************** **************************************************************/ 获取ES中所有的文档数据 filename data_es.py python3 ""&q…

React返回上一个页面,会重新挂载吗

在 React 中&#xff0c;当你使用 React Router 或其他导航方法返回到上一个页面时&#xff0c;默认情况下&#xff0c;返回的页面会重新挂载。也就是说&#xff0c;组件会重新执行它的生命周期方法&#xff08;或钩子函数&#xff09;&#xff0c;例如 useEffect、useState 的…

PHP反序列化8(phar反序列化)

考点8&#xff1a;phar反序列化 <aside> &#x1f4a1; 使用条件 </aside> 文件上传时&#xff0c;不必要.phar后缀&#xff0c;文件上传不是难点&#xff01;&#xff01;&#xff01;&#xff08;phar伪协议自动解析成.phar文件&#xff09; phar文件本质上是…

【深度学习基础模型】液态状态机(Liquid State Machines, LSM)详细理解并附实现代码。

【深度学习基础模型】液态状态机&#xff08;Liquid State Machines, LSM&#xff09;详细理解并附实现代码。 【深度学习基础模型】液态状态机&#xff08;Liquid State Machines, LSM&#xff09;详细理解并附实现代码。 文章目录 【深度学习基础模型】液态状态机&#xff0…