JS中some(),every(),forEach(),map(),filter()区别

CoderBear 发布于2019-08-23 14:05 / 1417人阅读

摘要：在中为新增了几个方法，，，，，也就是一共有这么多方法了。刚开始接触这些倒也记得不是很清楚，在此纪录一下以加深影响。我主要从两个角度来理解和记忆吧，一个是的使用，一个是内部实现。

JS在1.6中为Array新增了几个方法map()，filter()，some()，every()，forEach()，也就是一共有这么多方法了。

刚开始接触这些倒也记得不是很清楚，在此纪录一下以加深影响。我主要从两个角度来理解和记忆吧，一个是API的使用，一个是内部实现。

函数简述

map():返回一个新的Array，每个元素为调用func的结果

filter():返回一个符合func条件的元素数组

some():返回一个boolean，判断是否有元素是否符合func条件

every():返回一个boolean，判断每个元素是否符合func条件

forEach():没有返回值，只是针对每个元素调用func

function my_func(item) {
  if (item == 1) {
    console.log("t");
    return true;
  }
  console.log("f");
  return false;
}

// init an array
l = [0,1,2,3,4]

// print: f,t,f,f,f
// return:[false, true, false, false, false]
l.map(my_func)


// print: f,t,f,f,f
// return: 1
l.filter(my_func)

// print: f,t
// return: true
l.some(my_func)

// print: f
// return: false
l.every(my_func)

// print: f,t,f,f,f
//return: undefined
l.forEach(my_func)
内部实现

// From：http://developer.mozilla.org

Array.prototype.map = function(fun /*, thisp*/)
{
  var len = this.length;
  if (typeof fun != "function")
    throw new TypeError();

  var res = new Array(len);
  var thisp = arguments[1];
  for (var i = 0; i < len; i++)
  {
    if (i in this)
      res[i] = fun.call(thisp, this[i], i, this);
  }

  return res;
};

Array.prototype.filter = function(fun /*, thisp*/)
{
  var len = this.length;
  if (typeof fun != "function")
    throw new TypeError();

  var res = new Array();
  var thisp = arguments[1];
  for (var i = 0; i < len; i++)
  {
    if (i in this)
    {
      var val = this[i]; // in case fun mutates this
      if (fun.call(thisp, val, i, this))
        res.push(val);
    }
  }

  return res;
};

Array.prototype.some = function(fun /*, thisp*/)
{
  var len = this.length;
  if (typeof fun != "function")
    throw new TypeError();

  var thisp = arguments[1];
  for (var i = 0; i < len; i++)
  {
    if (i in this && fun.call(thisp, this[i], i, this))
      return true;
  }

  return false;
};

Array.prototype.every = function(fun /*, thisp*/)
{
  var len = this.length;
  if (typeof fun != "function")
    throw new TypeError();

  var thisp = arguments[1];
  for (var i = 0; i < len; i++)
  {
    if (i in this && !fun.call(thisp, this[i], i, this))
    return false;
  }

  return true;
};

Array.prototype.forEach = function(fun /*, thisp*/)
{
  var len = this.length;
  if (typeof fun != "function")
    throw new TypeError();

  var thisp = arguments[1];
  for (var i = 0; i < len; i++)
  {
    if (i in this)
      fun.call(thisp, this[i], i, this);
  }
};

参考文献https://blog.csdn.net/github_...

私有云 idc机房托管 js取map中数据 js中取出map的值 matlab中filter函数 js获取foreach数据

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/100073.html

JS 数组循环遍历方法的对比

摘要：循环方法方法不改变原数组方法会给原数组中的每个元素都按顺序调用一次函数。筛选出过滤出数组中符合条件的项组成新数组代码方法方法为数组中的每个元素执行一次函数，直到它找到一个使返回表示可转换为布尔值的值的元素。 showImg(https://segmentfault.com/img/bV2QTD?w=1600&h=500); 前言 JavaScript 发展至今已经发展出多种数组的循环遍...

BlackFlagBin 2019-08-26 11:31 评论0 收藏0
生动形象解释forEach、filter、map、some、every、find、findIndex

摘要：前言从最开始学的循环遍历方法，到后来层出不穷的各种遍历方法，其实最大的区别就是应用场景的不同。我们最需要记住的就是，什么情况下用哪一种方法比较合适。前言从最开始学的for循环遍历方法，到后来层出不穷的各种遍历方法，其实最大的区别就是应用场景的不同。我们最需要记住的就是，什么情况下用哪一种方法比较合适。从挑土豆开始 showImg(https://segmentfault.com/...

Luosunce 2019-08-23 16:51 评论0 收藏0
细说数组常用遍历的方法

摘要：需要返回值，如果不给，默认返回使用场景假定有一个数值数组将数组中的值以双倍的形式放到数组写法方法使用场景假定有一个对象数组将数中对象某个属性的值存储到数组中三从数组中找出所有符合指定条件的元素检测数值元素，并返回符合条件所有元素的数组。 showImg(https://segmentfault.com/img/remote/1460000016810336?w=1149&h=524);...

阿罗 2019-08-29 17:05 评论0 收藏0
细说数组常用遍历的方法

摘要：需要返回值，如果不给，默认返回使用场景假定有一个数值数组将数组中的值以双倍的形式放到数组写法方法使用场景假定有一个对象数组将数中对象某个属性的值存储到数组中三从数组中找出所有符合指定条件的元素检测数值元素，并返回符合条件所有元素的数组。 showImg(https://segmentfault.com/img/remote/1460000016810336?w=1149&h=524);...

AlphaWatch 2019-08-02 11:48 评论0 收藏0
细说数组常用遍历的方法

摘要：需要返回值，如果不给，默认返回使用场景假定有一个数值数组将数组中的值以双倍的形式放到数组写法方法使用场景假定有一个对象数组将数中对象某个属性的值存储到数组中三从数组中找出所有符合指定条件的元素检测数值元素，并返回符合条件所有元素的数组。 showImg(https://segmentfault.com/img/remote/1460000016810336?w=1149&h=524);...

?xiaoxiao, 2019-08-23 12:32 评论0 收藏0