当前位置：首页 > 科技 > 软件

19个JavaScript数组常用方法总结！赶快收藏吧！

来源：责编：时间：2023-09-18 21:42:28 217观看

导读数组，是JavaScript中的一种数据格式，在JavaScript中经常使用。作为一名前端工程师，掌握Array的用法非常重要！那么，常用的数组方法你知道几个呢？如果不知道也没有关系，今天这篇文章将汇总详细介绍Array中常用的一些方法，一起来

数组，是JavaScript中的一种数据格式，在JavaScript中经常使用。作为一名前端工程师，掌握Array的用法非常重要！

那么，常用的数组方法你知道几个呢？

如果不知道也没有关系，今天这篇文章将汇总详细介绍Array中常用的一些方法，一起来学习一下吧！

01、push

功能：向数组末尾添加一个或多个元素，并返回数组的新长度。

//push()arry.push(element1,element2,...,elementN)

参数说明：element1、element2、…、elementN 是要添加到数组末尾的元素。

用法示例：

1. 将单个元素添加到数组末尾；

const numbers = [1, 2, 3];const length = numbers.push(4);console.log(numbers);  // [1, 2, 3, 4]console.log(length);   // 4

2、向数组末尾添加多个元素；

const fruits = ['apple', 'banana'];fruits.push('kiwi', 'orange');console.log(fruits);  // ['apple', 'banana', 'kiwi', 'orange']

02、pop

功能：删除并返回数组最后一个元素

//pop()arry.pop()

注意：pop()方法会修改原数组，并将数组长度减一。

用法示例：

const fruits = ['apple', 'banana', 'kiwi'];const removedElement = fruits.pop();console.log(fruits);          // ['apple', 'banana']console.log(removedElement);  // 'kiwi'

使用pop方法删除数组的最后一个元素；

03、shift

功能：删除并返回数组的第一个元素

//shift()array.shift()

用法示例：

1、使用shift删除元素，bing返回删除的元素；

const fruits = ['apple', 'banana', 'kiwi'];const removedElement = fruits.shift();console.log(fruits);          // ['banana', 'kiwi']console.log(removedElement);  // 'apple'

2.如果删除空数组，结果将返回undefined；

const emptyArray = [];const removedElement = emptyArray.shift();console.log(emptyArray);     // []console.log(removedElement);  // undefined

04、unshif

功能：向数组开头添加一个或多个元素，并返回数组的新长度

//unshif()arry.unshif(element1,element2,...,elementN)

element1、element2、...、elementN 是要添加到数组开头的元素。

用法示例：

1.基本用法，添加单个元素；

const numbers = [2, 3, 4];const length = numbers.unshift(1);console.log(numbers);  // [1, 2, 3, 4]console.log(length);   // 4

2.添加多个元素；

const fruits = ['banana', 'orange'];fruits.unshift('apple', 'kiwi');console.log(fruits);  // ['apple', 'kiwi', 'banana', 'orange']

05、concat

功能：将两个或多个数组合并成一个新数组

value1, value2, …, valueN 是要连接的数组或值。

用法示例：

1. 连接两个阵列：

const array1 = [1, 2, 3];const array2 = [4, 5, 6];const concatenatedArray = array1.concat(array2);console.log(concatenatedArray);  // [1, 2, 3, 4, 5, 6]

2. 连接数组和值：

const array = [1, 2, 3];const value = 4;const concatenatedArray = array.concat(value);console.log(concatenatedArray);  // [1, 2, 3, 4]

3. 连接多个阵列：

const array1 = [1, 2];const array2 = [3, 4];const array3 = [5, 6];const concatenatedArray = array1.concat(array2, array3);console.log(concatenatedArray);  // [1, 2, 3, 4, 5, 6]

06、slice

功能：从数组中提取指定范围的元素并返回一个新数组

//splicearray.slice(start,end)

参数说明：

start 为提取元素起始位置的索引（包括该索引对应的元素）；
end 是提取元素结束位置的索引（不包括该索引对应的元素）；

