javascript数组方法超全总结

  • concat():
    对数组进行拼接,具有打散插入的数组的功能,返回新数组,无权修改原数组。如果给这个concat传递的是数组,就将这个数组打散,再把打散的数组元素添加到arr后面,如果传人的不是数组,这些值就会被简单的添加到数组末尾。
</script>``` 
- slice():
 对数组进行截取,**无权修改原数组**。接受一或两个参数,一个参数:var arr1=arr.slice(starti);从指定参数starti开始到当前数组所有项末尾。  两个参数,var arr1=arr.slice(starti,end);返回从starti开始位置到end结束位置的项,但不包括结束位置的项;支持负数参数:表示倒数第n个位置,其实执行的还是length-n。starti默认从零开始。
```<script>var arr=[1,2,3,4,5];var arr1=arr.slice(1); //[3,4]var arr2=arr.slice (1,3); //[2,3]var arr3=arr.slice (-2,4); //等价于=>arr3.slice(arr.length-2,4);//[4]
</script>``` 
- splice() 
1.删除元素,插入元素,替换元素。**直接修改原数组。** 删除元素:可以删除任意数量的项,只需指定2个参数:要删除的第一项的位置和要删除的项数。 
```<script>var arr=[1,2,3,4,5];var arr1=arr.slice(0,2); //删除数组前两项返回[3,4,5]
</script>```
2.插入:可以向指定任意位置插入任意数量的项,只需要提供三个参数:起始位置,0(要删除的项数)和要插入的项。如果要插入多个项,可以再传第四,第五,以致任意多个项。
```<script>var arr=[1,2,3,4,5];arr.splice(2,0,"a","b"); //从当前数组位置2插入字符串"a","b"。修改后的数组为:[1,2,"a","b",3,4,5]</script>```
3.替换:可以向指定任意位置插入任意数量的项,且同时删除任意数量的项,只需要提供三个参数:起始位置,和要删除的项,和要插入任意数量项,插入的项数和删除的项数不必相等。
```<script>var arr=[1,2,3,4,5];arr.splice(2,1,"a","b"); //会删除当前数位置2的项,然后再从当前数组位置2插入字符串"a","b"。修改后的数组为:[1,2,"a","b",4,5]
</script>```
注意:splice方法会返回被删除的元素组成的临时数组。用于后续的操作。 
- reverse()
颠倒数组中的元素: **直接修改原数组**只是机械的将数组颠倒。
```<script>var arr=[1,2,3,4,5];arr.reverse();//[5,4,3,2,1]</script>```
- String(arr) 
将每个元素都转为字符串,用","相连。常用于数组经过一些操作后判断数组是否发生变化。所以又称为数组的拍照,即用于前后对照。**无权修改原数组。**
```<script>var arr=[1,2,3,4,5];var arr2=String(arr);//1,2,3,4,5 字符串</script>``` 
- join("连接符") 
连接符可以自定义,将每个元素都转为字符串,用自定义的"连接符"相连。**无权修改原数组。**无缝拼接: arr.join("")如果省略“”,就和String等效了。
```<script>var arr=[1,2,3,4,5];var arr2=arr.join("-");//1-2-3-4-5 字符串var arr2=arr.join("*");//1*2*3*4*5 字符串</script>```
- indexOf()
两个参数,要查找的项和起始位置(可选)。没找到返回-1。```<script>var arr=[1,2,3,4];arr.indexOf(2);//3 arr.indexOf(keyword,stari); //keyword:要查找的对象,stari:查找开始位置;省略stari默认从0开始。
</script>```
- lastIndexOf()
从数组末尾开始向前查找。
```var arr=[1,2,3,0,5,6,5,4,3,2,6];arr.lastIndexOf(keyword,endi); //keyword:要查找的对象,endi:查找开始位置;省略endi默认从arr.length开始。arr.lastIndexOf(4,9);//7 第二个参数可以是超过数组长度;``` 
- every()
判断每个元素是否**都满足**要求 arr.every(function(val,idx,arr){ //回调函数用于检测每个元素: //val: 自动获得当前元素值 //idx: 自动获得当前元素的位置  //arr: 自动获得当前正在遍历的数组 return 判断结果; })
```<script> var arr1=[1,2,3,4,5]; var arr2=[10,8,6,4,2]; var arr3=[1,3,9,7,5]; //判断是否都由偶数组成: console.log( arr1.every(function(val){ return val%2==0; }),//false arr2.every(function(val){ return val%2==0; }),//true arr3.every(function(val){ return val%2==0; })//false ); 
</script>``` 
- some()
 判断是否**包含**满足要求的元素 arr.some(function(val,idx,arr){ //回调函数用于检测每个元素: //val: 自动获得当前元素值 //idx: 自动获得当前元素的位置  //arr: 自动获得当前正在遍历的数组 return 判断结果; })用法同every()。 
- forEach() 
此方法比较重要, 用处很大。作用为对原数组中每个元素执行相同的操作。 arr.forEach(function(val,idx,arr){ //对arr[idx]的值做修改 })
```<script> var arr=[1,2,3,4,5]; var result=arr.forEach(function(val,idx,arr){ arr[idx]*=2;//直接对原数组的值进行修改 }) console.log(arr);//[2,4,6,8,10]
</script>```
**自己实现forEach方法**
```<script>if(Array.prototype.forEach===undefined){ Array.prototype.forEach=function(callback){ //遍历当前数组中每个元素 for(var i=0;i<this.length;i++){ //如果i位置有元素 if(this[i]!==undefined) //调用callback函数,传入:当前元素值,当前位置,当前数组作为参数 callback(this[i],i,this); } } }
</script>``` 
- filter() 
过滤数组,复制出原数组中符合要求的元素,组成新数组。 var subArr=arr.filter( function(val,idx,arr){ return 条件 } );
```<script> var arr=[1,2,3,4,5]; var evens=arr.filter(function(val){ return val%2==0; }); var odds=arr.filter(function(val){ return val%2==1; }) console.log(evens);//[2,4] console.log(odds);[1,3,5] console.log(arr);//[1,2,3,4,5]//不修改原数组 </script> 
  • reduce()
    将数组中每个元素的值汇总出一个结果。 var r=arr.reduce( function(prev,val,idx,arr){ //prev: 获得目前截止的汇总值 return prev和val的汇总值 }, 开始值 );
    <script> var arr1=[1,2,3,4,5]; var r=arr1.reduce(function(prev,val){ return prev+val; });//15 console.log(r); var arr2=[6,7,8,9,10]; r=arr2.reduce(function(prev,val){ return prev+val; },r);//对第一次的15再累加到第二次 console.log(r);//55 <script>
  • map()
    基于原数组,将每个元素加工后,生成新数组。 arr.map(function(val,idx,arr){ //根据val,修改后,返回给新数组 return 新值; })
var evens=arr.map(function(val,idx,arr){ return val*2; }); console.log(arr);//[1,2,3,4,5]不修改原数组 console.log(evens);//[2,4,6,8,10]返回的新数组
</script> ```
**自己实现map()方法  **
```<script>if(Array.prototype.map===undefined){ Array.prototype.map=function(callback){ //创建新数组arr var arr=[]; //遍历当前数组中每个元素 for(var i=0;i<this.length;i++){ //如果i位置有元素 if(this[i]!==undefined) //调用callback函数,传入:当前元素值,i,当前数组作为参数, 将返回值保存到arr的i位置 arr[i]=callback(this[i],i,this); } return arr;//返回arr } } 
</script> ```
以上就是数组常用的方法,数组在程序中应用中占据着重要地位,掌握以上方法可以很轻松的处理各种数组数据。**值得注意的是直接修改原数组的是方法只有splice()和reverse(),其余方法无权修改原数组。所以对于运用了无权修改原数组方法的时候,记得要用变量把操作后的结果保存起来,以用于后续操作**。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,362评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,330评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,247评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,560评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,580评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,569评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,929评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,587评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,840评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,596评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,678评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,366评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,945评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,929评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,165评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,271评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,403评论 2 342

推荐阅读更多精彩内容