前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >简单的复习下这15个常用的 JS 数组方法

简单的复习下这15个常用的 JS 数组方法

作者头像
前端达人
发布2023-08-31 08:52:24
1580
发布2023-08-31 08:52:24
举报
文章被收录于专栏:前端达人
英文 | https://medium.com/@piyushkesarwani72/15-must-know-javascript-array-methods-58d78c4e4a35

数组是任何编程语言的重要组成部分,JavaScript 也不例外。使用数组,开发人员可以存储和操作数据集合,包括字符串、数字甚至对象。

在本文中,我们将介绍每个人都应该知道的 15 个必须知道的 JavaScript 数组方法。

01、Push()

将一个或多个元素添加到数组末尾 Push() 方法将一个或多个元素添加到数组末尾并返回数组的新长度。当您需要向数组添加元素而不指定索引时,此方法非常有用。

代码语言:javascript
复制
const array = [1, 2, 3];  array.push(4, 5);  console.log(array); // Output: [1, 2, 3, 4, 5]

02、pop()

删除并返回数组中的最后一个元素 pop() 方法删除并返回数组中的最后一个元素。当您需要从数组末尾删除元素时,此方法非常有用。

代码语言:javascript
复制
const array = [1, 2, 3];
    const lastElement = array.pop();
    console.log(array); // Output: [1, 2]
    console.log(lastElement); // Output: 3

03、shift()

删除并返回数组中的第一个元素 shift() 方法删除并返回数组中的第一个元素。当您需要从数组开头删除元素时,此方法非常有用。

代码语言:javascript
复制
const array = [1, 2, 3];
    const firstElement = array.shift();
    console.log(array); // Output: [2, 3]
    console.log(firstElement); // Output: 1

04、unshift()

将一个或多个元素添加到数组的开头 unshift() 方法将一个或多个元素添加到数组的开头并返回数组的新长度。当您需要在数组的开头添加元素时,此方法非常有用。

代码语言:javascript
复制
const array = [1, 2, 3];
    array.unshift(4, 5);
    console.log(array); // Output: [4, 5, 1, 2, 3]

05、splice()

在数组的指定索引处添加或删除元素 splice() 方法在数组的指定索引处添加或删除元素。此方法可用于在数组中的任何位置添加或删除元素。

代码语言:javascript
复制
const array = [1, 2, 3, 4];
    array.splice(1, 2, 5, 6);
    console.log(array); // Output: [1, 5, 6, 4]

06、slice()

返回由起始索引和结束索引指定的数组部分的副本 slice() 方法返回由起始索引和结束索引指定的数组部分的副本。此方法可用于创建包含原始数组子集的新数组。

代码语言:javascript
复制
cCopy codeconst array = [1, 2, 3, 4];
    const newArray = array.slice(1, 3);
    console.log(newArray); // Output: [2, 3]

07、concat()

组合两个或多个数组并返回一个新数组 concat() 方法组合两个或多个数组并返回一个新数组。此方法可用于将数组连接在一起,而无需修改原始数组。

代码语言:javascript
复制
arduinoCopy codeconst array1 = [1, 2];
    const array2 = [3, 4];
    const newArray = array1.concat(array2);
    console.log(newArray); // Output: [1, 2, 3, 4]

08、join()

将数组的所有元素连接成字符串 join() 方法使用指定的分隔符将数组的所有元素连接成字符串。此方法可用于从数组创建字符串。

代码语言:javascript
复制
const array = [1, 2, 3];  const string = array.join("-");  console.log(string); // Output: "1-2-3"

09、indexOf()

返回数组中指定元素第一次出现的索引 indexOf() 方法返回数组中指定元素第一次出现的索引。如果未找到该元素,则此方法返回 -1。

代码语言:javascript
复制
const array = [1, 2, 3];  const index = array.indexOf(2);  console.log(index); // Output: 1

10、lastIndexOf()

返回数组中最后一次出现的指定元素的索引 lastIndexOf() 方法返回数组中最后一次出现的指定元素的索引。如果未找到该元素,则此方法返回 -1。

代码语言:javascript
复制
const array = [1, 2, 3, 2];  const index = array.lastIndexOf(2);  console.log(index); // Output: 3

11、forEach()

对数组中的每个元素执行一次提供的函数 forEach() 方法对数组中的每个元素执行一次提供的函数。该方法可用于对数组的每个元素执行操作。

代码语言:javascript
复制
const array = [1, 2, 3];  array.forEach((element) => {  console.log(element);  });  // Output:  // 1  // 2  // 3

12、map()

创建一个新数组,其中包含对数组中每个元素调用提供的函数的结果。map() 方法创建一个新数组,其中包含对数组中每个元素调用提供的函数的结果。该方法可用于在原始数组的基础上创建一个新数组。

代码语言:javascript
复制
const array = [1, 2, 3];  const newArray = array.map((element) => {  return element * 2;  });  console.log(newArray); // Output: [2, 4, 6]

13、filter()

创建一个新数组,其中包含通过所提供函数指定的测试的所有元素。filter() 方法创建一个新数组,其中包含通过所提供函数指定的测试的所有元素。此方法可用于根据条件创建新数组。

代码语言:javascript
复制
const array = [1, 2, 3];  const newArray = array.filter((element) => {  return element > 1;  });  console.log(newArray); // Output: [2, 3]

14、reduce()

对数组的每个元素执行提供的函数并返回单个值。reduce() 方法对数组的每个元素执行提供的函数并返回单个值。此方法可用于对数组的所有元素执行操作并返回单个值。

代码语言:javascript
复制
const array = [1, 2, 3];  const sum = array.reduce((accumulator, currentValue) => {  return accumulator + currentValue;  }, 0);  console.log(sum); // Output: 6

15、sort()

对数组的元素就地排序 sort() 方法对数组的元素就地排序。此方法可用于按升序或降序对数组进行排序。

代码语言:javascript
复制
const array = [3, 2, 1];
array.sort();
console.log(array); // Output: [1, 2, 3]

结论

在今天的文章中,我们介绍了15 个开发者必须知道的 JavaScript 数组方法。这些方法对于在 JavaScript 中使用数组至关重要,并且可以极大地简化您的代码。

通过使用这些方法,您可以对数组执行各种操作,例如添加、删除、排序和过滤元素。无论您是初学者还是经验丰富的开发人员,掌握这些数组方法都将使您的生活更轻松,代码更高效。

最后,祝您编程愉快!

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2023-07-04,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 前端达人 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档