JS中数组的方法

摘要:
在js中数组的重要性不言而喻,下面就来介绍一些数组的常用方法一、基本方法1.增①.arr.push()在数组的末尾添加一个元素。②arr.shift()删除数组的第一位元素。

在js中数组的重要性不言而喻,下面就来介绍一些数组的常用方法

一、基本方法

1.增

①. arr.push()

在数组的末尾添加一个元素。

var arr = [1,2,3,4];
    var newArr = arr.push(8);
    console.log(arr);  //(5) [1, 2, 3, 4, 8]

该方法会改变原数组,在数组的最后一位直接插入一个元素,增加数组的长度。

② arr.unshift()

在数组的第一位添加一个元素。

var arr = [1,2,3,4]
    arr.unshift("l")
    console.log(arr)  //(5) ["l", 1, 2, 3, 4]

该方法也会改变原数组,在数组的第一位添加一个元素,增加数组的长度。

2、删

 ① arr.pop()

删除数组的最后一位元素。

var arr = [1,2,3,4];
    arr.pop();
    console.log(arr);  //(3) [1, 2, 3]

该方法同样会改变原数组。

② arr.shift()

删除数组的第一位元素。

var arr = [1,2,3,4];
    arr.shift();
    console.log(arr);  //(3) [2, 3, 4]

该方法也会改变原数组。

 ③ arr.splice(n,m,a)

表示从第从索引为n开始删除,一共删除m个;a可选,表示在删除的地方添加一个新的元素a。

var arr = [1,2,3,4];
    var newArr = arr.splice(1,2);
    console.log(newArr);  //(2) [2, 3]
    console.log(arr);  //(2) [1, 4]

该方法也一样会改变数组。

④ arr.slice(n.m)

表示从索引为n的元素开始截取,截取到下标为m的前一个返回一个新的数组并没有改变原数组

var arr = [1,2,3,4];
    var arr2 = arr.slice(1,3);
    console.log(arr2);  //(2) [2, 3]
    console.log(arr);  //(4) [1, 2, 3, 4]

Tip:这里要注意和arr.splice()方法的区别,不要混淆。

二、ES5中新增的数组的方法

1、arr.indexOf()

arr.indexOf(data,start)有两个参数,第二个参数可选,表示的是从索引为start开始检测;该方法可以用来检测数组中是否含有某个元素,返回值为该元素在数组中的索引,当数组中不包含该元素的时候,返回值为-1;因此该方法也可以用来检测数组中是否含有某个元素;

var arr = [1,2,3,4];
var res = arr.indexOf("a");
console.log(res);  //返回值为-1;

补充一个arr.lastIndexOf(),用法同arr.indexOf(),但是arr.lastIndexOf()是从后开始向前检索。

2、forEach(callback)

该方法可以用来循环遍历数组;参数为回调函数。下面先来看一下结构。

var arr = ['a','b','c','d'];
arr.forEach(function(e,i,arr){
  console.log(e);
})
  //"a"  "b"  "c"  "d"
arr.forEach(function(e,i,arr){
  console.log(i);
})
  //0,1,2,3
arr.forEach(function(e,i,arr){
  console.log(arr);
})
  //['a','b','c','d']
  //['a','b','c','d']
  //['a','b','c','d']
  //['a','b','c','d']

通过上面的代码可以看出,arr.forEach()要接受一个回调函数,该函数有三个参数,这里的e表示元素,i表示索引,arr表示的是数组。

为了方便理解,下面通过一个案例来看一下for.Each()的用法。

var arr = [-1,-2,32,15,-8];
var arrNew =[];
arr.forEach(function(e,i,arr){
  e < 0 ? e = -e : e;
  arrNew.push(e);
})
console.log(arrNew)    //[1, 2, 32, 15, 8]

3、arr.map(callback)

该方法同for.Each()一样也可以对数组进行遍历,用法也和for.Each()一样,在这里就不做过多的介绍;

arr.map()方法不仅可以遍历数组,还可以对数组进行计算;

var arr = [1,2,3,4];
        var newArr = arr.map(function(e,index,arr){
            return e-1;
        })
        console.log(newArr);
        //[0, 1, 2, 3]

4、arr.filter(callback)

过滤数组,也可以遍历数组;

var arr = [1,2,3,4];
var newArr = arr.filter(function(e,index,arr){
     return e > 2;
})
console.log(newArr);
 //[3, 4]

如上代码,可以使用该方法将数组中的值小于2的值过滤掉,返回一个新的符合回调函数内条件的数组。

5、arr.every(callback)

