美文网首页面试大前端时代Web前端之路
JS-这篇文章带你弄懂JavaScript数组

JS-这篇文章带你弄懂JavaScript数组

作者: 魏永_Owen_Wei | 来源:发表于2017-10-30 11:25 被阅读56次
    array.jpg

    基本上每种编程语言中都存在数组这种数据类型,而且地位都很重要。在JavaScript中数组更是编程的核心武器之一,对于数组的知识了解的越多越好,越深入越好。

    虽然我之前已经写过很多关于数组的文章,比如JS-判断变量是否为数组求探讨:Java和JavaScript数组的性能
    JS-数组sort方法用的是哪种排序算法。但是我觉得数组的内容太多了,今天进行一次梳理,希望能把数组说清楚。

    1.数组的创建

    方式1:构造函数

    var array = new Array();
    var array = new Array(7);//指定数组长度为7
    

    优点:可以指定数组的长度。
    缺点:
    1.代码多。
    2.new属于强引用,该变量不会被GC回收,会一直占用内存。

    方式2:直接量

    var array = [];
    var array = [1,2,3,4];
    

    优点:写法简洁方便。

    数组在内存中是分两部分存放的,一部分是栈式结构,存储各个元素的内存地址。另一部分是堆式结构,存放真实的元素。详情参考我的另一篇文章求探讨:Java和JavaScript数组的性能。

    除了上面的一维数组,还有二维数组以及多维数组,不同类型的数组发挥着不同的功能。

    2.数组的原生API

    为了方便开发,JavaScript数组提供了很多好用的API。我来和大家一一介绍。

    (1) push 和 pop
    push和pop应该放到一起,push将元素加到数组的尾部,pop将元素从数组的尾部删除。

    push:接收任意数量的元素,把它们添加到数组尾部,返回值为修改后数组的长度。

    var array = [1,2,3,4];
    var result = array.push(5,6,7);
    console.log(result);//7
    console.log(array.length);//7
    console.log(array.toString());//1,2,3,4,5,6,7
    

    pop:删除数组末尾的最后一项,返回值是移除的元素。

    var array = [1,2,3,4];
    var result = array.pop();
    console.log(result);//4
    console.log(array.length);//3
    console.log(array.toString());//1,2,3
    

    (2) unshift 和 shift

    unshift:将参数添加到数组的头部,返回值是修改后数组的长度。

    var array = [1,2,3,4];
    var result = array.unshift(5,6,7);
    console.log(result);//7
    console.log(array.length);//7
    console.log(array.toString());//5,6,7,1,2,3,4
    

    shift:删除数组头部的第一项,返回值是移除的元素。

    var array = [1,2,3,4];
    var result = array.shift();
    console.log(result);//1
    console.log(array.length);//3
    console.log(array.toString());//2,3,4
    

    (3) join

    jion将数组的元素连接成一个字符串,接受的唯一参数是分隔符,如果省略的话,默认使用逗号作为分隔符。

    var array = [1,2,3,4];
    var result = array.join();
    var result1 = array.join("-");
    console.log(result);//1,2,3,4
    console.log(result1);//1-2-3-4
    

    (4) sort
    sort方法值得详细说说,因为sort的使用场景很多。

    sort()方法接受一个比较函数的参数,根据比较函数的返回值确定排序。如果不传入比较函数,JavaScript会先将数组的元素转换为字符串类型,并依照ASCII码的值升序排列。

    var array = [1,2,3,4,11];
    console.log(array.sort().toString());//1,11,2,3,4
    

    传入比较函数参数时,若比较函数返回的值为true则交换两个元素的位置,否则不交换。

    var array = [1,2,3,4,11];
    console.log(array.sort(function(a,b){return a-b}).toString());//1,2,3,4,11
    

    sort函数使用的是插入和快排混合的排序算法,或者说优化的快速排序算法。如果元素个数小于等于10则使用插入排序,因为插入排序此时的效率更高。如果元素个数超过10个则使用快速排序。

    除此之外,JavaScript还会先把undefined,null先拿出来,不参与排序,进一步提升效率。

    (5) indexOf

    它可以接收两个参数:要查找的项和查找起点的索引。返回值是查找内容在数组中的索引位置,如果没有找到则返回-1。

    用这个方法判断元素是否在数组中很是方便,但是需要注意indexOf在判断时使用的是全等“===”,所以注意数据类型。

    var array = [1,2,3,4];
    console.log(array.indexOf(2));//1
    console.log(array.indexOf("2"));//-1
    

    (6) every 和 some

    every和some都需要传入一个判断函数。

    every判断是否每一个元素在判断函数中都返回true,如果某个元素的判断为false,则不再继续判断返回false;

    some判断是否有一个元素在判断函数中返回true。如果某个元素判断为true,则不再继续判断返回true;

    var array = [1,2,3,4];
    console.log(array.every(function(x){return x<3}));//false
    console.log(array.some(function(x){return x<3}));//true
    

    (7) map, reduce和 filter

    map是将数组中的每个元素都按照传入的函数转换为新的元素,并返回新的数组。

    var array =[1,2,3,4];
    var newArray = array.map(function(x){return x+1});
    console.log(newArray.toString());//2,3,4,5
    

    reduce是聚合操作,将每一个元素按照传入的函数操作,生成最终的结果。reduce的传入函数可以获得四个参数,前一个元素,当前元素,当前元素索引,数组。

    var array =[1,2,3,4];
    var result= array.reduce(function(pre,current,index,array){return pre+current});
    console.log(result);//10
    

    filter是筛选函数,返回符合筛选函数的数组。

    var array =[1,2,3,4];
    var newArray = array.filter(function(x){return x>2});
    console.log(newArray.toString());//3,4
    

    (7)其他API

    contract:连接两个数组。
    reverse:倒序翻转数组。
    forEach:循环数组中的每一个元素。

    如果文章中有理解不正确的地方,欢迎大家帮忙雅正。

    相关文章

      网友评论

        本文标题:JS-这篇文章带你弄懂JavaScript数组

        本文链接:https://www.haomeiwen.com/subject/ywnypxtx.html