ECMA数组原型四个常用方法讲解及其兼容解读

Posted 2020-08-07 明阳春秋

一.概述

Array.prototype.some   　　　　　　　　 方法测试数组中的某些元素是否通过了指定函数的测试。            　　　　　　　　　　通过返回true否则false  

Array.prototype.forEach          　　　　　方法让数组的每一项都执行一次给定的函数。                             　　　　　　　　　   无返回

Array.prototype.map   　　　　　　　　　原数组中的每个元素调用一个指定方法后的返回值组成的新数组。　　　　　　　　　　返回一个新数组和原数组长度一样

Array.prototype.filter       　　　　　　　　用指定的函数测试所有元素，并创建一个包含所有通过测试的元素的新数组。　　　　  返回新数组返回通过测试的元素

二.语法

var array = []

array.map(callback[, thisArg]);

function callback(currentValue,index，array){}

三.参数

callback原数组中的元素经过该方法后返回一个新的元素。

currentValue

callback 的第一个参数，数组中当前被传递的元素。

index

callback 的第二个参数，数组中当前被传递的元素的索引。

array

callback 的第三个参数，调用 map 方法的数组。

thisArg执行 callback 函数时 this 指向的对象。

四.用法

1.some用法

查找一个数组是否有大于10的元素 ，查找到立即终止，所以循环次数较少

function isBigEnough(element, index, array) {
  return (element >= 10);
}
var passed = [2, 5, 8, 1, 4].some(isBigEnough);
// passed is false
passed = [12, 5, 8, 1, 4].some(isBigEnough);
// passed is true

 

2.foreach用法

下面的代码会为每一个数组元素输出一行记录：

　　function logArrayElements(element, index, array) {
 　　   console.log("a[" + index + "] = " + element);
　　}
　　[2, 5, 9].forEach(logArrayElements);
　　// logs:
　　// a[0] = 2
　　// a[1] = 5
　　// a[2] = 9

3.map方法

下面的代码将一个数组中的所有单词转换成对应的复数形式.

function fuzzyPlural(single) {
  var result = single.replace(/o/g, ‘e‘);  
  if( single === ‘kangaroo‘){
    result += ‘se‘;
  }
  return result; 
}

var words = ["foot", "goose", "moose", "kangaroo"];
console.log(words.map(fuzzyPlural));

// ["feet", "geese", "meese", "kangareese"]

4.filter方法

下例使用 filter 创建了一个新数组，该数组的元素由原数组中值大于 10 的元素组成。

function isBigEnough(element) {
  return element >= 10;
}
var filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
// filtered is [12, 130, 44]

五.兼容性及其处理方法解读

　　别的不多说了 ie9一下不能用的          哈哈

那我们只有给他添加方法了，老外写的如此精简不得不佩服。让我为大家解读第一个吧  

需要知识     call用法 in用法       

1.some方法

if (!Array.prototype.some) Array.prototype.some = function (i, m) {                            / /如果原型上不存在some方法则添加some方法     并且some接收俩个参数
var f = this.length;　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　  //因为是数组实例调用 ，所以这里的f为调用他的数组长度
if ("function" != typeof i) throw new T·ypeError;　　　　　　　　　　　　　　　　　　　//把i的参数限定为函数,也就是所谓的回调函数，否则报错
for (var j = 0; j < f; j++) if (j in this && i.call(m, this[j], j, this)) return !0;　　　　　　//j为下标j in this是测试数组在该下标下是否有值 执行下一回合循环      

return !1;　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　//如果有对应值，&&左边为真了，可以执行右边了，将回调方法用m调用　　　　　　
};　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　//并传递三个参数   this[j]就是当前元素，j就是下标，this就是数组  　　　　

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　//若内部是假则在执行下轮循环，直到结束返回假没找到，若又一次i方法返回真，则some返回真找到了　　　　　　　　　　

2.forEach方法

if (!Array.prototype.forEach) Array.prototype.forEach = function (i, m) {
var f = this.length;
if ("function" != typeof i) throw new TypeError;
for (var j = 0; j < f; j++) j in this && i.call(m, this[j], j, this)
};
3.map方法
if (!Array.prototype.map) Array.prototype.map = function (i, m) {
var f = this.length;
if ("function" != typeof i) throw new TypeError;
for (var j = Array(f), n = 0; n < f; n++) n in this && (j[n] = i.call(m, this[n], n, this));
return j
};
4.filler方法
if (!Array.prototype.filter) Array.prototype.filter = function (i, m) {
var f = this.length;
if ("function" != typeof i) throw new TypeError;
for (var j = [], n = 0; n < f; n++) if (n in this) {
var u = this[n];
i.call(m, u, n, this) && j.push(u)
}
return j
};