首页 > 代码库 > ECMA数组原型四个常用方法讲解及其兼容解读
ECMA数组原型四个常用方法讲解及其兼容解读
一.概述
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 falsepassed = [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
};
ECMA数组原型四个常用方法讲解及其兼容解读