写博客的同时也是对自己知识的一次全面总结,方便自己日后复习。今天总结一下JS中Array的所有方法和技巧,对算法题算是一个基础了,有不足的地方,还望童鞋们指出来,一起进步。

  在总结方法之前,提到一点,Array中的length属性它不是只读的!通过修改length属性,可以删除或添加数组的项。

  数组类型检测问题:instanceof()方法、Array.isArray()

  开门见山,JS中Array对象有这么几种方法:1、栈方法  2、队列方法  3、排序  4、操作方法   5、位置方法   6、迭代    7、归并

  一、栈方法、队列方法

  这两个方法最为常见,具体就是 push()  pop()为栈方法,shift()  unshift()为队列方法。数组头尾部的压入和删除

    三、重排序

  数组中已经存在两个方法可以进行数组的重排序,即 reserve()和 sort(),reserve()是反转数组,而sort()是数组的重排序,默认为升序,sort()实现排序原理是会调用每个数组项的  toString()方法,比较得到的字符串。这个方法可能会出错,因为它比较的是转型后的字符串。通常会配合比较函数一起使用,如下图:

  

  四、操作方法

  Array的操作方法是非常有用的,在数据结构和算法中比较重要。concat()方法,简单理解为数组复制,再不传参数的情况下,就是复制原数组,参数若是一或多个数组,则将参数数组添加在原数组末尾。 slice()方法,简单来说就是截取原数组中的一段作为新的数组返回,接受返回项的起始和截止位置。(左闭右开原则)即返回值不包括截止位置的值,只有一个参数的情况下,从参数位置一直截取到数组末尾。若参数中存在负值,则计算位置的方式为 数组长度加上该数 所得值。

  最重要的操作方法  splice()。它可以完成增删改,splice()方法接受三个参数,起始位置、删除项数目、插入的项。灵活运用这三个参数的变化就可以完成数组的增删改,删除:splice(1, 2)从第二项开始删除两项。 插入: splice(1, 0, "item1", "item2")从第二项开始往后插入“item1”,“item2”。替换:splice(1, 2, “item1”, “item2”)原理不变,删除了两项,且在原位置插入了两项达到替换的作用。

  五、位置方法

  有两个位置方法 indexOf() 和 lastIndexOf(),都接受两个参数,即要查找的项和查找起点的位置(该参数可选),只不过两个方法查找的顺序相反,indexOf()是从头到尾的,且两个方法都返回被查找的项在数组中的位置,若没找到返回-1,利用这点,我们可以用来进行数组的去重,如图:

  

  上述图例又提到了Array的另一种类型的方法,即迭代方法,JS中有五个迭代方法,every()、filter()、forEach()、map()、some()。它们都接收两个参数,一个是在数组每项上都要运行的函数,另一个就是该函数的作用域this。而传入的函数又会接受三个参数,数组项的值、其索引、原数组。解读上图例子,函数norepeat传入数组arr,返回arr的filter方法,filter的参数函数有两个参数,即当前项和其索引,在调用indexOf()传入当前项ele ,indexOf会查找传入项在数组中第一次出现的位置,将该位置与filter的元素项位置相比,若等于则返回。数组去重会有很多不同位置的项值相等,迭代从左到右,filter里面只是每一项的值和索引,而indexOf()里面则是某个值在数组中从左到右第一次出现的位置索引,让两个索引相比较。若相等则为首次出现,若不等,则为非首次出现,即重复的值,不返回,则最后得到的结果就是去重后的数组。

  every()和some()迭代,则是函数作用于数组每一项,结果都是true,才返回true这是every()方法,some()则是有一项返回true,则结果返回true,二者很相似。

  map()方法,给数组每一项运行函数,返回其运行结果组成的数组。举例,让某数组全体项扩大二倍 var mapResult = arr.map(function(itrm, index) { retrun item*2});   最后forEach()本质和for循环迭代数组一样。

  六、归并方法

  ES5中有两个数组归并方法 reduce(), reduceRight()。这两个方法都会迭代数组项,并返回最终的值。类似于贪吃蛇,从第一个点开始,吃掉往后的每一个点并且加在自己身上,最后变成一个包含所有点的结果。该方法接受一个函数和归并基础的初始值(可选)作为参数,而函数接受四个参数,前一项值,当前值,项的索引,原数组。这个函数返回的值都会作为第一个参数自动传给下一项!举例:求数组的和  var reduceResult = arr.reduce( function(prev, cur, index) {return prev + cur} );

  作者:方红亮

  博客园:https://home.cnblogs.com/u/fanghl/

  码字不易,如需转载,请注明出处,谢谢理解!

  

转载于:https://www.cnblogs.com/fanghl/p/9383581.html

