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

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 数组、javascript数组操作、javascript 二维数组、javascript 遍历数组,以便于您获取更多的相关知识。

时间: 2024-10-15 09:14:16

Javascript中数组方法汇总(推荐)_javascript技巧的相关文章

JavaScript原生对象常用方法总结(推荐)_javascript技巧

下面都是我学习W3C School教程中有关JavaScript写的学习笔记,每个方法我都亲身测试过,每个方法的用途和参数列表,我都是在经过我亲身实践后加上了我自己的一点理解,解释的还算比较详细.现记录下来,以便查阅: javascript之Array类: 创建js数组两种方式: var arr = [];  或 var arr = new Array(); ()里可以指定长度,也可以不指定,指不指定都无所谓, 因为js里的数组长度是可变的 concat(arr1,arr2,arr3......

javascript闭包概念简单解析(推荐)_javascript技巧

关于"闭包"这个概念的文章在网上铺天盖地,基本已经稀烂了,但是有时候总感觉读了这么多的文章还是云山雾罩,当然是由于它本身就比较难于理解和涉及的知识较多,还有一个很重要的原因就是网上很多教程介绍可能存在一定的误区,或者说侧重点不同,下面就通过代码实例简单的介绍一下什么是闭包. 代码实例一: function a(){ var webName=""; console.log(webName); } a() 以上是一段非常简单的代码,当函数执行结束之后,它就会从内存中释放

火狐和ie下获取javascript 获取event的方法(推荐)_javascript技巧

javascript 获取event 先从一个简单的例子说起,一个简单的button控件如下: <input type='button' name='mybtn' id='mybtn' onclick='myFunc()'/> 然后为其注册事件,这样的情况,怎么在javascript里获取event呢,特别是firefox的情况.请看: <script type='text/javascript'> function myFunc(){ var ev = window.event

VC调用javascript的几种方法(推荐)_javascript技巧

第一种:通过execScript调用.这种方法,虽然操作方便,但不能获取返回值. m_spHtmlDoc->get_parentWindow(&m_pHtmlWindow); VARIANT ret; ret.vt = VT_EMPTY; BSTR bstr = sScript.AllocSysString(); bRet = m_pHtmlWindow->execScript(bstr, L"javascript", &ret); ::SysFreeStr

JavaScript中的this引用(推荐)_javascript技巧

this this是javascript的一个关键字,随着函数使用场合不同,this的值会发生变化.但是总有一个原则,那就是this指的是调用函数的那个对象. 一.定义 1.this是函数内部的一个特殊对象(或this引用)--它引用的是函数据以执行的环境对象. 2.this引用是一种在JavaScript的代码中随时都可以使用的只读变量. this引用 引用(指向)的是一个对象,它有着会根据代码上下文语境自动改变其引用对象的特性.它的引用规则如下: • 在最外层代码中,this引用 引用的是全

JavaScript代码性能优化总结(推荐)_javascript技巧

下面是我总结的一些小技巧,仅供参考. 以下代码基本上在jQuery的源码里面都可以看到,如有说得不对的地方,请大家指出. 尽量使用源生方法 javaScript是解释性语言,相比编译性语言执行速度要慢.浏览器已经实现的方法,就不要再去实现一遍了.另外,浏览器已经实现的方法在算法方面已经做了很多优化. 避免全局查找 在一个函数中会用到全局对象存储为局部变量来减少全局查找,因为访问局部变量的速度要比访问全局变量的速度更快些. 尽量减少循环次数 少一层循环,就能提高数倍性能.如果要对一个数组的每个元素

javascript 缓冲效果实现代码 推荐_javascript技巧

缓冲效果 打开这是一个由快到慢的过程关闭 打开这是一个由慢到快的过程关闭

Javascript字符串拼接小技巧(推荐)_javascript技巧

在Javascript中经常会遇到字符串的问题,但是如果要拼接的字符串过长就比较麻烦了. 如果是在一行的,可读性差不说,如果要换行的,会直接报错. 在此介绍几种Javascript拼接字符串的技巧. 字符串相加(+) var items = '<li class="details">' + '<span>Hello world</span>' + '</li>'; 利用反斜线拼接字符串 var items = '<li class=

JavaScript代码里的判断小结_javascript技巧

比较判断 比较判断是比较两个值,返回一个布尔值,表示是否满足比较条件.JavaScript一共提供了8个比较运算符,这里主要说一下严格相等运算符和相等运算符的区别 严格相等运算符=== 判断 返回 两个值类型不同 false 两个值都是null/undefined/true/false true 两个值其中之一为NaN false 两个值都为数值且值相等 true 两个值都为字符串,且值相等 true 两个值都指向同一个引用类型 true 1 === "1" // false true