前言

​ 如果对技术很自信,请直接看 实现的源码

​ 如果想回顾一下基础,请按文章顺序阅读

说到迭代方法,最先想到的是什么?forEach还是map,迭代的方法ES5提供了5种方法

以下定义来自 JavaScript高级程序设计

每个方法都接收两个参数

  1. 在每一项上运行的函数
  2. 运行该函数的作用域对象(影响this的值)

传入这些方法中的函数会接收3个参数

  1. 数组项的值
  2. 该项在数组的位置
  3. 数组对象本身

迭代函数执行后可能会可能不会影响返回结果 (雾..)

ES5提供的迭代函数

  • forEach(): 对数组中的每一项运行给定函数,无返回值
  • every(): 对数组中的每一项运行给定函数,如果该函数每一项都返回true,则返回true
  • some(): 对数组中的每一项运行给定函数,如果该函数任意一项返回true,则返回true
  • map(): 对数组中的每一项运行给定函数,返回每次函数调用的结果组成的数组
  • filter(): 对数组中的每一项运行给定函数,该函数会返回true的项组成的数组

参数说明

let array = [1,2,3,4,5,6,7,8,9]
array.forEach((element,index,array) => {
console.log(`当前遍历元素${element}`);
console.log(`当前元素位置${index}`);
console.log(`数组本身${array}`);
})
> 当前遍历元素1
> 当前元素位置0
> 数组本身1,2,3,4,5,6,7,8,9
> 当前遍历元素2
> 当前元素位置1
> 数组本身1,2,3,4,5,6,7,8,9
> 当前遍历元素3
> 当前元素位置2
> 数组本身1,2,3,4,5,6,7,8,9

forEach可以说是最常用的一个迭代方法了,该方法没有返回值,与for循环的效果一样

forEach的第二个参数,js高程上说明 是运行该函数的作用域对象,可以看一下经典的例子

let obj2 = {
name: '张三',
times:[1,2,3],
print:function () {
this.times.forEach(function(res) {
console.log(this.name);
},this)
}
}
// 迭代函数内部的function默认指向windows 第二个参数调整了this指向
obj2.print()
// 张三
// 张三
// 张三

如果这么写看不太懂的话,看箭头函数的写法一下子就能明白

let obj2 = {
name: '张三',
times:[1,2,3],
print:function () {
this.times.forEach(res => {
console.log(name);
})
}
}
// 箭头函数this指向父级,所以他不需要调整this
obj2.print()
// 张三
// 张三
// 张三

every(判断函数)

对数组中的每一项运行给定函数,如果该函数每一项都返回true,则返回true

默认返回false

var array = [1,2,3,4,5,6,7,8,9]
var result = array.every(e => {})
console.log(result); //
> false

全部ture才会返回true

var array = [1,2,3,4,5,6,7,8,9]
var result = array.every(e => {
return e > 0
})
console.log(result);
> true var array = [1,2,3,4,5,6,7,8,9]
var result = array.every(e => {
return e > 1
})
console.log(result);
> false

some(判断函数)

对数组中的每一项运行给定函数,如果该函数任意一项返回true,则返回true

默认返回false

var array = [1,2,3,4,5,6,7,8,9]
var result = array.some(e => {})
console.log(result); //
> false

全部false才会返回false

var array = [1,2,3,4,5,6,7,8,9]
var result = array.some(e => {
return e > 8
})
console.log(result); var array = [1,2,3,4,5,6,7,8,9]
var result = array.some(e => {
return e > 9
})
console.log(result);
> false

以上两个都不是很常用,但是毫无疑问在特定的需求下,这个要比用forEach代码要简洁很多

filter(过滤函数)

对数组中的每一项运行给定函数,该函数会返回true的项组成的数组

var array = [1,2,3,4,5,6,7,8,9]
var result = array.filter(e => {
return e>5
})
console.log(result);
> [6, 7, 8, 9]

上面的例子,array数组里面大于5的数会被过滤出来,filter函数在日常当中比较常用

map(处理函数)

对数组中的每一项运行给定函数,返回每次函数调用的结果组成的数组

var array = [1,2,3,4,5,6,7,8,9]
var result = array.map(e => {
return e>5
})
console.log(result);
> [false, false, false, false, false, true, true, true, true] var array = [1,2,3,4,5,6,7,8,9]
var result = array.map(e => {
return e*2
})
console.log(result);
> [2, 4, 6, 8, 10, 12, 14, 16, 18]

forEach(迭代函数)

对数组中的每一项运行给定函数,无返回值

var array = [1,2,3,4,5,6,7,8,9]
var arraypush = []
var result = array.forEach(e => {
if (e > 5) {
arraypush.push(e)
}
})
console.log(arraypush);
> [6, 7, 8, 9]

