JS数组方法

梦樊哥哥

已于 2022-02-15 09:26:50 修改

阅读量227

点赞数 2

分类专栏： JS详解（从零到一）文章标签： javascript 开发语言

于 2022-02-14 14:28:40 首次发布

本文链接：https://blog.csdn.net/mengfanshaoxia/article/details/122918093

版权

JS详解（从零到一）专栏收录该内容

25 篇文章 5 订阅

订阅专栏

1、添加元素方法

1.1、push()

push() 方法是在数组元素的最后添加新的元素。执行成功后会返回新数组的长度。

语法格式：数组名称 . push ( 新元素 );

        var arr = [1, 2, 3, 4, 5];
        console.log(arr);
        // 在数组的末尾添加元素
        var l = arr.push(9);
        console.log(l); //返回的是数组的长度
        console.log(arr);

代码结果：

1.2、unshift ()

unshift() 方法是在数组的开头添加新元素。执行后也会返回数组新的长度。

语法格式：数组名称 . unshift ( 新元素 );

        var arr = [1, 2, 3, 4, 5];
        console.log(arr);
        // 在数组的开头添加元素
        var l = arr.unshift(7);
        console.log(l); //返回的是数组的长度
        console.log(arr);

运行结果：

注意：

（1）push()和unshift()方法执行后都会影响原来的数组；

（2）push()和unshift()方法都可以添加多个元素；

（3）push()和unshift()方法都可以添加数组到当前数组中

        var arr = [1, 2, 3, 4, 5];
        // 1、原数组改变
        console.log(arr);
        // 2、可以在数组中添加多个元素
        arr.push(6, 7, 8);
        console.log(arr);

        arr.unshift(-2, -1, 0);
        console.log(arr);

运行结果:

        var arr = [1, 2, 3, 4, 5];

        //3、可以添加一个数组到当前数组中
        var arr1 = [111, 222, 333];
        arr.push(11111, arr1);
        arr.unshift(2222, arr1);
        console.log(arr);

运行结果：

push()和unshift()区别：

（1）push()是在数组的最后添加新元素，而unshift()是在数组的开头添加新元素；

（2）push()添加元素时不存在移动，而unshift()添加元素时存在移动问题，因此unshift()添加元素时的性能低于push()添加元素时的性能。

2、删除元素

2.1、pop()

pop() 方法可以删除数组最后的一个元素，这个方法执行成功后，会把被删除的元素获取到。

语法格式：数组名称 . pop ();

        var arr = [1, 2, 3, 4, 5];
        console.log(arr);
        //删除数组中的最后一个元素
        var el = arr.pop();
        console.log(el);
        console.log(arr);

运行结果：

2.2、shift()

shift() 方法会删除数组中的第一个元素，执行成功后会把被删除的元素返回。

语法格式：数组名称 . shift ();

        var arr = [1, 2, 3, 4, 5];
        console.log(arr);
        //3、shift()可以删除一个数组中的第一个元素
        var el = arr.shift();
        console.log(el);
        console.log(arr);

运行结果：

注意：

（1）pop()和shift()方法执行后都会影响原来的数组。

pop()和shift()区别：

（1）pop()是删除数组最后一个元素，shift()是删除数组第一个元素；

（2）pop()删除元素时不存在移动问题，而shift()删除元素时存在移动问题，因此shift()删除元素时的性能低于pop()删除元素时的性能。

3、数组排序

3.1、reverse ()

reverse() 方法用于颠倒数组中的元素。

语法格式：数组名称 . reverse ();

        var arr = [1, 2, 3, 4, 5];
        console.log(arr);
        // reverse() 方法用于颠倒数组中的元素。
        arr.reverse();
        console.log(arr);

运行结果：

注意：reverse() 方法执行后，会修改原来的数组。

3.2、sort()

sort() 对数组元素进行排序。

语法格式：数组名称 . sort ([ compare ]);

3.2.1、使用默认排序规则进行排序

（1）对整型数组进行排序

        var arr = [2, 4, 1, 5, 3];
        console.log(arr);
        // sort() 方法对整型数组进行排序
        arr.sort();
        console.log(arr);

运行结果：

（2）对字符数字进行排序

        var arr = ['10', '1', '2', '23', '4', '120', '5'];
        console.log(arr);
        // sort() 方法对字符数字进行排序
        arr.sort();
        console.log(arr);

运行结果：

