Javascript中数组方法汇总(推荐)


Posted in Javascript onApril 01, 2015

Array.prototype中定义了很多操作数组的方法,下面介绍ECMAScript3中的一些方法

1.Array.join()方法

该方法将数组中的元素都转化为字符串并按照指定符号连接到一起,返回最后生成的字符串,可以包含一个参数,为连接数组元素的符号,默认为逗号。

var ay = [1,2,3];
ay.join();       // =>"1,2,3" 
ay.join("+");     // => "1+2+3" 
ay.join(" ");     // =>"1 2 3"
ay.join("");      // =>"123"

var by = new Array(10) //新建一个长度为10的空数组
by.join("-");      //=> "---------" 连接10个空元素

2.Array.reverse()方法

该方法将数组中的元素颠倒顺序,返回逆序的数组,该方法会改变当前数组,不会创建新数组。

var a = [1,2,3];

a.reverse().join();    //=>"3,2,1" ,此时a=[3,2,1]   

3.Array.sort()方法

该方法将数组中的元素排序并返回排序后的数组。当sort()方法不带参数时,数组按照字母表顺序排序,如果数组包含undefined元素,会排到数组尾部。

var as = ["banana","cherry","apple"];

as.sort();

as.join("+ ");          //=>"apple+ banana+ cherry"

我们也可以给sort()方法传入一个比较函数作为参数,让数组以指定的比较函数进行排序。比较函数返回值小于0,则第一个参数在前,相反返回值大于0,则第二个参数在前,两个参数值相等,则返回0

var sy = [1111,222,4,33];

sy.sort();                               //=>"1111,222,33,4"

sy.sort(function(a,b){

            return a-b;

});                                        //=> "4,33,222,1111"

注:这里使用匿名函数最合适,因为只调用一次,无需指定函数名称

4.Array.concat()方法

该方法创建并返回一个新数组,连接原数组元素和方法中每个元素,组成一个新数组。该方法不会递归调用方法中的参数。

var a = [1,2,3];

a.concat(4,5);             //=>"1,2,3,4,5"

a.concat([4,5]);           //=>"1,2,3,4,5"

a.concat([4,5],[6,7]);  //=>"1,2,3,4,5,6,7"

a.concat(4,[5,[6,7]]);  //=>"1,2,3,4,5,[6,7]"

5.Array.slice()方法

该方法返回指定数组的一个片段或子数组,该方法可以有两个参数,分别制定片段的开始和结束位置,返回的数组包含第一个参数指定的元素和所有到但不包含第二个参数指定的位置的数组元素。如果只有一个参数,则包含从指定开始位置到数组末尾,参数可以为负值,表示相对于数组中最后一个元素的位置。该方法不会修改被调用的数组。

var d =[1,2,3,4,5];

d.slice(1,2);              //=>"2"

d.slice(1,-1);             //=>"2,3,4"

d.slice(3);                 //=>"4,5"

d.slice(-3,-1);           //=>"3,4"

6.Array.splice()方法

该方法是在数组中插入或删除元素的通用方法,该方法会修改原始数组。该方法可以包含多个参数,第一个参数指定要在数组中插入或删除的起始位置,第二个参数制定了删除元素的个数,若不指定则将起始位置以及后面元素全部删除,两个参数之后的参数指定了插入数组的元素,该方法返回由删除元素组成的数组。

var e = [1,2,3,4,5,6];
e.splice(4);          //=> 返回[5,6] ; e是[1,2,3,4]
e.splice(1,2);         //=> 返回[2,3] ; e是[1,4]
      
var f = [1,2,3,4,5];
f.splice(2,0,"a","b");   //=>返回[]; f是[1,2,a,b,3,4,5]
f.splice(2,2,[6,7],3);   //=>返回[a,b]; f是[1,2,[6,7],3,4,5]

7.push()和pop()方法

这两个方法将数组当做栈使用,push()方法是在数组尾部添加一个或多个元素,并返回数组的长度。pop()方法是删除数组的最后一个元素,减少数组长度并返回删除的值。