最纯粹的迭代函数,似乎forEach是处理外部数组最好的选择

到这里,我想起了我第一次使用filter函数的时候,我惊呆了,这函数太强大了!

如此好用的工具函数,不自己实现一遍怎么能做到完全了解

以下函数为自己实现的,并不是源码,若有错误请指点!

实现forEach

首先明显forEach是Array上的原型链上的函数所以第一件事就是创建一个原型方法

Array.prototype.MyforEach = function (){}

forEact 第一个参数为一个匿名函数 第二个参数为this指向 所以

Array.prototype.MyforEach = function (fn,obj){}

forEach会迭代调用它的数组所以内部肯定是循环

Array.prototype.MyforEach = function (fn,obj){
let len = this.length
for (let index = 0; index < len; index++) {
fn(this[index],index,this)
}
}

但是我们还没有考虑this指向的事情,所以还需要添加一些调整this的代码

Array.prototype.MyforEach = function (fn,obj){
let len = this.length
if (obj !== 'undefined') {
fn = fn.bind(obj)
}
for (let index = 0; index < len; index++) {
fn(this[index],index,this)
}
}

运行一下试试,就用之前的例子

var array = [1,2,3,4,5,6,7,8,9]
Array.prototype.MyforEach = function (fn,obj){
let len = this.length
if (obj !== 'undefined') {
fn = fn.bind(obj)
}
for (let index = 0; index < len; index++) {
fn(this[index],index,this)
}
} var obj2 = {
name: '张三',
times:[1,2,3],
print:function () {
this.times.MyforEach(function(res) {
console.log(this.name);
},this)
}
}
obj2.print()
> 张三
> 张三
> 张三

实现map

map与forEach的区别是

  1. map中如果是运算,会返回每次函数调用的新的结果组成的数组
  2. map中如果是判断,会返回每次迭代结果组成的数组

所以只要在迭代函数内部创建一个数组,每次迭代都push进去,最后返回出去就好啦

Array.prototype.Mymap = function (fn,obj){
var resultData = []
var len = this.length
if (obj !== 'undefined') {
fn = fn.bind(obj)
}
for (let index = 0; index < len; index++) {
resultData.push(fn(this[index],index,this))
}
return resultData
}

运行一下

var array = [1,2,3,4,5,6,7,8,9,]
var result = array.Mymap(e => {
return e*2
})
console.log(result);
> [2, 4, 6, 8, 10, 12, 14, 16, 18]

实现 some every

some与every都会有一个特点 默认返回false

不同的地方在于

some要求 全部返回false返回false

every要求 全部返回true返回true

// -- every --
Array.prototype.Myevery = function (fn,obj) {
var len = this.length
if (obj !== 'undefined') {
fn = fn.bind(obj)
}
for (let index = 0; index < len; index++) {
if (fn(this[index],index,this) == undefined) { // 无返回值 默认返回false
return false
}else if (fn(this[index],index,this) !== true) { // 出现一个不为 true 就停止迭代 返回结果
return false
}
}
return true
} // -- some --
Array.prototype.Mysome = function (fn,obj) {
var len = this.length
if (obj !== 'undefined') {
fn = fn.bind(obj)
}
for (let index = 0; index < len; index++) {
if (fn(this[index],index,this) == undefined) {
return false
} else if (fn(this[index],index,this) !== false) {
return true
}
}
return false
}

实现fliter

相信到这里,你也可以直接实现一个fliter函数了,仅仅是多添加一个数组

Array.prototype.Myfilter = function (fn, obj) {
let resultData = []
var len = this.length
if (obj !== 'undefined') {
fn = fn.bind(obj)
}
for (let index = 0; index < len; index++) {
if (fn(this[index],index,this) === true) {
resultData.push(this[index]) // 注意不是push函数结果
}
}
return resultData
} // -- 运行 -- var array = [1,2,3,4,5,6,7,8,9]
var result = array.Myfilter(e => {
return e>5
})
console.log(result);
>  [6, 7, 8, 9]

perfect!​

