基于JavaScript Array数组方法(新手必看篇)


Posted in Javascript onAugust 20, 2016

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 相关文章推荐
关于使用runtimeStyle属性问题讨论文章
Mar 08 Javascript
javascript css float属性的特殊写法
Nov 13 Javascript
js 弹出框只弹一次(二次修改之后的)
Nov 26 Javascript
jquery ajaxSubmit 异步提交的简单实现
Feb 28 Javascript
javascript抽象工厂模式详细说明
Dec 16 Javascript
js+canvas绘制五角星的方法
Jan 28 Javascript
Javascript点击按钮随机改变数字与其颜色
Sep 01 Javascript
扩展jquery easyui tree的搜索树节点方法(推荐)
Oct 28 Javascript
微信小程序 wxapp画布 canvas详细介绍
Oct 31 Javascript
JavaScript生成指定范围的时间列表
Mar 19 Javascript
Node.js实现简单管理系统
Sep 23 Javascript
通过实例了解JS 连续赋值
Sep 24 Javascript
老生常谈JavaScript 正则表达式语法
Aug 20 #Javascript
浅谈时钟的生成(js手写简洁代码)
Aug 20 #Javascript
js 基础篇必看(点击事件轮播图的简单实现)
Aug 20 #Javascript
再谈Javascript中的异步以及如何异步
Aug 19 #Javascript
用原生js统计文本行数的简单示例
Aug 19 #Javascript
jQuery购物网页经典制作案例
Aug 19 #Javascript
手机Web APP如何实现分享多平台功能
Aug 19 #Javascript
You might like
怎样给PHP源代码加密?PHP二进制加密与解密的解决办法
2013/04/22 PHP
Zend Framework动作助手Url用法详解
2016/03/05 PHP
使用PHP json_decode可能遇到的坑与解决方法
2017/08/03 PHP
一个简单的JavaScript 日期计算算法
2009/09/11 Javascript
jquery css 设置table的奇偶行背景色示例
2014/06/03 Javascript
原生js实现复制对象、扩展对象 类似jquery中的extend()方法
2014/08/30 Javascript
JavaScript中的值类型详细介绍
2014/12/29 Javascript
JavaScript判断是否为数组的3种方法及效率比较
2015/04/01 Javascript
使用nodejs中httpProxy代理时候出现404异常的解决方法
2016/08/15 NodeJs
BOM系列第二篇之定时器requestAnimationFrame
2016/08/17 Javascript
AngularJS入门教程之更多模板详解
2016/08/19 Javascript
关于Iframe父页面与子页面之间的相互调用
2016/11/22 Javascript
react-redux中connect的装饰器用法@connect详解
2018/01/13 Javascript
使用jquery的cookie实现登录页记住用户名和密码的方法
2019/03/13 jQuery
一百行JS代码实现一个校验工具
2019/04/30 Javascript
js逆向解密之网络爬虫
2019/05/30 Javascript
vue中更改数组中属性,在页面中不生效的解决方法
2019/10/30 Javascript
详解Vue 的异常处理机制
2020/11/30 Vue.js
[07:37]DOTA2-DPC中国联赛2月2日Recap集锦
2021/03/11 DOTA
django实现同一个ip十分钟内只能注册一次的实例
2017/11/03 Python
django开发教程之利用缓存文件进行页面缓存的方法
2017/11/10 Python
深入分析python数据挖掘 Json结构分析
2018/04/21 Python
Python数据结构之哈夫曼树定义与使用方法示例
2018/04/22 Python
对python中的xlsxwriter库简单分析
2018/05/04 Python
selenium 多窗口切换的实现(windows)
2020/01/18 Python
html5构建触屏网站之网站尺寸探讨
2013/01/07 HTML / CSS
高清屏下canvas重置尺寸引发的问题的解决
2019/10/14 HTML / CSS
英国护肤品购物网站:Beauty Expert
2016/08/19 全球购物
索引覆盖(Index Covering)查询含义
2012/02/18 面试题
母亲七十大寿答谢词
2014/01/18 职场文书
应届生找工作求职信
2014/06/24 职场文书
公司踏青活动方案
2014/08/16 职场文书
总经理2015中秋节致辞
2015/07/29 职场文书
素质教育培训心得体会
2016/01/19 职场文书
sql查询结果列拼接成逗号分隔的字符串方法
2021/05/25 SQL Server
为什么RedisCluster设计成16384个槽
2021/09/25 Redis