• JavaScript--数组方法使用


    学习完数组的声明、赋值、类型判断,我们开始了解一下数组都有什么方法,但是为了知道这些方法有什么用,我还会举例进行操作。

    一、数组转化为字符串(不会改变原数组的值)

    1、toString()方法:可以使我们将数组转为每项以逗号隔开的字符串;

    var hhh = [1, 2, 3];
    /*转换方法*/
    console.log(hhh.toString()); //1,2,3

    2、join()方法:可以自己指定字符串的形式,如果我们传入的是“*”,那么最终的字符串形式就是以*隔开的字符串;

    var hhh = [1, 2, 3];
    /*转换方法*/
    console.log(hhh.join('/')); //1/2/3

    二、像栈一样操作数组 栈里面的数据特点是后进先出 所以最先收到影响的就是数组尾部--因为它们是后来才进来的(栈方法都会改变原数组的值)

    1、push()方法:从数组末尾添加一些项 返回值是操作后的数组长度;

    var hhh = [1, 2, 3];
    //接受任意数量的项,并将项添加至数据末尾,最后返回数组最终长度
    var rtnvalue = hhh.push('haha', 'heihei');
    console.log(hhh);//[ 1, 2, 3, 'haha', 'heihei' ]
    console.log(rtnvalue);//5

    2、pop()方法:从数组尾部移除一些项 返回值是被移除的那个项的值;

    var hhh = [1, 2, 3];
    //从末尾移除 并返回了被移除项的值
    var removerfromend = hhh.pop();
    console.log(removerfromend);//3
    console.log(hhh);//[ 1, 2]

    三、像队列一样操作数组 队列是先进先出 所以最先收到影响的是数组开头的那些值 因为他们是先进来的(队列方法都会改变原数组的值)

    1、shift()方法:从数组首部移除一些项;

    var hhh = [1, 2, 3];
    //从顶部移除
    var ite = hhh.shift();
    console.log(ite); //返回被移除的那一项 1
    console.log(hhh);//[ 2, 3 ]

    2、unshift()方法:从数组首部推入一些项;

    var hhh = [1, 2, 3];
    //从顶部添加
    var rtn = hhh.unshift('hua', 'long');
    console.log(rtn); //返回从顶部添加后的数组长度 5
    console.log(hhh);//[ 'hua', 'long', 1, 2, 3 ]

    四、数组排序(排序方法都会改变原数组的值)

    1、sort()方法:将数组按照升序排列,并返回排序后的数组。这个方法会改变原始数组的值;

    var arr = [3, 2, 6, 9, 0, 4, 5, 2, 7, 8, 8, 12];
    arr.sort(); //默认升序
    console.log(arr);//[  0, 12, 2, 2, 3,  4,  5, 6, 7, 8,  8,  9]

    2、自定比较函数,作为参数传入sort()方法中。比如我们想让数组不是默认的升序排序,而是变为降序排序;

    var arr = [3, 2, 6, 9, 0, 4, 5, 2, 7, 8, 8, 12];
    //自定义比较方法 改变sort排序规则
    function comp(v1, v2) {
        if (v1 > v2) {
            return -1;
        } else if (v1 < v2) {
            return 1;
        } else {
            return 0;
        }
    }
    arr.sort(comp);
    console.log(arr);//[ 12, 9, 8, 8, 7, 6, 5, 4, 3, 2, 2, 0]

    3、reverse()方法:将数组顺序颠倒;

    var arr = [3, 2, 6, 9, 0, 4, 5, 2, 7, 8, 8, 12];
    arr.reverse(); //顺序反转
    console.log(arr);//[ 12, 8, 8, 7, 2, 5, 4, 0, 9, 6, 2, 3]

    五、数组操作(数组操作方法中只有splice方法会改变原数组的值)

    1、concat()方法:在末尾连接一些数组,原始数组不变,该方法返回另外一个新数组;

    var arr = [3, 2, 6, 9, 0, 4, 5, 2, 7, 8, 8, 12];
    /*操作方法*/
    var newarr = arr.concat('我的'); //向数组后面连接多个数组
    console.log(arr);//[ 3,  2, 6, 9, 0, 4,  5, 2, 7, 8, 8, 12]
    console.log(newarr);//[ 3, 2,  6,  9, 0, 4, 5,  2,  7, 8,  8, 12, '我的']

    2、slice()方法:使用起始值和结束值,按照从开始下标开始(包含起始位置)到结束值(不包含结束位置)返回另外一个新的数组;

    var arr = [3, 2, 6, 9, 0, 4, 5, 2, 7, 8, 8, 12];
    var selectorarr = arr.slice(2, 4); //包含开始位置 而不包含结束位置
    console.log(selectorarr); //所以只会有两项 2 3 而不包含4 :[ 6, 9 ]
    console.log(arr)//[3,2,6,9,0,4,5,2,7,8,8,12]
    var arr = [3, 2, 6, 9, 0, 4, 5, 2, 7, 8, 8, 12];
    var selectorarr1 = arr.slice(2);
    console.log(selectorarr1);//[ 6, 9, 0, 4,  5, 2, 7, 8, 8, 12]

    3、splice()方法:该方法有三个参数,分别是起始位置、要移除的项、新的要从该位置插入的项;我们可以通过调整这三个参数,来达到不同的效果;

    //splice方法 增、删、改
    var myarr = [1, 2, 3, 4, 5, 6];
    var res = myarr.splice(2, 3, '掺入一个', '又插入一个'); //从位下标二处删除3项(3 4 5) 又新插入两项
    console.log(res);//谁被删除了:[ 3, 4, 5 ]
    console.log(myarr);//[ 1, 2, '掺入一个', '又插入一个', 6 ]
    var myarr2 = [1, 2, 3, 4, 5, 6];
    var res2 = myarr2.splice(2, 0, '插入一个', '再插入一个'); //从位置二处删除0项 又插入两项
    console.log(res2); //没有项被删除 返回空数组 
    console.log(myarr2); //返回被操作后的数组 [ 1, 2, '插入一个', '再插入一个', 3, 4, 5, 6 ]
    //第二个参数为n,则插入n个新值可以实现数组替换
    var readyarr = [1, 2, 3, 4];
    var rmv = readyarr.splice(2, 1, 'baba');
    console.log(rmv);//[ 3 ]
    console.log(readyarr);//[ 1, 2, 'baba', 4 ]

    六、搜索某项在数组中的位置(返回值为number类型,操作都不改变原数组的值)

    1、indexof()方法:从左到右搜做。该方法有两个参数,第一个是待搜索的值,第二个是起始位置;默认情况下起始位置是从0(即数组开头)开始搜索;

    /*位置方法*/
    var operatearr = [1, 3, 2, 7, 8, 2];
    var index = operatearr.indexOf(3); //寻找3在哪儿 默认从下标零开始找
    console.log(index); //返回下标1
    console.log(operatearr.indexOf(3, 0)); //从下标零开始 找3在哪儿 返回1
    console.log(operatearr.indexOf(3, 2)); //从下标2开始找 最后没找到返回-1

    2、lastindexof()方法:从右到左搜索。该方法也有两个参数,第一个是待搜索的值,第二个是起始位置;默认情况下起始位置是从数组末尾开始搜索;

    /*位置方法*/
    var operatearr = [1, 3, 2, 7, 8, 2];
    console.log(operatearr.lastIndexOf(2)); //从后往前找2在哪个位置 默认从最后一个下标开始找 返回5
    console.log(operatearr.lastIndexOf(2, operatearr.length - 1));//返回 5

    七、数组的迭代方法(迭代方法都不会改变原数组的值)

    1、every()方法:该方法最终返回一个布尔值。该方法会对数组中每项都运行给定函数,该函数每一项都返回true 才会返回true;

    var useoperate = [1, 2, 3, 4, 5, 6, 7];
    // 使用every方法 对数组中每项都运行给定函数 该函数每一项都返回true 才会返回true
    // 比如;判断某个数组都大于2么(使用every迭代 必须是每一项都比二大才会返回true)
    var results = useoperate.every(function(itm, idx, arrs) {
        return (itm > 2);
    });
    console.log(results);//false

    2、some()方法:该方法最终返回的也是布尔值。该方法会对数组中的每项都运行给定函数,该函数只要其中一项返回true 整个some函数的返回值就为true;

    var useoperate = [1, 2, 3, 4, 5, 6, 7];
    //使用some 对数组中的每项都运行给定函数 该函数只要其中一项返回true 整个some函数的返回值就为true
    var results2 = useoperate.some(function(itm, idx, arrs) {
        return (itm > 2);
    });
    console.log(results2);//true

    3、filter()方法:该方法返回另外一个新数组。该方法会对数组每项都运行给定函数,最后返回函数返回值为true的项组成的数组;

    var useoperate = [1, 2, 3, 4, 5, 6, 7];
    ///使用fiter方法 数组每项都运行给定函数 最后返回函数返回值为true的项组成的数组
    var results3 = useoperate.filter(function(itm) {
        return (itm > 2);
    });
    console.log(results3);//[ 3, 4, 5, 6, 7 ]
    console.log(useoperate);//[ 1, 2, 3, 4, 5, 6, 7]

    4、map()方法:map方法会对数组中的每一项都运行给定函数,操作完成后map方法会将改变后的数组返回;

    var useoperate = [1, 2, 3, 4, 5, 6, 7];
    //使用map方法 将数组中的每项都运行给定函数 最后返回被函数操作后的数组
    //比如使用map方法可以使数组每项放大十倍
    var results4 = useoperate.map(function(item) {
        return item * 10;
    });
    console.log(results4);//[ 10, 20, 30, 40, 50, 60, 70]
    console.log(useoperate);//[1, 2, 3, 4, 5, 6, 7]

    5、foreach()方法:该方法会对数组中的每一项都运行给定函数,它的本质与for()没有区别,该方法没有返回值;

    var useoperate = [1, 2, 3, 4, 5, 6, 7];
    //使用foreach方法 仅仅是对数组的每一项运行给定函数 本质与for差不读 没有返回值
    useoperate.forEach(function(t) {
        console.log('当前项:' + t);
    });
    执行结果:
    当前项:1
    当前项:2
    当前项:3
    当前项:4
    当前项:5
    当前项:6
    当前项:7
  • 相关阅读:
    Head of a Gang
    如何实现可以获取最小值的栈?
    多项式函数的极值点与拐点判别及个数公式
    解决Windows10下小娜无法搜索本地应用的问题
    Oracle中常用的语句
    [HTML]在页面中输出空格的几种方式
    [JavaScript]JS中的变量声明与有效域
    JAVA中时间格式转换
    Context initialization failed org.springframework.beans.factory.BeanCreationException
    Spring整合Mybatis SQL语句的输出
  • 原文地址:https://www.cnblogs.com/bigbosscyb/p/12170725.html
Copyright © 2020-2023  润新知