资讯专栏INFORMATION COLUMN

javascript数组常见的22种方法总结

DesGemini / 352人阅读

摘要:创建数组的基本方式有两种。为数组专门提供了和方法,以便实现类似栈的行为。反转数组,按升序排列数组项即最小的值位于最前面。例如,会删除数组中的前两项。对数组中的每一项运行给定函数,返回该函数会返回的项组成的数组。

===什么是数组===

数组是数据的有序列表
创建数组的基本方式有两种
第一种是使用 Array 构造函数:var colors = new Array();
创建数组的第二种基本方式是使用数组字面量表示法:var colors = ["red", "blue", "green"];

===检测数组的方法===

1》通过instanceof来判断:value instanceof Array;
2》通过Array.isArray()方法来判断;

===数组的方法===

一共总结数组常见的 22 种方法!
其中 7 种会改变原数组值:push()、pop()、shift()、unshift()、reverse()、sort()、splice()
15 种不会改变原数组的值:toString()、toLocaleSting()、valueOf()、join()、concat()、slice()、indexOf()、lastIndexOf()、every()、filter()、forEach()、map()、some()、reduce()、reduceRight()

1.转换方法(toString、toLocaleSting、valueOf()、join)(不会修改原数组!)

所有对象都会有toString、toLocaleSting、valueOf()方法。
toString、toLocaleSting方法会将数组转换成以逗号(,)分割的字符串。
join()接收一个参数,将数组转换为字符串,并以这个参数作分割。

2.栈方法 (修改原数组!)

栈是一种 LIFO(Last-In-First-Out,后进先出)的数据结构,也就是最新添加的项最早被移除。而栈中项的插入(叫做推入)和移除(叫做弹出),只发生在一个位置——(栈的顶部)。ECMAScript 为数组专门提供了 push()和 pop()方法,以便实现类似栈的行为。
因为是栈后进先出,而且推入/弹出都是发生在栈的顶部。因此数组的尾部实际是存放在栈的顶部,所以push()(后增方法)添加在数组尾部,就是添加在栈的顶部。pop方法删除数组尾部一位数据也就是在栈顶部删除最新数据,满足后入先出去。

3.队列方法(修改原数组!)

队列数据结构的访问规则是 FIFO(First-In-First-Out, 先进先出)。队列在列表的末端添加项,从列表的前端移除项
结合使用 shift()和 push()方法,可以像使用队列一样使用数组。

因为队列是先进先出,所以数组的尾部就对应着队列末端,所以通过push方法在数组尾部添加数据就是在队列末端添加。在使用shift方法在数组顶部移除一位数据就是在队列前端移除。

ECMAScript 还为数组提供了一个 unshift()方法。顾名思义,unshift()与 shift()的用途相反: 它能在数组前端添加任意个项并返回新数组的长度。因此,同时使用 unshift()和 pop()方法,可以从相反的方向来模拟队列,即在数组的前端添加项,从数组末端移除项。

4.重新排序方法 (修改原数组!)

数组中已经存在两个可以直接用来重排序的方法:reverse()和 sort()。
reverse反转数组,sort按升序排列数组项——即最小的值位于最前面。sort()方法会调用每个数组项的 toString()转型方法,然后比较得到的字符串(javascript字符串在进行大于(小于)比较时,会根据第一个不同的字符的ascii值码进行比较,当数字(number)与字符串(string)进行比较大小时,会强制的将数字(number)转换成字符串(string)然后再进行比较),以确定如何排序。

sort()方法可以接收一个比较函数作为参数,以便我们指定哪个值位于哪个值的前面。比较函数接收两个参数,如果第一个参数应该位于第二个之前则返回一个负数,如果两个参数相等 则返回 0,如果第一个参数应该位于第二个之后则返回一个正数。

5.操作方法

concat (不修改原数组!):先创建当前数组一个副本,然后将接收到的参数 添加到这个副本的末尾,最后返回新构建的数组。在没有给 concat()方法传递参数的情况下,它只是 复制当前数组并返回副本。如果传递给 concat()方法的是一或多个数组,则该方法会将这些数组中的每一项都添加到结果数组中

slice() (不修改原数组!): 基于当前数组中的一或多个项创建一个新数组。slice()方法可以 接受一或两个参数,即要返回项的起始结束位置。在只有一个参数的情况下,slice()方法返回从该参数指定位置开始到当前数组末尾的所有项。如果有两个参数,该方法返回起始结束位置之间的项,但不包括结束位置的项

起始值大于结束值:返回【】;
负数则加上数组长度来确定坐标slice(-2,-1) === slice(1,2);

splice (修改原数组!): 有很多种用法:
删除:可以删除任意数量的项,只需指定 2 个参数:要删除的第一项的位置和要删除的项数。 例如,splice(0,2)会删除数组中的前两项。

