如何实现ES5新增数组

发布时间：2020-07-27 17:02:08 作者：小猪
来源：亿速云阅读：158

这篇文章主要讲解了如何实现ES5新增数组，内容清晰明了，对此有兴趣的小伙伴可以学习一下，相信大家阅读完之后会有帮助。

1、静态方法 isArray():

Array.isArray()
// Array.isArray方法返回一个布尔值，表示参数是否为数组。
// 它可以弥补typeof运算符的不足。
var arr = [1, 2, 3];
 console.log(typeof arr); // "object"
 Array.isArray(arr) // true
// 上面代码中，typeof运算符只能显示数组的类型是Object，
// 而Array.isArray方法可以识别数组。

2、实例（对象）方法 map()：

map方法将数组的所有成员依次传入参数函数，然后把每一次的执行结果组成一个新数组返回。

var numbers = [1, 2, 3];
var res = numbers.map(function (n) {
 return n + 1;
});
res：  // [2, 3, 4]
numbers：// [1, 2, 3]
// 上面代码中，numbers数组的所有成员依次执行参数函数，
// 运行结果组成一个新数组返回，原数组没有变化。

map方法接受一个函数作为参数。该函数调用时，map方法向它传入三个参数：当前值、当前位置和数组本身。

[1, 2, 3].map(function(elem, index, arr) {
 return elem * index;
});
// [0, 2, 6]
// 上面代码中，map方法的回调函数有三个参数，elem为当前成员的
// 值，index为当前成员的位置，arr为原数组（[1, 2, 3]）

3、forEach():

forEach方法与map方法很相似，也是对数组的所有成员依次执行参数函数。但是，forEach方法不返回值，只用来操作数据。这就是说，如果数组遍历的目的是为了得到返回值，那么使用map方法，否则使用forEach方法。
forEach的用法与map方法一致，参数是一个函数，该函数同样接受三个参数：当前值、当前位置、整个数组。

function log(elem, index, array) {
 console.log('[' + index + '] = ' + elem );
}
[2, 5, 9].forEach(log);
// [0] = 2
// [1] = 5
// [2] = 9

注意：forEach方法无法中断执行，总是会将所有成员遍历完。如果希望符合某种条件时，就中断遍历，则要使用for循环。

var arr = [1, 2, 3];
for (var i = 0; i < arr.length; i++) {
 if (arr[i] === 2) break;
 console.log(arr[i]);  // 1
}

4、filter():

filter方法用于过滤数组成员，满足条件的成员组成一个新数组返回；
它的参数是一个函数，所有数组成员依次执行该函数，返回结果为true的成员组成一个新数组返回；
该方法不会改变原数组；
filter方法的参数函数可以接受三个参数：当前成员，当前位置和整个数组。

// filter方法的参数函数可以接受三个参数：当前成员，当前位置和整个数组。
var res = [1, 2, 3, 4, 5].filter(function (elem, index, arr) {
 return index % 2 === 0;
});
console.log(res); // [1, 3, 5]
// 上面代码返回偶数位置的成员组成的新数组。

5、reduce();

reduce方法依次处理数组的每个成员，最终累计为一个值。reduce是从左到右处理（从第一个成员到最后一个成员）
reduce方法参数是一个函数,该函数接受以下两个参数。
1累积变量，默认为数组的第一个成员
2当前变量，默认为数组的第二个成员

var res = [1, 2, 3, 4, 5].reduce(function (a, b) {
 console.log(a, b);
 return a + b;
})
// 1 2
// 3 3
// 6 4
// 10 5
res//最后结果：15

上面代码中，reduce方法求出数组所有成员的和:
第一次执行，a是数组的第一个成员1，b是数组的第二个成员2；
第二次执行，a为上一轮的返回值3，b为第三个成员3；
第三次执行，a为上一轮的返回值6，b为第四个成员4；
第四次执行，a为上一轮返回值10，b为第五个成员5；
至此所有成员遍历完成，整个方法的返回值就是最后一轮的返回值15。

6、indexOf()、lastIndexOf()方法：

indexOf方法返回给定元素在数组中第一次出现的位置，返回结果是匹配开始的位置。如果没有出现则返回-1。

var a = ['a', 'b', 'c'];
a.indexOf('b'); // 1
a.indexOf('y'); // -1
// indexOf方法还可以接受第二个参数，表示搜索的开始位置。
['a', 'b', 'c'].indexOf('a', 1); // -1
// 上面代码从1号位置开始搜索字符a，结果为-1，表示没有搜索到。

lastIndexOf方法返回给定元素在数组中最后一次出现的位置，如果没有出现则返回-1;
lastIndexOf方法的用法跟indexOf方法一致，主要的区别lastIndexOf从尾部开始匹配，indexOf则是从头部开始匹配。
另外，lastIndexOf的第二个参数表示从该位置起向前匹配。

var a = [2, 5, 9, 2];
 a.lastIndexOf(2); // 3
 a.lastIndexOf(7); // -1

注意：这两个方法不能用来搜索NaN的位置，即它们无法确定数组成员是否包含NaN。如下：

[NaN].indexOf(NaN);   // -1
[NaN].lastIndexOf(NaN);// -1

这是因为这两个方法内部，使用严格相等运算符（===）进行比较，而NaN呢，就比较狠，它连自己都不等于，是唯一一个不等于自身的值！

看完上述内容，是不是对如何实现ES5新增数组有进一步的了解，如果还想学习更多内容，欢迎关注亿速云行业资讯频道。

如何实现ES5新增数组

相关阅读