讲师中心 微信公众号
AI工具推荐 视频效率加速

JavaScript 数组方法:综合指南

云晨小哥_7364

云晨小哥_7364

发布时间:2024-09-16 08:00:08

|

492人浏览过

|

来源于dev.to

转载

javascript 数组方法:综合指南

数组是 javascript 中最基本的数据结构之一。使用数组,您可以在单个变量中存储多个值。 javascript 提供了许多内置方法来操作数组,使它们具有令人难以置信的通用性。在这篇文章中,我们将探讨所有内置数组方法以及如何在 javascript 项目中有效地使用它们。

核心方法

foreach()

foreach() 方法允许您迭代数组并为数组中的每个元素执行一次提供的函数。这是循环数组的简单方法。

const array = [1, 2, 3, 4, 5];

array.foreach((element) => {
  console.log(element);
});

地图()

map() 方法创建一个新数组,其中填充了对数组中每个元素调用所提供函数的结果。它通常用于转换数据。

const array = [1, 2, 3, 4, 5];

const doubled = array.map((element) => element * 2);

console.log(doubled); // [2, 4, 6, 8, 10]

筛选()

filter() 方法创建一个新数组,其中包含通过所提供函数实现的测试的所有元素。当您需要根据条件从数组中过滤掉某些元素时,它非常有用。

const array = [1, 2, 3, 4, 5];

const evennumbers = array.filter((element) => element % 2 === 0);

console.log(evennumbers); // [2, 4]

减少()

reduce()方法对数组的每个元素执行reducer函数,产生单个输出值。它通常用于对值求和、累加总计或将数组合并为单个值。

const array = [1, 2, 3, 4, 5];

const sum = array.reduce((accumulator, currentvalue) => accumulator + currentvalue, 0);

console.log(sum); // 15

寻找()

find() 方法返回数组中满足所提供的测试函数的第一个元素的值。它在找到第一个匹配项后停止。

const array = [1, 2, 3, 4, 5];

const found = array.find((element) => element > 3);

console.log(found); // 4

查找索引()

findindex() 方法返回数组中满足所提供的测试函数的第一个元素的索引。如果没有元素满足测试函数,则返回-1。

const array = [1, 2, 3, 4, 5];

const index = array.findindex((element) => element > 3);

console.log(index); // 3

种类()

sort() 方法对数组的元素进行就地排序并返回排序后的数组。它通常用于对字符串和数字进行排序,但可能需要比较函数才能正确对数字进行排序。

const array = [5, 3, 8, 1, 2];

const sortedarray = array.sort((a, b) => a - b);

console.log(sortedarray); // [1, 2, 3, 5, 8]

撤销()

reverse() 方法原地反转数组的元素。第一个数组元素成为最后一个,最后一个成为第一个。

const array = [1, 2, 3, 4, 5];

const reversedarray = array.reverse();

console.log(reversedarray); // [5, 4, 3, 2, 1]

连接()

concat() 方法用于合并两个或多个数组。它返回一个新数组,保持原始数组不变。

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];

const concatenatedarray = array1.concat(array2);

console.log(concatenatedarray); // [1, 2, 3, 4, 5, 6]

片()

slice() 方法将数组的一部分的浅拷贝返回到从头到尾(不包括 end)选择的新数组对象中。

const array = [1, 2, 3, 4, 5];

const slicedarray = array.slice(1, 4);

console.log(slicedarray); // [2, 3, 4]

拼接()

splice() 方法通过删除、替换或添加元素来更改数组的内容。

const array = [1, 2, 3, 4, 5];

array.splice(2, 1, 6, 7);

console.log(array); // [1, 2, 6, 7, 4, 5]

推()

push() 方法将一个或多个元素添加到数组末尾并返回数组的新长度。

const array = [1, 2, 3];

array.push(4, 5);

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

流行音乐()

pop() 方法从数组中删除最后一个元素并返回该元素。

const array = [1, 2, 3, 4, 5];

const lastelement = array.pop();

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

