Array 是javascript中经常用到的数据类型。javascript 的数组其他语言中数组的最大的区别是其每个数组项都可以保存任何类型的数据。本文主要讨论javascript中数组的声明、转换、排序、合并、迭代等等基本操作。

原文:http://www.cnblogs.com/kelsen/p/4850274.html

创建数组和数组检测

1、使用Array构造函数 创建数组。

//创建一个空数组
var cars = new Array(); //创建一个指定长度的数组
var cars = new Array(20); //向构造函数传递数组项
var cars = new Array('Mercedes-benz','BMW','Audi');

这里要注意的是,当只传递一个参数给Array构造函数时,如果参数是数字则会创建一个指定长度的数组,如果参数是一个字符串则创建一个只包含该字符串的长度为1 的数组。

var cars = new Array(1);        //[undefined × 1]
var cars = new Array('BMW'); //["BMW"]

另外使用 Array 构造函数创建数组时也可以省略掉 new 操作符,和上面的一样只是去掉new关键字即可,这里不做演示。

2、使用 数组字面量法 创建数组

这种方法使用一对方括号'[]'表示数组,直接把数组项书写在方括号中,多个数组项之间用逗号 ',' 隔开。注意:为避免兼容性问题请不要在最后一个项后面添加 ‘,’ 。

//创建一个空数组
var cars = []; //创建一个包含3个项的数组
var cars = ['Mercedes-benz','BMW','Audi'];

在读取和设置数组的值时,只需通过方括号提供相应项的索引即可

var cars = ['Mercedes-benz','BMW','Audi'];

console.log(cars[0]);        //输出 “Mercedes-benz”
cars[2] = 'Jeep'; //把Audi修改为Jeep
cars[3] = 'Audi'; //增加第四项 Audi

通过数组的 length 属性可读取数组的长度,但是该属性不是只读的,通过修改该属性可以变更数组的长度。如果新length小于原length则会删掉原数组中多余的数组项;若新length大于原length则数组中仍保持原来的数组项,但是length被增加到了新length,当访问这些不存在的项时会返回 undefined。

var cars = ['Mercedes-benz','BMW','Audi'];
console.log(cars.length) //
console.log(cars) //["Mercedes-benz", "BMW", "Audi"] cars.length=2;
console.log(cars) //["Mercedes-benz", "BMW"] cars.length=4;
console.log(cars) //["Mercedes-benz", "BMW"]
cars //["Mercedes-benz", "BMW", undefined × 2]

3、检测数组

有两种方法可以检测某个对象是否为数组 value instanceof Array 和 Array.isArray(value)。Array.isArray()方法是ES5中新增的方法,其优势在于当页面中的多个框架间传递数组时,仍可正确返回数据类型。

数组转换

toString() 方法可以返回由数组中项组成的字符串,项与项之间由“,”连接。当进行转换时会调用数组中每个项的 toString() 方法;toLocaleString()会返回与tostring类似的结果,只不过其调用的是数组中每项的 toLocaleString();valueOf会返回数组本身;join()函数接受一个字符串类型的参数,返回之类似tostring(),不同之处在于该函数使用传递给他的参数作为数组项之间的连接符。

队列和栈

通过push()和pop()函数可实现 LIFO(Last-in-first-out)。push() 方法接收任意数量的参数,把它们逐个添加到当前数组的末尾,返回修改后数组的长度。而pop()方法则从数组末尾一处最后一项2,减少数组的length值,然后返回数组移除的项。

var cars = new Array();

cars.push('Mercedes-benz','BMW');    //
console.log(cars); // ["Mercedes-benz", "BMW"] cars.push('Audi'); //
console.log(cars); // ["Mercedes-benz", "BMW", "Audi"] cars.pop(); // "Audi"
console.log(cars); // ["Mercedes-benz", "BMW"]

与pop()类似,还有shift()方法,不同之处在于,shift()从数组的前端移除项。shift配合push使用可以实现 FIFO(First-In-First-Out)。

var cars = new Array();

cars.push('Mercedes-benz','BMW');    //
console.log(cars); // ["Mercedes-benz", "BMW"] cars.push('Audi'); //
console.log(cars); // ["Mercedes-benz", "BMW", "Audi"] cars.shift(); // "Mercedes-benz"
console.log(cars); // ["BMW", "Audi"]

合并&拼接

concat()

该方法会基于当前数组中的所有项创建一个新数组,先创建一个当前数组的副本,然后将接受到的参数添加到这个副本的末尾,最后返回新构建的数组。如果没有为方法提供参数,则会仅复制当前数组并返回该副本。传递给concat()的参数可以是一个或多个数组,该方法会将这些数组中的项都添加到新构建的结果数组中。如果传递的参数不是数组,这些值会被简单的添加到结果数组的末尾处。

splice()

上面提到的方法都是在数组的结尾或头部进行操作,splice() 不同,它可用于在数组的任意位置删除指定数量的项并在当前位置插入新项。

删除任意数量的项,需指定两个参数:第一个参数指定要删除的第一个项的位置,第二个参数是要删除的项数。如 splice(0,2)会删除当前数组的前两项。

