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中的Array对象方法调用

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

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

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

  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中创建字典对象(dictionary)实例

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

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

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

随机推荐

  1. 收集一些关于OI/ACM的奇怪的东西……

    一.代码: 1.求逆元(原理貌似就是拓展欧几里得,要求MOD是素数): int inv(int a) { if(a == 1) return 1; return ((MOD - MOD / a) * ...

  2. 基于AFNetWorking 3.0封装网络请求数据的类

    对于使用 AFNetworking 的朋友来说,很多朋友都是直接调用 AFNetworking的 API ,这样不太好,无法做到全工程统一配置. 最好的方式就是对网络层再封装一层,全工程不允许直接使用 ...

  3. 二模 (12)day2

    第一题: 题目大意: 有N颗糖,两个人轮流取,每次只能取质数颗,不能取的输.求先取者若必胜,最少需要多少步胜利.(N<=10000) 解题过程: 1.看到N的范围比较小,先打个素数表,然后dp即 ...

  4. 2014年互联网IT待遇【转载】

    2014年互联网IT待遇[转载] 一.民企 1.百度 13k*14.6,special 14~17k*14.6 开发类 13K*14.6    (2014) 测试类.前端类 12K*14.6    ( ...

  5. java拦截器(interceptor)

    1.声明式 (1)注解,使用Aspect的@Aspect (2)实现HandlerInterceptor /** * 拦截请求 * * @author Administrator * */ @Comp ...

  6. oracle 12g,断电,数据库启动不了,无法登录 并且 报ora-00119和ora-00132错误

    oracle 12g,断电,数据库启动不了,无法登录 前提:服务全部打开,监听也配置好了! 可以参考网站:https://jingyan.baidu.com/article/5552ef47c73ee ...

  7. vue中的一些知识点--多看文档

    重温vue,一些知识点简单记录. 1.我们都知道当数据变化时,视图会重新渲染.注意:只有当vue实例被创建时,data中存在的属性才是响应式的.后续新添加的属性不会触发视图变化. 使用 Object. ...

  8. Spring04-SpringEL&amp;Spring JDBC数据访问

    一. SpringEL入门 Spring动态语言(简称SpEL) 是一个支持运行时查询和操作对象图的强大的动态语言,语法类似于EL表达式,具有诸如显示方法和基本字符串模板函数等特性. 1. 准备工作 ...

  9. 远程调试Android手机上网页的记录

    1.手机需要开启USB调试模式: 2.电脑和手机上都要安装最新的Chrome浏览器: 3.手机连接电脑,会出现下载安装驱动的提示并安装成功(并不是所有的手机都会这么顺利,比如我的魅族就无法安装驱动,公 ...

  10. [Javascipt] Immediately-Invoker 2

    Now the people at Poplar Puzzles would like you to treat an array of functions like a Queue, passing ...