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. Constraint5:unique 约束和null

    unique约束使用unique index来限制列值的唯一性: 创建unique约束之后,column中允许插入null值,unique 约束将两个null值看作是相同的(即null=null为tr ...

  2. word-spacing汉字不起作用的解决方法

    异常处理汇总-前端系列 http://www.cnblogs.com/dunitian/p/4523015.html 调节文字间的距离,发现==>word-spacing汉字不起作用 研究发现, ...

  3. OpenCASCADE Coordinate Transforms

    OpenCASCADE Coordinate Transforms eryar@163.com Abstract. The purpose of the OpenGL graphics process ...

  4. IOS数据存储之文件沙盒存储

    前言: 之前学习了数据存储的NSUserDefaults,归档和解档,对于项目开发中如果要存储一些文件,比如图片,音频,视频等文件的时候就需要用到文件存储了.文件沙盒存储主要存储非机密数据,大的数据. ...

  5. angularjs 锚点操作服务 $anchorScroll

    在普通的html网页中,我们可以通过在url后边添加  #elementid 的方式,将页面显示定位到某个元素,也就是锚点. 但是在angularjs应用的网页中,页面路由的写法是 #route/ro ...

  6. 修改USB固件库的Customer_HID例程

    我用的是神州三号开发板子,板子的USB模块原理图为: 配置端口G的11号引脚为usb的使能引脚,按理来说应该是开漏输出的(看了很多的修改代码都是这个模式),不过就是不能使能usb,只能配置成推挽的才行 ...

  7. EasyUI管理后台模板(附源码)

    下载地址:http://files.cnblogs.com/wyguo/easyui_demo.zip

  8. 1Z0-053 争议题目解析501

    1Z0-053 争议题目解析501 考试科目:1Z0-053 题库版本:V13.02 题库中原题为: 501.Note the output of the following query; SQL&g ...

  9. ajax调用本地wcf中的post和get

    我们可以通过jQuery调用本地或者远程的wcf服务,本文讲解的是对本地wcf服务的post和get调用方式. post和get到底有什么区别呢?此处不作详述. 但是,post对请求的数据格式更为严格 ...

  10. IOS客户端UIwebview下web页面闪屏问题

    基于ios客户端uiwebview下的web页面,在其内容高度大于视窗高度时,如果点击超过视窗下文档的底部按钮,收缩内容高度,会发生闪屏问题. 外因是由文档的高度大于视窗的高度所致,本质原因未知. 解 ...