转移()

shift() 方法从数组中删除第一个元素并返回该元素。

const array = [1, 2, 3, 4, 5];

const firstelement = array.shift();

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

取消移位()

unshift() 方法将一个或多个元素添加到数组的开头并返回数组的新长度。

const array = [2, 3, 4, 5];

array.unshift(1);

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

加入()

join() 方法通过连接数组中的所有元素(用逗号或指定的分隔符字符串分隔)来创建并返回一个新字符串。

const array = [1, 2, 3, 4, 5];

const joinedstring = array.join('-');

console.log(joinedstring); // "1-2-3-4-5"

附加方法

每一个()

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

const array = [2, 4, 6, 8];

const alleven = array.every((element) => element % 2 === 0);

console.log(alleven); // true

一些()

some() 方法测试数组中至少一个元素是否通过提供的测试函数。

const array = [1, 2, 3, 4, 5];

const haseven = array.some((element) => element % 2 === 0);

console.log(haseven); // true

平坦的()

flat() 方法创建一个新数组,其中所有子数组元素递归地连接到其中,直到指定的深度。

const array = [1, [2, [3, [4]]]];

const flattenedarray = array.flat(2);

console.log(flattenedarray); // [1, 2, 3, [4]]

平面地图()

flatmap() 方法首先使用映射函数映射每个元素,然后将结果展平到一个新数组中。它是map()和flat()的组合。

const array = [1, 2, 3, 4];

const flattened = array.flatmap((num) => [num, num * 2]);

console.log(flattened); // [1, 2, 2, 4, 3, 6, 4, 8]

充满()

fill() 方法用静态值填充数组中从起始索引到结束索引的所有元素。

const array = [1, 2, 3, 4, 5];

array.fill(0, 2, 4);

console.log(array); // [1, 2, 0, 0, 5]

在()内复制

copywithin() 方法将数组的一部分浅拷贝到同一数组中的另一个位置,而不修改其长度。

const array = [1, 2, 3, 4, 5];

array.copywithin(0, 3, 5);

console.log(array); // [4, 5, 3, 4, 5]

包括()

includes() 方法检查数组是否包含某个值。

const array = [1, 2, 3, 4, 5];

const hasthree =

 array.includes(3);

console.log(hasthree); // true

tostring()

tostring() 方法将数组转换为字符串,以逗号分隔。

const array = [1, 2, 3, 4, 5];

const arraystring = array.tostring();

console.log(arraystring); // "1,2,3,4,5"

索引()

indexof() 方法返回在数组中可以找到给定元素的第一个索引,如果不存在则返回 -1。

const array = [1, 2, 3, 4, 5];

const index = array.indexof(3);

console.log(index); // 2

最后索引()

lastindexof() 方法返回在数组中可以找到给定元素的最后一个索引,如果不存在则返回 -1。

const array = [1, 2, 3, 4, 3, 5];

const lastindex = array.lastindexof(3);

console.log(lastindex); // 4

从()

array.from() 方法从类似数组或可迭代对象创建一个新的数组实例。

const array = array.from('hello');

console.log(array); // ['h', 'e', 'l', 'l', 'o']

isarray()

array.isarray() 方法检查传递的值是否是数组。

const array = [1, 2, 3, 4, 5];
const notarray = { a: 1, b: 2 };

console.log(array.isarray(array)); // true
console.log(array.isarray(notarray)); // false

的()

array.of() 方法创建一个具有可变数量元素的新数组实例。

const array1 = Array.of(1, 2, 3);
const array2 = Array.of('a', 'b', 'c');

console.log(array1); // [1, 2, 3]
console.log(array2); // ['a', 'b', 'c']

结论

javascript 数组具有多种内置方法,可以进行强大的数据操作。了解这些方法将使您更有效地编写干净简洁的代码。花一些时间尝试这些方法,看看它们如何改进您的代码。
最初发布:javascript 数组方法指南

热门AI工具

更多
Atoms
Atoms Hot

