es5

最新推荐文章于 2024-09-10 22:32:32 发布

zb0002011

最新推荐文章于 2024-09-10 22:32:32 发布

阅读量149

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/zb0002011/article/details/103850729

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

一、前言

ES5中新增的一些处理数组（Array）的方法，对于用JavaScript处理数据非常有用。我总结了一下，给这些方法分了类，大体如下：

2个索引方法：indexOf() 和 lastIndexOf()；

5个迭代方法：forEach()、map()、filter()、some()、every()；

2个归并方法：reduce()、reduceRight()；

reverse 数组逆转

splice 从第几位开始，截取长度，在切口处添加新的数据

sort 数组排序

二、索引方法

索引方法包含indexOf()和lastIndexOf()两个方法，这两个方法都接收两个参数，第一个参数是要查找的项，第二个参数是查找起点位置的索引，该参数可选，如果缺省或是格式不正确，那么默认为0。两个方法都返回查找项在数组中的位置，如果没有找到，那么返回-1。区别就是一个从前往后找，一个从后往前找。

让我们来看一个具体列子吧，首先定义一个数组：

var dataArray = [1, 7, 5, 7, 1, 3];

indexOf()：该方法从数组的开头开始向后查找。

console.log(dataArray.indexOf(7));              // 1     缺省, 从第一项开始查找
console.log(dataArray.indexOf(7, 's'));         // 1     格式不正确, 从第一项开始查找
console.log(dataArray.indexOf(7, 2));           // 3　　　从第三个项之后开始查找
console.log(dataArray.indexOf (2));             // -1    未找到, 返回-1

lastIndexOf()：该方法从数组的末尾开始向前查找。

console.log(dataArray.lastIndexOf (7));       // 3     缺省, 从末尾第一项开始查找
console.log(dataArray.lastIndexOf (7, 's'));  // 3     格式不正确, 从末尾第一项开始查找
console.log(dataArray.lastIndexOf (7, 2));    // 1 　　从末尾第三项往前查找
console.log(dataArray.lastIndexOf ('4'));     // -1    未找到, 返回-1

值得注意的是，在比较第一个参数与数组中的每一项时，会使用全等操作符，要求必须完全相等,否则返回-1。

console.log(dataArray .lastIndexOf ('7'));   // -1，因为这里是字符串，并不是数值类型

三、迭代方法

迭代方法包含some()、every()、filter()、map()和forEach()五个方法，这些方法都接收两个参数，第一个参数是一个函数，他接收三个参数，数组当前项的值、当前项在数组中的索引、数组对象本身。第二个参数是执行第一个函数参数的作用域对象，也就是上面说的函数中this所指向的值。注意，这几种方法都不会改变原数组。

every()和some()方法有些类似，我们放在一起比较。

every()：该方法对数组中的每一项运行给定函数，如果该函数对每一项都返回 true，则返回true。

some()：该方法对数组中的每一项运行给定函数，如果该函数对任何一项返回 true，则返回true。

感觉有点绕，我们来对着例子讲一讲。

首先我们来看一下every方法，数组中的每一项都会执行给定的函数，如果数组中每一项执行该函数都返回true，那么我们结果返回true，否则返回false。

下面例子中，当我们设置item > 1时，第一项和第五项不符合，所以最终结果返回false。

下面例子中，当我们设置item > 0时，所有项都符合，那么我们最终结果为true。

接下来我们来看some方法，数组中的每一项都会执行给定的函数，只要有一项为true，那么结果结果为true。

下面这个例子，当我们设置item > 5时，第二项就符合，我们直接返回true。

而且值得注意的是，some方法会在数组中任一项执行函数返回true之后，不在进行循环。

下面例子中，我们设置item > 5,当数组中第二项7大于5时，停止循环，直接返回结果。

filter() ：该方法对数组中的每一项运行给定函数，返回该函数会返回 true 的项组成的数组。利用这个方法可对数组元素进行过滤筛选。

我们来看下面的例子，当我们设置item > 3时，数组中2、3、4像返回组成了一个新数组。