插入:可以向指定位置插入任意数量的项,只需提供 3 个参数:起始位置要删除的项数(0)要插入的项。如果要插入多个项,可以再传入第四、第五,以至任意多个项。例如, splice(2,0,"red","green")会从当前数组的位置 2 开始插入字符串"red"和"green"。

替换:可以向指定位置插入任意数量的项,且同时删除任意数量的项,只需指定 3 个参数:起始位置要删除的项数要插入的任意数量的项。插入的项数不必与删除的项数相等。例如, splice (2,1,"red","green")会删除当前数组位置2的项,然后再从位置2开始插入字符串"red"和"green"

6.位置方法 (不修改原数组!)

indexOf()lastIndexOf()。这两个方法都接收两个参数:要查找的项和(可选的)起点位置的索引。其中,indexOf()方法从数组的开头(位置0)开始向后查找,lastIndexOf()方法则从数组的末尾开始向前查找。内部使用===进行比较。

7.迭代方法 (不修改原数组!)

ECMAScript5为数组定义了5个迭代方法。每个方法都接收两个参数:要运行的函数运行该函数的作用域对象(可选的)(影响 this 的值)。
传入这些方法中的函数会接收三个参数:数组项的值该项在数组中的位置数组对象本身。根据使用的方法不同,这个函数执行后的返回值可能会也可能不会影响方法的返回值。
every():对数组中的每一项运行给定函数,如果该函数对每一项都返回 true,则返回 true。 filter():对数组中的每一项运行给定函数,返回该函数会返回 true 的项组成的数组。
forEach():对数组中的每一项运行给定函数。这个方法没有返回值
map():对数组中的每一项运行给定函数,返回每次函数调用的结果组成的数组。
some():对数组中的每一项运行给定函数,如果该函数对任一项返回 true,则返回 true。

8.归并方法(不修改原数组!)

reduce()reduceRight()。这两个方法都会迭代数组的所有项,然后构建一个最终返回的值。其中,reduce()方法从数组的第一项开始,逐个遍历到最后。而reduceRight()相反。
接收两个参数:要调用的函数作为归并基础的初始值(可选)
函数接收4个参数:前一个值当前值项的索引数组对象。这个函数返回的任何值都会作为第一个参数自动传给下一项。第一次迭代发生在数组的第二项上,因此第 一个参数是数组的第一项,第二个参数就是数组的第二项。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/105323.html

相关文章

  • 前端面试题总结(js、html、小程序、React、ES6、Vue、算法、全栈热门视频资源)

    摘要:并总结经典面试题集各种算法和插件前端视频源码资源于一身的文档,优化项目,在浏览器端的层面上提升速度,帮助初中级前端工程师快速搭建项目。 本文是关注微信小程序的开发和面试问题,由基础到困难循序渐进,适合面试和开发小程序。并总结vue React html css js 经典面试题 集各种算法和插件、前端视频源码资源于一身的文档,优化项目,在浏览器端的层面上提升速度,帮助初中级前端工程师快...

    li21 评论0 收藏0
  • 前端面试题总结(js、html、小程序、React、ES6、Vue、算法、全栈热门视频资源)

    摘要:并总结经典面试题集各种算法和插件前端视频源码资源于一身的文档,优化项目,在浏览器端的层面上提升速度,帮助初中级前端工程师快速搭建项目。 本文是关注微信小程序的开发和面试问题,由基础到困难循序渐进,适合面试和开发小程序。并总结vue React html css js 经典面试题 集各种算法和插件、前端视频源码资源于一身的文档,优化项目,在浏览器端的层面上提升速度,帮助初中级前端工程师快...

    AaronYuan 评论0 收藏0
  • JavaScript数据结构和算法

    摘要:栈被称为一种后入先出的数据结构。散列使用的数据结构叫做散列表。这些操作需要求助于其他数据结构,比如下面介绍的二叉查找树。 前言 在过去的几年中,得益于Node.js的兴起,JavaScript越来越广泛地用于服务器端编程。鉴于JavaScript语言已经走出了浏览器,程序员发现他们需要更多传统语言(比如C++和Java)提供的工具。这些工具包括传统的数据结构(如链表,栈,队列,图等),...

    EastWoodYang 评论0 收藏0
  • 前端面试题总结(js、html、小程序、React、ES6、Vue、算法、全栈热门视频资源)

    摘要:并总结经典面试题集各种算法和插件前端视频源码资源于一身的文档,优化项目,在浏览器端的层面上提升速度,帮助初中级前端工程师快速搭建项目。 本文是关注微信小程序的开发和面试问题,由基础到困难循序渐进,适合面试和开发小程序。并总结vue React html css js 经典面试题 集各种算法和插件、前端视频源码资源于一身的文档,优化项目,在浏览器端的层面上提升速度,帮助初中级前端工程师快...

    pumpkin9 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<