插入任意数量的项,需指定三个参数:第一个参数指定要插入的第一个项的位置,第二个参数是0,第三至n个参数是需要插入的任意的项。如splice(2,0,'a','b')

替换任意数量的项,需指定三个参数:第一个参数指定需替换的第一个项的位置,第二个参数指定需替换的项的个数,第三个以后的参数为要替换的新项。如splice(2,2,'a','b')

var cars = ['Mercedes-benz','BMW','Audi'];
cars.splice(0,1); // ['BMW','Audi'];
cars.splice(0,0,"Mercedes-benz"); // ["Mercedes-benz", "BMW", "Audi"]
cars.splice(2,1,"Tesla"); // ["Mercedes-benz", "BMW", "Tesla"]

项的位置

ES5中提供了两个位置方法 indexOf() 和 lastIndexOf()。这两个方法都接收两个参数,第一个参数为要查找的项,第二个参数为在数组中查找时的起点位置。这两个方法的唯一区别在于indexOf由前往后查找,lastindexof是由后往前查找。它们都返回要查找的项在数组中的位置,如果没找到则返回 -1 。在比较参数是否与数组中的项相等时是使用全等操作符(===)。

var cars = ['Mercedes-benz','BMW','Audi','Tesla'];
cars.indexOf('BMW'); //
cars.indexOf('bmw'); // -1
cars.indexOf('BMW',1); //
cars.indexOf('BMW',2); // -1 var cars = ['Mercedes-benz','BMW','Audi','Tesla'];
cars.lastIndexOf('BMW'); //
cars.lastIndexOf('bmw'); // -1
cars.lastIndexOf('BMW',0); // -1
cars.lastIndexOf('BMW',2); //

数组排序

实际应用中经常会遇到要对数组进行排序的情况,javascript中有两个可以直接用来排序的法:reverse()和sort()。一个用来反转数组排序,另一个用来排序。

var cars = ['Mercedes-benz','BMW','Audi','Tesla'];
var numbers = [1,2,3,14,15,16]; cars.sort(); // ["Audi", "BMW", "Mercedes-benz", "Tesla"]
numbers.sort(); // [1, 14, 15, 16, 2, 3] cars.reverse(); // ["Tesla", "Mercedes-benz", "BMW", "Audi"]
numbers.reverse(); // [3, 2, 16, 15, 14, 1]

reverse()方法可以反转数组中的项。sort() 方法在排序时会调用较数组中各项的toString()然后进行比较,所以在对numbers 排序后,数组项“16”排在了"2"和“3”前面。由此可见,默认情况下sort()在排序时并不总是如人所愿。其实sort方法还可以接收一个比较函数作为参数以干预sort()的排序行为。

比较函数接受两个参数,第一个参数应该位于第二个参数前则返回负数,如果两个参数相等返回0,如果第一个参数应该位于第二个参数后面则返回正数。

numbers.sort(compare);    // [1, 2, 3, 14, 15, 16]

function compare(item1,item2){
return item1 - item2;
}

数组迭代

ES5中定义了迭代数组的方法,每个方法都接受两个参数,第一个参数为要在每个项上执行的函数,第二个参数为作用域对象(可选)。传入这些方法的函数接受3个参数:数组中的项、该项在数组中的索引、数组本身。

every() 对数组中的每个项执行给定函数,如果每项都返回true则返回true。

some() 对数组中的每个项执行给定函数,如果任何一项返回true则返回true。

filter() 对数组中的每个项执行给定函数,返回所有返回值为true的项组成的数组。

map() 对数组中的每个项执行给定函数,返回每个数组项的执行结果组成的数组。

forEach() 对数组中的每个项执行给定函数。

var cars = ['Mercedes-benz','BMW','Audi','Tesla'];

cars.every(function(item, index, arr){return item.length>4});       // false
cars.some(function(item, index, arr){return item.length>4}); // true
cars.filter(function(item, index, arr){return item.length>4}); // ["Mercedes-benz", "Tesla"]
cars.map(function(item, index, arr){return 'New-' + item}); // ["New-Mercedes-benz", "New-BMW", "New-Audi", "New-Tesla"]
cars.forEach(function(item, index, arr){
// code
});

reduce() 和 reduceRight() 会逐个遍历数组中的每个项,并用给定函数将前两项的计算结果作为基础参与下一个项的计算,依次递归,直至结束。reduceRight与reduce的不同之处仅仅在于递归顺序的不同,reduceRight是从结尾向前递归。

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

var sum = numbers.reduce(function(pre, cur, index, arr){
return pre + cur;
});
console.log(sum); //

总结

javascript中有很多对数组进行操作的方法,熟练使用它们非常有助你提高写代码的速度和代码执行的效率(一般情况下,要尽量避免自己实现JS已有的方法),需要注意的是部分方法是 ES5 中新增的,使用时需考虑浏览器支持情况。