8.unshift()方法和shift()方法

这两个方法是在数组头部进行添加删除操作,unshift()方法是在数组头部添加一个或多个元素,返回数组长度。shift()方法是删除数组第一个元素并返回。

var a=[];     //[]
a.push(1,2);  //[1,2]
a.pop();      //[1]

a.unshift(2,3); //[2,3,1]
a.shift();      //[3,1]

9.toString()和toLocaleString()方法

这两个方法是将数组每个元素转化为字符串,toString()是将每个元素转化为字符串并且输出用逗号隔开。toLocaleString()方法是数组每个元素调用toLocaleString()转化为字符串,并使用本地化分隔符连接。

下面在介绍几个ECMAScript5中特有的数组方法,在介绍方法之前首先做一个大致了解。大多数方法的第一个参数接受一个函数,并且对数组每个元素调用一次这个函数,如果说稀疏数组,不存在的元素不调用函数。大多数情况下,调用的函数使用三个参数:数组元素,元素的索引以及数组本身。

1.forEach()方法

该方法从头到尾遍历数组,数组每个元素都调用指定的函数。该方法在遍历完所有数组元素之前不会终止。若想提前终止,必须将forEach()放到try块中,并可以抛出异常。

var data=[1,2,3,4,5]
var sum = 0;
data.forEach(function(value){   //=>value为数组元素
  sum+=value;
})                        //=>15

data.forEach(function(value,i,a){ //=>三个参数分别指代数组元素,元素索引和数组
  a[i] = v+1;
})                        //=>data=[2,3,4,5,6]

2.map()方法

该方法将数组的每个元素传递给指定的函数,并返回一个新数组,该数组包含了数组元素调用函数对应的返回值。如果是稀疏数组,返回的新数组也是同样结构的系数数组。

var a=[1,2,3];
var b=a.map(function(v){
  return v*v;
})  //=> b=[1,4,9]

3.filter()方法--类似于条件筛选

该方法返回的是原始数组的一个子集,传递的函数用来做逻辑判定,返回true或false,如果返回的值为true或可以转化为true,则当前数组元素就是子集的成员,添加到返回的数组中。该方法会跳过稀疏数组的空元素。

var a=[5,4,3,2,1]
var smalla=a.filter(function(v){
  return v<3; 
})                         //=>返回[2,1]
var everya=a.filter(function(v,i){ //=>i表示元素索引
  return i%2==0; 
})                         //=>返回[5,3,1]

4.every()和some()方法

这两个方法是对数组进行逻辑判定,对数组每个元素运用指定函数进行判定返回true或false。
every()方法是当且仅当数组中所有元素调用判定函数都返回true,才返回true,否则返回false。
some()方法是当数组中至少有一个元素调用判定函数返回true,就返回true,否则返回false。

这两个方法都是一旦确认返回值后就不在遍历数组元素了。

5.reduce()和reduceRight()方法

这两个方法使用指定的函数将数组元素进行组合,生成单个值。
reduce()需要两个参数,第一个是执行化简组合的操作函数,第二个是组合的初始值。和前面几个方法不同的是,常见的三个参数(数组元素、元素索引和数组本身)会作为操作函数的2~4个参数传递给函数,第一个参数是到目前为止进行计算组合的结果。
如果是针对空数组,并不指定初始值时调用reduce()方法会导致类型错误异常。
reduceRight()方法和reduce()方法的工作原理相同,不同的是其按数组索引从高到低进行处理(即从右到左进行合并处理)

6.indexOf()和lastIndexOf()方法

这两个方法都是用于在整个数组中搜索具体给定的值,并返回第一个匹配元素的索引值,若没有则返回-1.indexOf()方法是从头到尾进行搜索,而lastIndexOf()是从尾到头进行搜索。

