资讯专栏INFORMATION COLUMN

理解数组Array类型的方法

时飞 / 1250人阅读

摘要:接收三个参数数组项的值,该项在数组中的位置,数组对象本身对数组中的每一项运行给定函数,如果该函数对任一项都返回则返回。对数组中的每一项运行给定函数,返回该函数会返回的项组成的数组。

一、理解数组:

ECMAScript数组的每一项可以保存任何类型的数据,可以是字符串、数值、对象、函数、数组等等。

创建数组基本方式有两种,第一种是使用Array构造函数:

    var arr=new Array(1,2,3);

可以省略new操作符。

第二种方式是使用数组字面量表达法:

    var arr=[1,2,3];

使用数组字面量表达法时,不会调用Array构造函数。

二、数组的转换方法:

toString()方法:返回由数组中的每个值得字符串形式拼接而成的一个以逗号分隔的字符串。

valueOf()方法;在数组中与toString()方法操作相同。

toLocaleString()方法:与前两种方法不同的地方是,前两种方法在调用的时候,为了取得每一项的值,调用的是每一项的toString()方法;而toLocaleString()方法在调用的时候,为了取得每一项的值,调用的是每一项的toLocaleString()方法。

三、栈方法与队列方法 1、栈方法

push()方法:从尾部添加一个或多个参数。

    var arr=["a","b"];
    arr.push("c","d");
    alert(arr);       //a,b,c,d

pop()方法:从尾部删除最后一项。

    var arr=["a","b"];
    arr.pop();
    alert(arr);       //a
2、队列方法

shift()方法:从头部删除第一项。

    var arr=["a","b"];
    arr.shift();
    alert(arr);       //b

unshift()方法:从头部添加一个或多个参数。

    var arr=["a","b"];
    arr.unshift("c","d");
    alert(arr);       //c,d,a,b
四、重排序方法
reverse()方法;反转数组项的排序。
    var arr=[0,1,2,3,4];
    arr.reverse();
    alert(arr);            //4,3,2,1,0

sort()方法:按升序排列数组项——即最小的值位于最前,最大的值排在最后。

    var arr=[0,1,3,11,15];
    arr.sort();
    alert(arr);   //0,1,11,15,3

值得注意的是sort()方法会隐式调用toString()方法;所以它比较的是字符串,但是它可以接收一个比较函数作为参数:

    function compare(value1,value2){
        if(value1value2){
            return 1;
        }
        else{
            return 0;
        }
    }
    var arr=[0,1,3,11,15];
    arr.sort(compare);
    alert(arr)            //0,1,3,11,15
五、操作方法

concat()方法:创建当前数组一个副本,然后将接收到的参数添加到这个副本的末尾,最后返回新构建的数组。

    var arr=[1,2];
    var arr2=arr.concat(1,[1,2]);
    alert(arr2);//1,2,1,1,2
如果参数是一或多个数组,则将这些数组中的每一项都添加到结果数组中。

slice()方法:基于当前数组中的一或多个项创建一个新数组。可以接收一或两个参数,即要返回的起始和结束位置(不包括结束位置项)。

    var arr=["a","b","c","d","e"];
    var arr2=arr.slice(1);
    var arr3=arr3.slice(1,4);
    alert(arr2);//b,c,d,e
    alert(arr3);//b,c,d

splice()方法:删除,插入,替换。
1、删除:指定两个参数:要删除的第一项的位置和要删除的项数。

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

2、插入:指定3个参数:起始位置、0(要删除的项数)、插入的项(可以任意多个项)。

var arr=["a","b","c"];
arr.splice(2,0,"d","e");
alert(arr);//a,b,d,e,c

3、替换:指定3个参数:起始位置、要删除的项数、替换的项(可以任意多个项)。

var arr=["a","b","c"];
arr.splice(2,1,"d","e");
alert(arr);//a,b,d,e
六、位置方法

indexOf()方法:从数组开头向后查找项的位置,接收两个参数:要查找的项和表示查找起点位置的索引(可选的)。

var arr=["a","b","c","d","e","d","c","b","a"];
alert(arr.indexOf("d"));//3
alert(arr.indexOf("d",4));//5

值得注意的是indexOf()方法一查找到符合条件的值,就会停止查找,所以只有一个参数d的时候即从0位置开始查找显示位置是3,而在后面加一个位置索引4之后,也就是从e这个项开始向后查找,所以显示5。

lastIndexOf()方法:从数组末尾向后查找项的位置,接收两个参数:要查找的项和表示查找起点位置的索引(可选的)。

var arr=["a","b","c","d","e","d","c","b","a"];
alert(arr.lastIndexOf("d"));//5
alert(arr.lastIndexOf("d",4));//3
七、迭代方法

every():对数组中的每一项运行给定函数,如果该函数对每一项都返回true,则返回true。接收三个参数:要在每一项上运行的函数,运行该函数的作用域对象(可选的)——影响this的值。

var arr=[1,2,3,4,5,4,3,2,1];
var everyResult=arr.every(function(item,index,array/*接收三个参数:数组项的值,该项在数组中的位置,数组对象本身*/){
    return (item>2);
});
alert(everyResult);//false

some():对数组中的每一项运行给定函数,如果该函数对任一项都返回true,则返回true。

