当前位置:首页 > 日记 > 正文

JavaScript基础进阶之数组方法总结 | 推荐

JavaScript基础进阶之数组方法总结 | 推荐

数组常用方法总结:

下面我只总结了es3中常用的数组方法,一共有11个。es5中新增的9个数组方法,后续再单独总结。

1个连接数组的方法:concat()

2个数组转换为字符串的方法:join()、toString()

6个增删数组元素的方法:pop()、push()、shift()、unshift()、slice()、splice()

2个数组排序方法:reverse()、sort()

连接数组的方法:

1、concat()

作用:连接两个数组,合并为一个新数组。

用法:arr1.concat(arr2,arr2...)

示例:

<script type="text/javascript">var arr = new Array(3)arr[0] = "George"arr[1] = "John"arr[2] = "Thomas"var arr2 = new Array(3)arr2[0] = "James"arr2[1] = "Adrew"arr2[2] = "Martin"document.write(arr.concat(arr2))</script>

输出:

George,John,Thomas,James,Adrew,Martin

数组转换为字符串的方法:

1、join()

作用:用于把数组中的所有元素放入一个字符串。并通过指定的分隔符进行分隔。

用法:arrayObject.join(separator)

示例:

<script type="text/javascript">var arr = new Array(3)arr[0] = "George"arr[1] = "John"arr[2] = "Thomas"document.write(arr.join("."))</script>

输出:

George.John.Thomas

注意:返回值为一个字符串。如果没有分隔符,默认以逗号分隔。

2、toString()

作用:把数组转换为字符串,并返回结果。

用法:arrayObject.toString()

示例:

<script type="text/javascript">var arr = new Array(3)arr[0] = "George";arr[1] = "John";arr[2] = "Thomas";document.write(arr.toString());</script>

输出:

George,John,Thomas

返回值与没有参数的 join() 方法返回的字符串相同。数组中的元素之间用逗号分隔。

增删数组元素的方法:

1、pop()

作用:用于删除并返回数组的最后一个元素。

用法:arrayObject.pop()

pop() 方法将删除 arrayObject 的最后一个元素,把数组长度减 1,并且返回它删除的元素的值。如果数组已经为空,则 pop() 不改变数组,并返回 undefined 值。

示例:

<script type="text/javascript">var arr = new Array(3)arr[0] = "George"arr[1] = "John"arr[2] = "Thomas"document.write(arr)document.write("<br />")document.write(arr.pop())document.write("<br />")document.write(arr)</script>

输出:

George,John,ThomasThomasGeorge,John

2、push()

作用:可向数组的末尾添加一个或多个元素,并返回新的长度。

用法:arrayObject.push(newelement1,newelement2,....,newelementX)

它直接修改 arrayObject,而不是创建一个新的数组。push() 方法和 pop() 方法使用数组提供的先进后出栈的功能。

示例:

<script type="text/javascript">var arr = new Array(3)arr[0] = "George"arr[1] = "John"arr[2] = "Thomas"document.write(arr + "<br />")document.write(arr.push("James") + "<br />")document.write(arr)</script>

输出:

George,John,Thomas4George,John,Thomas,James

3、shift()

作用:用于把数组的第一个元素从其中删除,并返回第一个元素的值。

用法:arrayObject.shift()

如果数组是空的,那么 shift() 方法将不进行任何操作,返回 undefined 值。请注意,该方法不创建新数组,而是直接修改原有的 arrayObject。

示例:

<script type="text/javascript">var arr = new Array(3)arr[0] = "George"arr[1] = "John"arr[2] = "Thomas"document.write(arr + "<br />")document.write(arr.shift() + "<br />")document.write(arr)</script>

输出:

George,John,ThomasGeorgeJohn,Thomas

4,unshift()

作用:可向数组的开头添加一个或更多元素,并返回新的长度。

用法:arrayObject.unshift(newelement1,newelement2,....,newelementX)

unshift() 方法将把它的参数插入 arrayObject 的头部,并将已经存在的元素顺次地移到较高的下标处,以便留出空间。该方法的第一个参数将成为数组的新元素 0,如果还有第二个参数,它将成为新的元素 1,以此类推。

请注意,unshift() 方法不创建新的创建,而是直接修改原有的数组。unshift() 方法无法在 Internet Explorer 中正确地工作!

示例:

<script type="text/javascript">var arr = new Array()arr[0] = "George"arr[1] = "John"arr[2] = "Thomas"document.write(arr + "<br />")document.write(arr.unshift("William") + "<br />")document.write(arr)</script>

输出:

George,John,Thomas4William,George,John,Thomas

5,slice()

作用:可从已有的数组中返回选定的元素。

用法:arrayObject.slice(start,end)

start

