Javascript中数组方法汇总(推荐)
作者:mdxy-dxy 发布时间:2023-07-16 08:33:02
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()是从尾到头进行搜索。
猜你喜欢
- 如何用net/http构建一个简单的web服务Golang提供了简洁的方法来构建web服务package main import ( &nb
- Introduction简介So what is POSH? No, it's not just some new clothing
- 在oracle中有很多关于日期的函数,如:1、add_months()用于从一个日期值增加或减少一些月份 date_value:=add_m
- 和数据库打交道要频繁地用到SQL语句,除非你是全部用控件绑定的方式,但采用控件绑定的方式存在着灵活性差、效率低、功能弱等等缺点。因此,大多数
- 从某种意义上来说,页面设计(web设计)也就是用户界面设计。有许多技巧可以帮助我们制作出漂亮、实用的界面,这里收集的5个小技巧就会对你有所帮
- Function Comma(str)If Not(IsNumeric(str)) Or 
- Altova 公司的 XMLSPY 是个不可多得的好东西,它几乎可以开发所有的 XML 产品。最近用它来做 Schema
- 很多互联网应用程序都提供了全文搜索功能,用户可以使用一个词或者词语片断作为查询项目来定位匹配的记录。在后台,这些程序使用在一个SELECT查
- 在IE下测试,发现最大值是:18014398509481984(0x40000000000000)另外发现一个奇怪的问题:JS世界居然不存在
- 请问,如何在ACCESS数据库和SQL SERVER数据库中查询?
- 内容摘要合理使用渐变留白网格布局提高字体应用明确而有效的导航设计漂亮、有用的页脚介绍优秀设计和卓越设计之间的区别是比较小的。一般人可能无法解
- 事件流浏览器中的事件流意味着页面上可有不仅一个,甚至多个元素响应同一个事件。而这一个或多个元素响应事件发生的先后顺序在各个浏览器(主要针对I
- 常见到网上博文有错误理论,包括身边很多朋友都曾认同“可访问性(Accessibility)是为残障人士准备”的观点。其实在互联网技术领域远不
- 这方面我还是一个freshman,不过看了一些文章,经过一些实践后也算是有了一些想法。希望如果有这方面的前辈路过的话,能不吝指教。首先,作为
- YSlow是yahoo美国开发的一个页面评分插件,非常的棒,从中我们可以看出我们页面上的很多不足,并且可以知道我们改怎么却改进和优化。仔细研
- 1) 用正式表达式 regexp "[u0391-uFFE5]"2) 用length和char_lengthdrop t
- 很多人都将<数据库设计范式>作为数据库表结构设计“圣经”,认为只要按照这个范式需求设计,就能让设计出来的表结构足够优化,既能保证
- W3C 发布 XPath 1.0 规范是在 1999 年,那时我还正在备战高考,不料十年后,我才开始学习XPath,落后的差距不是一般的大(
- 1、选取最适用的字段属性MySQL可以很好的支持大数据量的存取,但是一般说来,数据库中的表越小,在它上面执行的查询也就会越快。因此,在创建表
- 昨天去面试,百度题果然不一样,笔试我就蒙了,现在能记住两道题,笔试:1、title和alt 区别2、三列布局 左边裂固定宽度左对齐,右边列固