JavaScript中Array类型方法总结
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类型方法总结的更多相关文章
- 浅谈 JavaScript 中 Array 类型的方法使用
前言:Array 类型是 JavaScript 中除了 Object 类型以外最常用的类型. 一.创建数组 JavaScript 中的数组与其他语言中的数组有着很大的区别.例如Java.PHP等语言中 ...
- javascript 常用array类型方法
concat:基于当前数组中的所有项创建一个新数据,会创建当前数组一个副本,然后将接受到的参数放到数组末尾,最后返回新数组.如果没有参数,则复制当前数组并返回副本. slice:基于当前数组中一个或多 ...
- Javascript 中 Array的 sort()和 compare()方法
Javascript 中 Array的 sort()方法其实是把要排序的内容转化为string(调用 toString()), 然后按照字符串的第一位 ascii 码先后顺序进行比较,不是数字. 我们 ...
- JavaScript中Array方法总览
title: JavaScript中Array方法总览 toc: true date: 2018-10-13 12:48:14 push(x) 将x添加到数组最后,可添加多个值,返回数组长度.改变原数 ...
- Javascript中Array(数组)对象常用的几个方法
Javascript中Array数组的几个常用方法 pop() --获取数组中末尾的元素 shift() --获取数组中首位元素 push() --在数组中末尾增加元素 slice() --按照下 ...
- 小结 javascript中的类型检测
先吐槽一下博客园的编辑器,太不好用了,一旦粘贴个表格进来就会卡死,每次都要用html编辑器写,不爽! 关于javascript的类型检测,早在实习的时候就应该总结,一直拖到现在,当时因为这个问题还出了 ...
- Javascript学习1 - Javascript中的类型对象
原文:Javascript学习1 - Javascript中的类型对象 1.1关于Numbers对象. 常用的方法:number.toString() 不用具体介绍,把数字转换为字符串,相应的还有一个 ...
- JavaScript中Array(数组) 对象
JavaScript中Array 对象 JavaScript中创建数组有两种方式 (一)使用直接量表示法: var arr4 = []; //创建一个空数组var arr5 = [20]; // 创建 ...
- JavaScript中值类型和引用类型的区别
JavaScript的数据类型分为两类:原始类型和对象类型.其中,原始类型包括:数字.字符串和布尔值.此外,JavaScript中还有两个特殊的原始值:null和undefined,它们既不是数字也不 ...
随机推荐
- 深入理解DOM事件机制系列第一篇——事件流
× 目录 [1]历史 [2]事件冒泡 [3]事件捕获[4]事件流 前面的话 javascript操作CSS称为脚本化CSS,而javascript与HTML的交互是通过事件实现的.事件就是文档或浏览器 ...
- 这算是ASP.NET MVC的一个大BUG吗?
这是昨天一个同事遇到的问题,我觉得这是一个蛮大的问题,而且不像是ASP.NET MVC的设计者有意为之,换言之,这可能是ASP.NET MVC的一个Bug(不过也有可能是保持原始请求数据而作的妥协). ...
- Rust初步(四):在rust中处理时间
这个看起来是一个很小的问题,我们如果是在.NET里面的话,很简单地可以直接使用System.DateTime.Now获取到当前时间,还可以进行各种不同的计算或者输出.但是这样一个问题,在rust里面, ...
- 利用Shell脚本将MySQL表中的数据转化为json格式
脚本如下: #!/bin/bash mysql -s -phello test >.log <<EOF desc t1; EOF lines="concat_ws(',', ...
- 安装ClouderaManager以及使用ClouderaManager安装分布式集群的若干细节
目录 前言 整体介绍 分步安装介绍 总结 一.前言 周末干了近四十个小时中间只休息了五个小时终于成功安装了ClouderaManager以及分布式集群,其中各种辛酸无以言表,唯有泪两行. ...
- Anliven - 一碗毒鸡汤
什么是你的核心动力,支撑着你持续前进? 什么是你的加速度,激发你全部的潜能和勇气? 你的核心动力应该来自于: 家人与朋友的信任.包容与期待 你本应承担的责任 对自己有所要求,有所期待,你本应更好 而你 ...
- 你想不到的!CSS 实现的各种球体效果【附在线演示】
CSS 可以实现很多你想不到的效果,今天我们来尝试使用 CSS 实现各种球体效果.有两种方法可以实现,第一种是使用大量的元素创建实际的 3D 球体,这种方法有潜在的性能问题:另外一种是使用 CSS3 ...
- NET开发学习项目资源
最近在整理资料时发现自己当初学习NET的一些项目资源,一直放在硬盘里不如拿来分享给初学者学习还是不错的. 项目代码为<精通ASP.NET20+SQL Server2005项目开发>书中源码 ...
- NET开发学习项目资源(2)
NET开发学习项目资源 击标题链接即可下载. 目录: 1.征婚交友网站 前台交友信息和后台会员管理两大部分组成. 前台功能模块 该模块主要包括查询交友信息.显示交友信息.会员登录.会员信息管理.修改会 ...
- jQuery-1.9.1源码分析系列(二)jQuery选择器
1.选择器结构 jQuery的选择器根据源码可以分为几块 init: function( selector, context, rootjQuery ) { ... // HANDLE: $(&quo ...