JavaScript Array数组方法详解
Array类型是ECMAScript中最常用的引用类型。ECMAScript中的数据与其它大多数语言中的数组有着相当大的区别。虽然ECMAScript中的数据与其它语言中的数组一样都是数据的有序列表,但不同的是,ECMAScript数组中的每一项可以保存任何类型的数据,无论是数值、字符串或者是对象。同时,ECMAScript中的数组大小是可以动态调整的,即可以根据数据的添加自动增长以容纳新增的数据。下面总结一下JavaScript中数组常用的操作函数及用法。
创建数组
创建数组主要有构造函数和数组字面量两种方法,如下所示:
var arr = new Array();
var arr = [];
对于构造函数,我们可以传递一个数值创建包含给定项数的数组,如下:
var arr = new Array(3); //数组长度为3
也可以直接传递存放于数组中的值,如下:
var arr = new Array("red","green","blue");
不论哪种方式,推荐使用数组字面量的形式来创建数组。
- 检测数组
对于单一的全局执行环境而言,使用instanceof操作符就可以检测是否为数组,例如:
var arr = [1,2,3];
console.log(arr instanceof Array); //true
但如果网页中包含多个框架,也就包含多个全局执行环境,ES5新增了Array.isArray()方法来确定某个值是否为数组,而不管它是在哪个全局执行环境中被创建的,如下:
if(Array.isArray(arr)){
//执行某些操作
}
- 数组字符串转换
每个对象都具有toLocaleString()、toString()和valueof()方法。调用数组的toString()方法会返回数组中每个值的字符串形式拼接而成并且以逗号分隔的字符串,调用数组的valueof()方法返回的还是数组,实际上调用的是数组每一项的toString()方法,如下:
var arr = ["red","green","blue"];
console.log(arr.toString()); //red,green,blue
console.log(arr.valueof()); //red,green,blue
console.log(arr); //red,green,blue
而调用数组的toLocaleString()方法,与toString()不同的是它会调用数组每一项的toLocaleString()方法,将每一项toLocaleString()方法的返回值以逗号分隔拼接成一个字符串。而使用join()方法,可以使用不同的分隔符来构建这个字符串,如下:
var arr = ["red","green","blue"];
console.log(arr.join(",")); //red,green,blue
console.log(arr.join("||")); //red||green||blue
- 数组的添加和删除
push()方法接收任意数量的参数,把它们逐个添加到数组末尾,并返回修改修改后数组的长度,例如:
var arr = [1,2,3];
arr.push(4,5);
console.log(arr); //[1,2,3,4,5]
与push()相对的是pop()方法,它从数组末尾移除最后一项,并返回移除的项,例如:
var arr = [1,2,3];
arr.pop(); //3
arr.pop(); //2
console.log(arr); //[1]
另外两个使用的方法是shift()和unshift(),它们与pop()和push()类似,shift()方法用于从数组的起始位置移除项并返回移除项,例如:
var arr = [1,2,3];
arr.shift(); //1
arr.shift(); //2
console.log(arr); //[3]
unshift()方法与shift()用途相反,它能够在数组前端添加任意个项并返回新数组的长度,例如:
var arr = [1,2,3];
arr.unshift(4); //返回长度4
arr.unshift(5); //返回长度5
console.log(arr); //[1,2,3,4,5]
- 数组的翻转与排序
数组提供的翻转方法为reverse(),它会反转数据项的顺序,例如:
var arr = [1,2,3];
arr.reverse();
console.log(arr); //[3,2,1]
sort()也可以对数组进行排序,不过它的默认排序方式并不是大小,而是根据对应字符串逐个编码排序的。sort()方法可以接收一个比较函数,进行自定义排序,例如:
function compare(value1,value2){
return value1-value2;
}
var arr = [1,3,2,5,4];
arr.sort(compare);
console.log(arr); //[1,2,3,4,5]
- 数组连接
concat()方法会创建当前数组的一个副本,然后将接收到的参数添加到这个副本的末尾,最后返回新构建的数组,原来的数组不变,例如:
var arr = [1,2,3];
var arr2 = arr.concat(4,[5,6]);
console.log(arr); //[1,2,3]
console.log(arr2); //[1,2,3,4,5,6]
- 数组分割
slice()方法接收一个或两个参数,即要返回项的开始位置和结束位置。如果只要一个参数,则返回从指定位置开始到数组结束的所有项。如果接收两个参数,则返回起始和结束位置之间的所有项但不包括结束位置的项,例如:
var arr = [1,2,3,4,5];
var arr2 = arr.slice(1); //[2,3,4,5]
var arr3 = arr.slice(1,3); //[2,3]
注意,slice()方法不会影响原来的数组。
- splice()方法
由于splice()方法非常强大,因此单独拿出来总结一下,它可以接收三个参数,第一个参数表示添加或删除项目的位置,第二个参数表示要删除的项目数量,第二个参数表示向数组中添加的新项目(可选),通过提供不同的参数可以实现删除、插入和替换等功能,例如:
var arr = [1,2,3,4,5];
arr.splice(2,0,11,22); //从位置2插入两项,没有删除
console.log(arr); //[1,2,11,22,3,4,5] arr.splice(2,2,33,44); //从位置2开始删除两项,插入两项,返回被删除的项
console.log(arr); //[1,2,33,44,4,5] arr.splice(1,1); //从位置1开始删除1项,返回被删除的项
console.log(arr); //[1,33,44,4,5]
- 数组的位置方法
ES5提供了两个位置方法:indexOf()和lastIndexOf()。这两个方法都接收两个参数:要查找的项和表示查找起点位置的索引(可选)。indexOf()方法从数组的开头向后查找,lastIndexOf()则从数组的末尾向前查找,例如:
var arr = [1,2,3,4,5,4,3,2,1];
console.log(arr.indexOf(4)); //3
console.log(arr.lastIndexOf(4)); //5 console.log(arr.indexOf(4,4)); //5
console.log(arr.lastIndexOf(4,4)); //3
- 数组的迭代方法
ES5定义了5种迭代方法,每个方法都接收两个参数:要在每一项上运行的函数和(可选)运行该函数的作用域对象--影响this的值。传入这些方法的函数可以接收三个参数:数组项的值、该项在数组中的索引和数组对象本身。
其中,every()方法和some()方法是相似的。对于every()方法来说,传入的函数必须对每一项都返回true,这个方法才返回true。而对于some(),传入的函数只要对数组中的任意一项返回true,该方法就返回true。例子如下:
var arr = [1,2,3,4,5,4,3,2,1];
var everyResult = arr.every(function(item,index,array){
return (item>2);
});
console.log(everyResult); //false,并不是全部大于2 var someResult= arr.some(function(item,index,array){
return (item>2);
});
console.log(someResult); //true,某一项大于2即可
filter()方法根据给定的函数确定是否在返回的数组中包含某一项,例如:
var arr = [1,2,3,4,5,4,3,2,1];
var filterResult = arr.filter(function(item,index,array){
return (item>2);
});
console.log(filterResult); //[3,4,5,4,3],返回所有数值都大于2的一个数组
map()方法对于数组中的每一项都会运行给定的函数,然后将每一项函数运行结果组成的数组返回,例如:
var arr = [1,2,3,4,5,4,3,2,1];
var mapResult = arr.map(function(item,index,array){
return item*2;
});
console.log(mapResult); //[2,4,6,8,10,8,6,4,2],原先数组每一项乘以2后返回
最后一个方法是forEach(),它只对数组中的每一项运行给定函数,没有返回值,例如:
var arr = [1,2,3,4,5,4,3,2,1];
arr.forEach(function(item,index,array){
//执行某些操作
});
- 数组的缩小方法
ES5还提供了两个缩小数组的方法:reduce()和reduceRight()。这两个方法都会迭代数组中的所有项,然后返回一个最终的值。reduce()从第一项开始逐渐遍历到最后一项,reduceRight()从最后一项开始遍历到第一项结束。这两个函数都接收四个参数:前一个值、当前值、项的索引和数组对象。这个函数返回的任何值都会作为第一个参数自动传递给下一项。例如,使用reduce()方法求数组所有项的和:
var arr = [1,2,3,4,5];
var sum = arr.reduce(function(pre,cur,index,array){
return pre+cur;
});
console.log(sum); //15
第一次执行回调函数,pre是1,cur是2。第二次,pre是3(1+2),cur是3。这个过程会把数组的每一项都访问一遍,最后返回结果。reduceRight()方法与reduce()类似,只不过方向相反而已。
这篇笔记主要是根据JavaScript高级程序设计和网上资源总结出来的,如果有不完善的地方还请指出。
JavaScript Array数组方法详解的更多相关文章
- JavaScript数组方法详解
JavaScript数组方法详解 JavaScript中数组的方法种类众多,在ES3-ES7不同版本时期都有新方法:并且数组的方法还有原型方法和从object继承的方法,这里我们只介绍数组在每个版本中 ...
- js数组方法详解
Array对象的方法-25个 /*js数组方法详解 */ /* * 1 concat() 用于连接多个数组或者值-------------- * 2 copyWithin() 方法用于从数组的指定位置 ...
- JavaScript Array 数组方法汇总
JavaScript Array 数组方法汇总 1. arr.push() 从后面添加元素,返回值为添加完后的数组的长度 var arr = [1,2,3,4,5] console.log(arr.p ...
- js数组方法详解(最新最全)
数组是js中最常用到的数据集合,其内置的方法有很多,熟练掌握这些方法,可以有效的提高我们的工作效率,同时对我们的代码质量也是有很大影响.本文所有的栗子都是在es7环境下测试的,如果有问题欢迎留言交流 ...
- Java Array数组使用详解
本文主要讲解java中array数组使用,包含堆.栈内存分配及区别 1.动态初始化 package myArray; /* * 堆:存储的是new出来的东西,实体,对象 * A 每个对象都有地址值 * ...
- iOS 判断数组array中是否包含元素a,取出a在array中的下标+数组方法详解
目前找到来4个解决办法,第三个尤为简单方便 NSArray * arr = @["]; //是否包含 "]) { NSInteger index = [arr indexOfObj ...
- js中Array对象方法详解
操作方法:concat() slice() splice() concat()方法可以基于当前数组中的所有项创建一个新数组.具体来说,这个方法会创建当前数组一个副本,将接收到参数添加到副本的末尾,最后 ...
- Cookie介绍及JavaScript操作Cookie方法详解
本文主要为大家简单介绍了以下Cookie的用途.运行机制,以及JavaScript操作Cookie的各种方法,总结的比较全面,希望能给大家带来帮助. 什么是 Cookie “cookie 是存储于访问 ...
- JavaScript Object.defineProperty()方法详解
Object.defineProperty() 方法直接在一个对象上定义一个新属性,或者修改一个已经存在的属性, 并返回这个对象. 语法 Object.defineProperty(obj, prop ...
随机推荐
- [高性能MYSQL 读后随笔] 关于事务的隔离级别(一)
一.锁的种类 MySQL中锁的种类很多,有常见的表锁和行锁,也有新加入的Metadata Lock等等,表锁是对一整张表加锁,虽然可分为读锁和写锁,但毕竟是锁住整张表,会导致并发能力下降,一般是做dd ...
- ENode框架Conference案例分析系列之 - 文章索引
ENode框架Conference案例分析系列之 - 业务简介 ENode框架Conference案例分析系列之 - 上下文划分和领域建模 ENode框架Conference案例分析系列之 - 架构设 ...
- BIO\NIO\AIO记录
IO操作可以分为3类:同步阻塞(BIO).同步非阻塞(NIO).异步(AIO). 同步阻塞(BIO):在此种方式下,用户线程发起一个IO操作以后,必须等待IO操作的完成,只有当真正完成了IO操作以后, ...
- UML类图(上):类、继承和实现
面向对象设计 对于一个程序员来说,在工作的开始阶段通常都是别人把东西设计好,你来做.伴随着个人的成长,这个过程将慢慢变成自己设计一部分功能来实现,自己实现.如果要自己设计,无论是给自己看,还是给别人看 ...
- Spring5:@Autowired注解、@Resource注解和@Service注解
什么是注解 传统的Spring做法是使用.xml文件来对bean进行注入或者是配置aop.事物,这么做有两个缺点: 1.如果所有的内容都配置在.xml文件中,那么.xml文件将会十分庞大:如果按需求分 ...
- 【完全开源】知乎日报UWP版:增加Live磁贴、Badge、以及Toast通知
目录 说明 实现方法 APP生命期 后台任务 说明 之前网上有人建议增加磁贴(tile).徽章(badge)功能.利用周末的时间,将这两个功能添加上去了.如果将磁贴固定到开始屏幕,磁贴就会循环播放首页 ...
- [转载]:STM32为什么必须先配置时钟再配置GPIO
转载来源 :http://blog.csdn.net/fushiqianxun/article/details/7926442 [原创]:我来添两句,就是很多同学(包括我)之前搞低端单片机,到了stm ...
- C# 开发windows服务的一些心得
最近在做一个windows服务的项目,发现并解决了一些问题,拿出来和大家分享一下,以下windows服务简称“服务” 文章会在适合时间更新,因为朋友们在不断提出新的意见或思路,感谢-.- 1.服务如何 ...
- 【.net 深呼吸】自定义缓存配置(非Web项目)
在前一篇烂文中,老周简单讲述了非Web应用的缓存技术的基本用法.其实嘛,使用系统默认方案已经满足我们的需求了,不过,如果你真想自己来配置缓存,也是可以的. 缓存的自定义配置可以有两种方案,一种是用代码 ...
- ASP.NET Core中的依赖注入(1):控制反转(IoC)
ASP.NET Core在启动以及后续针对每个请求的处理过程中的各个环节都需要相应的组件提供相应的服务,为了方便对这些组件进行定制,ASP.NET通过定义接口的方式对它们进行了"标准化&qu ...