当前位置： 首页 > news >正文

Symbol()和迭代器生成器

news 2025/7/8 18:32:10

目录

1、Symbol（）

2、迭代器生成器

执行流程

模拟生成器函数

for  of 遍历迭代选择器

yield  *

Generator函数应用

1、Symbol（）

Symbol表示独一无二的值

   const s1 = Symbol('a')const s2 = Symbol('a')console.log(s1 === s2) // falseconsole.log(typeof s1) // 'symbol'

应用场景-产生独一无二的值

 let symbol=Symbol()o[symbol]=100console.log(o)//{a: 20, b: 30, c: 40, Symbol(): 100}

2、迭代器生成器

Generator是一个特殊的函数，执行它会返回一个lterator对象。通过遍历迭代器, Generator函数运行后会返回一个遍历器对象，而不是普通函数的返回值。

 普通函数一旦执行 函数体从上往下依次执行

   function f(){console.log(1)//1console.log(2)//2console.log(3)//3}f()

生成器函数(generator)----生成迭代器(Iterator)的函数,配合yield关键字来控制代码执行流程

next(参数) 赋值给上一次yield

yield后面的表达式作为本次next返回值的value属性值

it.next()  执行下一步

   function* go(str){// console.log(1)let a=yield str// console.log(2)let b=yield a// console.log(3)return b}const it=go('hello')// it拿到生成器函数返回值console.log(it)//go {<suspended>}const r1=it.next(1)console.log(r1)//{value: 'hello', done: false}const r2=it.next(2)console.log(r2)//{value: 2, done: false}const r3=it.next(3)console.log(r3)//{value: 3, done: true}

执行流程

  function* test(num){let x=3*(yield num+1)let y=yield x/3return x+y+num}let n=test(3)console.log(n.next())//{value: 4, done: false}console.log(n.next(5))//{value: 5, done: false}console.log(n.next(8))//{value: 26, done: true}/* test(3) 拿到迭代器，3传给num第一次 n.next() ，函数开始执行，遇到第一个yield停下来，把yield后面的表达式值作为next方法的返回值中value属性值第二次 n.next(5) 函数继续执行，5赋值给上一次yield整体, x =  3 *  5,又遇见yield  5 ，把yield后面的表达式值作为next方法的返回值中value属性值第三次 n.next(8) 函数继续执行 8赋值给上一次yield整体，y = 8 ,返回15+8 + 3 ,函数执行完毕，把返回值赋值给next方法的返回值中value属性值*/

模拟生成器函数

   //模拟生成器函数function buy(books) {let i = 0return {next() {let done = i === books.length ? true : falselet value = done ? undefined: books[i++]return {value,done,}},}}// function* buy(books){//     // yield books[0]//     // yield books[1]//     for(let i=0;i<books.length;i++){//         yield books[i]//     }// }const it = buy(['js', 'vue'])console.log(it.next())//{value: 'js', done: false}console.log(it.next())//{value: 'vue', done: false}console.log(it.next())//{value: undefined, done: true}

for  of 遍历迭代选择器

<script>function* demo(){yield 1yield 2yield 3yield 4}const it =demo()for(let k of it){console.log(k)//1,1,3,4}</script>

yield  *

yield  *可以在Generator函数内部调用一个Generator函数
 

   <script>function* test() {yield 'a ';yield 'b ';}function* test1() {yield 'x ';yield* test();yield 'y'}for (let v of test1()) {console.log(v);}
//相当于// function* test() {//     yield 'a ';//     yield 'b ';// }// function* test1() {//     yield 'x ';//     for (let v of test()) {//         console.log(v);//     }//     yield 'y ';// }// for (let v of test1()) {//     console.log(v);// }</script>

Generator函数应用

需求：实现点击一下切换图片，两张图片来回切换

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>img{width: 200px;height: 200px;}</style>
</head>
<body><img src="./1.jpg" alt=""><button>切换</button><script>const Img=document.querySelector('img')const btn=document.querySelector('button')//以前的方法// let flag=true// btn.addEventListener('click',function(){//     if(flag){//         Img.src='./1.jpg'//         flag=false//     }else{//         Img.src='./2.jpg'//         flag=true//     }// })//generator应用function* change(){while(true){//来回切换是一个死循环yield ( Img.src='./1.jpg')yield ( Img.src='./2.jpg')}}const it=change()btn.addEventListener('click',function(){it.next()})</script>
</body>
</html>

相关文章：

Symbol()和迭代器生成器

目录 1、Symbol&#xff08;&#xff09; 2、迭代器生成器 执行流程 模拟生成器函数 for of 遍历迭代选择器 yield * Generator函数应用 1、Symbol&#xff08;&#xff09; Symbol表示独一无二的值 const s1 Symbol(a)const s2 Symbol(a)console.log(s1 s2) // fa…...

编程日记 2023/12/2 9:47:43

USB Type-C的基本原理

1 USB Type-C的基本原理 1.1 基本特性 Figure 1-1 USB Type-C接头外形 USB Type-C&#xff08;简称USB-C&#xff09;的基本特性&#xff1a; 1. 接口插座的尺寸与原来的Micro-USB规格一样小&#xff0c;约为8.3mm X 2.5mm 2. 可承受1万次反复插拔 3. 支持正反均可插入的“正反…...

编程日记 2023/12/2 9:45:42

HarmonyOS开发(八)：动画及网络

1、动画概述 在ArkUI中&#xff0c;产生动画的方式是改变组件属性值并且指定相关的动画参数。当属性值发生变化后&#xff0c;按照动画参数&#xff0c;从原来的状态过渡到新的状态&#xff0c;就形成一个动画。 动画的相关参数如下&#xff1a; 属性名称 属性类型 默认值 …...

编程日记 2023/12/2 9:43:40

Pinctrl子系统和GPIO子系统

Pinctrl子系统&#xff1a; 借助Princtr子系统来设置一个Pin的复用和电气属性&#xff1b; pinctrl子系统主要做的工作是&#xff1a;1. 获取设备树中的PIN信息&#xff1b;2.根据获取到的pin信息来设置的Pin的复用功能&#xff1b;3.根据获取到的pin信息去设置pin的电气特性…...

编程日记 2023/12/2 9:42:39

Unittest单元测试框架之unittest构建测试套件

构建测试套件 在实际项目中&#xff0c;随着项目进度的开展&#xff0c;测试类会越来越多&#xff0c;可是直到现在我 们还只会一个一个的单独运行测试类&#xff0c;这在实际项目实践中肯定是不可行的&#xff0c;在 unittest中可以通过测试套件来解决该问题。 测试套件&…...

编程日记 2023/12/2 9:41:38

Django回顾4

一.过滤器 1.过滤器格式 {{变量|过滤器名字}} 2.怎么使用 1.注册app 2.在app下创建templatetags模块&#xff08;模块名只能是templatetags&#xff09; 3.在包下写一个py文件&#xff0c;随便命名 4.在py文件中写入&#xff1a;from django import template …...

编程日记 2023/12/2 9:40:37

Apache APISIX 体验指南

APISIX 体验指南 所有的 sh 脚本通过 git bash 执行。 出现错误仔细核对文档。 github 地址&#xff1a; 使用 docker 安装 apisix 确保本地安装 Docker 和 Docker-compose 如未安装参开以下文档安装&#xff1a; Docker&#xff1a;https://docs.docker.com/engine/install/c…...

编程日记 2023/12/2 9:36:32

Promise的resolve和reject方法（手写题）

1.resolve 2.reject 3.手写 1.resolve //构造函数上添加 resolve 方法 Promise.resolve function (value) {return new Promise((resolve, reject) > {if (value instanceof Promise) {value.then((val) > {resolve(val)},(err) > {reject(err)})} else {resolve(v…...

编程日记 2023/12/2 9:35:31

关于wiki的Unlink攻击理解--附例题BUUCTF-hitcontraining_bamboobox1

堆机制我研究了很久&#xff0c;一直没有什么很大的进展。堆相较于栈难度大的多。利用手法也多。目前还没有怎么做过堆题。这次就把理解了很久的Unlink写一写。然后找一题实践一下。 在glibc中&#xff0c;堆管理都是用一个个chunk去组织的。这个就不过多阐述。Unlink是glibc一…...

编程日记 2023/12/2 9:34:30

【linux】日志有哪些

Linux系统日志主要有以下几种类型&#xff1a; 内核及系统日志&#xff1a;这种日志数据由系统服务rsyslog统一管理&#xff0c;根据其主配置文件/etc/rsyslog.conf中设置决定内核消息及各种系统程序消息记录到什么位置。/var/log/message&#xff1a;该日志文件存放了内核消息…...

编程日记 2023/12/2 9:33:29

Redis主从复制实现RCE

文章目录 前置知识概念redis常用命令redis module 利用条件利用工具思路例题 [网鼎杯 2020 玄武组]SSRFMe总结 前置知识 概念 背景是多台服务器要保存同一份数据&#xff0c;如何实现其一致性呢&#xff1f;数据的读写操作是否每台服务器都可以处理&#xff1f;这里Redis就提供…...

编程日记 2023/12/2 9:23:20

Flutter应用程序的加固原理

在移动应用开发中&#xff0c;Flutter已经成为一种非常流行的技术选项&#xff0c;可以同时在Android和iOS平台上构建高性能、高质量的移动应用程序。但是&#xff0c;由于其跨平台特性&#xff0c;Flutter应用程序也面临着一些安全风险&#xff0c;例如反编译、代码泄露、数据…...

编程日记 2023/12/2 9:20:17

Centos7部署NFS

搭建NFS存储服务器--基于CentOS7系统 - jianmuzi - 博客园 在CentOS中搭建NFS - 陌上荼靡 - 博客园 NFS简介 NFS 是 Network FileSystem 的缩写&#xff0c;顾名思义就是网络文件存储系统&#xff0c;它最早是由 Sun 公司发展出来的&#xff0c;也是 FreeBSD 支持的文件系统…...

编程日记 2023/12/2 9:18:15

我已经开了一个融资融券的账户了，还可以再在别的券商开两融（信用账户）吗？

融资融券交易又称“证券信用交易”或保证金交易&#xff0c;是指投资者向具有融资融券业务资格的证券公司提供担保物&#xff0c;借入资金买入证券&#xff08;融资交易&#xff09;或借入证券并卖出&#xff08;融券交易&#xff09;的行为。 简单说就是融资做多&#xff0c;…...

编程日记 2023/12/2 9:14:12

Spring Cloud 版本升级记：OpenFeignClient与Gateway的爱恨交织

Spring Cloud 版本升级记&#xff1a;OpenFeignClient与Gateway的爱恨交织 近日&#xff0c;在负责的项目中&#xff0c;我对 Spring Boot、Spring Cloud 以及 Spring Cloud Alibaba 进行了版本升级。原以为会一切顺利&#xff0c;没想到却遭遇了 Spring Cloud Gateway 无法正…...

编程日记 2023/12/2 9:09:08

华为OD机试 - 最多购买宝石数目（Java JS Python C）

题目描述 橱窗里有一排宝石，不同的宝石对应不同的价格，宝石的价格标记为 gems[i] 0 ≤ i < nn = gems.length宝石可同时出售0个或多个，如果同时出售多个，则要求出售的宝石编号连续； 例如客户最大购买宝石个数为m，购买的宝石编号必须为：gems[i]，gems[i+1]，...，ge…...

编程日记 2023/12/2 9:08:07

【LeetCode】挑战100天 Day17（热题+面试经典150题）

【LeetCode】挑战100天 Day17&#xff08;热题面试经典150题&#xff09; 一、LeetCode介绍二、LeetCode 热题 HOT 100-192.1 题目2.2 题解 三、面试经典 150 题-193.1 题目3.2 题解 一、LeetCode介绍 LeetCode是一个在线编程网站&#xff0c;提供各种算法和数据结构的题目&…...

编程日记 2023/12/2 9:05:05

正则表达式的基本语法

1.正则表达式基本语法 两个特殊的符号^和$。他们的作用是分别指出一个字符串的开始和结束。例子如下&#xff1a; "^The"&#xff1a;表示所有以"The"开始的字符串&#xff08;"There"&#xff0c;"The cat"等&#xff09;&#xff1…...

编程日记 2023/12/2 9:02:02

使用visual Studio MFC 平台实现对灰度图添加椒盐噪声，并进行均值滤波与中值滤波

平滑处理–滤波 本文使用visual Studio MFC 平台实现对灰度图添加椒盐噪声&#xff0c;并进行均值滤波与中值滤波 关于其他MFC单文档工程可参考 01-Visual Studio 使用MFC 单文档工程绘制单一颜色直线和绘制渐变颜色的直线 02-visual Studio MFC 绘制单一颜色三角形、渐变颜色边…...

编程日记 2023/12/2 9:00:01

Django HMAC 请求签名校验与 Vue.js 实现安全通信

概要 在 Web 应用的开发过程中&#xff0c;确保数据传输的安全性和完整性是一个不容忽视的问题。使用 HMAC&#xff08;Hash-based Message Authentication Code&#xff09;算法对请求内容进行签名校验&#xff0c;是一种常见且有效的安全策略。本文将详细介绍如何在 Django …...

编程日记 2023/12/2 8:58:59

Java 语言特性(面试系列2)

一、SQL 基础 1. 复杂查询 &#xff08;1&#xff09;连接查询&#xff08;JOIN&#xff09; 内连接&#xff08;INNER JOIN&#xff09;&#xff1a;返回两表匹配的记录。 SELECT e.name, d.dept_name FROM employees e INNER JOIN departments d ON e.dept_id d.dept_id; 左…...

编程新知 2025/6/19 11:42:45

2024年赣州旅游投资集团社会招聘笔试真

2024年赣州旅游投资集团社会招聘笔试真 题 ( 满 分 1 0 0 分 时 间 1 2 0 分 钟 ) 一、单选题(每题只有一个正确答案，答错、不答或多答均不得分) 1.纪要的特点不包括()。 A.概括重点 B.指导传达 C. 客观纪实 D.有言必录 【答案】: D 2.1864年，()预言了电磁波的存在，并指出…...

编程新知 2025/7/6 18:33:17

质量体系的重要

质量体系是为确保产品、服务或过程质量满足规定要求&#xff0c;由相互关联的要素构成的有机整体。其核心内容可归纳为以下五个方面&#xff1a; &#x1f3db;️ 一、组织架构与职责 质量体系明确组织内各部门、岗位的职责与权限&#xff0c;形成层级清晰的管理网络&#xf…...

编程新知 2025/7/7 12:15:03

页面渲染流程与性能优化

页面渲染流程与性能优化详解&#xff08;完整版&#xff09; 一、现代浏览器渲染流程&#xff08;详细说明&#xff09; 1. 构建DOM树 浏览器接收到HTML文档后&#xff0c;会逐步解析并构建DOM&#xff08;Document Object Model&#xff09;树。具体过程如下&#xff1a; (…...

编程新知 2025/7/8 6:26:33

srs linux

下载编译运行 git clone https:///ossrs/srs.git ./configure --h265on make 编译完成后即可启动SRS # 启动 ./objs/srs -c conf/srs.conf # 查看日志 tail -n 30 -f ./objs/srs.log 开放端口 默认RTMP接收推流端口是1935&#xff0c;SRS管理页面端口是8080&#xff0c;可…...

编程新知 2025/7/8 17:34:33

从零实现STL哈希容器：unordered_map/unordered_set封装详解

本篇文章是对C学习的STL哈希容器自主实现部分的学习分享 希望也能为你带来些帮助~ 那咱们废话不多说&#xff0c;直接开始吧&#xff01; 一、源码结构分析 1. SGISTL30实现剖析 // hash_set核心结构 template <class Value, class HashFcn, ...> class hash_set {ty…...

编程新知 2025/7/7 17:12:43

Ascend NPU上适配Step-Audio模型

1 概述 1.1 简述 Step-Audio 是业界首个集语音理解与生成控制一体化的产品级开源实时语音对话系统&#xff0c;支持多语言对话&#xff08;如 中文&#xff0c;英文&#xff0c;日语&#xff09;&#xff0c;语音情感&#xff08;如 开心&#xff0c;悲伤&#xff09;&#x…...

编程新知 2025/7/6 22:37:23

C# SqlSugar：依赖注入与仓储模式实践

C# SqlSugar&#xff1a;依赖注入与仓储模式实践 在 C# 的应用开发中&#xff0c;数据库操作是必不可少的环节。为了让数据访问层更加简洁、高效且易于维护&#xff0c;许多开发者会选择成熟的 ORM&#xff08;对象关系映射&#xff09;框架&#xff0c;SqlSugar 就是其中备受…...

编程新知 2025/7/5 18:24:10

QT： `long long` 类型转换为 `QString` 2025.6.5

在 Qt 中&#xff0c;将 long long 类型转换为 QString 可以通过以下两种常用方法实现&#xff1a; 方法 1&#xff1a;使用 QString::number() 直接调用 QString 的静态方法 number()&#xff0c;将数值转换为字符串&#xff1a; long long value 1234567890123456789LL; …...

编程新知 2025/7/7 18:16:51

uniapp 实现腾讯云IM群文件上传下载功能

UniApp 集成腾讯云IM实现群文件上传下载功能全攻略 一、功能背景与技术选型 在团队协作场景中&#xff0c;群文件共享是核心需求之一。本文将介绍如何基于腾讯云IMCOS&#xff0c;在uniapp中实现&#xff1a; 群内文件上传/下载文件元数据管理下载进度追踪跨平台文件预览 二…...

编程新知 2025/7/7 18:25:34