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,它们既不是数字也不 ...
随机推荐
- TortoiseSVN Clean up 失败的处理方法
当使用 TortoiseSVN 下载项目失败之后,重新下载之前需要 Clean up,在 TortoiseSVN 中 Clean up 总是失败. 在命令行行中执行 svn cleanup 就成功 ...
- oc集合
本人之前学习过一年半ios开发 由于行情太过凄惨,故转前端.心在前端,苹果亦难忘!把我平时的笔记作出给大家总结! 回顾之前的知识 便利初始化函数:框架类库中的一些类有一系列的以init开头的方法,这些 ...
- Vue.js学习笔记(4)
分享一段将 json数组数据以 csv格式导出的代码: html: <button class="btn btn-danger" @click='exportData'&g ...
- javascript中15种原生对象类型系统综述
前面的话 在编程语言中,能够表示并操作的值的类型称做数据类型,编程语言最基本的特性就是能够支持多种数据类型.javascript拥有强大的类型系统,主要包括原生对象.宿主对象和浏览器拓展对象,本文主要 ...
- Android探索之BroadcastReceiver具体使用以及安全性探究
前言: 最近的计划是学习一下iOS的NSNotificationCenter,突然想起来的Android的广播机制,所以还是觉得先对BroadcastReceiver来个全面的总结然后再去学习NSNo ...
- 【记录】ASP.NET MVC RegisterBundles
1. Install the package from nuget Install-Package Microsoft.AspNet.Web.Optimization 2,BundleConfig 配 ...
- 谈谈JIT编译器和本机影像生成器(NGen.exe)
前言 在看<CLR>的时候,作者在开篇的时候提到了NGen.exe,前面一节执行程序集的代码中提到:程序或方法执行前会执行MSCorEE.dll中的JIT函数把要执行方法的IL转换成本地的 ...
- 使用MAT(Memory Analyzer Tool)工具分析dump文件--转
原文地址:http://gao-xianglong.iteye.com/blog/2173140?utm_source=tuicool&utm_medium=referral 前言 生产环境中 ...
- MongoDB性能优化
一.索引 MongoDB 提供了多样性的索引支持,索引信息被保存在system.indexes 中,且默认总是为_id创建索引,它的索引使用基本和MySQL 等关系型数据库一样.其实可以这样说说,索引 ...
- Python_Day_01(使用环境为Python3.0+)
Python 变量与赋值. Python在赋值时时不需要进行定义类型,可直接进行定义赋值. #直接赋值字符串格式 value = "Char" #直接赋值为数字 value = 1 ...