【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

相关推荐
小陈同学呦3 小时前
前端如何处理订单状态导航的数据竞态问题
前端·javascript
开发者每周简报3 小时前
网海三部曲·无名宗师传
javascript·人工智能
isyangli_blog3 小时前
OpenDayLight (Carbon 版本) 启动与组件安装
开发语言·php
vb2008113 小时前
FastAPI APIRouter
开发语言·python
Benszen3 小时前
KVM虚拟化解决方案
开发语言·perl
会编程的土豆3 小时前
Go 语言反射(Reflection)详解
开发语言·后端·golang
東雪木3 小时前
多线程与并发编程 专属复习笔记
java·开发语言·笔记·java面试
杨充4 小时前
1.3 浮点型数据设计灵魂
开发语言·python·算法
噜噜噜阿鲁~4 小时前
python学习笔记 | 11.3、面向对象高级编程-多重继承
java·开发语言
basketball6164 小时前
Go 语言从入门到进阶:4. 数组和MAP使用方法总结
开发语言·后端·golang