var arr=[1,2,3,4,5,4,3,2,1];
var someResult=arr.every(function(item,index,array){
    return (item>2);
});
alert(someResult);//true

filter():对数组中的每一项运行给定函数,返回该函数会返回true的项组成的数组。

var arr=[1,2,3,4,5,4,3,2,1];
var filterResult=arr.filter(function(item,index,array){
    return (item>2);
});
alert(filterResult);//[3,4,5,4,3]

map():对数组中的每一项运行给定函数,返回每次函数调用的结果组成的数组。

var arr=[1,2,3,4,5,4,3,2,1];
var mapResult=arr.map(function(item,index,array){
    return item*2;
});
alert(mapResult);//[2,4,6,8,10,8,6,4,2]

forEach():对数组中的每一项运行给定函数,这个方法没有返回值。

var arr=[1,2,3,4,5,4,3,2,1];
var forEachResult=arr.forEach(function(item,index,array){
    //执行某些操作
});
八、归并方法
reduce(/*每一项上调用的函数*/,/*作为归并基础的初始值(可选的)*/);
    reduce(function(prev/*前一个值*/,cur/*当前值*/,index/*项的索引*/,array/*数组对象*/){},10/*可选的*/);
    var arr=[1,2,3,4,5];
    var sum=arr.reduce(function(prev,cur,index,array){
        return prev+cur;
    });
    alert(sum);//15

这个方法会迭代数组所有想项,也就是说对数组中的每一项给定一个函数,然后构建一个最终返回的值。从数组的第一项开始,逐个遍历到最后。

归并开始时,第一次迭代发生在数组的第二项上,也就是索引值为1,这时prev是1,cur是2。第二次迭代发生在数组的第三项上,也就是索引值为2,这时prev是3(因为此时已经发生过一次迭代,是前一次迭代1+2的结果),cur是3。这个过程会持续到把数组中的每一项都访问一遍,最后返回结果。

但是如果传入一个初始值,那就不一样了:

    var arr=[1,2,3,4,5];
    var sum=arr.reduce(function(prev,cur,index,array){
        return prev+cur;
    },20);
    alert(sum);//35

归并开始时,第一次迭代发生在数组的第一项上,也就是索引值为0,这时prev是20,cur是1。

reduceRight():与reduce()类似,只不过方向相反而已,除此之外,它们完全相同。

    var arr=[1,2,3,4,5];
    var sum=arr.reduceRight(function(prev,cur,index,array){
        return prev+cur;
    },20);
    alert(sum);//35

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/91916.html

相关文章

  • 深入理解JavaScript类数组

    摘要:但是,我们可以借用类数组方法不难看出,此时的在调用数组原型方法时,返回值已经转化成数组了。很多时候,深入看看源代码也会让你对这个理解的更透彻。的前端乐园原文链接深入理解类数组 起因 写这篇博客的起因,是我在知乎上回答一个问题时,说自己在学前端时把《JavaScript高级程序设计》看了好几遍。于是在评论区中,出现了如下的对话:showImg(https://segmentfault.c...

    Towers 评论0 收藏0
  • 类型数组(Typed Array)与ArrayBuffer理解

    摘要:类型化数组也是中新引入的。用一句话解释类型化数组就是它是操作二进制数据的接口。类型化数组类型化数组的应用二进制数据的接口主要应用于文件,在中涉及文件处理的几乎都可以应用,主要是,,。 类型化数组(Typed Array)也是HTML5中新引入的API。用一句话解释类型化数组就是:它是JS操作二进制数据的接口。 众所周知,直接操作二进制数据可以使程序更为高效, 尽管JS对常规数组做了很多...

    Worktile 评论0 收藏0
  • 深入理解ES6之《改进数组功能》

    摘要:方法由于构造函数创建数组时的怪异行为,比方说如下方法总会创建一个包含所有参数的数组方法不通过属性确定返回值的类型,它使用当前构造函数,也就是方法中的值来确定正确的返回数据的类型方法以前总是使用将类数组转换成数组方法可接受可迭代对象或类数组对 Array.of方法 由于Array构造函数创建数组时的怪异行为,比方说如下: let items = new Array(2) console....

    Awbeci 评论0 收藏0
  • 深入理解ES6之《改进数组功能》

    摘要:方法由于构造函数创建数组时的怪异行为,比方说如下方法总会创建一个包含所有参数的数组方法不通过属性确定返回值的类型,它使用当前构造函数,也就是方法中的值来确定正确的返回数据的类型方法以前总是使用将类数组转换成数组方法可接受可迭代对象或类数组对 Array.of方法 由于Array构造函数创建数组时的怪异行为,比方说如下: let items = new Array(2) console....

    genefy 评论0 收藏0
  • 深入理解ES6笔记(十)增强数组功能

    摘要:在可迭代对象上使用所有数组上的新方法与方法与方法均接受两个参数一个回调函数一个可选值用于指定回调函数内部的。回调函数可接收三个参数数组的某个元素该元素对应的索引位置以及该数组自身。 主要知识点:创建数组、数组上的新方法、类型化数组showImg(https://segmentfault.com/img/bVbfWo1?w=991&h=587); 《深入理解ES6》笔记 目录 创建数组...

    pekonchan 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<