（2）对字符串进行排序

        var arr = ['ab', 'a', 'abc', 'bc', 'bcd', 'b', 'cde', 'efg'];
        console.log(arr);
        // sort() 方法对字符串进行排序
        arr.sort();
        console.log(arr);

运行结果：

3.2.3、使用自定义比较器

        var arr = ['10', '1', '2', '23', '4', '120', '5'];

        console.log(arr);
        /*** 自定义的比较器，它会返回三个值： 
         * 正整数：升序排列 
         * 负整数：降序排列 
         * 零：位置不变 */

        function compare(a, b) {
            return a - b;
            //a-b是升序，b-a是降序
        }
        arr.sort(compare);
        console.log(arr);

运行结果：

注意：

（1）sort()执行后，会修改原来的数组；

（2）sort()对整型数组进行排序，默认是升序。

4、数组转字符串

4.1、toString()

语法格式：数组名称.toString();

        var arr = [1, 2, 3, 4, 5];
        console.log(arr, typeof arr);
        var str = arr.toString();
        console.log(str, typeof str);

运行结果：

4.2、join()

这个方法需要指定一个分隔符，默认为逗号

语法格式：数组名称 . join ([ 分隔符 ]);

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

运行结果：

注意：toString()和join()方法都不会改变原来的数组。

5、数组索引

5.1、indexof()

indexof() 方法是从数组的第一个元素开始向后查找，如果找到就返回索引的位置，如果找不到则

返回 -1 。

语法格式：

数组名称 . indexof ( 要查询的元素 );

数组名称 . indexof ( 要查询的元素 , 开始位置 );

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

5.2、lastIndexof()

lastIndexof() 方法是从数组的最后一个元素开始向前查找，如果找到就返回索引的位置，如果找不到

则返回 -1 。

语法格式：

数组名称 . lastIndexof ( 要查询的元素 );

数组名称 . lastIndexof ( 要查询的元素 , 开始位置 );

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

注意：indexof()和lastIndexof()只要找到第一个元素就结束，并返回其下标。

6、其他方法

6.1、concat()

concat() 方法用于连接两个或多个数组。该方法不会改变现有的数组，而仅仅会返回被连接数组

的一个副本。

语法如下：数组名称 . concat ( 值 , ... )

        var arr = [1, 2, 3, 4];
        var arr1 = [8, 88, 888, 888];
        console.log(arr);
        var newArr = arr.concat(5, 6, 7, arr1);
        console.log(newArr);

运行结果：

注意：concat()执行后不会影响原数组。

6.2、slice()

slice() 方法返回一个新的数组对象，这一对象是一个由 begin 和 end 决定的原数组的 浅拷贝 （包

括 begin ，不包括 end ）。原始数组不会被改变。

语法如下：数组名称 . slice ( 开始位置 [, 结束位置 ]);

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

注意：slice()执行后不会影响原数组。

6.3、map()

map() 方法将调用的数组的每个元素传递给指定的函数，并返回一个新的数组，这个新的数组就

是通过函数处理后的数组。

语法如下：数组名称 . map ( 回调函数 )

        var arr = [1, 2, 3, 4];
        console.log(arr);
        // 把数组中每个元素加 1。
        var arr4 = arr.map(function(value, index, array) {
            console.log(value, index, array);
            return value + 1;
        })
        console.log(arr4);

运行结果：

说明：

（1）map()的参数是一个回调函数，这个函数有三个参数，第一个参数表示原数组的元素，第二个参数是元素对应的下标，第三个参数是原数组对象；

（2）在回调函数中，我们可以根据自己的具体业务逻辑进行操作，操作完后需要使用return语句来返回结果；

（3）map()执行后不会影响原数组，而是产生一个新的数组。

6.4、reduce()

reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始合并，最终为一个值

并返回。 reduce() 可以接受两个参数，第一个是简化函数，第二个是传递给函数的一个初始值。

语法如下：数组名称 . reduce ( 回调函数 , 初始值 );

        //把数组中所有元素进行累加，并返回结果
        var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
        console.log(arr);
        var sum = arr.reduce(function(total, value, index, array) {
            console.log(total, value, index, array);
            return total + value;
        });
        console.log(sum);

运行结果：

说明：

（1）reduce()中有一个回调函数，它有4个参数：第一个参数是总数（也就是返回结果参数，这个参数必须指定），第二个参数是当前的元素值（必须指定），第三个参数是元素对应的下标，第四个参数是数组对象本身；

