js-数组方法的使用和详谈
写博客的同时也是对自己知识的一次全面总结,方便自己日后复习。今天总结一下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/
码字不易,如需转载,请注明出处,谢谢理解!
js-数组方法的使用和详谈的更多相关文章
- js 数组方法比较
js 数组方法比较 table th:first-of-type { width: 80px; } table th:nth-of-type(2) { width: 120px; } table th ...
- js数组方法详解
Array对象的方法-25个 /*js数组方法详解 */ /* * 1 concat() 用于连接多个数组或者值-------------- * 2 copyWithin() 方法用于从数组的指定位置 ...
- 转载收藏(js数组方法大全)
js数组方法大全 JavaScript中创建数组有两种方式 (一)使用 Array 构造函数: var arr1 = new Array(); //创建一个空数组var arr2 = new Arra ...
- js数组方法大全(上)
# js数组方法大全(上) 记录一下整理的js数组方法,免得每次要找方法都找不到.图片有点多,注意流量,嘻嘻! 本期分享 join() reverse() sort() concat() slice( ...
- js数组方法大全(下)
# js数组方法大全(下) 记录一下整理的js数组方法,免得每次要找方法都找不到.图片有点多,注意流量,嘻嘻! 本期分享 forEach() map() filer() every() some() ...
- JS数组方法汇总 array数组元素的添加和删除
js数组元素的添加和删除一直比较迷惑,今天终于找到详细说明的资料了,先给个我测试的代码^-^ var arr = new Array(); arr[0] = "aaa"; arr[ ...
- 几个关于js数组方法reduce的经典片段
以下是个人在工作中收藏总结的一些关于javascript数组方法reduce的相关代码片段,后续遇到其他使用这个函数的场景,将会陆续添加,这里作为备忘. javascript数组那么多方法,为什么我要 ...
- js数组方法详解(最新最全)
数组是js中最常用到的数据集合,其内置的方法有很多,熟练掌握这些方法,可以有效的提高我们的工作效率,同时对我们的代码质量也是有很大影响.本文所有的栗子都是在es7环境下测试的,如果有问题欢迎留言交流 ...
- js数组方法解析
js 数组有很多方法,其中有的常用,有的不常用,归纳几个常用的方法,做个总结: 1. 转换方法: 1.1 valueOf():调用这个方法会返回数组本身 <script> var arr ...
- js数组方法
数组方法清空数组1: arr.length=02: arr=[]arr.push()//往数组最后一个添加元素,会待会一个返回值,就是新的数组长度arr.unshift()//往数组的第一个添加元素, ...
随机推荐
- [jshint] 'import' is only available in ES6 (use 'esversion: 6'). (W119) 提示import等ES6语法的jshint错误的,在代码前加一行 /* jshint esversion: 6 */
官方下载了vue的简单项目,用vscode打开main.js,代码前出现黄点,js报错了 把鼠标移至import的波浪线上,出现提示:W119 - ‘import’ is only availabl ...
- 关于在pycharm下提示ModuleNotFoundError: No module named 'XXX' 的一种可能
在pycharm下出现“ModuleNotFoundError: No module named 'XXX' ”提示时, 在网上找大部分的解决方案是重新在pycharm里安装对应的模块,但是这不是我要 ...
- Linux下的JDK和OpenJDK有什么具体的区别
OpenJDK是JDK的开放原始码版本,以GPL(General Public License)协议的形式放出(题主提到的open就是指的开源).在JDK7的时候,OpenJDK已经作为JDK7的 ...
- Spring Boot的@SpringBootApplication无法引入的问题
转自:https://blog.csdn.net/cckevincyh/article/details/78962002 今天搭建了springboot,一开始遇到了一个问题,在自己创建的HelloA ...
- web component的理解
https://www.zhihu.com/question/58731753 https://www.zhihu.com/question/39328603 http://www.cnblogs.c ...
- Asp.net core 学习笔记 ( Area and Feature folder structure 文件结构 )
2017-09-22 refer : https://msdn.microsoft.com/en-us/magazine/mt763233.aspx?f=255&MSPPError=-2147 ...
- Axure XMind整理交互思路
本部分主要是为了研究Xmind思维导图总结设计原型的思路
- iTunes , iCloud 用吐了也没把照片给备份好
下载了iTools ,轻松就倒出来了. Apple这是怎么了,还能不能正常用了? 以前iCloud出来以前,[同步]这个功能,理解起来虽然费劲,还算是能用的. 这回直接就没法倒出照片了?
- 数据结构(C语言版)-第5章 树和二叉树
5.1 树和二叉树的定义 树(Tree)是n(n≥0)个结点的有限集,它或为空树(n = 0):或为非空树,对于非空树T:(1)有且仅有一个称之为根的结点:(2)除根结点以外的其余结点可分为m(m& ...
- Bioconductor(Bioconductor for Genomic Data Science教程)
Bioconductor for Genomic Data Science ftp://ftp.ncbi.nlm.nih.gov/genomes/archive/old_genbank/Bacteri ...