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 相关文章推荐
基于JavaScript实现继承机制之构造函数+原型链混合方式的使用详解
May 07 Javascript
javascript中interval与setTimeOut的区别示例介绍
Mar 14 Javascript
js和jquery中循环的退出和继续学习记录
Sep 06 Javascript
jQuery如何获取同一个类标签的所有值(默认无法获取)
Sep 25 Javascript
javascript使用appendChild追加节点实例
Jan 12 Javascript
jQuery实现的纵向下拉菜单实例详解【附demo源码下载】
Jul 09 Javascript
js实现简单的碰壁反弹效果
Aug 30 Javascript
JavaScript给每一个li节点绑定点击事件的实现方法
Dec 01 Javascript
基于jQuery实现表格的排序
Dec 02 Javascript
利用js来实现缩略语列表、文献来源链接和快捷键列表
Dec 16 Javascript
javascript添加前置0(补零)的几种方法
Jan 05 Javascript
JavaScript Window浏览器对象模型原理解析
May 30 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编程之高级技巧——利用Mysql函数
2006/10/09 PHP
PHP连接MySQL的2种方法小结以及防止乱码
2014/03/11 PHP
php实现递归与无限分类的方法
2015/02/16 PHP
PHP传值到不同页面的三种常见方式及php和html之间传值问题
2015/11/19 PHP
jquery.AutoComplete.js中文修正版(支持firefox)
2010/04/09 Javascript
JS脚本defer的作用示例介绍
2014/01/02 Javascript
Jquery中使用show()与hide()方法动画显示和隐藏图片
2015/10/08 Javascript
js获取时间函数及扩展函数的方法
2016/10/30 Javascript
原生ajax处理json格式数据的实例代码
2016/12/25 Javascript
微信小程序 详解页面跳转与返回并回传数据
2017/02/13 Javascript
React Native实现地址挑选器功能
2017/10/24 Javascript
Node.js模块全局安装路径配置方法
2018/05/17 Javascript
利用Node.js批量抓取高清妹子图片实例教程
2018/08/02 Javascript
Vue自定义toast组件的实例代码
2018/08/15 Javascript
vue前端框架—Mint UI详解(更适用于移动端)
2019/04/30 Javascript
VUE解决 v-html不能触发点击事件的问题
2019/10/28 Javascript
JavaScript实现文件下载并重命名代码实例
2019/12/12 Javascript
python实现的一个p2p文件传输实例
2014/06/04 Python
python获取文件版本信息、公司名和产品名的方法
2014/10/05 Python
收藏整理的一些Python常用方法和技巧
2015/05/18 Python
python模拟登录并且保持cookie的方法详解
2017/04/04 Python
Python 读取图片文件为矩阵和保存矩阵为图片的方法
2018/04/27 Python
python3使用GUI统计代码量
2019/09/18 Python
python读取Kafka实例
2019/12/23 Python
Tensorflow卷积实现原理+手写python代码实现卷积教程
2020/05/22 Python
改变 Python 中线程执行顺序的方法
2020/09/24 Python
通过python-pptx模块操作ppt文件的方法
2020/12/26 Python
Java中实现多态的机制是什么?
2014/12/07 面试题
高级人员简历的自我评价分享
2013/11/03 职场文书
关于环保的演讲稿
2014/05/10 职场文书
六查六看心得体会
2014/10/14 职场文书
司考复习计划
2015/01/19 职场文书
新店开张宣传语
2015/07/13 职场文书
2016年党员创先争优承诺书
2016/03/25 职场文书
Vue实现tab导航栏并支持左右滑动功能
2021/06/28 Vue.js
一篇文章带你深入了解Mysql触发器
2021/08/02 MySQL