如果未指定 end 参数，则提取从起始索引位置到数组末尾的所有元素。

用法示例：

1、提取指定范围内的元素：

const fruits = ['apple', 'banana', 'kiwi', 'orange', 'grape'];const slicedElements = fruits.slice(1, 4);console.log(slicedElements);  // ['banana', 'kiwi', 'orange']

2、提取指定位置到数组末尾的元素：

const numbers = [1, 2, 3, 4, 5];const slicedElementsToEnd = numbers.slice(2);console.log(slicedElementsToEnd);  // [3, 4, 5]

3.复制数组：

const originalArray = [1, 2, 3, 4, 5];const copiedArray = originalArray.slice();console.log(copiedArray);  // [1, 2, 3, 4, 5]

07、splice

功能：删除、替换或添加元素到数组的指定位置

//splice()array.splice(start,deleteCount,item1,item2,...)

参数说明：

start 是要修改的起始位置的索引；
deleteCount 是要删除的元素数。

您可以根据需要指定item1、item2等参数来插入新元素。

如果未指定deleteCount，则删除从起始索引位置开始的所有元素。

用法示例：

1、删除元素：

const numbers = [1, 2, 3, 4, 5];const deletedElements = numbers.splice(2, 2);console.log(numbers);          // [1, 2, 5]console.log(deletedElements);  // [3, 4]

2. 更换元素：

const fruits = ['apple', 'banana', 'kiwi'];const replacedElements = fruits.splice(1, 1, 'orange', 'grape');console.log(fruits);             // ['apple', 'orange', 'grape', 'kiwi']console.log(replacedElements);   // ['banana']

3.插入元素：

const colors = ['red', 'blue', 'green'];colors.splice(1, 0, 'yellow', 'purple');console.log(colors);  // ['red', 'yellow', 'purple', 'blue', 'green']

08、join

功能：使用指定的分隔符将数组中的所有元素连接成字符串

//join（）array.join(separator)

分隔符是可选字符串参数，指定元素之间的分隔符，默认为逗号（,）。

用法示例：

1、数组之间用“-”分隔；

const fruits = ['apple', 'banana', 'kiwi'];const joinedString = fruits.join('-');console.log(joinedString);  // "apple-banana-kiwi"

2.默认使用逗号作为分隔符；

const numbers = [1, 2,3, 4, 5];const joinedStringDefault = numbers.join();console.log(joinedStringDefault);  // "1,2,3,4,5"

09、indexOf

功能：返回指定元素在数组中第一次出现的索引，如果没有找到则返回-1。

//indexOf()array.indexOf（searchElement,formIndex)

1、搜索下标位置第一次出现的位置；

const fruits = ['apple', 'banana', 'kiwi', 'banana', 'orange'];const index = fruits.indexOf('banana');console.log(index);  // 1

2、查找指定位置的下标位置；

const numbers = [1, 2, 3, 4, 5, 3, 2, 1];const indexFromIndex = numbers.indexOf(3, 3);console.log(indexFromIndex);  // 5

10、lastIndexOf

功能：返回数组中最后一次出现的指定元素的索引，如果没有找到则返回-1

//lastIndexOf（）array.lastIndexOf（searchElement,formIndex)

用法示例：

1、搜索数组中最后出现的下标位置；

const fruits = ['apple', 'banana', 'kiwi', 'banana', 'orange'];const lastIndex = fruits.lastIndexOf('banana');console.log(lastIndex);  // 3

2、从指定位置开始查找最后出现的下标位置；

const numbers = [1, 2, 3, 4, 5, 3, 2, 1];const lastIndexFromIndex = numbers.lastIndexOf(3, 4);console.log(lastIndexFromIndex);  // 2

11、forEach

功能：对数组中的每个元素执行指定的函数

forEach() 方法通常用于对数组中的每个元素执行操作，而不返回新数组。它提供了一种迭代数组并对每个元素执行相同操作的便捷方法。

注意：forEach()方法不能中断或跳过迭代，它会遍历数组中的每个元素，即使回调函数中使用了return语句，也不会中止遍历。

12、map

功能：对数组中的每个元素执行指定的函数，并返回由执行结果组成的新数组。

用法示例：

map()方法可以根据自定义的处理逻辑对数组中的每个元素进行变换。您可以使用它生成一个新数组，其元素是处理原始数组的结果。

常见的使用场景包括对数组中每个元素的计算、转换、映射等操作。

13、filter

作用：根据指定条件过滤掉数组中符合条件的元素，返回一个新数组

用法示例：

使用filter方法，可以从数组中过滤掉满足特定条件的元素。

14、reduce

功能：对数组中的所有元素执行指定的归约函数，并返回单值结果

参数说明：callback是回调函数，可以接受四个参数：

accumulator：累加器，用于保存计算结果。
currentValue：当前遍历的元素。
index：当前遍历元素的索引。
array：正在遍历的数组。

用法示例：

调用reduce()方法，传入累加函数(accumulator, currentValue) => Accumulator + currentValue，累加数组中所有元素。

累加器的初始值未指定，因此，reduce() 方法从数组的第一个元素开始，将当前元素添加到累加器，并更新累加器的值。最后返回的累加结果是数组所有元素的累加和。

15、sort

功能：对数组元素进行排序

用法示例：

// sort()const fruits = ['banana','apple','kiwi','pear'];fruits.sort();console.log(fruits);// Output:['apple','banana','kiwi','pear']

1、不传递参数调用sort，会直接修改原数组，返回排序后的数组；

2、传入比较函数，该函数接受两个参数，返回一个代表比较结果的数字；

16、reverse

功能：反转数组中元素的顺序

通过使用reverse()方法，可以轻松反转数组中元素的顺序，适用于需要反转数组内容的情况。

注意：reverse()方法会直接修改原数组，不会创建新数组。如果需要保留原始数组的副本并执行反向操作，可以先使用 slice() 方法创建一个新数组，然后调用reverse() 方法。

17、includes

功能：判断数组是否包含指定元素，返回true或false

用法示例：

1. 检查数组是否包含特定元素：

const numbers = [1, 2, 3, 4, 5];console.log(numbers.includes(3));  // trueconsole.log(numbers.includes(6));  // false

2.使用fromIndex参数指定搜索的起始位置：

const numbers = [1, 2, 3, 4, 5];console.log(numbers.includes(3, 2));  // true, search starts from index 2console.log(numbers.includes(3, 4));  // false, search starts from index 4

3. 检查数组中是否包含字符串：

const fruits = ['apple', 'banana', 'kiwi', 'pear'];console.log(fruits.includes('banana'));  // trueconsole.log(fruits.includes('grape'));   // false

18、some

功能：检查数组中是否至少有一个元素满足指定条件，返回true或false

用法示例：

1、检查数组中是否有大于10的元素：

const numbers = [5, 8, 12, 3, 9];const hasGreaterThan10 = numbers.some(element => element > 10);console.log(hasGreaterThan10);  // true

2. 检查数组中是否有偶数：

const numbers = [3, 7, 5, 12, 9];const hasEvenNumber = numbers.some(element => element % 2 === 0);console.log(hasEvenNumber);  // true

3. 检查数组中是否存在包含特定字符的字符串：

const fruits = ['apple', 'banana', 'kiwi', 'pear'];const hasStrWithChar = fruits.some(element => element.includes('a'));console.log(hasStrWithChar);  // true

4、检查数组中是否存在满足复杂条件的元素：

const students = [  { name: 'Alice', score: 85 },  { name: 'Bob', score: 92 },  { name: 'Charlie', score: 76 },];const hasPassingScore = students.some(student => student.score >= 80);console.log(hasPassingScore);  // true

19、every

功能：检查数组中所有元素是否满足指定条件，返回true或false

用法示例：

1.检查数组中的所有元素是否都大于 0：

