Array类型是ECMAScript中最常用的类型之一,ECMAScript中的数组与其他多数语言中的数组有着相当大的区别。ECMAScript数组的每一项可以保存任何类型的数据。这里总结了数组类型的大多数方法,方便以后查找使用。

一、创建数组的基本方式

  创建数据的基本方式有两种:

  1.使用Array构造函数

var colors=new Array();
var colors=new Array(20);  //创建length值为20的数组
var colors=new Array("red","blue"); //创建包含2个字符串值得数组

  2.使用数组字面量表示法

var colors=[];
var colors=["red","blue"];

二、读取和设置数组值

var colors=["red","blue","green"];
alert(colors[0]);  //读取第一项
colors[2]="black";  //修改第三项
colors[3]="brown";  //增加第四项
colors.length=2;  //删除第二项后的所有值
colors[colors.length]="yellow";  //在数组末尾位置添加新项

附注:数组的length属性不是只读的。因此可以通过设置这个属性,可以从数组的末尾移除项或向数组中添加新项。

三、检测数组

if(Array.isArray(value)){
//用户操作
}

四、转换方法

var colors=["red","blue","green"];
alert(colors.toString());  //red,blue,green
alert(colors.valueOf());  //red,blue,green

所有对象都具有toString()和valueOf()方法。调用toString()方法会返回由数组中的每个值得字符串形式拼接而成的一个以逗号分隔的字符串。valueOf()返回的还是数组.数组的toString()方法可以使用join()方法代替。不过join()方法可以自定义分隔符

var colors=["red","blue"];
alert(colors.join(","));  //red,blue
alert(colors.join("||"));  //red||blue

五、栈方法

  栈是一种LIFO后进先出的数据结构,也就是最新添加的项最早被移除。使用push()和pop()方法可以实现类似栈的行为。

  push()方法可以接收任意数量的参数,把它们逐个添加到数组末尾,并返回修改后的数组的长度。

  pop()方法则从数据末尾移除最后一项,减少数组的length值,然后返回移除的项。

var colors=new Array();
var count=colors.push("red","blue");
alert(count);  //2
var item=colors.pop();  
alert(item);  //blue
alert(colors.length);  //1

六、队列方法

  队列数据结构的访问规则是FIFO先进先出结构。队列在列表的末端添加项,从列表的前端移除项。使用push()和shift()方法可以实现类似队列的行为。

  shift()方法能够移除数组中第一个项并返回该项,同时将数组的长度减1。

var colors=new Array();
var count=colors.push("red","blue");
alert(count);  //2
var item=colors.shift();
alert(item);  //red
alert(colors.length);  //1

附注:ECAMScript还提供了一个unshift()方法。它与shift用途相反:它能在数组前添加任意个项并返回新数组的长度。同时使用unshift()和pop()方法,可以从相反的方向来模拟队列,即在数组的前端添加项,从数据末端移除项。(不再举例).

七、重排序方法

  1.反转数组顺序reverse()

var arr=[1,2,3,4,5];
arr.reverse();
alert(arr);  //5,4,3,2,1

  2.排序方法sort()

  排序方法sort()大多数情况下都会接收一个比较函数作为参数,以便我们指定哪个值位于哪个值得前面。

function compare(v1,v2){
return v2-v1;
}
var arr=[0,1,5,10,15];
arr.sort();
alert(arr);  //0,1,10,15,5 不是我们希望的排序结果
arr.sort(compare);
alert(arr);  //0,1,5,10,15 希望的结果

八、操作方法

  1.concat()

  concat()方法可以基于当前数组中的所有项创建一个新数组,这个方法会先创建当前数据的一个副本,然后将接收到的参数添加到这个副本的末尾。

var arr=[1,2];
var arr2=arr.concat(3,[4,5]);
alert(arr);  //1,2
alert(arr2);  //1,2,3,4,5

  2.slice()

  slice()方法能够基于当前数组中的一个或多个项创建一个新数组。它可以接收一或两个参数,即要返回项的起始和结束位置(不包括结束位置)。一个参数时返回指定位置到当前数组的末尾所有项。