Atoms是一款AI智能体工具,第一支自动构建真实业务的 AI 团队。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

小橡皮AI

一款AI工具,主要用于小橡皮一键去AI味,将机器味重的内容改得更有活人感,防止因为 AI 内容被平台打上 AI 标签,以及限流,适合需要提升相关任务效率的用户。

Loomy
Loomy Hot

一款AI工具,主要用于科大讯飞发布的桌面级 AI 助理,比 OpenClaw 更易用、更安全!,适合需要提升相关任务效率的用户。

超级简历WonderCV

一款AI办公效率工具,主要用于免费求职简历模版下载制作,应届生职场人必备简历制作神器,适合需要提升相关任务效率的用户。

UP简历
UP简历 Hot

一款AI办公效率工具,主要用于基于AI技术的免费在线简历制作工具,适合需要提升相关任务效率的用户。

VibeKnow
VibeKnow Hot

一款AI视频创作工具,主要用于全球首个AI知识视频创作平台,文档、文章、网页,一键生成视频,适合需要提升相关任务效率的用户。

相关专题

更多
sort排序函数用法
sort排序函数用法

sort排序函数的用法:1、对列表进行排序,默认情况下,sort函数按升序排序,因此最终输出的结果是按从小到大的顺序排列的;2、对元组进行排序,默认情况下,sort函数按元素的大小进行排序,因此最终输出的结果是按从小到大的顺序排列的;3、对字典进行排序,由于字典是无序的,因此排序后的结果仍然是原来的字典,使用一个lambda表达式作为key参数的值,用于指定排序的依据。

1158

2023.09.04

php中foreach用法
php中foreach用法

本专题整合了php中foreach用法的相关介绍,阅读专题下面的文章了解更多详细教程。

798

2025.12.04

js 字符串转数组
js 字符串转数组

js字符串转数组的方法:1、使用“split()”方法;2、使用“Array.from()”方法;3、使用for循环遍历;4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容,供大家免费下载体验。

1818

2023.08.03

js截取字符串的方法
js截取字符串的方法

js截取字符串的方法有substring()方法、substr()方法、slice()方法、split()方法和slice()方法。本专题为大家提供字符串相关的文章、下载、课程内容,供大家免费下载体验。

2904

2023.09.04

java基础知识汇总
java基础知识汇总

java基础知识有Java的历史和特点、Java的开发环境、Java的基本数据类型、变量和常量、运算符和表达式、控制语句、数组和字符串等等知识点。想要知道更多关于java基础知识的朋友,请阅读本专题下面的的有关文章,欢迎大家来php中文网学习。

6204

2023.10.24

字符串介绍
字符串介绍

字符串是一种数据类型,它可以是任何文本,包括字母、数字、符号等。字符串可以由不同的字符组成,例如空格、标点符号、数字等。在编程中,字符串通常用引号括起来,如单引号、双引号或反引号。想了解更多字符串的相关内容,可以阅读本专题下面的文章。

6069

2023.11.24

java读取文件转成字符串的方法
java读取文件转成字符串的方法

Java8引入了新的文件I/O API,使用java.nio.file.Files类读取文件内容更加方便。对于较旧版本的Java,可以使用java.io.FileReader和java.io.BufferedReader来读取文件。在这些方法中,你需要将文件路径替换为你的实际文件路径,并且可能需要处理可能的IOException异常。想了解更多java的相关内容,可以阅读本专题下面的文章。

7654

2024.03.22

php中定义字符串的方式
php中定义字符串的方式

php中定义字符串的方式:单引号;双引号;heredoc语法等等。想了解更多字符串的相关内容,可以阅读本专题下面的文章。

11514

2024.04.29

Vite 项目如何打包和部署
Vite 项目如何打包和部署

Vite项目打包部署专题汇集生产构建、产物预览、输出目录、资源路径、Nginx与GitHub Pages部署及常见白屏和路由404问题的已审核文章,帮助读者完成上线流程。

60

2026.10.28

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
热门推荐
/
最新课程
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn