文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2024-11-30 08:32

关注

那么,常用的数组方法你知道几个呢?

如果不知道也没有关系,今天这篇文章将汇总详细介绍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

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

//splice
array.slice(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,...)

参数说明:

您可以根据需要指定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是回调函数,可以接受四个参数:

用法示例:

调用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));  // true
console.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 2
console.log(numbers.includes(3, 4));  // false, search starts from index 4

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

const fruits = ['apple', 'banana', 'kiwi', 'pear'];
console.log(fruits.includes('banana'));  // true
console.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。

来源:web前端开发内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