const numbers = [5, 8, 12, 3, 9];const allGreaterThan0 = numbers.every(element => element > 0);console.log(allGreaterThan0);  // true

2.检查数组中的所有元素是否都是偶数：

const numbers = [2, 4, 6, 8, 10];const allEvenNumbers = numbers.every(element => element % 2 === 0);console.log(allEvenNumbers);  // true

3.检查数组中的所有字符串是否以大写字母开头：

const words = ['Apple', 'Banana', 'Cherry', 'Durian'];const allUpperCaseStart = words.every(element => /^[A-Z]/.test(element));console.log(allUpperCaseStart);  // true

4.检查数组中的所有对象是否满足特定条件：

const students = [  { name: 'Alice', score: 85 },  { name: 'Bob', score: 92 },  { name: 'Charlie', score: 76 },];const allPassingScore = students.every(student => student.score >= 80);console.log(allPassingScore);  // false

总结

以上就是我今天与你分享的19个常用的Array方法，你学会了吗？

当然，Array在ES6中还有一些更高级的使用方法，可以更加快速地操作Array。

本文链接：http://www.28at.com/showinfo-26-10493-0.html19个JavaScript数组常用方法总结！赶快收藏吧！

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com

上一篇： Nginx map 实现时间格式转换

下一篇：深入探究微服务架构下 API 网关的发展趋势

标签：

热门焦点

太卷！Redmi MAX 100英寸电视便宜了：12999元买Redmi史上最大屏

8月5日消息，从小米商城了解到，Redmi MAX 100英寸巨屏电视日前迎来官方优惠，到手价12999元，比发布价便宜了7000元，在大屏电视市场开卷。据了解，Redmi MAX 100
之家push系统迭代之路

前言在这个信息爆炸的互联网时代，能够及时准确获取信息是当今社会要解决的关键问题之一。随着之家用户体量和内容规模的不断增大，传统的靠"主动拉"获取信息的方式已不能满足用
破圈是B站头上的紧箍咒

来源 | 光子星球撰文 | 吴坤谚编辑 | 吴先之每年的暑期档都少不了瞄准追剧女孩们的古偶剧集，2021年有优酷的《山河令》，2022年有爱奇艺的《苍兰诀》，今年却轮到小破站抓住了追
阿里瓴羊One推出背后，零售企业迎数字化新解

作者:刘旷近年来随着数字经济的高速发展，各式各样的SaaS应用服务更是层出不穷，但本质上SaaS大多局限于单一业务流层面，对用户核心关切的增长问题等则没有提供更好的解法。在Saa
华为Mate 60系列用上可变灵动岛：正式版体验将会更出色

这段时间以来，关于华为新旗舰的爆料日渐密集。据此前多方爆料，今年华为将开始恢复一年双旗舰战略，除上半年推出的P60系列外，往年下半年的Mate系列也将
华为开发者大会2023日程公开：开设鸿蒙HarmonyOS 4体验区

IT之家 7 月 31 日消息，华为今日公布了 HDC.Together 开发者大会 2023 的详细日程。整场大会将于 8 月 4 日-6 日之间举行，届时将发布最新一代鸿蒙 H
三星电子Q2营收60万亿韩元存储业务营收同比仍下滑超过50%

7月27日消息，据外媒报道，从三星电子所发布的财报来看，他们主要利润来源的存储芯片业务在今年二季度仍不乐观，营收同比仍在大幅下滑，所在的设备解决方案
质感不错！OPPO K11渲染图曝光：旗舰IMX890传感器首次下放

一直以来，OPPO K系列机型都保持着较为均衡的产品体验，历来都是2K价位的明星机型，去年推出的OPPO K10和OPPO K10 Pro两款机型凭借各自的出色配置，堪称有
由于成本持续增加，笔记本产品价格预计将明显上涨

根据知情人士透露，由于材料、物流等成本持续增加，笔记本产品价格预计将在2021年下半年有明显上涨。进入6月下旬以来，全球半导体芯片缺货情况加剧，显卡、处理器