js中的迭代

js迭代器

1.什么是迭代器?

迭代就是重复执行一个重复的过程,每一次的迭代结果作为下一次开始的初始值,其实学过for循环,知道for循环的执行流程,就不难理解。

js中的迭代主要有every()、map()、fliter()(过滤器)some(), foreach()下面一一介绍

1every() 只有数组中的每一个数都满足才返回true,否则返回false
语法是:数组.every(function(item,index,array)
{return 条件})

//比如:判断这个数组是不是都是大于60的数
			//返回的是一个布尔值这边我定义一个b来接收一下
			//item表示每一项值,index表示下标,array是数组
			var arr = [70,58,80,89,90,20,90];
			var b = arr.every(function(item,index,array)
			{
				return item > 60;
			})
			console.log(b);//false

在这里插入图片描述

数组中并不是所有项都大于60,所以会返回fasle,如果我将所有数都改成大于60的数结果就是true

			var arr = [70,90,80,89,90,78,90];
			var b = arr.every(function(item,index,array)
			{
				return item > 60;
			})
			console.log(b);//true

在这里插入图片描述

2.map() 的作用我自己目前看到有两种
一种是对数组中的每一项进行统一的操作,做相同的操作,比如给数组中的每一项加一个10.然后返回一个新的数组
第二种就是,条件是一个判断的比如说 arr.map(function(item,index,arr){return item>60}) 或对每一项进行一个判断,并对每一项返回一个布尔值。

	var arr = [70,90,80,89,90,78,90];
	var c = arr.map(function(item,index,arr)
			{
				return item + 10;
			})
			console.log(c);

在这里插入图片描述

第二种判断数组中的满足条件情况,返回一个布尔值

var arr = [50,90,40,89,90,78,90];
var c = [];
			var c = arr.map(function(item,index,arr)
			{
				return item > 60;
			})
			console.log(c);

在这里插入图片描述

可以看到符合条件的都是true,不符合的都返回false;
用途:可以判断一个数组中满足条件的个数,和不满足的个数

filter()过滤器,其实虫这个名字也能看出来,他可以实现筛选,帅选符合条件的,再赋值给一个新的数组。

var arr = [50,90,40,89,90,78,90];
var c = arr.filter(function(item,index,arr)
			{
				return item > 60;
			})
			console.log(c);

在这里插入图片描述

some(),用法是有一个满足其概况就将返回true,一个也不满足返回false

var arr = [70,79,40,30,79];
			var s = arr.some(function(items,index,arr)
			{
				return items > 60;
			})
			console.log(s)

在这里插入图片描述

var arr = [30,50,40,30,58];
			var s = arr.some(function(items,index,arr)
			{
				return items > 60;
			})
			console.log(s)

如果所有条件都不满足就返回fasle

在这里插入图片描述
还有就是foeach(),foreach用法和for循环其实比较类似,但是,它区别于以上的几种用法,他没有返回值,(返回值为undefined),它也有三个参数foreach(function(value,index,array)) value表示是值,index表示的是数组的下标,array是数组,index和array是可以省略的。

			var arr = [80,58,80,49,70,80];
			arr.forEach(function(value,index,arr){
				console.log(value);
			})

在这里插入图片描述

### JavaScript 迭代器与生成器的关系及区别 #### 1. 定义与概念 - **迭代器** 是一种按需创建的一次性对象,它实现了 `Iterator` 接口,并且能够逐个访问关联的可迭代对象中的元素[^2]。每个迭代器都会关联一个可迭代对象,并暴露用于迭代其关联对象的 API。 - **生成器** 是一种特殊的函数,返回的是一个生成器对象(Generator),这种对象本质上是一个迭代器[^1]。生成器通过 `function*` 定义,并使用 `yield` 关键字来控制函数执行的暂停和恢复。 #### 2.迭代对象与迭代器的关系 任何实现 `Iterable` 接口的数据结构都可以被实现 `Iterator` 接口的结构“消费”。例如,数组、字符串等原生数据类型都实现了可迭代接口,调用它们的默认迭代器工厂函数会返回一个迭代器实例。以下代码展示了如何手动实现一个可迭代对象: ```javascript const iterable = { data: [10, 20, 30], [Symbol.iterator]() { let i = 0; return { next: () => ({ value: this.data[i], done: i++ >= this.data.length }) }; } }; ``` #### 3. 生成器作为迭代器的简化形式 生成器提供了一种更简洁的方式来创建迭代器。通过生成器函数,可以轻松定义一个自定义的可迭代对象。例如,下面的代码展示了如何使用生成器来实现一个简单的计数器: ```javascript function* counter() { for (let i = 0; i < 5; i++) { yield i; } } const gen = counter(); console.log(gen.next().value); // 0 console.log(gen.next().value); // 1 ``` 生成器对象不仅是一个迭代器,还可以作为一个可迭代对象直接使用在 `for...of` 循环中[^5]。 #### 4. 区别总结 | 特性 | 迭代器 | 生成器 | |------------------|-------------------------------------|---------------------------------------| | 定义方式 | 手动实现 `[Symbol.iterator]` 方法 | 使用 `function*` 定义 | | 控制流 | 需要手动管理状态 | 通过 `yield` 和 `return` 自动管理 | | 返回值 | 每次调用 `next()` 返回一个对象 | 同样返回 `{value, done}` 对象 | | 可读性 | 较低 | 较高 | #### 5. 示例代码对比 以下是使用传统迭代器和生成器分别实现相同功能的示例: **传统迭代器实现** ```javascript class Range { constructor(start, end) { this.start = start; this.end = end; } [Symbol.iterator]() { let current = this.start; const end = this.end; return { next() { if (current <= end) { return { value: current++, done: false }; } else { return { done: true }; } } }; } } for (const num of new Range(1, 3)) { console.log(num); // 输出 1, 2, 3 } ``` **生成器实现** ```javascript function* range(start, end) { for (let i = start; i <= end; i++) { yield i; } } for (const num of range(1, 3)) { console.log(num); // 输出 1, 2, 3 } ``` 生成器版本的代码更加简洁易读,同时避免了手动维护状态的复杂性。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值