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

Posted 明阳春秋

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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 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
};

以上是关于ECMA数组原型四个常用方法讲解及其兼容解读的主要内容,如果未能解决你的问题,请参考以下文章

二分查找算法讲解及其C++代码实现

浅析jQuery库的核心架构和常用API的简单实现

进阶 6-3 期Array 原型方法源码实现大解密

进阶 6-3 期Array 原型方法源码实现大解密

15Java常用类(数组工具类Arrays)基本类型包装类(Integer类)正则表达式String的split(String regex)和replaceAll(String regex, (代码片

JS Array中的常用方法