var arr=[1,2,3,4,5];
var arr2=arr.slice(1);
var arr3=arr.slice(1,4);
alert(arr2); //2,3,4,5
alert(arr3);  //2,3,4

  附注:如果参数是负值,则用数组长度加上该数来确定相应的位置。例如slice(-2,-1)与slice(3,4)得到的一样的。如果结束位置小于起始位置,则返回空数组。

  3.splice()

  splice()方法主要用途是向数组中部插入项。

splice(0,2)  //删除数组中前两项(第一个参数为要删除第一项的位置,第二个参数为要删除的项数)
splice(2,0,"red","blue")  //从当前数组的位置2开始插入"red"和"blue"(第一第二个参数同上,第三个及以后的任意个表示要插入的项)
splice(2,1,"red","blue")  //从当前数组中删除位置2的项,然后再从位置2开始插入"red"和"blue"

九、位置方法

  indexOf()和lastIndexOf().它们都接收两个参数:要查找的项和表示查找起点的位置的索引(第二个参数可选).

var arr=[1,2,3,4,5,4,3,2,1];
alert(arr.indexOf(4));  //3
alert(arr.lastIndexOf(4));  //5
alert(arr.indexOf(4,4));  //5
alert(arr.lastIndexOf(4,4));  //3

十、迭代方法

  every():对数组中的每一项运行给定函数,如果该函数对每一项都返回true,则返回true。

var numbers=[1,2,3,4,5,4,3,2,1];
var everyResult=numbers.every(function(item,index,arry){ //参数说明:数组项的值、该项在数组中的位置、数组对象本身
  return (item>2);
});
alert(everyResult);  //false

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

var numbers=[1,2,3,4,5,4,3,2,1];
var someResult=numbers.some(function(item,index,arry){ //参数说明:数组项的值、该项在数组中的位置、数组对象本身
  return (item>2);
});
alert(someResult);  //true

  filter():对数组中的每一项运行给定函数,返回该函数会返回true的项组成的数组。

var numbers=[1,2,3,4,5,4,3,2,1];
var filterResult=numbers.filter(function(item,index,arry){ //参数说明:数组项的值、该项在数组中的位置、数组对象本身
  return (item>2);
});
alert(filterResult);  //[3,4,5,4,3]

  map():对数组中的每一项运行给定函数,返回每次函数调用的结果组成的数组。

var numbers=[1,2,3,4,5,4,3,2,1];
var mapResult=numbers.map(function(item,index,arry){ //参数说明:数组项的值、该项在数组中的位置、数组对象本身
  return item*2;
});
alert(mapResult);  //[2,4,6,8,10,8,6,4,2]

  forEach():对数组中的每一项运行给定函数,没有返回值。

var numbers=[1,2,3,4,5,4,3,2,1];
numbers.forEach(function(item,index,arry){ //参数说明:数组项的值、该项在数组中的位置、数组对象本身
  //用户操作
});

十一、归并方法

  ECMAScript5新增两个归并方法。reduce()和reduceRight()。这两个方法都会迭代数组中的所有项。不同的是reduce()方法从数组的第一项开始,reduceRight()则从数组的最有一项开始。这两个方法都接收两个参数:一个在每一项上调用的函数,一个是作为归并基础的初始值(可选)。

var values=[1,2,3,4,5];
var sum=value.reduce(function(prev,cur,inex,array){  //参数说明:前一个值、当前值、项的索引、数组对象
return prev+cur;
});
alert(sum);  //15
var sum2=values.reduce(function(prev,cur,index,arry){
return prev+cur;
},20);
alert(sum2);  //35

感谢阅读。

