首页 > 编程语言 >24个带有示例的 JavaScript 数组方法

24个带有示例的 JavaScript 数组方法

时间:2022-11-21 16:01:51浏览次数:45  
标签:24 JavaScript 示例 创建 元素 索引 数组 使用 方法

24个带有示例的 JavaScript 数组方法_数组

英文 | https://javascript.plainenglish.io/a-6-minute-guide-to-24-javascript-array-methods-52bf5f0e209c

翻译 | 杨小二


1、创建数组

在Javascript中有多种创建数组的方法,最简单的一种是简单地将数组值分配给变量。

24个带有示例的 JavaScript 数组方法_javascript_02

  • 创建数组的另一种方法是创建一个空数组,然后为其赋值。

24个带有示例的 JavaScript 数组方法_javascript_03

请注意,你也可以使用数组构造函数来创建数组。

例如:

24个带有示例的 JavaScript 数组方法_数组_04

2、访问数组元素

你可以使用索引值访问数组元素。创建长度为N的数组时,值存储在从索引(0)到(N-1)的数组中。

24个带有示例的 JavaScript 数组方法_数组_05

在上面给出的数组grades[0] return 'A' 中,还要注意索引值应该总是在方括号中给出。

你可以使用for循环或任何其他循环遍历数组以访问数组元素。

3、访问完整数组

可以通过引用数组名称来访问整个数组。

例如:

24个带有示例的 JavaScript 数组方法_javascript_06

4、在数组中添加元素

  • 元素可以添加在开始、结束或开始和结束之间的某个位置。
  • 要在开头添加元素,你可以使用unshift()方法,而要在结尾添加元素,你可以使用push() 方法。

提示:你还可以使用splice()方法向数组添加元素。

5、从数组中移除一个元素

  • 从数组中删除元素的最简单方法是使用pop()方法,该方法返回数组的最后一个元素并更改原始数组。
  • 另一种从数组中删除元素的方法是使用shift()方法,它与pop()方法类似,但从数组的开头删除并返回一个元素。

6、改变数组中的元素

更改数组中特定位置的元素很简单,只需为该特定索引分配一个新值即可实现。

24个带有示例的 JavaScript 数组方法_数组_07

此方法更改原始数组,新数组的第0个索引将具有与原始数组不同的值。

7、检查数组中值的存在

  • 要检查元素是否存在于数组中,我们可以使用Array.isArray(value)方法 & 如果该值存在于数组中,则返回true。

例如:

24个带有示例的 JavaScript 数组方法_数组元素_08

8、从数组中删除一个元素

  • 使用 Javascript 操作符delete可以轻松删除数组元素;

24个带有示例的 JavaScript 数组方法_数组元素_09

但是 delete 方法有一个问题,因为它在数组中留下了未定义的空洞,所以我们应该使用pop()或shift()而不是 delete。

9、合并数组

  • 可以使用concat()方法将两个不同的数组连接起来形成一个数组。

24个带有示例的 JavaScript 数组方法_数组元素_10

此方法不会更改原始数组并返回一个新数组。

10、数组切片

slice()方法切片阵列的一部分到一个新的数组。此方法在不更改原始数组的情况下创建一个新数组。

  • 此方法最多可以接受两个参数,其中第一个参数对应于切片的开始,第二个参数对应于切片的最后一个索引。

11、数组转字符串

使用toString () 方法可以轻松地将数组转换为逗号分隔的字符串。

24个带有示例的 JavaScript 数组方法_数组_11

12、对数组进行排序

要按字母顺序对数组进行排序,你可以使用sort ()方法。

24个带有示例的 JavaScript 数组方法_javascript_12

13、反转数组

Javascript 提供了一个reverse () 方法来反转数组。

例如:

24个带有示例的 JavaScript 数组方法_javascript_13

14、数字排序

在 Javascript 中,sort()方法用于按字母顺序对字符串数组进行排序。

  • 但是如果与数字数组一起使用,此方法将给出不正确的结果。由于这个原因,我们使用 compare 函数和sort()对包含数值的数组进行排序。

例如:

24个带有示例的 JavaScript 数组方法_javascript_14

15、找出数组中的最大数

你可以使用Math.max.apply查找数组中的最大数字。

例如:

24个带有示例的 JavaScript 数组方法_数组元素_15

16、求数组的最小值

你可以使用Math.min.apply来查找数组中的最小值。

例如:

24个带有示例的 JavaScript 数组方法_数组元素_16

17、join()方法

此方法通过逗号分隔符连接数组的所有元素并返回一个字符串。逗号是默认分隔符,但你可以为该方法选择不同的分隔符。

