js数组方法全面总结

创建数组

  • 使用Array构造函数
var a = new Array()
var b = new Array(5);  //创建长度为5的数组
var c = new Array("a","b","c");
  • 使用数组字面量表示法
var a = [];
var b = [5];      //创建一个含数字5的数组
var c = ["a","b","c"];

数组属性

length表示数组的长度

var colors = ["red","green","blue","black"];
colors.length                   //4

length属性并不是只读的,通过设置该值可以从数组末尾删除项或向数组中添加项

var colors = ["red","green","blue","black"];
colors.length = 2;        //colors:["red","green"]
colors.length = 4;        //colors:["red","green",undefined,undefined]

数组方法

  • 栈、队列方法

  1. push(item...) 向数组中添加元素,返回修改后数组的长度
var numbers= [1,2,3,4];
numbers.push(5)           //5       numbers:[1,2,3,4,5]
numbers.push(6,7)         //7       numbers:[1,2,3,4,5,6,7]
  1. pop() 从数组末尾移除一项,减少数组的长度,返回移除的项
var numbers= [1,2,3,4];
numbers.pop()           //4         numbers:[1,2,3]
  1. unshift(item...) 向数组前端添加任意项,返回** 修改后数组的长度 **
var numbers= [1,2,3,4];
numbers.unshift(5)           //5       numbers:[5,1,2,3,4]
numbers.unshift(6,7)         //7       numbers:[6,7,5,1,2,3,4]
  1. shift() 移除数组第一项,减少数组的长度,返回移除的项
var numbers= [1,2,3,4];
numbers.shift()           //1         numbers:[2,3,4]
  • 排序方法

  1. reverse()反转数组项的顺序,改变原数组
var numbers= [1,2,3,4];
numbers.reverse()          //[4,3,2,1]         numbers:[4,3,2,1]
  1. sort()默认情况下,即无参数情况,sort()方法按升序排列数组。该方法会调用每个数组项的tostring()方法,然后比较字符串,因此即使数组中每一项都是数值,sort()方法比较的也是字符串
var numbers= [1,15,5,10];
numbers.sort()          //[1, 10, 15, 5]         numbers:[1, 10, 15, 5]

sort()方法可以接受一个比较函数作为参数。其中比较函数接受两个参数,如果两个参数排序不需要交换位置则返回负数,如果需要交换位置则返回一个正数,如果两个参数相等则返回0

var numbers= [1,15,5,10];
function compare(val1,val2){
      if(val1 < val2){
         return -1;
      }
      else if(val1 > val2){
         return 1;
      }
      else{
         return 0;   
      }
}
numbers.sort(compare)          //[1, 5, 10,15]         numbers:[1, 5, 10,15]  
  • 操作、位置方法

  1. concat()其参数可以是一个或多个项,也可以是一个或多个数组。创建一个当前数组的副本,然后在数组末尾添加参数项,并返回新的数组,原数组不变
 var numbers= [1,2,3,4];
 numbers.concat(5,[6,7])          //[1,2,3,4,5,6,7]         numbers:[1,2,3,4]
  1. slice()获取截取数组,如果是一个参数,则获取从该参数位置开始到数组结束所有值,如果有两个参数,则获取从起始值位置到结束值位置的值(不包括结束值位置项),返回新的数组。原数组不变
    如果结束值小于起始位置则返回空数组。
 var numbers= [1,2,3,4];
 numbers.slice(2)          //[3,4]         numbers:[1,2,3,4]
numbers.slice(1,3)       //[2,3]         numbers:[1,2,3,4]

** 注意:** * 如果参数中存在负数,则将参数值加上数组长度来计算。如:*

var numbers= [1,2,3,4];
numbers.slice(-1)          //[4]         numbers:[1,2,3,4]
numbers.slice(-4,-2)       //[1,2]         numbers:[1,2,3,4]
  1. splice() 返回删除项组成的数组,原数组被改变

    • 删除 :从指定位置删除指定项数
      splice(0,3) 表示删除数组的[0][1][2]位置的三项
    • 插入 : 从指定位置删除0项,再添加项
      splice(1,0,3,4) 表示从数组的第[1]项开始插入3,4两个值
    • 替换 :从指定位置删除指定项数,再添加项
      splice(1,2,3,4) 表示从数组[1][2]位置上的值被替换成3,4两个值

