24个简单的示例复习下JS数组的相关方法

╰半夏微凉° 2022-09-09 11:54 124阅读 0赞

![c115c26d3502bd618cc9145370ef7e8c.png][]

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

翻译 | 杨小二

## **1、创建数组**    ##

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

![c15d8a5c483d98988d46119db530a8c1.png][]

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

![ab538bc5a7d53a983d8d832cdff17d25.png][]

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

例如：

![4ae68def47a37114e90b8689e4c40566.png][]

## **2、访问数组元素** ##

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

![6e3962b4ad978fce6adb44e93c3c25ca.png][]

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

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

## **3、访问完整数组** ##

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

例如：

![f3bb3635617b1326bbaf913609ca373b.png][]

## **4、在数组中添加元素** ##

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

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

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

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

## **6、改变数组中的元素** ##

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

![87af0508e3093ef369aa27cf362b3c6a.png][]

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

## **7、检查数组中值的存在** ##

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

例如：

![2316c0dddaffb70f61f8239af5864f48.png][]

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

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

![a6c49b9aaa1b9d1512ba05190c8fbdc3.png][]

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

## **9、合并数组** ##

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

![aa13b9241330ef86644ee91ea36eecff.png][]

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

## **10、数组切片** ##

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

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

## **11、数组转字符串** ##

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

![1cb8d45ab81662376de7f25d6a5c3155.png][]

**1****2、对数组****进行排序**

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

![993a610d4a97042d1ec2546fea1f8bc8.png][]

## **13、反转数组** ##

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

例如：

![f3d8891ecd7b34958c1440c5073d579d.png][]

## **14、数字排序** ##

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

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

例如：

![f9da4b8f7398ad5dc8f91f02120ef63d.png][]

## **15、找出数组中的最大数** ##

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

例如：

## **![7a74aedf1e2d3a96d560f5e67e332855.png][]** ##

## **16、求数组的最小值** ##

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

例如：

![e24cd10369c4a3dda0bb81493c34e0a4.png][]

## **17、join()方法** ##

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

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

## **18 、fill()数组的方法** ##

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

例如：

![9e0828d201dd52dbe27fd28658adf12a.png][]

## **19、indexof()数组方法** ##

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

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

例如：

![03d781a21ec63f3d156ef160cc13263e.png][]

## **20、Array.forEach()方法** ##

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

例如：

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

![e915b68db6e476431757d0819815155a.png][]

## **21、Array.map()方法** ##

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

例如：

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

![393d290b85096024287c9903a8c18c7f.png][]

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

## **22 、Array.filter()方法** ##

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

![078d3203080cd6dd09f7e8e152749c95.png][]

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

## **23、reduce ()方法** ##

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

例如：

![0f32f3f690c6285cd509751289abf861.png][]

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

## **24、every()方法** ##

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

![d35bc4a43289d283eaf639c050ca1ee9.png][]

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

**学习更多技能**

**请点击下方公众号**

![06a0c96bdb55979fadd5746ec1ddfcf5.gif][]

[c115c26d3502bd618cc9145370ef7e8c.png]: /images/20220829/356870932d454ec38513baaca576093c.png
[c15d8a5c483d98988d46119db530a8c1.png]: /images/20220829/7ef46ecfbb0d444d8ad0dd5ff23d8e9f.png
[ab538bc5a7d53a983d8d832cdff17d25.png]: /images/20220829/c2bccf02fd334357a1ffe91351d42329.png
[4ae68def47a37114e90b8689e4c40566.png]: /images/20220829/98295e8836c949a0ad4fbc011d9a9e1d.png
[6e3962b4ad978fce6adb44e93c3c25ca.png]: /images/20220829/a15950b32ba841e3aeb12780ac774c5a.png
[f3bb3635617b1326bbaf913609ca373b.png]: /images/20220829/2b7cee9130834df0a3741dadfbc99272.png
[87af0508e3093ef369aa27cf362b3c6a.png]: /images/20220829/1ad9a6f0e39d4b98932cc2e21a333e87.png
[2316c0dddaffb70f61f8239af5864f48.png]: /images/20220829/c7ae602822764b3a8ddc96791345f5d6.png
[a6c49b9aaa1b9d1512ba05190c8fbdc3.png]: /images/20220829/bb86a4d76ac84b8f9f213876f151c430.png
[aa13b9241330ef86644ee91ea36eecff.png]: /images/20220829/3ae92c5a22e84fcb84c3afadeec9fbd2.png
[1cb8d45ab81662376de7f25d6a5c3155.png]: /images/20220829/92721d438254462caa02612eaa0ce76c.png
[993a610d4a97042d1ec2546fea1f8bc8.png]: /images/20220829/6b7bf9ed7c854c7f9f14991cabc641b5.png
[f3d8891ecd7b34958c1440c5073d579d.png]: /images/20220829/011858d3d0fb4e0baf9dcc43989861e4.png
[f9da4b8f7398ad5dc8f91f02120ef63d.png]: /images/20220829/558be7796fc54b8bba0d4a5349dcea88.png
[7a74aedf1e2d3a96d560f5e67e332855.png]: /images/20220829/6a35c7891f3640ddad6d6fb611d415ee.png
[e24cd10369c4a3dda0bb81493c34e0a4.png]: /images/20220829/dba5bd92098a4b7cb93c08d239e63a32.png
[9e0828d201dd52dbe27fd28658adf12a.png]: /images/20220829/7b88b51805e84742934f1926251dec9e.png
[03d781a21ec63f3d156ef160cc13263e.png]: /images/20220829/0a8c9b6a2ca64972b445c85a88f901ed.png
[e915b68db6e476431757d0819815155a.png]: /images/20220829/d95eda44fb0b42cea489ecb9a858f4d2.png
[393d290b85096024287c9903a8c18c7f.png]: /images/20220829/6e3fc2a51e6e41f58c6872d599347ca2.png
[078d3203080cd6dd09f7e8e152749c95.png]: /images/20220829/0b177d383a054b62b52794ded209d15f.png
[0f32f3f690c6285cd509751289abf861.png]: /images/20220829/9d29281bc911434185fb12b51331dfc6.png
[d35bc4a43289d283eaf639c050ca1ee9.png]: /images/20220829/9752acfb97e643ba9406314462ae502f.png
[06a0c96bdb55979fadd5746ec1ddfcf5.gif]: /images/20220829/735e7c73e39a4d6f9a933e73c3143efe.png