在空数组上应用此方法会返回一个空字符串。

18 、fill()数组的方法

此方法通过用静态值填充数组来更改原始数组。你可以将所有元素更改为静态或少数选定元素。

例如:

24个带有示例的 JavaScript 数组方法_数组元素_17

19、indexof()数组方法

当你知道一个元素并想要获取该元素在数组中的索引时,此方法被证明很方便。此方法返回函数中传递的元素的索引。

  • 它返回第一次出现的索引,如果该元素不存在于数组中,则返回-1。

例如:

24个带有示例的 JavaScript 数组方法_javascript_18

20、Array.forEach()方法

此方法为数组中的每个元素调用一次函数(回调)。

例如:

该函数需要 3 个输入:项目值、项目索引、数组

24个带有示例的 JavaScript 数组方法_数组元素_19

21、Array.map()方法

该函数通过对数组的每个元素应用一个函数来创建一个新数组。

例如:

此方法不会更改原始数组。

24个带有示例的 JavaScript 数组方法_数组_20

在上面的例子中,每个数组元素乘以10。

22 、Array.filter()方法

此方法使用通过给定测试的数组元素创建一个新数组。

24个带有示例的 JavaScript 数组方法_数组元素_21

上面的例子创建了一个元素小于15的新数组。

23、reduce ()方法

此方法在每个数组元素上运行一个函数以减少到单个值而不更改原始数组。

例如:

24个带有示例的 JavaScript 数组方法_javascript_22

上面的例子返回数组所有元素的总和。

24、every()方法

此方法检查所有数组元素是否通过测试。

24个带有示例的 JavaScript 数组方法_数组_23

上面的示例检查数组的所有元素是否都大于 10。

24个带有示例的 JavaScript 数组方法_数组_24

24个带有示例的 JavaScript 数组方法_数组元素_25


标签:24,JavaScript,示例,创建,元素,索引,数组,使用,方法
From: https://blog.51cto.com/u_15809510/5874084

相关文章

  • 11个提高技能的JavaScript 技巧,附中奖者名单
    英文|https://levelup.gitconnected.com/12-javascript-features-youve-probably-never-used-db932c413cdd翻译|杨小二当我开始学习JavaScript时,我总是很想找到可以节......
  • javaScript 纯函数
    一个函数的返回结果只依赖于它的参数,并且在执行过程里面没有副作用,我们就把这个函数叫做纯函数。为什么要煞费苦心地构建纯函数?因为纯函数非常靠谱,执行一个纯函数你不用担......
  • 多种语言---安全的文件操作示例
    文件校验方式读取或者写入文件时必须文件进行校验,防止软连接攻击或者提权攻击,如果校验后再打开文件操作,很容易被构造条件竞争攻击。因此较安全的方式是先将文件打开,然后再......
  • Java工具库Guava本地缓存Cache的使用、回收、刷新、统计等示例
    场景Java核心工具库Guava介绍以及Optional和Preconditions使用进行非空和数据校验:https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/127683387在上面引入Gua......
  • 轻松学会JavaScript事件
    文章目录​​事件与事件流​​​​事件监听(绑定事件方法)​​​​JavaScript事件​​​​鼠标事件​​​​表单事件​​​​键盘事件​​​​UI事件​​​​快速投票​​  ......
  • P2448 无尽的生命
    可以把连续不改变的一条线段看做一个点,重新赋值,求逆序对即可。注意开\(longlong\)!#include<iostream>#include<algorithm>#include<cmath>#include<cstring>#incl......
  • JavaScript基础快速复习
    目录学习信息01初识JavaScript浏览器执行JS过程JS的组成JS初体验JS的注释02JavaScript输入输出语句03变量变量概述变量的使用变量的语法扩展变量的命名规范04数......
  • javascript - 练习题:事件练习 - 贪吃蛇
    贪吃蛇原生JS(非面向对象的方式),渡一教学的笔记;地图坐标{0,0}{1,0}{2,0}{3,0}{4,0}{0,1}{1,1}{2,1}{3,1}{4,1}{0,2}{1,2}{2,2}{3,2}{4,2}{0,3}{1,3}{2,3}{3,3}{4,3}{0,4}{1,4}......
  • ABC245G题解
    似乎是经典套路?先不考虑颜色限制,那么就直接把\(l\)个关键点当作起点跑多源最短路就行了。现在考虑颜色限制,有一种暴力的想法是枚举所有颜色,只把这种颜色的点当作起点,然......
  • javascript入门
    javascript入门1.javascript的介绍JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部......