JavaScript中Array类型方法总结的更多相关文章

  1. 浅谈 JavaScript 中 Array 类型的方法使用

    前言:Array 类型是 JavaScript 中除了 Object 类型以外最常用的类型. 一.创建数组 JavaScript 中的数组与其他语言中的数组有着很大的区别.例如Java.PHP等语言中 ...

  2. javascript 常用array类型方法

    concat:基于当前数组中的所有项创建一个新数据,会创建当前数组一个副本,然后将接受到的参数放到数组末尾,最后返回新数组.如果没有参数,则复制当前数组并返回副本. slice:基于当前数组中一个或多 ...

  3. Javascript 中 Array的 sort()和 compare()方法

    Javascript 中 Array的 sort()方法其实是把要排序的内容转化为string(调用 toString()), 然后按照字符串的第一位 ascii 码先后顺序进行比较,不是数字. 我们 ...

  4. JavaScript中Array方法总览

    title: JavaScript中Array方法总览 toc: true date: 2018-10-13 12:48:14 push(x) 将x添加到数组最后,可添加多个值,返回数组长度.改变原数 ...

  5. Javascript中Array(数组)对象常用的几个方法

    Javascript中Array数组的几个常用方法 pop()  --获取数组中末尾的元素 shift() --获取数组中首位元素 push() --在数组中末尾增加元素 slice()  --按照下 ...

  6. 小结 javascript中的类型检测

    先吐槽一下博客园的编辑器,太不好用了,一旦粘贴个表格进来就会卡死,每次都要用html编辑器写,不爽! 关于javascript的类型检测,早在实习的时候就应该总结,一直拖到现在,当时因为这个问题还出了 ...

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

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

  8. JavaScript中Array(数组) 对象

    JavaScript中Array 对象 JavaScript中创建数组有两种方式 (一)使用直接量表示法: var arr4 = []; //创建一个空数组var arr5 = [20]; // 创建 ...

  9. JavaScript中值类型和引用类型的区别

    JavaScript的数据类型分为两类:原始类型和对象类型.其中,原始类型包括:数字.字符串和布尔值.此外,JavaScript中还有两个特殊的原始值:null和undefined,它们既不是数字也不 ...

随机推荐

  1. Trace Flag

    Trace Flag能够影响Sql Server的行为,主要用于diagnose performance issue,官方解释是: Trace flags are used to temporaril ...

  2. C#设计模式系列:工厂方法模式(Factory Method)

    1. 工厂方法模式简介 1.1 定义 工厂方法模式定义一个用于创建对象的接口,让子类决定实例化哪一个类.工厂方法模式是以一个类的实例化延迟到其子类. Factory Method模式用于在不指定待创建 ...

  3. (第七天)DOM练习一

    动态删除元素 给定一个ul列表,点击ul中子节点进行删除 window.onload = function() { ].childNodes; () console.log(list.length); ...

  4. Xen之初体验:HA(额外附加)

    高可用性,虽说不是在这个版本就开始免费的,但是连续的体验一下会更加完整些. Figure 9在资源池的位置上右击选择High Availability,进入到配置HA的窗口中 Figure 10在资源 ...

  5. MongoDB的CRUD操作

    1. 前言 在上一篇文章中,我们介绍了MongoDB.现在,我们来看下如何在MongoDB中进行常规的CRUD操作.毕竟,作为一个存储系统,它的基本功能就是对数据进行增删改查操作. MongoDB中的 ...

  6. 关于IE6的PNG图像透明使用AlphaImageLoader的缺点

    PNG32的alpha透明效果在IE6下会出现bug,出现灰色背景.而目前的解决方案就是 IE提供的滤镜.需要注意的是滤镜并不是对原图片进行修改,而是对相应的html元素进行 修改.所以在一个html ...

  7. Macaca自动化测试之PC端测试

    Macaca是一套完整的自动化测试解决方案.由阿里巴巴公司开源: http://macacajs.github.io/macaca/ 特点: 同时支持PC端和移动端(Android.iOS)自动化测试 ...

  8. php中调用WebService接口

    一.背景 调用第三方短信提供商的WebService接口. 二.介绍 1.WebService三要素: SOAP(Simple Object Access Protocol) 用来描述传递信息的格式 ...

  9. Rafy 领域实体框架演示(2) - 新功能展示

    本文的演示需要先完成上一篇文章中的演示:<Rafy 领域实体框架示例(1) - 转换传统三层应用程序>.在完成改造传统的三层系统之后,本文将讲解使用 Rafy 实体框架后带来的一些常用功能 ...

  10. Windows 10 密钥分享

    Windows 10 Technical Preview for Enterprise:KEY:PBHCJ-Q2NYD-2PX34-T2TD6-233PKhttp://technet.microsof ...