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. [20140722] forwarded和forwarding记录

    背景: 今天被人文集forwarded和forwarding记录的事情. 简单介绍: 当堆表跟新某一个列的时候发现,不够放了,那么就在那行记录上标记forwarding,并把数据放到另外一个page, ...

  2. Using Confluent’s JDBC Connector without installing the entire platform

    转自:https://prefrontaldump.wordpress.com/2016/05/02/using-confluents-jdbc-connector-without-installin ...

  3. Amoeba-mysql读写分离实战

    Amoeba-mysql读写分离实战 Amoeba用途有很多,这里看标题我们就先说读写分离,因为我也只会这个.Amoeba定义为国内的,开源的.目前(2015年10月20日)我们用amoeba2.2版 ...

  4. PHP实现远程下载文件到本地

    PHP实现远程下载文件到本地 投稿:hebedich 字体:[增加 减小] 类型:转载   经常写采集器发布接口需要使用到远程附件的功能,所以自己写了一个PHP远程下载文件到本地的函数,一般情况下已经 ...

  5. 剑指offer系列49--求1+2+...+N的和

    [题目]求1+2+3+…+n, * 要求不能使用乘除法.for.while.if.else.switch.case等关键字及条件判断语句(A?B:C). package com.exe10.offer ...

  6. Code First to an Existing Database

    Code First to an Existing Database https://msdn.microsoft.com/en-us/data/jj200620 https://weblogs.as ...

  7. 树莓派3中编译Opencv3.4.10

    一.命令 -dev libv4l-dev libavcodec-dev libavformat-dev libswscale-dev cd wget http://sourceforge.net/pr ...

  8. ASP.NET Core 中使用 Hangfire 定时启动 Scrapyd 爬虫

    用 Scrapy 做好的爬虫使用 Scrapyd 来管理发布启动等工作,每次手动执行也很繁琐;考虑可以使用 Hangfire 集成在 web 工程里. Scrapyd 中启动爬虫的请求如下: curl ...

  9. 如何在WPF中调用Winform控件

    原文地址:http://hi.baidu.com/stuoopluwqbbeod/item/32ec38403da42ee2bcf45167 功能实现主要分三步:1.添加两个引用:WindowsFor ...

  10. nginx后端节点健康检查

    一.nginx健康检查的三种方式 .ngx_http_proxy_module 模块和ngx_http_upstream_module模块(自带) 官网地址:http://nginx.org/en/d ...