JavaScript中数组的那些方法

来源：互联网发布：国密sm3算法编辑：程序博客网时间：2024/05/22 06:43

前言：最近一直在看JavaScript高级程序设计，可谓是经典中的经典，虽然看的还不多，但是收获已经不少。对于自己之前了解不够的，在这里记录一下，以便加深自己的印象，如果能够帮到其他人那当然是更好了

1、堆栈方法
对于堆栈，只要是了解过数据结构的人都很清楚，这里就不介绍具体底层怎么实现的，后面在总结数据结构的时候会对其介绍。对于堆栈，最简单的理解就是后进先出，可以想象为在一个直接和乒乓球直径一样大的密闭容器中。向里面依次放入乒乓球，如果放入的顺序是1，2，3，4。那么出来的顺序就是4，3，2，1。这种数据结构在很多地方都有应用，其中最常见的就是在我们浏览网页的时候，点击返回的时候就出现的是我们刚才浏览的界面，因为这里页面在栈顶，所以最先出来。在JavaScript中也有被已经封装好的堆栈方法

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title></head><body>    <script type="text/javascript">        var classmates = ["xiaoD","Joe","Martin"];        var count = classmates.push("Tom","Max");//入栈函数push,返回栈中的个数        console.log(count);        console.log(classmates);        var name = classmates.pop();//出栈函数pop,返回出栈的元素        console.log(name);        console.log(classmates);    </script></body></html>

2，队列方法
队列和我们平常排队时一样的道理，先进入队列的人先离开，后进入的人后离开，所以主要的特点是先进先出。不过在JavaScript中我们要注意的是进队列是先从队列前面进，出队列也是从队列前面出。而堆栈则是从后面进后面出

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title></head><body>    <script type="text/javascript">        var classmates = ["xiaoD","Joe","Martin"];        var count = classmates.unshift("Tom","Max");//入队列函数unshift,返回队列中的个数        console.log(count);        console.log(classmates);        var name = classmates.shift();//出队列函数shift,返回出队列的元素        console.log(name);        console.log(classmates);    </script></body></html>

3，排序方法
几乎在各种语言中都有排序函数，但是JavaScript中的排序函数比较特别，在进行排序的时候会先将其转化为字符串，也就是调用toString()方法。所以会出现23排在3的前面的情况。但是我们可以通过在sort函数中传递一个我们自己定义的函数，就可以解决这个问题

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title></head><body>    <script type="text/javascript">        var nums = [23, 3, 56, 12, 89, 111];        console.log(nums.sort());//结果为111,12,23,3,56,89        function compare(num1, num2) {            return num1 - num2;        }        console.log(nums.sort(compare));//结果为3,12,23,56,89,111    </script></body></html>

上面的代码如果我们想要逆序排列，最简单的方法就是修改compare函数

function compare(num1, num2) {    return num2 - num1;}

但是JavaScript中提供了另外一个逆序排列的函数reverse。但是需要注意这里reverse同样会调用toString()方法，并且reverse函数中不支持传递函数作为参数。
4，操作方法
contact主要是连接一个或者多个数组，注意这里的classmates并不会改变

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title></head><body>    <script type="text/javascript">        var classmates = ["xiaoD", "Joe", "Matin"];        var classmates2 = classmates.concat("Tom", ["a", "b"]);        console.log(classmates);        console.log(classmates2);    </script></body></html>

slice，返回当前位置到数组结尾的数据，注意这里也同样不会修改原始数组，此外对于slice中的传值也可以传入负值，那么就是从后开始计数得到当前位置。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title></head><body>    <script type="text/javascript">        var classmates = ["xiaoD", "Joe", "Matin"];        var classmates2 = classmates.slice(1);        console.log(classmates);        console.log(classmates2);    </script></body></html>

splice，这个方法相对比较复杂，主要是因为用法比较多。: 删除操作，splice(0,2)删除数组前面两项; 插入操作，splice(2, 0, “a”, “b”)在数组序号为2的后面插入a，b; 替换操作，splice(2, 1, “a”, “b”)将数组序号为1的位置后面插入a, b

5，迭代方法
在数据挖掘中最流行的就是map，reduce操作了，主要是因为分而治之的思想。
every：对数组中的每一项都进行函数操作，如果每一项都满足，那么就返回true

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title></head><body>    <script type="text/javascript">        var nums = [1, 2, 3, 4, 5, 6, 7];        //这里的三个参数只需要传入item即可，但是如果需要其他参数也可以操作        var result = nums.every(function(item, index, array){            return item > 1;        })        console.log(result);    </script></body></html>

some：对数组中的每一项都进行函数操作，如果有一项都满足，那么就返回true

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title></head><body>    <script type="text/javascript">        var nums = [1, 2, 3, 4, 5, 6, 7];        //这里的三个参数只需要传入item即可，但是如果需要其他参数也可以操作        var result = nums.some(function(item, index, array){            return item > 1;        })        console.log(result);    </script></body></html>

filter，这里就是一个过滤器的作用，最后返回的不是true或者false，而是返回过滤后的数组

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title></head><body>    <script type="text/javascript">        var nums = [1, 2, 3, 4, 5, 6, 7];        //这里的三个参数只需要传入item即可，但是如果需要其他参数也可以操作        var result = nums.filter(function(item, index, array){            return item > 4;        })        console.log(result);    </script></body></html>

map：也就是让数组中的每一项都执行函数操作，返回仍然是一个数组，并且数组中的每一项都是经过函数处理后的值

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title></head><body>    <script type="text/javascript">        var nums = [1, 2, 3, 4, 5, 6, 7];        //这里的三个参数只需要传入item即可，但是如果需要其他参数也可以操作        var result = nums.map(function(item, index, array){            return item * 2;        })        console.log(result);    </script></body></html>

6，归并方法

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title></head><body>    <script type="text/javascript">        var nums = [1, 2, 3, 4, 5, 6, 7];        //这里的四个参数只需要传入pre, cur即可，但是如果需要其他参数也可以操作        //在第一次计算的时候pre = 1, cur = 2。但是在第二次计算的时候pre = 3, cur = 4;        var result = nums.reduce(function(pre, cur, index, array){            return pre + cur;        })        console.log(result);//结果为28,也就是所有数之和    </script></body></html>

另外对于reduce函数，JavaScript中还提供了reduceRight，这里的操作主要是从后向前操作。

阅读全文

0 0