必需。规定从何处开始选取。如果是负数,那么它规定从数组尾部开始算起的位置。也就是说,-1 指最后一个元素,-2 指倒数第二个元素,以此类推。

end

可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数,那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数,那么它规定的是从数组尾部开始算起的元素。

返回一个新的数组,包含从 start 到 end (不包括该元素)的 arrayObject 中的元素。

该方法并不会修改数组,而是返回一个子数组。如果想删除数组中的一段元素,应该使用方法 Array.splice()。

<script type="text/javascript">var arr = new Array(3)arr[0] = "George"arr[1] = "John"arr[2] = "Thomas"document.write(arr + "<br />")document.write(arr.slice(1) + "<br />")document.write(arr)</script>

输出:

George,John,ThomasJohn,ThomasGeorge,John,Thomas

6,splice()

作用:向/从数组中添加/删除项目,然后返回被删除的项目。

用法:arrayObject.splice(index,howmany,item1,.....,itemX)

index

必需。整数,规定添加/删除项目的位置,使用负数可从数组结尾处规定位置。

howmany

必需。要删除的项目数量。如果设置为 0,则不会删除项目。

item1, ..., itemX

可选。向数组添加的新项目。

该方法会改变原始数组。

示例:

<script type="text/javascript">var arr = new Array(6)arr[0] = "George"arr[1] = "John"arr[2] = "Thomas"arr[3] = "James"arr[4] = "Adrew"arr[5] = "Martin"document.write(arr + "<br />")arr.splice(2,0,"William")document.write(arr + "<br />")</script>

输出:

George,John,Thomas,James,Adrew,MartinGeorge,John,William,Thomas,James,Adrew,Martin

数组元素排序:

1、reverse()

作用:用于颠倒数组中元素的顺序。

用法:arrayObject.reverse()

该方法会改变原来的数组,而不会创建新的数组。

示例:

<script type="text/javascript">var arr = new Array(3)arr[0] = "George"arr[1] = "John"arr[2] = "Thomas"document.write(arr + "<br />")document.write(arr.reverse())</script>

输出:

George,John,ThomasThomas,John,George

2,sort()

作用:用于对数组的元素进行排序。

用法:arrayObject.sort(sortby)

Sortby:可选,按规定是顺序排序。必须是函数。

相对于其他方法来说复杂了一点。

如果调用该方法时没有使用参数,将按字母顺序对数组中的元素进行排序,说得更精确点,是按照字符编码的顺序进行排序。

如果想按照其他标准进行排序,就需要提供比较函数,该函数要比较两个值,然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b,其返回值如下:

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

若 a 等于 b,则返回 0。

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

<script type="text/javascript">function sortNumber(a,b){return a - b}var arr = new Array(6)arr[0] = "10"arr[1] = "5"arr[2] = "40"arr[3] = "25"arr[4] = "1000"arr[5] = "1"document.write(arr + "<br />")document.write(arr.sort(sortNumber))</script>

输出:

10,5,40,25,1000,11,5,10,25,40,1000

上面这个例子是让数组元素从小到大排序,如果想实现从大到小排序,只需要将sortNumber函数中的a-b改为b-a即可。

<script type="text/javascript">function sortNumber(a,b){return b - a;}var arr = new Array(6)arr[0] = "10"arr[1] = "5"arr[2] = "40"arr[3] = "25"arr[4] = "1000"arr[5] = "1"document.write(arr + "<br />")document.write(arr.sort(sortNumber))</script>

输出:

10,5,40,25,1000,11000,40,25,10,5,1

补充:

数组对象的属性:

属性

描述

constructor

返回对创建此对象的数组函数的引用。

length

设置或返回数组中元素的数目。

prototype

使您有能力向对象添加属性和方法。

以下这个例子展示了如何使用constructor属性

<script type="text/javascript">var test=new Array();if (test.constructor==Array){document.write("This is an Array");}if (test.constructor==Boolean){document.write("This is a Boolean");}if (test.constructor==Date){document.write("This is a Date");}if (test.constructor==String){document.write("This is a String");}</script>

输出:

This is an Array

length 属性可设置或返回数组中元素的数目。数组的 length 属性总是比数组中定义的最后一个元素的下标大 1。对于那些具有连续元素,而且以元素 0 开始的常规数组而言,属性 length 声明了数组中的元素的个数。设置 length 属性可改变数组的大小。如果设置的值比其当前值小,数组将被截断,其尾部的元素将丢失。如果设置的值比它的当前值大,数组将增大,新的元素被添加到数组的尾部,它们的值为 undefined。

获取数组的长度:arrayObject.length

以上这篇JavaScript基础进阶之数组方法总结(推荐)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

相关文章

Photoshop制作非常震撼的逼真3D眼

Photoshop制作非常震撼的逼真3D眼

