微信号:FrontDev

介绍:分享 Web 前端相关的技术文章、工具资源、精选课程、热点资讯

JavaScript中常见的数组操作函数及用法

2015-05-03 20:17 前端大全
(点击 上方蓝字 ,可快速关注我们)

昨天写了个帖子,汇总了下常见的JavaScript中的字符串操作函数及用法。今天正好有时间,也去把JavaScript中常见的数组操作函数及用法总结一下,这样方便大家准备参考。如果恰好你也在准备各种笔试,希望对你有所帮助。同时,也欢迎补充。


1、数组创建


创建数组应该是最简单的了,有用数组字面量创建和数组构造函数两种方法,见下:


var array1 = new Array();

var array2 = [];


上面是创建数组的最常见的两种方法,其中第二种方法因为简单直观而被开发者推崇。其中,使用构造函数创建数组同样可以接收用于存放于数组的值,如:


var array3 = new Array("num1","num2","num3");//["num1", "num2", "num3"]


同样,如果你传给构造函数的值是一个number,则该number如果大于0,则将是这个新创建数组的长度,如:


var array4 = new Array(5);

array4.length;//5


同样的效果下,我们还是推荐使用字面量的形式创建数组。


2、数组检测


有两种可以检测数组的方式,第一种使用instanceof,如下:


var array5 = [];

array5 instanceof Array;//true


同时,Array也自带了isArray()的方法,如下:


var array6 = [];

Array.isArray(array6 );//true


3、获取数组长度


数组长度可以通过.length获取,如下:


var array7 = [1,2,3,4];

array7.length;//4


同时,数组的长度你也可以随时设置,如果设置的长度超过之前的,则后面的内容会自动补充维undefined,否则会截取有效长度的内容,如下:


var array8 = [1,2,3,4,5];

console.log(array8.length);//5

array8.length = 8;

array8;//[1, 2, 3, 4, 5, undefined × 3]


array8.length = 3;

array8;//[1,2,3]


4、获取或者设置数组值


我们可以获取和设置数组的值,这里需要记住的是数组的下标是从0开始的,如下:


var array9 = [1,2,3,4,5,6];

array9[2];//3

array9[2] = 4;

array9[2];//4


5、数组字符串转换


数组转换为字符串可以调用数组自带的toString()方法,返回数组的字符串形式,如下:


var array10 = [1,2,3,4];

array10.toString();//"1,2,3,4"


另外,数组也有另外一个非常有用的函数join(),它接受一个字符串参数,用于插在数组各项之间形成字符串,如下:


var array11 = [1,2,3,4];

array11.join("||");//"1||2||3||4"


6、数组添加和删除项


前面讲过,我们可以设置length自动给数组添加一些undefined的值。同时,我们也可以通过访问一个超过数组本来的长度的数字下标以给数组添加项,如:


var array12 = [1,2,3,4];

array12[5] = 5;

array12[6] = 6;

array12;//[1, 2, 3, 4, undefined × 1, 5, 6]


另外,我们也可以通过push()给数组添加新的元素,如下:


var array13 = [1,2,3,4];

array13.push(5,6);

array13;//[1, 2, 3, 4, 5, 6]


与push()相对的是有一个pop()方法,用以删除数组中的项,且从数组最后一项开始,例如:


var array14 = [1,2,3,4];

array14.pop();//4

array14.pop();//3;

array14;//[1, 2]


同时,我们可以通过delete删除数组某项,但是只会删除该值,恢复默认的undefined,如下:


var array15 = [1,2,3,4,5];

delete array15[1];

array15;//[1, undefined × 1, 3, 4, 5]


另外两个非常有用的方法shift()和unshift(),跟push()和pop()方法类似,其中,shift()方法用以从数组起始位置开始删除元素且返回被删除的元素,如下:


var array16 = [1,2,4,5,6];

array16.shift();//1

array16;[2,4,5,6]


而unshift()与shift()相反,用于向数组起始位置添加元素,并且数组的原来元素分别后移,如下:


var array17 = [1,2,3,4];

array17.unshift(2);//返回数组长度5,下同

array17.unshift(3);

array17.unshift(4);

array17;//[4, 3, 2, 1, 2, 3, 4]


7、数组翻转和排序


我们可以对一个数组进行翻转,也可以让一个数组进行排序,如下:


var array18 = [21,14,54,35,23,44,103];

array18.reverse();//[103, 44, 23, 35, 54, 14, 21]

array18.sort();//[103, 14, 21, 23, 35, 44, 54]


注意,数组默认排序并不是大小,而是按照对应字符串逐个编码排序的。你可以通过给sort()传递一个比较函数,类改变规则,如下:


var array18 = [21,14,54,35,23,44,103];

array18.reverse();//[103, 44, 23, 35, 54, 14, 21]

array18.sort(function(a,b){return a - b;});//[14, 21, 23, 35, 44, 54, 103]


8、数组连接


我们可以把不同的数组连接到一起,如下:


var array19 = [1,2,3];

var array20 = [4,5];

var array21 = array19.concat(array20);//[1, 2, 3, 4, 5]


注意原数组都没有也不会发生改变。


9、数组分割


我们同样可以通过slice()把数组进行分割,它接受一个参数的话表示分割的起始位置,接受第二个可选的参数是表示结束的位置,如下:


var array22 = [1,2,3,4,5,6];

var array23 = array22.slice(4);//5,6

var array24 = array22.slice(2,4);//3,4


注意,分割的数组包含slice()的起始位置而不包含结束位置。


10、最强大的splice()


现在,该讲讲最强大的splice()函数了,它接受三个参数,可实现添加、删除、修改等不同的功能。看下w3school上它的语法,如下:


①添加元素


var array25 = [1,2,3,4,5,6];

array25.splice(2,0,88,77);//[] 返回被删除的元素,这里没有删除,返回为空

array25;//[1, 2, 88, 77, 3, 4, 5, 6]


②修改元素


var array26 = [1,2,3,4,5,6,7];

array26.splice(2,2,33,44);//[3,4]

array26;//[1, 2, 33, 44, 5, 6, 7]


③删除元素


var array27 = [1,2,3,4,5,6,7];

array27.splice(2,2);//[3, 4]

array27;//[1, 2, 5, 6, 7]


结束语


匆匆总结了下,不知道有没有漏下什么关键的函数或者方法,希望大家可以给予补充!



来自:front-Thinking

链接:http://www.cnblogs.com/front-Thinking/p/4401458.html




1.『前端大全』分享 Web 前端相关的技术文章、工具资源、精选课程、热点资讯,相关职位。欢迎关注。


微信号:FrontDev

(长按上图,弹出“识别二维码”后可快速关注)

http://web.jobbole.com/all-posts/

2. 点击“阅读原文”,查看更多前端文章。

 
前端大全 更多文章 5个典型的JavaScript面试题(上) Limu:JavaScript的那些书 Web开发:我希望得到的编程学习路线图 JavaScript基础工具清单 常用排序算法之JavaScript实现
猜您喜欢 2013年手机游戏行业八大趋势 12 双11防老婆指南 给飞驰的法拉利换引擎 - 谈边做业务边做架构重构(2) 【未发】10个很棒的学习Android开发的网站 如何在青云上部署使用cSphere?