js--常用的Array数组方法

  • 关于数组长度:

  • 如果为一个数组元素赋值,它的索引 i 大于或等于现有数组的长度时,length的值会自动设置为 i+1

  • 设置length为一个小于当前长度的非负整数 n 时,那些索引值大于或等于 n 的元素将从中删除

  • 添加数组元素:

  • push():在末尾添加,length+1

  • a.unshift():在头部添加,length+1

  • a[a.length]:在末尾添加,length+1

  • 删除数组元素:

  • pop():在末尾删除,length-1

  • shift():在头部删除,length-1,并且被删后面的元素自动往前挪

  • 直接指定length为更小的值,则索引大于等于length的部分被切除,即使后面再将length改回来,也无法找回数据,均为undefined

  • splice():可插入,删除,替换,会根据需要修改length的值,并移动元素到更高或更低的索引处

  • delete:可以删除某个数组元素,删除后用undefined占位,不会移动其他元素,length不会自动改变

数组方法:
改变原数组:
  1. pop()
  2. push()
  3. shift()
  4. unshift():以上,都是返回添加或删除的单个元素
  5. reverse():返回位置逆序数组,非大小逆序
  • undefined也会参与逆序占位,并输出
  1. sort():返回排序后的数组
  • 默认是按字母表排序
  • 传入回调函数时,假设第一个参数应该在前,就要返回一个大于0的数值,所以按从小到大排序时:function(a,b){return a-b }
  • undefined会被排在最后,也会占位输出
  1. splice():返回被删除的片段
不改变原数组:
  1. concat():a.concat([4,5]),返回拼接后的新数组
  2. slice():参数start,end,包前不包后,返回被切除的片段。参数可以为负,此时实际的索引值为用长度加上该负值以后的值,如果start小于end,则返回空数组。
  • 例: 长度为5的数组,slice(-2,-1),实际指的是slice(3,4)
  1. filter():【跳过undefined的值,输出时去除空缺】需要回调函数function(value)将每个元素值传入,经过一系列判断,如果返回值为true或能转化为true的值,则将其添加到新数组中,返回新数组。
  • 应用:a.filter(function(x){return true})可以去除数组中的undefined值,但不能去除null,如果要去除null,需要再回调函数里进一步判断。
  1. forEach():【不会处理undefined的值】需要回调函数function(value元素值,index下标,arr数组本身),返回值始终为undefined,循环过程中无法停止
  2. map():【不会处理undefined的值,即不传入回调函数处理,但输出时保留空缺】需要回调函数function(value元素值,index下标,arr数组本身)},返回一个新数组,其中每一个下标的值为原数组经过回调函数处理后return的相应值,原来的undefined会在新数组中继续占位。
  • 应用举例:
  • a = [4, 5, 6, undefined × 1, 99, undefined × 2] a.map(function(x){if(x === undefined){console.log("uuu")}else{return x*x }}) 运行结果:输出:[16, 25, 36, undefined × 1, 9801, undefined × 2] 原数组a的值不变
  • 与forEach比较:
  • a.forEach(function(x){if(x === undefined){console.log("uuu")}else{return x*x }}) 运行结果:输出:undefined,数组a的值也不变
  • 比较结果:两者都不会处理undefined,forEach不会提前返回,函数返回值永远是Undefined,map永远返回一个数组,数组中的元素是回调函数里面return的值,原来undefined的值还会在新数组中原地占位。
  1. reduce():【不会处理undefined的值】需要回调函数function callbackfn(previousValue, currentValue, currentIndex, array1),每次传入两个元素值,经过一系列化简处理,最终得到一个值,返回。应用举例:累加
  • 函数完整参数:array1.reduce(callbackfn[, initialValue])
  1. every():【也不处理undefined的值】有回调,检查是否每个value都满足回调函数返回true,否则返回false

  2. some():有回调,只要有一个value令回调函数返回true,则some返回true

  3. find():有回调,返回回调函数里面第一个返回true的value。

    • function isBigEnough(element) { return element >= 15; } [12, 5, 8, 130, 44].find(isBigEnough); // 130
  4. findIndex():有回调,返回回调函数里面第一个返回true的value的index

    • function isBigEnough(element) { return element >= 15; } [12, 5, 8, 130, 44].findIndex(isBigEnough); // index of 3rd element in the Array is returned, it will result in '3'
  5. indexOf():按内容查找,返回第一个找到的index,否则返回-1

  • var a = [2, 9, 9]; a.indexOf(2); // 0 a.indexOf(7); // -1
  1. lastIndexOf():反向搜索,其他同上。
  2. Array.from():将DOM-list和arguments这样的类数组转化为数组,使其可以使用数组原型上的方法。
  3. Array.entries() : 返回一个新数组,里面是多个子数组,每个子数组的[0]是原数组的下标,[1]是原数组下标对应的值.
  • 例如:
    const arr = ['a','b','c'];
    let aaa= arr.entries(); // [[0,'a'],[1,'b'],[2,'c']]

应用补充:

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

推荐阅读更多精彩内容