javascript中的Array对象 —— 数组的合并、转换、迭代、排序、堆栈的更多相关文章

  1. 详解Javascript中的Array对象

    基础介绍 创建数组 和Object对象一样,创建Array也有2种方式:构造函数.字面量法. 构造函数创建 使用构造函数的方式可以通过new关键字来声明,如下所示: 12 var arr = new ...

  2. javascript中的array对象属性及方法

    Array 对象 Array 对象用于在单个的变量中存储多个值. 创建 Array 对象的语法: new Array(); new Array(size); new Array(element0, e ...

  3. JavaScript中的Array对象

    1.创建Array对象创建Array对象的语法var 数组名 = new Array();定义数组之后,就需要向数组中添加元素,格式如下数组名[<下标>]=值: 2.Array对象属性Ar ...

  4. JavaScript中两个对象数组 属性undefined

    var BaiduUsers = []; var UserArray = function(name, phone, id, id2) { this.name = name; this.phone = ...

  5. JavaScript中的Array对象方法调用

    方法concat for  循环与for in 循环 <html> <head> <script type="text/javascript"> ...

  6. Javascript中的Array(数组) 、{}(映射) 与JSON解析

    做网页总会使用javascript,使用javascript总会使用JSON.最近用到一下,就写写. 下面是总结: 1.将javascript中的Array和{}转化为json字符串可以使用json2 ...

  7. ExtJS学习-----------Ext.Array,ExtJS对javascript中的Array的扩展

    关于ExtJS对javascript中的Array的扩展.能够參考其帮助文档,文档下载地址:http://download.csdn.net/detail/z1137730824/7748893 因为 ...

  8. Javascript学习1 - Javascript中的类型对象

    原文:Javascript学习1 - Javascript中的类型对象 1.1关于Numbers对象. 常用的方法:number.toString() 不用具体介绍,把数字转换为字符串,相应的还有一个 ...

  9. JavaScript中创建字典对象(dictionary)实例

    这篇文章主要介绍了JavaScript中创建字典对象(dictionary)实例,本文直接给出了实现的源码,并给出了使用示例,需要的朋友可以参考下 对于JavaScript来说,其自身的Array对象 ...

随机推荐

  1. 多线程爬坑之路-学习多线程需要来了解哪些东西?(concurrent并发包的数据结构和线程池,Locks锁,Atomic原子类)

    前言:刚学习了一段机器学习,最近需要重构一个java项目,又赶过来看java.大多是线程代码,没办法,那时候总觉得多线程是个很难的部分很少用到,所以一直没下决定去啃,那些年留下的坑,总是得自己跳进去填 ...

  2. [PHP内核探索]PHP中的哈希表

    在PHP内核中,其中一个很重要的数据结构就是HashTable.我们常用的数组,在内核中就是用HashTable来实现.那么,PHP的HashTable是怎么实现的呢?最近在看HashTable的数据 ...

  3. dll文件32位64位检测工具以及Windows文件夹SysWow64的坑

    自从操作系统升级到64位以后,就要不断的需要面对32位.64位的问题.相信有很多人并不是很清楚32位程序与64位程序的区别,以及Program Files (x86),Program Files的区别 ...

  4. 前端学HTTP之日志记录

    前面的话 几乎所有的服务器和代理都会记录下它们所处理的HTTP事务摘要.这么做出于一系列的原因:跟踪使用情况.安全性.计费.错误检测等等.本文将谥介绍日志记录 记录内容 大多数情况下,日志的记录出于两 ...

  5. Kooboo CMS技术文档之一:Kooboo CMS技术背景

    语言平台 依赖注入方案 存储模型 1. 语言平台 Kooboo CMS基于.NET Framework 4.x,.NET Framework 4.x的一些技术特性成为站点开发人员使用Kooboo CM ...

  6. Lind.DDD.Aspects通过Plugins实现方法的动态拦截~Lind里的AOP

    回到目录 .Net MVC之所以发展的如些之好,一个很重要原因就是它公开了一组AOP的过滤器,即使用这些过滤器可以方便的拦截controller里的action,并注入我们自己的代码逻辑,向全局的异常 ...

  7. RabbitMQ + PHP (三)案例演示

    今天用一个简单的案例来实现 RabbitMQ + PHP 这个消息队列的运行机制. 主要分为两个部分: 第一:发送者(publisher) 第二:消费者(consumer) (一)生产者 (创建一个r ...

  8. Android中Fragment和ViewPager那点事儿(仿微信APP)

    在之前的博文<Android中使用ViewPager实现屏幕页面切换和引导页效果实现>和<Android中Fragment的两种创建方式>以及<Android中Fragm ...

  9. Form 表单提交参数

    今天因为要额外提交参数数组性的参数给form传到后台而苦恼了半天,结果发现,只需要在form表单对应的字段html空间中定义name = 后台参数名 的属性就ok了. 后台本来是只有模型参数的,但是后 ...

  10. sqlServer去除字符串空格

    说起去除字符串首尾空格大家肯定第一个想到trim()函数,不过在sqlserver中是没有这个函数的,却而代之的是ltrim()和rtrim()两个函数.看到名字所有人都 知道做什么用的了,ltrim ...