3D,逼真,海报,眼镜,电脑软件,这张海报前后共计花费了10个小时左右,找素材花费了4个小时,合成的比较匆忙。如果你想尝试一下的话,建议先选择一个小局部进行尝试性合成,因为这次的海报合成部分太多,涉及到手绘调整的地方也不少。最终效果一、构思…

详解Webstorm 新建.vue文件支持高

详解Webstorm 新建.vue文件支持高

语法,支持,文件,详解,电脑软件,Webstorm 添加新建.vue文件功能并支持高亮vue语法和es6语法,分享给大家,具体如下:添加新建.vue文件功能①Webstorm 右上角File-Plugins 搜索vue如果没有就去下载 点击serch in repositories②点击安装vue.js③安…

ps怎么给人物添加一个爆炸背景动画

ps怎么给人物添加一个爆炸背景动画

动画效果,背景,人物,电脑软件,ps,本文主要是用时间轴来设置动画,前期把人物抠出,并用云彩滤镜渲染出烟雾效果;然后在时间轴就可以灵活设置动画,把烟雾缩小再放大就可以做出爆炸效果。最终效果。软件名称:photoshop CC 2016 64位 中文绿色精简破…

JavaScript实现计数器基础方法

JavaScript实现计数器基础方法

方法,计数器,基础,电脑软件,JavaScript,本文实例为大家分享了js实现计数器的具体代码,供大家参考,具体内容如下通过使用 JavaScript,设定的时间间隔之后来执行代码,而不是在函数被调用后立即执行。称之为计时事件。 在 JavaScritp 中使用计时事…

Photoshop制作非常有创意的拍立得

Photoshop制作非常有创意的拍立得

叠加,照片,创意,效果,电脑软件,下面为大家分享Photoshop制作非常有创意的拍立得照片散落叠加效果方法,教程真的很不错,很值得大家学习,推荐到,有需要的朋友不妨来参考一下吧!先看看效果图话不多说,开始教程1、首先我们将素材文件拖拽进PS,然后将背…

wps中怎样设置页面编码

wps中怎样设置页面编码

设置,编码,文字,方法,正文,  对于比较规范的论文,我们一般需要设置其从正文开始编码,那么,如何在wps文字中设置从正文开始编码的效果呢?下面就让小编告诉你wps文字如何设置从正文开始编码的方法,希望小编整理的资料对大家有帮助。wps文字设置…

浅谈react-native热更新react-nati

浅谈react-native热更新react-nati

集成,热更新,浅谈,电脑软件,react,主要步骤按官方文档实现,这里只记录遇到的一些小坑官方文档run-android时NDK报错前提是NDK已安装并且环境变量已设置根据报错提示在android/local.properties文件里加入ndk.dir=~/Library/Android/android-…

前端获取http状态码400的返回值实

前端获取http状态码400的返回值实

返回值,状态码,实例,电脑软件,http,如下所示:axios.get("/check_mobile_and_sent_code",{withCredentials:true,params:{mobile:formInline.mobile}}).then(res=>{ console.log(res); //if(res.result==true){ …

vue使用keep-alive实现数据缓存不

vue使用keep-alive实现数据缓存不

刷新,数据缓存,电脑软件,vue,alive,到现在,接触vue也小段时间了,项目进行到了一定程度,然而项目缺少了缓存机制,所以每次跳转页面都会重新created一下数据,虽说系统的数据请求速度很快,但是这样做对系统的性能会有很大的坏处的,所以到这里就要对系…

如何解决office2007不能保存office

如何解决office2007不能保存office

解决方法,如何解决,电脑软件,  现在大多数人都在使用word2007进行文档的编辑,但是有时间可能会出现一些问题,比如:编辑完文档进行保存时,无法保存,一点击保存就会出现错误,文档自动关闭。下面由小编为您提供更多的技巧,希望能帮助您。office2007…

一次性取消Excel表格中换行符的方

一次性取消Excel表格中换行符的方

方法,取消,换行符,一次性,表格,  在EXCEL单元格中如果要强制换行的话,我们必须ALT+ENTER进行强制换行,如果Excel 表格中的换行符很多的话,我们如何一次性取消Excel 表格中的换行符呢?接下来小编为你分享一次性取消Excel表格中换行符的方法,希…

PS怎么快速转换成彩绘效果?

PS怎么快速转换成彩绘效果?

转换成,彩绘,效果,快速,电脑软件,PS打开sd娃娃的图片,想要转换成彩色铅笔的手绘效果,该怎么转换呢?下面我们就来看看详细的教程。软件名称:Adobe Photoshop 8.0 中文完整绿色破解版软件大小:150.1MB更新时间:2015-11-041、打开PS, ctrl+o打开一张…