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

标签: javascript 常见 数组 | 发表时间:2015-04-08 14:49 | 作者:front-Thinking
出处:

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

  昨天写了个帖子,汇总了下常见的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]

  结束语


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


本文链接: JavaScript中常见的数组操作函数及用法,转载请注明。

相关 [javascript 常见 数组] 推荐:

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

- - 博客园_首页
JavaScript中常见的数组操作函数及用法.   昨天写了个帖子,汇总了下常见的JavaScript中的字符串操作函数及用法. 今天正好有时间,也去把JavaScript中常见的数组操作函数及用法总结一下,这样方便大家准备参考. 如果恰好你也在准备各种笔试,希望对你有所帮助.   创建数组应该是最简单的了,有用数组字面量创建和数组构造函数两种方法,见下:.

Javascript常见加密算法库

- - 脚本爱好者
CryptoJS (crypto.js) 为 JavaScript 提供了各种各样的加密算法. CryptoJS在Google Code上的主页是: http://code.google.com/p/crypto-js/.

JavaScript 常见安全漏洞及自动化检测技术

- - IBM developerWorks 中国 : 文档库
随着 Web2.0 的发展以及 Ajax 框架的普及,富客户端 Web 应用(Rich Internet Applications,RIA)日益增多,越来越多的逻辑已经开始从服务器端转移至客户端,这些逻辑通常都是使用 JavaScript 语言所编写. 但遗憾的是,目前开发人员普遍不太关注 JavaScript 代码的安全性.

【译】常见的10个JavaScript动画函数库

- - 淡忘~浅思
原文: Javascript Animation Libraries. 译文:JavaScript的动画函数库. SVG是一种创建交互式动画非常棒的方式,独立的分辨率的矢量图形在任何大小的屏幕上看起来效果都很好. Snap.svg库使操作SVG变得更jQuery操作DOM一样简单. 一个基于动画和平移的简单但强大的JavaScript库.

JavaScript中Array(数组)的属性和方法 .

- - BlogJava-首页技术区
Array只有一个属性,就是length,length表示的是数组所占内存空间的数目,而不仅仅是数组中元素的个数,在刚才定义的数组中,b.length的值为8. 数组的length属性是可写的,这是一个非常有意思的属性,我们可以通过这种方法来截取数组. //显示的结果是3,说明即使删除也无法改变数组的长度.

Javascript诞生记

- Milido - 阮一峰的网络日志
二周前,我谈了一点Javascript的历史. 今天把这部分补全,从历史的角度,说明Javascript到底是如何设计出来的. 只有了解这段历史,才能明白Javascript为什么是现在的样子. 我依据的资料,主要是Brendan Eich的自述. "1994年,网景公司(Netscape)发布了Navigator浏览器0.9版.

JavaScript,你懂的

- dylan - keakon的涂鸦馆
经常有人问我,JavaScript应该怎么学. 先学基本语法,如果曾学过C等语言,应该1小时内就能掌握了. 再去使用内置的函数、方法和DOM API,熟悉它能干什么;而在学习DOM API的过程中,你还不得不与HTML和CSS打交道. 然后弄懂匿名函数和闭包,学会至少一个常用的JavaScript库(例如jQuery).

Javascript 里跑Linux

- rockmaple - Shellex's Blog
牛逼到暴的大拿 Fabrice Bellard,用Javascript实现了一个x86 PC 模拟器,然后成功在这个模拟器里面跑Linux(请用Firefox 4 / Google Chrome 11打开,Chome 12有BUG). 关于这个东西… 伊说 “I did it for fun“,大大啊大大啊….

高效 JavaScript

- xtps - ITeye论坛最新讨论
传统上,网页中不会有大量的脚本,至少脚本很少会影响网页的性能. 但随着网页越来越像 Web 应用程序,脚本的效率对网页性能影响越来越大. 而且使用 Web 技术开发的应用程序现在越来越多,因此提高脚本的性能变得很重要. 对于桌面应用程序,通常使用编译器将源代码转换为二进制程序. 编译器可以花费大量时间优化最终二进制程序的效率.

你得学JavaScript

- 蒋冰 - 伯乐在线 -博客
  注:本文由 敏捷翻译 - 蒋少雄 翻译自 Kenny Meyers 的博文.   如果三年前你问我应该学什么语言,我会告诉你是Ruby.   如果你现在想学一门语言的话,你应该学习JavaScript..   我认为,每一位Web开发人员都应该学习JavaScript. 目前推出的许多新技术都支持这个观点.