数组的操作方法在js中可谓是诸子百家,各种某乱的方法让人眼花缭乱,有时候就会分不清什么是自带的什么是曾今写的api了

数组的增删

1 . push() , pop()  和 shift() unshift() ;

效果:

push是最常用的了,屁股上追加 , pop()相反在屁股上扣掉一个

shift和unshift就相反是在头部开刀了 , 他们除了push()都用的不多,主要因为只能一个一个操作,而且只能在头尾

返回值

push和unshift是头尾增加后返回长度,

pop和shift返回他们删除的值

2 . splice() slice() concat()

这个方法是删除用的,但是不是删除头尾固定的一个,而是想删除哪一个就哪一个。

效果:

var arr = [ 29 , 100 , 104 , 55] ;
console.log(arr.splice(1,2))
console.log(arr)

删除俩个参数,从arr[1]开始,就是100,104被删掉了

splice接受第更多参数,就变成是插入的数组元素,就像下边的concat一样插入多个

slice接受两个参数,表示从哪到哪的被截取下来

concat() 里边可以继续写数组 如concat(6,1,2,4);

就会把数组拼起来,但依然只是放在屁股上的,只不过放连续好几个而已

返回值

splice()为删掉的值

concat()为拼合后的新数组

注意:数组有的方法不会改变原来数组,如slice concat会返回新数组,但是不会改变原来的数组

 

数组的变形

join() split()

join可以把数组变成字符串,接受参数返回字符串,数组本身不变

split接受参数,返回字符串以参数分割的数组

数组的排序

sort() reverse()

sort()接受参数为排序方法,例如sort(function(){

  return a-b

})  返回新数组

reverse()不接受参数,数组被反转。返回新数组

注意:他们都会改变数组原来的形式

ES5新方法

es5新加了一些厉害了的东西,例如find,findIndex,reduce,forEach,every,map, filter,说起来比较多,但是都不复杂,官方文档讲的十分清楚啦。

forEach(callback[,thisArg]),

map(callback[,thisArg])

forEach接收一个回调来操作每一个元素callback又接收三个参数,元素value,index,调用forEach的array [,thisArg]意思是选填的参数,代表callback中的this

没错,他就是和jquery的each一样,注意:参数顺序不同

map和forEach一样,只不过每次操作一个元素可以有个返回值,然后构成新数组

var arr = [  ,  ,  , ] ;
console.log(arr.map(function(){
return
}))

find(callback[,thisArg]),

findIndex(callback[,thisArg])

方法返回数组中满足提供的测试函数的第一个元素的值。它和forEach接收的参数一样一样的。

例如:

function isBigEnough(element) {
return element >= ;
} [, , , , ].find(isBigEnough); //
function isBigEnough(element) {
return element >= ;
} [, , , , ].findIndex(isBigEnough); //

两个区别就是一个返回第一个满足要求的元素索引,一个返回元素值

every(callback[,thisArg]),

filter(callback[,thisArg]),

some(callback[,thisArg])

这三个玩意是用来过滤的,every()some()返回true,false,前者返回是否全部通过,后者返回是否有人通过

var arr = [  ,  ,  , ] ;
console.log(arr.some(function(element){
return element >
}))

//true,表示有东西通过

var arr = [  ,  ,  , ] ;
console.log(arr.every(function(element){
return element >
}))

//false,并非全部通过

var arr = [  ,  ,  , ] ;
console.log(arr.filter(function(element){
return element >
}))

//[100, 104, 55]  //通过元素构成的新数组

reduce(callback,init)和reduceRight(callback,init)

var arr = [  ,  ,  , ] ;
console.log(arr.reduce(function(a,b){
console.log(a,b)
return a-b
},))

以init为初始值,进行init , 元素1 ,然后 元素1 ,元素2这样的方法进行遍历迭代回掉运算,

init也可没有,就直接元素1,元素2然后元素2,元素3这样遍历

reduceRight就不解释了

 include(value[,fromIndex])

数组是否包含value,是返回0,不是返回-1

这些的兼容还不错,include不兼容ie,find不兼容opera其他的都差不多