（2）如果total没有显示指定值，那么会将数组中的第一个元素赋给total，然后把数组中的第二个元素赋给value，两者相加后，再把结果赋给total，然后再把第三个元素赋给value，再次相加，以此类推。

（3）每次执行后，需要使用return来返回结果（其实就是把结果赋值给sum变量）。

6.5、some()

some() 方法判断数组中是否至少有 1 个元素满足条件，如果满足条件就返回 true ，否则返回

false 。

语法如下：

数组名称 . some ( function ( value , index , array ){})

数组名称 . some ( callback ( element [, index [, array ]])[, thisArg ])

例一：

        var arr = [2, 4, 20, 9, 6, 8]
        console.log(arr);
        // 遍历数组，判断数组是否包含奇数。
        var flag = arr.some(function(value) {
            console.log(value);
            if (value % 2 === 1) {
                return true;
            } else {
                return false;
            }
        })
        console.log(flag);

代码结果：

说明：

（1）挡执行some()时，如果返回true，则结束这个方法的执行，否则会遍历完数组中的所有元素。

（2）这个方法是只要有一个条件满足就会推出。

例二：检查某些数组值是否大于18

        var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 19];

        flag = arr.some(function(val) {
            if (val > 18) return true;
            else return false;
        });
        console.log(flag);
    </script>

说明：

（1）若数组中没有任何一个元素大于18，则会返回false，若数组中存在一个大于18的元素，则返回true。

6.6、every()

every() 方法判断一个数组内的所有元素是否都满足条件，如果都满足返回 true ，否则返回

false 。

语法如下：

arrar . every ( callback ( element [, index [, array ]])[, thisArg ])

说明：

第一个参数是数组中的元素，第二个参数是元素对应的下标，第三个是参数是数组对象本身。

例一：遍历数组，判断数组是否都是偶数。

       var arr = [2, 4, 20, 9, 6, 8]
        console.log(arr);
        var flag = arr.every(function(value) {
            console.log(value);
            if (value % 2 === 0) return true;
            else return false;
        })
        console.log(flag);

运行结果：

说明：

（1）every()执行时，如果返回的值是false，则结束后续的遍历。

（2）every()执行后，不会影响原数组。

6.7、filter()

filter() 方法创建一个包含通过测试的数组元素的新数组。如果在回调函数中返回 true ，那么就留

下来，如果返回 false ，就扔掉。

语法如下：

var newArray = array . filter ( callback ( element [, index [, array ]])[, thisArg ])

参数说明：

（1）第一个参数是数组元素，必须提供；

（2）第二个参数是元素对应下标，可选；

（3）第三个参数是数组本身，可选；

（4）执行回调函数的引用对象，可选；

例一：遍历数组，将数组中工资超过5000的值帅选出来。

    var arr = [1000, 5000, 20000, 3000, 10000, 800, 1500];
    console.log(arr);
    // 遍历数组，将数组中工资超过5000的值删除。
    var new_arr = arr.filter(function (value) {
        console.log(value);
        return value >= 5000;
    });
    console.log(new_arr);

运行结果：

说明：

（1）filter()执行后，会产生一个新的数组，数组中的元素就是符合条件的元素；

（2）filter()的回调函数中，是通过true来删除元素的，如果值为false则不删除元素；

（3）filter()执行后，不会影响原来的数组。

6.8、find()

find() 方法返回数组中满足提供的测试函数的第一个元素的值，否则返回 undefined 。

语法如下：

array . find ( callback ( element [, index [, array ]])[, thisArg ])

例一：查找（返回）大于18的第一个元素的值。

    var arr = [4, 9, 16, 25, 29];
    console.log(arr);
    // 查找（返回）大于 18 的第一个元素的值。
    var r = arr.find(function (value) {
        console.log(value);
        return value > 18;
    })
    console.log(r);

运行结果：

说明：

（1）find()是从数组中查询符合条件的元素，找到后返回ture并结束查找，如果没有找到返回false。

（2）这个方法执行后，不会影响原来的数组。

（3）如果找到了则返回这个元素，如果没有找到，则返回undefined。

梦樊哥哥

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS数组方法

1、添加元素方法1.1、push()push() 方法是在数组元素的最后添加新的元素。执行成功后会返回新数组的长度。语法格式：数组名称.push(新元素); var arr = [1, 2, 3, 4, 5]; console.log(arr); // 在数组的末尾添加元素 var l = arr.push(9); console.log(l); //返回的是数组的长度 conso
复制链接

扫一扫