使用该方法,如果数组中的每一个元素都符合回调函数内的条件,则返回true,否则返回false;

//效果是我们判定这个数组全是正数 使用.every
var arr = [1,58,125,-12,458,12];
var Boon = arr.every(function(e,i,arr){
  return e > 0;
})
console.log(Boon)      //false

6、arr.some(callback)

该方法和every有点类似,只不过当数组中又至少一个符合条件的时候都返回true,当全部都不符合的时候,才返回false;

//效果是我们判定这个数组是否有一个负数 使用.some
var arr = [1,58,125,-12,458,12];
var Boon = arr.some(function(e,i,arr){
  return e < 0;
})
console.log(Boon)      //ture

7、arr.reduce(callback)

这个方法比较复杂,我们来看一个例子

代码如下:

     var arr1 = [1,7,5,7,1,3];
        var arr2 = arr1.reduce(function(prev,cur,index,arr){
            console.log(prev);
            return prev +cur;
        });
        console.log("结果为" +arr2);
        //1
        //8
        //13
        //20
        //21
        //结果为24

具体看这个代码,首先我们在传入reduce的函数中打印了prev值,可以看到prev就是数组每两项的和。比如第一个是1,第二个就是1+7 = 8,以此类推。

最后,我们把结果返回。这是没设置第二个参数的情况。

下面我们来看看设置了第二个参数为2的例子。

var arr1 = [1,7,5,7,1,3];
        var arr2 = arr1.reduce(function(prev,cur,index,arr){
            console.log(prev);
            return prev +cur;
        },2);
        console.log("结果为" +arr2);
        //2
        //3
        //10
        //15
        //22 
        //23
        //结果为26

我们可以看出,当设置了第二个参数。我们第一个prev输出的结果就是第二个参数的值。设置了这个参数,会多执行一次

利用这种方法,我们可以快速的把二维数组转化为一维数组。

        var arr1 =[
            [1,2],
            [3,4],
            [5,6]
        ]
        var arr2 = arr1.reduce(function(prev,cur,index,arr){
            returnprev.concat(cur);
        });
        console.log(arr2)  //[1, 2, 3, 4, 5, 6]       

看到这里相信arr.reduceRight()的用法你也应该会了吧,和arr.reduce()类似,只不过是从右向左而已,在这里就不详细的介绍啦。

免责声明:文章转载自《JS中数组的方法》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇使用SSL配置Nginx反向代理的简单指南MySQL- exists的用法介绍(返回值True或False)-not exists反过来查询的应用下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

JS实现刷新iframe的方法

<iframe src="http://t.zoukankan.com/1.htm" name="ifrmname" id="ifrmid"></iframe> 方案一:用iframe的name属性定位 <input type="button" name="Button" value="Button"onclick="docu...

DOM,javascript,Web API之间的关系——onclick 引起的思考与调研

平时习惯了用js操作dom树来与html页面进行交互,基本都是通过web API接口实现的,最近看闭包和原生js的知识点比较多,昨天无意中看到了onclick中的this指向问题,遂用native js方式模拟了onclick再html标签里的this和js事件里的this,详见上一篇博客:用js的eval函数模拟Web API中的onclick事件 下文...

js/jquery如何获取获取父窗口的父窗口的元素

取父窗口的元素方法:$(selector, window.parent.document);那么你取父窗口的父窗口的元素就可以用:$(selector, window.parent.parent.document);类似的,取其它窗口的方法大同小异 1 $(selector, window.top.document); 2 $(selector, wind...

js实现图片的等比例缩放

  js实现图片的等比例缩放 CreateTime--2018年3月6日14:04:18 Author:Marydon 1.代码展示 /** * 图片按宽高比例进行自动缩放 * @param ImgObj * 缩放图片源对象 * @param maxWidth * 允许缩放的最大宽度 * @param maxHei...

JS中双击和单击事件冲突解决

在JS中代码中同一功能块中通常同时会用到单击、双击事件,但通常会遇到一个问题,就是在双击的时候即执行了一次双击事件,而且还执行了两次单击事件。此类冲突在ZTree、DHTMLX中经常遇到。想要解决两个事件冲突,需要对单击事件进行延时,如果在此延时中又监测到单击事件,那么认为此两次单击属于一个双击事件,则只执行双击事件,并第一时间将延时定时器清理,以防止第二...

Nodejs介绍及npm工具使用

一、Nodejs介绍   Nodejs英文网:https://nodejs.org/en/   Nodejs中文网:http://nodejs.cn/ Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。 Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型,使其轻量又高效。 Node.js 的包管理器 npm,...