js-数组方法的使用和详谈相关推荐

  1. 22个超详细的 JS 数组方法

    22个超详细的 JS 数组方法 数组是 js 中最常用到的数据集合,其内置的方法有很多,熟练掌握这些方法,可以有效的提高我们的工作效率,同时对我们的代码质量也是有很大影响. 一.创建数组 1.使用数组 ...

  2. 前后端交互必备之js数组方法大全

    CSDN写作新手,写的不妥之处,请大佬纠正且多多包涵. 文章目录 数组简介 一.js数组方法 二.js数组方法的使用 1.基础方法 2.进阶方法 数组简介 数组,就是将多个元素(通常是同一类型)按一定 ...

  3. 给数组倒序_22个超详细的 JS 数组方法

    作者:Yushiahttps://juejin.cn/post/6907109642917117965 数组是 js 中最常用到的数据集合,其内置的方法有很多,熟练掌握这些方法,可以有效的提高我们的工 ...

  4. android给数组添加新元素_重磅!超详细的 JS 数组方法整理出来了

    作者:Yushiahttps://juejin.cn/post/6907109642917117965 数组是 js 中最常用到的数据集合,其内置的方法有很多,熟练掌握这些方法,可以有效的提高我们的工 ...

  5. js遍历对象、遍历数组、js数组方法大全、区分map()和forEach()以及filter()、区分for...in...和for...of...

    1.给对象添加属性:使用 object.prop 或object['prop']  给对象添加属性 let obj={};obj.name="zhangsan";obj[" ...

  6. JS的组成-JS数组方法-JS函数-系统化学习

    JS Day01 什么是js的组成? ECMAScript(es) 其实就是js的规范(规则) DOM 文档对象模型 div span BOM 浏览器对象模型 JS的使用方式 行内样式的书写(不经常使 ...

  7. JS数组方法中哪些会改变原数组,哪些不会?

    前言 作为一名前端开发人员,我们每天都会与数组打交道.JS 也提供了很多操作数组的原生 API 供我们调用.在这些方法里面,有的方法会改变原数组,有些不会改变原数组.别看这一点小小的区别,往往会造成巨 ...

  8. 几个关于js数组方法reduce的经典片段

    以下是个人在工作中收藏总结的一些关于javascript数组方法reduce的相关代码片段,后续遇到其他使用这个函数的场景,将会陆续添加,这里作为备忘. javascript数组那么多方法,为什么我要 ...

  9. 关于js数组方法的题目整理 6.24更新至题目5

    目录 题目一: 题目二  把问题1变回去 题目三 要求:1.给出一个名字找出数组中 与 '名字' 处于统一领导下的同事 2.给出一个名字找出数组中 与 '名字' 下的下属 题目四: 解法一: 解法二: ...

  10. js数组方法 some与every的使用

    every()与some()方法都是JS中数组的迭代方法. every()是对数组中每一项运行给定函数,如果该函数对每一项返回true,则返回true. some()是对数组中每一项运行给定函数,如果 ...

最新文章

  1. char *a 和char a[] 的区别(指针和数组的区别)
  2. python 推迟运行_一文看懂Python的time模块sleep()方法和strftime()方法
  3. 一个命令让Ubuntu升级变得更简单
  4. Redis Lua脚本中学教程(下)
  5. C语言之动态内存管理与动态内存函数
  6. 在控制台输出口,根据内存地址,找到被过度释放的对象!
  7. 学习笔记(42):Python实战编程-pyinstaller程序打包
  8. 一种table超出高度自动出滚动条的解决方案
  9. 美团技术:百亿规模API网关服务Shepherd的设计与实现
  10. Atitit 硬件 软件 的开源工作 差异对比
  11. SqlMap异常的处理
  12. 哈工大计算机考研 跨考,09哈工大计算机考研复试之我的经历_跨考网
  13. 菜鸟的学习之路(7) — 包(package)、Object类和String类
  14. 在ubuntu系统下cocos2dx移植到android平台
  15. 信息发布系统 Jquery+MVC架构开发(6)BLL层提供WCF 服务 .
  16. 新手初识安信可ESP8266 12f机智云开发板微信直连云
  17. Bypassing Stack Cookies, SafeSeh, SEHOP, HW DEP and ASLR
  18. RAC知识更新之-RAC节点删除添加服务+维护RAC ocr表(摘自文平书)
  19. DSP软件测试用例,DSP测试实验
  20. 海贼王:第86话 (希鲁鲁克的樱花与被继承的意志!)

热门文章

  1. vue-cli 中使用 less 插件
  2. 当root.sh与ORA-15031相遇
  3. SSH 中从后台传值到前台JSP,传不过去问题
  4. iOS 文字转化成图片
  5. JavaScript 原型中的哲学思想
  6. rocksdb学习笔记
  7. [IOS] Storyboard全解析-第一部分
  8. malloc和new有什么区别
  9. 谷歌推荐Data Binding实现MVVM模式(完整文档)
  10. eclipse查看Android应用内存使用情况