JavaScript的迭代函数与迭代函数的实现
前言
如果对技术很自信,请直接看 实现的源码
如果想回顾一下基础,请按文章顺序阅读
说到迭代方法,最先想到的是什么?forEach
还是map
,迭代的方法ES5提供了5种方法
以下定义来自 JavaScript高级程序设计
每个方法都接收两个参数
- 在每一项上运行的函数
- 运行该函数的作用域对象(影响this的值)
传入这些方法中的函数会接收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的区别是
- map中如果是运算,会返回每次函数调用的新的结果组成的数组
- 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的迭代函数与迭代函数的实现的更多相关文章
- Python 函数 切片 迭代 列表生成器
函数 编写 定义一个函数要用def语句 def sum(i,n): ⚠有冒号 返回多值 实际上是返回一个tuple 定义默认参数 默认参数的作用是简化调用 def ...
- python记录_day14 内置函数二 迭代 二分法
一.匿名函数 形式: lambda 形参:返回值 lambda表示的是匿名函数. 不需要用def来声明, 一句话就可以声明出一个函数.匿名函数不是说一定没名字,而是他们的名字统一称为“lambda”, ...
- Python学习笔记014——迭代工具函数 内置函数enumerate()
1 描述 enumerate() 函数用于将一个可遍历的数据对象(如列表.元组或字符串)组合为一个索引序列,同时列出数据和数据下标,一般用在 for 循环当中. 2 语法 enumerate(sequ ...
- Python学习笔记014——迭代工具函数 内置函数zip()
1 描述 zip() 函数用于将可迭代的对象作为参数,将对象中对应的元素打包成一个个元组,然后返回由这些元组组成的列表. 如果各个迭代器的元素个数不一致,则返回列表长度与最短的对象相同,利用 * 号操 ...
- filter(函数,可以迭代的对象)
#!/usr/bin/env python #filter(函数,可以迭代的对象) def f1(x): if x > 22: return True else: return False re ...
- Javascript数组系列三之迭代方法2
今天我们来继续 Javascript 数组系列的文章,上文 <Javascript数组系列二之迭代方法1> 我们说到一些数组的迭代方法,我们在开发项目实战的过程中熟练的使用可以大大提高我们 ...
- JavaScript高级编程——Array数组迭代(every()、filter()、foreach()、map()、some(),归并(reduce() 和reduceRight() ))
JavaScript高级编程——Array数组迭代(every().filter().foreach().map().some(),归并(reduce() 和reduceRight() )) < ...
- javascript递归、循环、迭代、遍历和枚举概念
javascript递归.循环.迭代.遍历和枚举概念 〓递归(recursion)在数学与计算机科学中,是指在函数的定义中使用函数自身的方法.递归一词还较常用于描述以自相似方法重复事物的过程.例如,当 ...
- 深入理解javascript函数定义与函数作用域
最近在学习javascript的函数,函数是javascript的一等对象,想要学好javascript,就必须深刻理解函数.本人把思路整理成文章,一是为了加深自己函数的理解,二是给读者提供学习的途径 ...
随机推荐
- 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- ...
- Week2——XML
一.什么是XML? XML是可扩展标记性语言,类似于HTML,被设计为传输和存储数据,其焦点是数据的内容.XML的标签没有被预定义,用户就需要自行定义标签,也可随意定义标签.XML 允许创作者定义自己 ...
- ubuntu16下面安装vmware tools后仍然未全屏问题
1.默认下载ubuntu16的iso镜像后,自带的有vmtools.解压 tar -xzvf VMwareTools-10.0.6-3595377.tar.gz 进入解压目录. 执行:sudo ./ ...
- bootstrap-table 分页增删改查之一(增加 删除)
先上效果图 引入js文件 <!--js jquery --> <script type="text/javascript" src="${pageCon ...
- postman trigger xdebug session in phpstorm
phpstorm是一款非常棒的php开发调试工具,一般情况下我们使用firefox/chrome的bookmark,开启phpstorm debug侦听,随后点击start debugger, 我们就 ...
- 排查在 Azure 中创建、重启 Windows VM 或调整其大小时发生的分配失败
创建 VM.重新启动已停止(解除分配)的 VM 和重设 VM 大小时,Azure 会为订阅分配计算资源. 执行这些操作时,即使尚未达到 Azure 订阅限制,也可能偶尔收到错误. 本文说明一些常见分配 ...
- socket概念 套接字
理解socket soxket因为TCP是面向流的,你发的信息如果很多很快,TCP这样就会形成黏包 Socket是应用层与TCP/IP协议族通信的中间软件抽象层,它是一组接口.在设计模式中,Socke ...
- python之路——网络基础
你现在已经学会了写python代码,假如你写了两个python文件a.py和b.py,分别去运行,你就会发现,这两个python的文件分别运行的很好.但是如果这两个程序之间想要传递一个数据,你要怎么做 ...
- [COGS 0107][NOIP 2003] 传染病控制
107. [NOIP2003] 传染病控制 ★★★ 输入文件:epidemic.in 输出文件:epidemic.out 简单对比时间限制:1 s 内存限制:128 MB [问题背景] ...
- [NOIP 2011] 聪明的质检员
聪明的质检员 描述 小 T 是一名质量监督员,最近负责检验一批矿产的质量.这批矿产共有n个矿石,从1到n逐一编号,每个矿石都有自己的重量wi以及价值vi.检验矿产的流程是:1.给定m个区间[Li,Ri ...