【JavaScript】数组函数汇总

  • 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

相关推荐
Wang's Blog15 分钟前
Go-Zero项目开发33: IM实时通信前后端对接与微服务基础设施实践
开发语言·微服务·golang·go-zero
SelectDB技术团队24 分钟前
丰巢日志平台 ELK 替代:Apache Doris / SelectDB 的技术能力与实践
开发语言·python
BetterFlow_CFD24 分钟前
COMSOL声学仿真基础知识(二)
开发语言·算法·matlab
麻瓜老宋28 分钟前
AI开发C语言应用按步走,表达式计算器calc的第十九步,注释、表达式分隔符、long double 精度
c语言·开发语言·atomcode
崖边看雾28 分钟前
Python学习——函数
开发语言·windows·python·学习·pycharm
宸津-代码粉碎机42 分钟前
Jar热部署进阶实战|修复原生方案OOM与类冲突问题,生产级无BUG优化方案
java·大数据·服务器·开发语言·前端·人工智能·python
To_OC9 小时前
写了三遍 Todo List,我终于搞懂了 React 父子组件到底怎么通信
前端·javascript·react.js
勇往直前plus9 小时前
Vue3(篇一) 核心概念——响应式模板语法与组件基础
前端·javascript·vue.js
用户9385156350711 小时前
从零搭建 AI 日记助手:用 Milvus 向量数据库 + RAG 让机器读懂你的每一天
javascript·人工智能·全栈
互联网中的一颗神经元11 小时前
小白python入门 - 39. 采集流水线小项目
开发语言·python