数组的操作方法在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. [洛谷P3672]小清新签到题

    题目描述 题目还是简单一点好. 给定自然数n.k.x,你要求出第k小的长度为n的逆序对对数为x的1~n的排列a1,a2...an,然后用仙人图上在线分支定界启发式带花树上下界最小费用流解决问题,保证存 ...

  2. Aria2配置文件-aria2.conf

    ##此部分主要分为几部分###1.文件保存#2.下载链接#3.进度保存#4.RPC相关#5.BT\PT下载相关 ##===================================#### 文件 ...

  3. 数据结构学习笔记_树(二叉搜索树,B-树,B+树,B*树)

    一.查找二叉树(二叉搜索树BST) 1.查找二叉树的性质 1).所有非叶子结点至多拥有两个儿子(Left和Right): 2).所有结点存储一个关键字: 3).非叶子结点的左指针指向小于其关键字的子树 ...

  4. Django简介以及安装

    目录 前言 Web框架本质 服务器和应用程序 基于第三方模块实现Web框架 Python三大主流Web框架 django flask tornado Django框架介绍 安装 创建项目 创建App ...

  5. 洛谷P3694 邦邦的大合唱

    题目背景 BanG Dream!里的所有偶像乐队要一起大合唱,不过在排队上出了一些问题. 题目描述 N个偶像排成一列,他们来自M个不同的乐队.每个团队至少有一个偶像. 现在要求重新安排队列,使来自同一 ...

  6. flask请求上下文源码分析

    一.什么是上下文 每一段程序都有很多外部变量,只有像add这种简单的函数才是没有外部变量的,一旦你的一段程序有了外部变量,这段程序就不完整了,不能独立运行,你为了使他们能运行,就要给所有的外部变量一个 ...

  7. js算法之寻路

    A*寻路算法 算法流程说明: 说明:起始节点记作S,目标节点记作E,对于任意节点P,从S到当前节点P的总移动消耗记作GP,节点P到目标E的曼哈顿距离记作HP,从节点P到相邻节点N的移动消耗记作DPN, ...

  8. C++ 变量、常量、符号常量

    变量: int i = 0;  // i 是变量 i=5;         //i 可以修改 变量就是程序内一个内存位置的符号名,在该内存位置可以保存数据,并可以通过符号名对该内存地址存放的数据进行访 ...

  9. 03_Sklearn的安装

    1.Scikit-learn库介绍:包含许多知名的机器学习算法的实现,文档完善.容易上手,丰富的API. 2.安装:创建一个基于Python3的虚拟环境(可以在已有的虚拟环境中):mkvirtuale ...

  10. 2.Spring【DI】XML方式

    依赖: 在A类中引用了B类,说明A依赖于B. 注入: 使用Spring框架给A类中的B对象的属性赋值. 直接上代码: 1.只使用IOC public class Person { private St ...