广告
返回顶部
首页 > 资讯 > 精选 >JavaScript数组有哪些常用方法
  • 852
分享到

JavaScript数组有哪些常用方法

2023-06-25 13:06:19 852人浏览 薄情痞子
摘要

这篇文章主要介绍了javascript数组有哪些常用方法,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。1、前言数组方法有太多了,本文记录一些本人容易记错的一些数组方法,用于巩

这篇文章主要介绍了javascript数组有哪些常用方法,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

1、前言

数组方法有太多了,本文记录一些本人容易记错的一些数组方法,用于巩固及复习。
后续会慢慢的将其他数组方法添加进来。
善用数组方法可以使数据处理变的优雅且简单。

那下面让我们开始吧:

2、filter()

描述:

filter() 方法创建一个新数组,并将符合条件的所有元素添加到创建的新数组中。

语法:

Array.filter(callback(element, index, array) { // 函数体 }, thisValue)

参数:

callbackthisValue:


参数是否可选描述
参数一callback必选用来测试数组的每个元素的函数。返回 true 表示该元素通过测试,保留该元素,false 则不保留。它接收三个参数。
参数二thisValue可选执行 callback 时,用于 this 的值。
对象作为该执行回调时使用,传递给函数。
如果省略了 thisValue ,"this" 的值为 "undefined"

callback的参数列表:


参数是否可选描述
参数一element必选当前元素
参数二index可选当前元素的索引
参数三array可选调用了 filter 的数组本身

thisValue的参数:

执行 callback 时,用于 this 的值。

返回值:

是一个由 filter() 参数一函数的返回值组成的新数组

示例:

let users = [  {id: 11, name: "孙悟空"},  {id: 21, name: "猪八戒"},  {id: 31, name: "沙和尚"}];// 返回前两个用户的数组let filterUsers = users.filter(item => item.id < 31);console.log(filterUsers.length); // 2

3、map()

描述:

map() 方法创建一个新数组,新数组的每个元素是调用一次给定函数的返回值。

语法:

Array.map(callback(currentValue, index, array) { // 函数体 }, thisValue)

参数:

callbackthisValue


参数是否可选描述
参数一callback必选数组中的每个元素都要运行的回调函数。它接收三个参数。
参数二thisValue可选执行 callback 时,用于 this 的值。
对象作为该执行回调时使用,传递给函数。
如果省略了 thisValue ,"this" 的值为 "undefined"

callback的参数列表:


参数是否可选描述
参数一element必选当前元素
参数二index可选当前元素的索引值
参数三array可选调用了 filter 的数组本身

thisValue的参数:

执行 callback 时,用于 this 的值。

返回值:

是一个由原数组每个元素执行回调函数的结果组成的新数组。

示例:

let number = [1, 2, 3].map(item => item + 1);console.log(lengths); // 2, 3, 4

4、sort()

描述:

map() 方法在原数组上进行修改更改元素的顺序

注:默认排序顺序是在将元素转换为字符串,然后比较它们的UTF-16代码单元值序列时

语法:

Array.sort( compareFunction )

参数:

compareFunction


参数是否可选描述
参数一compareFunction可选规定排列顺序的函数。如果省略,元素按照转换为的字符串的各个字符的Unicode位点进行排序。

compareFunction的参数列表:


参数是否可选描述
参数一firstEl必选第一个用于比较的元素。
参数二secondEl必选第二个用于比较的元素。

compareFunction返回值

返回一个说明这两个值顺序的数字

  • 若 a 小于 b,在排序后的数组中 a 应该出现在 b 之前,则返回一个小于 0 的值。

  • 若 a 等于 b,则返回 0。

  • 若 a 大于 b,则返回一个大于 0 的值。

返回值:

返回值为排序后的数组,但是返回值通常会被忽略,因为修改了原数组。

示例:

let number = [1, 2, 3].map(item => item + 1);console.log(lengths); // 2, 3, 4

5、reduce()

描述:
reduce() 方法为数组中的每一个元素依次执行(升序执行)回调函数,不包括数组中被删除或从未被赋值的元素。将其结果计算为一个值。

注:reduce() 可以作为一个高阶函数,用于函数的 compose。

语法:

Array.reduce(callback(accumulator, currentValue, index, array), initialValue)

参数:

callbackinitialValue


参数是否可选描述
参数一callback必选执行数组中每个数组元素的函数 (如果没有initialValue初始值那么第一个值不会执行改函数)它接收四个参数。
参数二initialValue可选callback函数的初始值

callback的参数列表:


参数是否可选描述
参数一accumulator必选累计器累计回调的返回值; 它是上一次调用回调时返回的累积值,或initialValue。
参数二currentValue必选当前元素
参数三index可选当前元素的索引值
参数四array可选调用了 reduce() 的数组本身

initialValue的参数:

作为第一次调用 callback函数时的第一个参数的值。 如果没有提供初始值,则将使用数组中的第一个元素作为初始值。 在没有初始值的空数组上调用 reduce 将报错。

返回值:

函数累计处理后的结果
执行完所有callback函数的accumulator参数

注:    我们的 reducer 函数的返回值分配给累计器,该返回值在数组的每个迭代中被记住,并最后成为最终的单个结果值。

示例:

let number = [1, 2, 3, 4];let result = number.reduce((sum, current) => sum + current, 0);console.log(result); // 10

6、forEach()

描述:

reduce() 方法为数组中的每一个元素依次执行(升序执行)回调函数,不包括数组中被删除或从未被赋值的元素。将其结果计算为一个值。

注:reduce() 可以作为一个高阶函数,用于函数的 compose。

语法:

Array.forEach(callback(currentValue , index , array), thisValue)

参数:

callbackthisValue


参数是否可选描述
参数一callback必选执行数组中每个数组元素的函数,它接收三个参数。
参数二thisValue可选执行 callback 时,用于 this 的值。
对象作为该执行回调时使用,传递给函数。
如果省略了 thisValue ,"this" 的值为 "undefined"

callback的参数列表:


参数是否可选描述
参数一currentValue必选当前元素
参数二index可选当前元素的索引值
参数三array可选调用了 forEach() 的数组本身

thisValue的参数:

执行 callback 时,用于 this 的值。

返回值:

该方法没有返回值。

示例:

let number = [1, 2, 3, 4];number.forEach((item, index ,array) =>{ console.log(item); // 1/2/3/4});

7、方法列表

方法属性:

方法改变原数组返回值描述描述
filter()过滤后的新数组过滤器
map()循环后的新数组循环
sort()为排序后的数组排序
reduce()为函数累计处理后的结果累加器
forEach()没有返回值为undefined循环

感谢你能够认真阅读完这篇文章,希望小编分享的“JavaScript数组有哪些常用方法”这篇文章对大家有帮助,同时也希望大家多多支持编程网,关注编程网精选频道,更多相关知识等着你来学习!

--结束END--

本文标题: JavaScript数组有哪些常用方法

本文链接: https://www.lsjlt.com/news/305256.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • JavaScript数组有哪些常用方法
    这篇文章主要介绍了JavaScript数组有哪些常用方法,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。1、前言数组方法有太多了,本文记录一些本人容易记错的一些数组方法,用于巩...
    99+
    2023-06-25
  • 常用的JavaScript数组方法有哪些
    常用的JavaScript数组方法有:1. push():将一个或多个元素添加到数组的末尾,并返回新数组的长度。2. pop():删...
    99+
    2023-10-12
    JavaScript
  • JavaScript常用的数组方法有哪些
    这篇文章主要讲解了“JavaScript常用的数组方法有哪些”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“JavaScript常用的数组方法有哪些”吧!不会...
    99+
    2022-10-19
  • JavaScript数组常用的方法有哪些
    这篇文章主要介绍“JavaScript数组常用的方法有哪些”,在日常操作中,相信很多人在JavaScript数组常用的方法有哪些问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”...
    99+
    2022-10-19
  • JavaScript数组常见使用方法有哪些
    今天小编给大家分享一下JavaScript数组常见使用方法有哪些的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。1. push...
    99+
    2023-07-04
  • JavaScript中数组Array的常用方法有哪些
    这篇文章主要为大家展示了“JavaScript中数组Array的常用方法有哪些”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“JavaScript中数组Array的常用方法有哪些”这篇文章吧。一....
    99+
    2023-06-25
  • javascript中数组去重常用方法有哪些
    这篇文章将为大家详细讲解有关javascript中数组去重常用方法有哪些,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。具体如下:数组去除重复值是面试常考内容,也是很容易用...
    99+
    2022-10-19
  • JavaScript原生数组Array常用方法有哪些
    这篇文章给大家分享的是有关JavaScript原生数组Array常用方法有哪些的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。栈方法push方法和pop方法, 可以使数组的行为类似...
    99+
    2022-10-19
  • 常用的javascript数组操作方法有哪些
    这篇文章主要介绍“常用的javascript数组操作方法有哪些”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“常用的javascript数组操作方法有哪些”文章能帮助...
    99+
    2022-10-19
  • javascript中常见的数组方法有哪些
    小编给大家分享一下javascript中常见的数组方法有哪些,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!javascript数组方法有:concat()、join()、pop()、push()、revers&#...
    99+
    2023-06-14
  • JavaScript数组合并的常见方法有哪些
    这篇文章主要介绍了JavaScript数组合并的常见方法有哪些的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇JavaScript数组合并的常见方法有哪些文章都会有所收获,下面我们一起来看看吧。1.ES6 解构[...
    99+
    2023-07-04
  • javascript数组的方法有哪些
    javascript数组的方法有哪些,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。在日常开发中,我们会接触到js中数组的一些方法,这些方法对我们来说,可以很遍历...
    99+
    2023-06-28
  • JavaScript数据数组方法有哪些
    JavaScript数据数组方法有哪些,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。  好程序员web前端培训分享JavaScript数据...
    99+
    2022-10-19
  • java数组中常用方法有哪些
    1. arraycopy方法原型: public static void arraycopy(sourceArray,int index1,copyArray,index2,int length)即从sourceArray的index1位置...
    99+
    2019-02-11
    java 数组 常用方法
  • js数组的常用方法有哪些
    这篇文章主要介绍了js数组的常用方法有哪些的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇js数组的常用方法有哪些文章都会有所收获,下面我们一起来看看吧。 数组的常用方法有下面...
    99+
    2022-10-19
  • JS数组Array常用方法有哪些
    这篇“JS数组Array常用方法有哪些”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“JS数组Array常用方法有哪些”文章吧...
    99+
    2023-06-30
  • vue常用的数组方法有哪些
    今天小编给大家分享一下vue常用的数组方法有哪些的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。1. join()join(&...
    99+
    2023-07-04
  • JavaScript中数组常用的迭代处理方法有哪些
    这篇文章主要介绍“JavaScript中数组常用的迭代处理方法有哪些”,在日常操作中,相信很多人在JavaScript中数组常用的迭代处理方法有哪些问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方...
    99+
    2022-10-19
  • javascript数组里的方法有哪些
    这篇文章将为大家详细讲解有关javascript数组里的方法有哪些,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。1.concat()concat() 方法用于连接两个或多个数组。方法不...
    99+
    2023-06-29
  • javascript数组去重有哪些方法
    本篇内容介绍了“javascript数组去重有哪些方法”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!去重方...
    99+
    2022-10-19
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作