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. 探真无阻塞加载javascript脚本技术,我们会发现很多意想不到的秘密

    下面的图片是我使用firefox和chrome浏览百度首页时候记录的http请求 下面是firefox: 下面是chrome: 在浏览百度首页前我都将浏览器的缓存全部清理掉,让这个场景最接近第一次访问 ...

  2. 工厂方法模式——创建型模式02

    1. 简单工厂模式     在介绍工厂方法模式之前,先介绍一下简单工厂模式.虽然简单工厂模式不属于GoF 23种设计模式,但通常将它作为学习其他工厂模式的入门,并且在实际开发中使用的也较为频繁. (1 ...

  3. .NET Core采用的全新配置系统[10]: 配置的同步机制是如何实现的?

    配置的同步涉及到两个方面:第一,对原始的配置文件实施监控并在其发生变化之后从新加载配置:第二,配置重新加载之后及时通知应用程序进而使后者能够使用最新的配置.要了解配置同步机制的实现原理,先得从认识一个 ...

  4. C++中的引用

    一,C++中引用的基础知识 1.引用的基本概念 1.所谓的引用其实就是对变量起“别名”.引用和变量对应得是相同的内存,修改引用的值,变量的值也会改变,和指针类似. 2.引用在定义的时候必须要初始化,初 ...

  5. css居中div的几种常用方法

    在开发过程中,很多需求需要我们居中一个div,比如html文档流当中的一块div,比如弹出层内容部分这种脱离了文档流等.不同的情况有不同的居中方式,接下来就分享下一下几种常用的居中方式. 1.text ...

  6. 前端HTML5几种存储方式的总结

    接下来要好好总结一些知识,秋招来啦...虽然有好多知识都不大会,但是还是要努力一下,运气这种东西,谁知道呢~ 总体情况 h5之前,存储主要是用cookies.cookies缺点有在请求头上带着数据,大 ...

  7. Princeton Algorithms week3 Assignment

    这周编程作业是实现检测点共线的算法.和排序算法有关系的地方在于,对斜率排序后可以很快的检测出来哪些点是共线的,另外这个算法的瓶颈也在于排序的性能. 一点收获: java传参数时传递的是值,这很多人都知 ...

  8. emmet,jade,haml, slim,less,sass,coffeescript等的实战优缺点

    摘要: 文章背景,来自于群内周五晚上的一次头脑风暴式的思维碰撞交流活动. 随着前端技术的蓬勃发展, 各种新技术随着生产力的需要不断的涌入我们的视野, 那今天探讨的话题是这些新时代的前端兵器谱: 一. ...

  9. Bellman-Ford 单源最短路径算法

    Bellman-Ford 算法是一种用于计算带权有向图中单源最短路径(SSSP:Single-Source Shortest Path)的算法.该算法由 Richard Bellman 和 Leste ...

  10. JavaScript的妙与乐(一)之 函数优化

    JavaScript的妙与乐系列文章主要是展示一些JavaScript上面比较好玩一点的特性和一些有用的技巧,里面很多内容都是我曾经在项目中使用过的一些内容(当然,未必所有技巧的使用频率都很高^_^) ...