var numbers= [1,2,3,4];
numbers.splice(1,2) //[2,3] numbers:[1,4]
numbers.splice(1,0,2,3,4,5) //[] numbers:[1,2,3,4,5,4]
numbers.splice(2,2,4,5) //[3,4] numbers:[1,2,4,5,5,4]

4. `indexOf()`从前向后查找,接受两个参数:查找的项和查找的起点位置(可选),默认从数组的起始位置向后查找,返回**索引值**
```javascript
var numbers= [1,2,3,4,4,5,3,1,2];
numbers.indexOf(2)              //1        numbers:[1,2,3,4,4,5,3,1,2]
numbers.indexOf(2,4)              //8       numbers:[1,2,3,4,4,5,3,1,2]
  1. lastIndexOf()从后向前查找,接受两个参数:查找的项和查找的起点位置(可选),默认从数组的结束位置向前查找,返回索引值
var numbers= [1,2,3,4,4,5,3,1,2];
numbers.lastIndexOf(2)              //8        numbers:[1,2,3,4,4,5,3,1,2]
numbers.lastIndexOf(4,3)            //3        numbers:[1,2,3,4,4,5,3,1,2], 从[3]位向前查找
  • 遍历方法

  1. every(fn)对数组中的每一项运行给定的函数,如果该函数对每一项都返回true,则返回true
  var numbers= [1,2,3,4,5];
 numbers.every(function(item,index,array){
       return (item>0);
 })                                                          //true       
numbers.every(function(item,index,array){
       return (item>2);
 })                                                         //false         
  1. filter(fn)对数组中的每一项运行给定的函数,返回该函数会返回true的项组成的数组
  var numbers= [1,2,3,4,5];
 numbers.filter(function(item,index,array){
       return (item>2);
 })                                                          //[3,4,5]       
  1. forEach(fn)对数组中的每一项运行给定的函数,没有返回值
  2. map(fn)对数组中的每一项运行给定的函数,返回每次函数调用的结果组成的数组
  var numbers= [1,2,3,4,5];
 numbers.map(function(item,index,array){
       return (item+10);
 })                                                          //[11,12,13,14,15]       
  1. some(fn)对数组中的每一项运行给定的函数,如果该函数对任一项返回true,则返回true
   var numbers= [1,2,3,4,5];
  numbers.some(function(item,index,array){
        return (item>3);
  })                                                          //true  
  • 归并方法

以下两个方法都接受两个参数,一个是在数组每一项上调用的函数,另一个可选参数是作为归并基础的初始值。其中作为参数的函数接受4个参数:前一个值、当前值、项和索引和数组对象。这个函数返回的任何值都会作为第一个参数自动传给下一项

  1. reduce(fn) 从头开始遍历
  2. reduceRight(ffn)从尾开始遍历
   var numbers= [1,2,3,4,5];
  numbers.reduce(function(pre,cur,index,array){
        return pre+cur;
  })                                               //15   对数组求和
numbers.reduce(function(pre,cur,index,array){
        return pre+cur;
  },10)                                           //25   以10为基数对求数组求和
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,530评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 86,403评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,120评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,770评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,758评论 5 367
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,649评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,021评论 3 398
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,675评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,931评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,659评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,751评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,410评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,004评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,969评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,203评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,042评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,493评论 2 343

推荐阅读更多精彩内容

  • 第一章: JS简介 从当初简单的语言,变成了现在能够处理复杂计算和交互,拥有闭包、匿名函数, 甚至元编程等...
    LaBaby_阅读 1,638评论 0 6
  • 本文总结了数组所有的方法。 1. 检测对象是不是数组 instanceof操作符 Array.isArray()方...
    胡不归vac阅读 668评论 0 1
  • 由于最近都在freecodecamp上刷代码,运用了很多JavaScript数组的方法,因此做了一份关于JavaS...
    2bc5f46e925b阅读 1,960评论 0 16
  • Javascript有很多数组的方法,有的人有W3C的API,还可以去MDN上去找,但是我觉得API上说的不全,M...
    顽皮的雪狐七七阅读 4,062评论 0 6
  • 第5章 引用类型(返回首页) 本章内容 使用对象 创建并操作数组 理解基本的JavaScript类型 使用基本类型...
    大学一百阅读 3,205评论 0 4