Javascript 相关文章推荐
学习ExtJS(二) Button常用方法
Oct 07 Javascript
JQuery实现倒计时按钮的实现代码
Mar 23 Javascript
JS实现的省份级联实例代码
Jun 24 Javascript
浅析Js(Jquery)中,字符串与JSON格式互相转换的示例(直接运行实例)
Jul 09 Javascript
Checbox的操作含已选、未选及判断代码
Nov 07 Javascript
jQuery调用RESTful WCF示例代码(GET方法/POST方法)
Jan 26 Javascript
标题过长使用javascript按字节截取字符串
Apr 24 Javascript
js时间戳转为日期格式的方法
Dec 28 Javascript
js控制文本框只能输入中文、英文、数字与指定特殊符号的实现代码
Sep 09 Javascript
jQuery EasyUI右键菜单实现关闭标签/选项卡
Oct 10 Javascript
JavaScript数据结构之二叉树的遍历算法示例
Apr 13 Javascript
JS实现图片放大镜插件详解
Nov 06 Javascript
javascript闭包的理解
Apr 01 #Javascript
JavaScript数据类型之基本类型和引用类型的值
Apr 01 #Javascript
JavaScript之Object类型介绍
Apr 01 #Javascript
JS修改iframe页面背景颜色的方法
Apr 01 #Javascript
JS返回iframe中frameBorder属性值的方法
Apr 01 #Javascript
javascript算法题:求任意一个1-9位不重复的N位数在该组合中的大小排列序号
Apr 01 #Javascript
jQuery scrollFix滚动定位插件
Apr 01 #Javascript
You might like
PHP实现自动登入google play下载app report的方法
2014/09/23 PHP
给ECShop添加最新评论
2015/01/07 PHP
PHP防止刷新重复提交页面的示例代码
2015/11/11 PHP
php 二维数组时间排序实现代码
2016/11/19 PHP
Extjs Ext.MessageBox.confirm 确认对话框详解
2010/04/02 Javascript
jquery ui dialog实现弹窗特效的思路及代码
2013/08/03 Javascript
jQuery中:text选择器用法实例
2015/01/03 Javascript
js实现n秒倒计时后才可以点击的效果
2015/12/20 Javascript
AngularJS实现ajax请求的方法
2016/11/22 Javascript
angular.extend方法的具体使用
2017/09/14 Javascript
微信小程序自动客服功能
2017/11/02 Javascript
解决ng-repeat产生的ng-model中取不到值的问题
2018/10/02 Javascript
对 Vue-Router 进行单元测试的方法
2018/11/05 Javascript
async/await优雅的错误处理方法总结
2019/01/30 Javascript
Bootstarp在pycharm中的安装及简单的使用方法
2019/04/19 Javascript
基于Nuxt.js项目的服务端性能优化与错误检测(容错处理)
2019/10/23 Javascript
JS浏览器BOM常见操作实例详解
2020/04/27 Javascript
通过高德地图API获得某条道路上的所有坐标用于描绘道路的方法
2020/08/24 Javascript
详解Typescript里的This的使用方法
2021/01/08 Javascript
[01:16:12]完美世界DOTA2联赛PWL S2 FTD vs Inki 第一场 11.21
2020/11/23 DOTA
Python使用xlrd读取Excel格式文件的方法
2015/03/10 Python
Python字符串和文件操作常用函数分析
2015/04/08 Python
Python3里的super()和__class__使用介绍
2015/04/23 Python
python判断字符串是否是json格式方法分享
2017/11/07 Python
详细介绍Python进度条tqdm的使用
2019/07/31 Python
pytorch 可视化feature map的示例代码
2019/08/20 Python
匈牙利超级网上商店和优惠:Alza.hu
2019/12/17 全球购物
什么是Connection-oriented Protocol/Connectionless Protocol面向连接的协议/无连接协议
2012/09/06 面试题
幼儿园家长评语
2014/02/10 职场文书
员工廉洁自律承诺书
2014/05/26 职场文书
数学兴趣小组活动总结
2014/07/08 职场文书
群教个人对照检查材料
2014/08/20 职场文书
股份合作协议书
2014/09/10 职场文书
出租房屋协议书
2014/09/14 职场文书
2014年财务经理工作总结
2014/12/08 职场文书
2015入党个人自传范文
2015/06/26 职场文书