zoukankan      html  css  js  c++  java
  • javascript数组常用方法

    前言

      一位正在学习前端的菜鸟,虽菜,但还未放弃。

    常用方法 

      push() 可以接收任意数量的参数,把它们逐个添加到数组末尾并返回新数组的长度

    var arr = [1,2,3,4,5];
    var len = arr.push(6);//返回添加完数组的新长度
    console.log(arr);//[1, 2, 3, 4, 5, 6]
    console.log(len)//6

      unshift()方法与push()方法相反,能够在数组前面添加任意个项,并返回新数组的长度。

    var arr = [1,2,3,4,5];
    var len = arr.unshift(-1,0);
    console.log(arr);//[-1,0,1,2,3,4,5]
    console.log(len)//7

      pop() 从数组末尾移除最后一项,减少数组的length值,然后返回移除的项

    var arr = [1,2,3,4,5];
    var last = arr.pop();//删除并返回数组最后一个数
    console.log(arr);//[1, 2, 3, 4]
    console.log(last)//5

      shift()方法与pop()方法相反,能够移除数组中的第一个项并返回该项,同时将数组长度减 1

    var arr = [1,2,3,4,5];
    var first = arr.shift();//删除并返回数组第一个数
    console.log(arr);//[2, 3, 4,5]
    console.log(first)//1

      reverse() 方法会反转数组项的顺序

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

      sort() 方法按字母表,数字升序排列数组项

        sort()这个方法分几种情况

        1,当数组为纯数字时,sort()这个方法会根据从0到9的顺序先比较第一位,第一位相同时再比较第二位

    var arr = [12, 11, 0, 34, 8, 65];
    arr.sort();
    console.log(arr);//[0, 11, 12, 34, 65, 8]

        2,当数组为纯字母时,sort()这个方法会根据a-z这个顺序先比较第一位,第一位相同时再比较第二位

    var arr = ['gg','as','ft','g','ab'];
    arr.sort();
    console.log(arr);//["ab", "as", "ft", "g", "gg"]

        3,当数组为数字与字母混合时,sort()这个方法会先排序数字然后再排序字母

    var arr = ['c','a',3,1,'b',2];
    arr.sort();
    console.log(arr);//[1, 2, 3, "a", "b", "c"]

        4,sort()这个方法里面还可以传参数 Object.sort(function) 里面传的参数是必须一个函数

        请注意,上面的代码没有按照数值的大小对数字进行排序,要实现这一点,就必须使用一个排序函数:

    var arr = [12,11,0,34,8,65];
    arr.sort(function(a,b){
        return a-b;
    });
    console.log(arr);//[0, 8, 11, 12, 34, 65]

       concat() 方法用于连接两个或多个数组,参数可以是数组项或者数组( 可以多个参数 )。

    var arr = [1,2,3];
    var arr1 = [4,5,6];
    var newsArr = arr.concat(arr1);
    console.log(newsArr);//[1, 2, 3, 4, 5, 6]

        join()方法,将数组转换成对应的字符串参数就是连接符

    var arr = [1,2,3,4,5,6];
    arr = arr.join('-');
    console.log(arr);//1-2-3-4-5-6

       slice() 方法可从已有的数组中截取部分并返回选定的元素参数一必填,为起始位置的下标(如果参数为负数,如-1,即从倒数开始,-2即倒数第二个)。参数二可选,为结束位置的下标

         注意:不会改变原数组 会返回一个新子数组

    var arr = [1,2,3,4,5,6];
    var newsArr = arr.slice(2);//表示从下标2开始截取到最后的数组
    console.log(newsArr);//[3, 4, 5, 6]

        俩个参数的情况下

    var arr = [1,2,3,4,5,6];
    var newsArr = arr.slice(2,4);//表示从下标2开始截取到下标4的值(包括起始下标2但不包括结束下标4)
    console.log(newsArr);//[3, 4]

      splice() 为js数组最强大的方法 可以对数组进行 删除、插入、替换

        注意:会改变原数组 ,返回值是修改完的数组 

          1,对数组进行删除

    var arr = [1,2,3,4,5,6];
    arr.splice(0,2);//俩个参数表示的意思是从下标0开始 删除2个子元素
    console.log(arr);//[3, 4, 5, 6]

          2,对数组进行插入

    var arr = [1,2,3,4,5,6];
    arr.splice(2,0,'hellow');//三个参数表示的是在下标为2处添加一个hellow,添加的值可为多个
    //注意:添加第二个参数须写为0 否则将变成修改
    console.log(arr);//[1, 2, "hellow", 3, 4, 5, 6]

          3,对数组进行修改

    var arr = [1,2,3,4,5,6];
    arr.splice(1,2,'hellow');//这句话的意思从下标为1开始 将之后的俩个元素替换成hellow
    console.log(arr);//[1, "hellow", 4, 5, 6]

    ES5新增数组方法

      01,静态方法(静态方法可直接调用 不用new 直接使用  类名.方法  调用)

        isArray()  判断是否为数组方法,返回值为布尔值

    var arr = [1,2,3];
    var str = '我是字符串';
    console.log(Array.isArray(arr));//true
    console.log(Array.isArray(str));//false

      02,查找索引,位置,下标方法  

        1,indexOf(index,start) index代表查找的项 start 代表查找的起始位置(默认是下标0) 返回值为查找项的第一个下标 找不到则返回-1

    var arr = [1,2,3,4,5,6,7];
    console.log(arr.indexOf(3));//找到的下标为2
    var arr1 = [1,2,3,4,5,3];
    console.log(arr1.indexOf(3,3));//指的是从下标3开始查找项为3的下标,返回值为5

        2,lastIndexOf(index,start)   lastIndexOf 跟indexOf用法基本一致,区别是lastIndexOf返回的是最后一个下标 找不到同样返回-1

    var arr = [1,1,1];
    console.log(arr.lastIndexOf(1));//从最后开始查找 找到的第一个下标为2
    var arr1 = [1,2,3,4,5,3];
    console.log(arr1.lastIndexOf(3,4));//从下标4开始查找 找到最后一个项的下标为2

      03,数组的迭代方法

        1,forEach()循环

          功能:循环遍历数组中的每个元素,对数组的每个元素做运算 比for循环简便 但不能随意退出 不能使用  break;

          参数:回调函数

          返回值:无

    var arr = [1,2,3,4,5,6];
    arr.forEach(function(item,index,arr){//第一参数item表示的是每个项  第二个参数index表示的是每个下标 第三个参数arr表示的是数组对象
        arr[index] = item+1;//这里所做的是将每一项的值加1
    })
    console.log(arr);// [2, 3, 4, 5, 6, 7]

        2,map()映射

          功能:返回一个新数组,新数组中的元素为原始数组元素调用函数处理后的值。不改变原数组

          参数:回调函数

          返回值:新的数组

    var arr = [1,2,3,4,5,6];
    var newArr = arr.map(function(item,index,arr){//第一参数item表示的是每个项  第二个参数index表示的是每个下标 第三个参数arr表示的是数组对象
        return item+1;//这里所做的是返回每一项的值并加1
    })
    console.log(newArr);// [2, 3, 4, 5, 6, 7]
    console.log(arr);// [1, 2, 3, 4, 5, 6]

        3,filter() 过滤

           功能:检测数值元素,并返回符合条件所有元素的数组   

           参数:回调函数   

           返回值:新的数组 

    var arr = [1,2,3,4,5,6];
    var newArr = arr.filter(function(item,index,arr){//第一参数item表示的是每个项  第二个参数index表示的是每个下标 第三个参数arr表示的是数组对象
        return item>3;//返回大于3的值
    })
    console.log(newArr);// [4, 5, 6]
    console.log(arr);// [1, 2, 3, 4, 5, 6]
  • 相关阅读:
    dedecms初解
    Java二十三设计模式之------单例模式
    Java二十三设计模式之------工厂方法模式
    数组和集合的区别及深入了解
    团队项目计划
    团队介绍及团队题目
    第二阶段冲刺(第十天)
    第二阶段冲刺(第九天)
    第二阶段冲刺(第八天)
    第二阶段冲刺(第七天)
  • 原文地址:https://www.cnblogs.com/xiaoningtongxue/p/12544418.html
Copyright © 2011-2022 走看看