JavaScript的迭代函数与迭代函数的实现的更多相关文章

  1. Python 函数 切片 迭代 列表生成器

    函数 编写     定义一个函数要用def语句    def sum(i,n):   ⚠有冒号 返回多值     实际上是返回一个tuple 定义默认参数    默认参数的作用是简化调用   def ...

  2. python记录_day14 内置函数二 迭代 二分法

    一.匿名函数 形式: lambda 形参:返回值 lambda表示的是匿名函数. 不需要用def来声明, 一句话就可以声明出一个函数.匿名函数不是说一定没名字,而是他们的名字统一称为“lambda”, ...

  3. Python学习笔记014——迭代工具函数 内置函数enumerate()

    1 描述 enumerate() 函数用于将一个可遍历的数据对象(如列表.元组或字符串)组合为一个索引序列,同时列出数据和数据下标,一般用在 for 循环当中. 2 语法 enumerate(sequ ...

  4. Python学习笔记014——迭代工具函数 内置函数zip()

    1 描述 zip() 函数用于将可迭代的对象作为参数,将对象中对应的元素打包成一个个元组,然后返回由这些元组组成的列表. 如果各个迭代器的元素个数不一致,则返回列表长度与最短的对象相同,利用 * 号操 ...

  5. filter(函数,可以迭代的对象)

    #!/usr/bin/env python #filter(函数,可以迭代的对象) def f1(x): if x > 22: return True else: return False re ...

  6. Javascript数组系列三之迭代方法2

    今天我们来继续 Javascript 数组系列的文章,上文 <Javascript数组系列二之迭代方法1> 我们说到一些数组的迭代方法,我们在开发项目实战的过程中熟练的使用可以大大提高我们 ...

  7. JavaScript高级编程——Array数组迭代(every()、filter()、foreach()、map()、some(),归并(reduce() 和reduceRight() ))

    JavaScript高级编程——Array数组迭代(every().filter().foreach().map().some(),归并(reduce() 和reduceRight() )) < ...

  8. javascript递归、循环、迭代、遍历和枚举概念

    javascript递归.循环.迭代.遍历和枚举概念 〓递归(recursion)在数学与计算机科学中,是指在函数的定义中使用函数自身的方法.递归一词还较常用于描述以自相似方法重复事物的过程.例如,当 ...

  9. 深入理解javascript函数定义与函数作用域

    最近在学习javascript的函数,函数是javascript的一等对象,想要学好javascript,就必须深刻理解函数.本人把思路整理成文章,一是为了加深自己函数的理解,二是给读者提供学习的途径 ...

随机推荐

  1. JS 根据子网掩码,网关计算出所有的IP范围

    // 验证IP的正则 var ip_reg = /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0- ...

  2. Week2——XML

    一.什么是XML? XML是可扩展标记性语言,类似于HTML,被设计为传输和存储数据,其焦点是数据的内容.XML的标签没有被预定义,用户就需要自行定义标签,也可随意定义标签.XML 允许创作者定义自己 ...

  3. ubuntu16下面安装vmware tools后仍然未全屏问题

    1.默认下载ubuntu16的iso镜像后,自带的有vmtools.解压 tar -xzvf  VMwareTools-10.0.6-3595377.tar.gz 进入解压目录. 执行:sudo ./ ...

  4. bootstrap-table 分页增删改查之一(增加 删除)

    先上效果图 引入js文件 <!--js jquery --> <script type="text/javascript" src="${pageCon ...

  5. postman trigger xdebug session in phpstorm

    phpstorm是一款非常棒的php开发调试工具,一般情况下我们使用firefox/chrome的bookmark,开启phpstorm debug侦听,随后点击start debugger, 我们就 ...

  6. 排查在 Azure 中创建、重启 Windows VM 或调整其大小时发生的分配失败

    创建 VM.重新启动已停止(解除分配)的 VM 和重设 VM 大小时,Azure 会为订阅分配计算资源. 执行这些操作时,即使尚未达到 Azure 订阅限制,也可能偶尔收到错误. 本文说明一些常见分配 ...

  7. socket概念 套接字

    理解socket soxket因为TCP是面向流的,你发的信息如果很多很快,TCP这样就会形成黏包 Socket是应用层与TCP/IP协议族通信的中间软件抽象层,它是一组接口.在设计模式中,Socke ...

  8. python之路——网络基础

    你现在已经学会了写python代码,假如你写了两个python文件a.py和b.py,分别去运行,你就会发现,这两个python的文件分别运行的很好.但是如果这两个程序之间想要传递一个数据,你要怎么做 ...

  9. [COGS 0107][NOIP 2003] 传染病控制

    107. [NOIP2003] 传染病控制 ★★★   输入文件:epidemic.in   输出文件:epidemic.out   简单对比时间限制:1 s   内存限制:128 MB [问题背景] ...

  10. [NOIP 2011] 聪明的质检员

    聪明的质检员 描述 小 T 是一名质量监督员,最近负责检验一批矿产的质量.这批矿产共有n个矿石,从1到n逐一编号,每个矿石都有自己的重量wi以及价值vi.检验矿产的流程是:1.给定m个区间[Li,Ri ...