js数组操作方法的更多相关文章

  1. js数组学习整理

    原文地址:js数组学习整理 常用的js数组操作方法及原理 1.声明数组的方式 var colors = new Array();//空的数组 var colors = new Array(3); // ...

  2. JavaScript常用数组操作方法,包含ES6方法

    一.concat() concat() 方法用于连接两个或多个数组.该方法不会改变现有的数组,仅会返回被连接数组的一个副本. var arr1 = [1,2,3]; var arr2 = [4,5]; ...

  3. js数组常用操作方法小结(增加,删除,合并,分割等)

    本文实例总结了js数组常用操作方法.分享给大家供大家参考,具体如下: var arr = [1, 2, 3, 4, 5]; //删除并返回数组中第一个元素 var theFirst = arr.shi ...

  4. 11、js 数组详细操作方法及解析合集

    js 数组详细操作方法及解析合集 前言 在开发中,数组的使用场景非常多,平日中也涉及到很多数组的api/相关操作,一直也没有对这块内容进行一块整理总结,很多时候就算用过几次这个api,在开发中也很容易 ...

  5. post/get in console of JSarray/js 数组详细操作方法及解析合集

    https://juejin.im/post/5b0903b26fb9a07a9d70c7e0[ js 数组详细操作方法及解析合集 js array and for each https://blog ...

  6. 再探JS数组原生方法—没想到你是这样的数组

    最近作死又去做了一遍javascript-puzzlers上的44道变态题,这些题号称"JS语言专业八级"的水准,建议可以去试试,这里我不去解析这44道题了, ...

  7. JS数组学习笔记

    原文:JS数组学习笔记 最近在备课数组,发现很多ES5的方法平时很少用到.细节比较多,自己做了大量例子和整理,希望对大家了解JavaScript中的Array有所帮助. 概念 数组是值的有序集合.每个 ...

  8. Js 数组(一):基础应用

    (一) Js 数据类型 分为基本数据类型以及引用类型 基本数据类型有 null,undefined,Boolen,Number,String,还有一种复杂数据类型 Object. var var1 = ...

  9. js数组方法解析

    js 数组有很多方法,其中有的常用,有的不常用,归纳几个常用的方法,做个总结: 1. 转换方法: 1.1 valueOf():调用这个方法会返回数组本身 <script> var arr ...

随机推荐

  1. [转]gnome环境中将家目录下预设的文件夹由中文名称改为英文名称

    参考文章:gnome环境中将家目录下预设的文件夹由中文名称改为英文名称 打开终端 1 修改语言环境为英文 export LANG=en_US 如果想修改语言环境为日语,可执行 export LANG= ...

  2. [转]使用TortoiseGit处理代码冲突

    场景一  user0 有新提交 user1 没有pull -> 写新代码 -> pull -> 提示有冲突   解决办法一 -> stash save(把自己的代码隐藏存起来) ...

  3. Java虚拟机性能管理神器 - VisualVM(5) 监控远程主机上的JAVA应用程序【转】

    Java虚拟机性能管理神器 - VisualVM(5) 监控远程主机上的JAVA应用程序[转] 标签: javajvm监控工具性能优化 2015-03-11 18:37 1394人阅读 评论(0) 收 ...

  4. localhost与127.0.0.1区别

    一.连接MySQL数据库有两种方式:TCP/IP(一般理解的端口的那种)和Unix套接字(一般叫socket或者sock) 大部分情况下,可以用localhost代表本机127.,但是在MySQL连接 ...

  5. 三剑客之一------>awk

    awk :  一个强大的文本分析工具,相对于grep的查找,sed的编辑,awk在其对数据分析并生成报告时,显得尤为强大.简单来说awk就是把文件逐行的读入,以空格为默认分隔符将每行切片,切开的部分再 ...

  6. UltraISO刻录CentOS 7安装指南

    CentOS 7.2 安装指南(U盘版) 一.准备阶段 1.下载CentOS7镜像文件(ISO文件)到自己电脑,官网下载路径: http://isoredirect.centos.org/centos ...

  7. redhat4.4下安装GMT4.5.11

    GMT是地学界常用的开源软件,不仅是因为其开源的特性,还有着独特的魅力. 所需要的软件如下 安装步骤: 1. Put the soft packages in one folder, i.e. /ho ...

  8. centos部署jeecms

    首先下载安装包apache-tomcat-8.5.40.tar.gz jdk-8u211-linux-x641.rpm jeecmsv9.war 已经在WEB-INF/config/jdbc.prop ...

  9. font-size:100%

    font-size:100%;设置字体属性为默认大小,是相对于浏览器默认字体大小或继承body设定的字体大小来说的. 例如: h1,h2,h3,h4,h5,h6 {font-size:100%;fon ...

  10. MFC中使用FLASH相关

    出自http://my.oschina.net/ypimgt/blog/62573 一.准备工作 第一步:下载并安装Adobe Flash Player. 从官方网站(http://get.adobe ...