zoukankan      html  css  js  c++  java
  • ECMA数组原型四个常用方法(some,foreach,map,filter)讲解

    一.概述

    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
    };

  • 相关阅读:
    MySQL重置密码
    linux下自动备份脚本并上传到ftp服务器
    nginx配置
    WIFI防蹭网
    无线路由知识
    009汇编环境搭建
    008 计算机不会加法
    007计算机不会做加法
    006源码反码补码
    005有符号数和无符号数
  • 原文地址:https://www.cnblogs.com/LiSuSpAu/p/5851589.html
Copyright © 2011-2022 走看看