而且我们可以看出，当我们分别设置item > 3和item > '3'时, 返回的结果是一样的，由此我们可以看出函数支持弱等于（==），不是必须全等于（===）。

和filter() 方法类似，jquery中有个grep()方法也用于数组元素过滤筛选。

下面例子中，当我们设置item > 3时，返回的数组和我们用filter方法是一样的。

grep(array, function[, invert])方法，还有一个特性，当invert缺省或是为false，和filter方法一样，正常过滤出符合条件的数组元素，当invert值为true，正好相反，他会过滤出函数返回值为false的数组元素。

我们来看下面的例子，当设置了invert参数为true之后，函数返回如下过滤后的数组。

map(): 该方法对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组。

我们来看下面的例子，我们为数组中的每一项乘以3，返回每一项相乘之后的数组。

我们接下来定义一个航班数组，每次返回该数组元素的航空公司，组成新数组。

forEach(): 该方法对数组中的每一项运行给定函数。这个方法没有返回值。这个方法其实就是遍历循环，和for循环没有太大差别。jquery()也提供了相应的方法each()方法。

下面的例子我们依次进行for循环、forEach方法、each方法的调用，最终执行结果相同。

四、归并方法

归并方法包含reduce()和reduceRight()两个方法，这两个方法都会迭代数组中的所有项，然后生成一个最终返回值。他们都接收两个参数，第一个参数是每一项调用的函数，函数接受是个参数分别是初始值，当前值，索引值，和当前数组，函数需要返回一个值，这个值会在下一次迭代中作为初始值。第二个参数是迭代初始值，参数可选，如果缺省，初始值为数组第一项，从数组第一个项开始叠加，缺省参数要比正常传值少一次运算。

reduce()：该方法从数组的第一项开始，逐个遍历到最后一项。

这个方法比较复杂，我们来看一个例子

代码如下：

具体看这个代码，首先我们在传入reduce的函数中打印了prev值，可以看到prev就是数组每两项的和。比如第一个是1，第二个就是1+7 = 8，以此类推。

最后，我们把结果返回给了sum，那sum自然就是数组的每一项之和。这是没设置第二个参数的情况。

下面我们来看看设置了第二个参数为2的例子。

我们可以看出，当设置了第二个参数。我们第一个prev输出的结果就是第二个参数的值。设置了这个参数，会多执行一次。

利用这种方法，我们可以快速的把二维数组转化为一维数组。

顾名思义，reduceRight()就是从右到左，就不详细说了。

五数组元素排序 reverse( )

reverse() //翻转数组
例:

var arr1 = [1,2,3,4,5];
var aaa = arr1.reverse(); // [5,4,3,2,1]

六数组.join(参数)

数组.join(参数); // 数组中的元素可以按照参数进行链接变成一个字符串;

console.log(arr.join()); //和toString()一样用逗号链接

七排序sort( )

sort()// 数组中元素排序;(默认：从小到大)
默认：按照首个字符的Unicode编码排序;如果第一个相同那么就比较第二个
例：

var arr = [4,5,1,3,2,7,6];
var aaa =arr.sort();
console.log(aaa);     // [1, 2, 3, 4, 5, 6, 7]
console.log(aaa === arr);// true 原数组被排序了(冒泡排序)

默认还可以排列字母;

 var arr2 = ["c","e","d","a","b"];
 var bbb = arr2.sort();
 console.log(bbb);     // ["a", "b", "c", "d", "e"]
 console.log(bbb===arr2); // true 原数组被排序了(冒泡排序)

sort()//数值大小排序方法,需要借助回调函数;
例：

 var arr = [4,5,1,13,2,7,6];
 //回调函数里面返回值如果是：参数1-参数2;升幂；  参数2-参数1;降幂；
 arr.sort(function (a,b) {
  return a-b; //升序
  //return b-a; //降序
  //return b.value-a.value; //按照元素value属性的大小排序;
 });
 console.log(arr); // [1, 2, 4, 5, 6, 7, 13]