day16JS-es6生成器函数、模块开发

embedded/2025/1/16 7:50:40/

1. 生成器函数声明语法

声明关键字：function*

声明语法：

function *函数名（）{

}

 生成器函数可以退出，并在稍后重新进入，其上下文（变量绑定）会在重新进入时保存。

案例：

        function *fn(){return 1;}let g=fn();//Generator对象console.log(g);

注意！！！

1. 箭头函数不能用来定义生成器函数。

2. function 和 * 是两个单独的标记，因此它们可以用空白或换行符分隔。

2.生成函数的简介

        function* 声明创建一个 GeneratorFunction 对象。每次调用生成器函数时，它都会返回一个新的 Generator 对象，该对象符合迭代器协议。当迭代器的 next() 方法被调用时，生成器函数的主体会被执行，直到遇到第一个 yield 表达式，该表达式指定了迭代器要返回的值，或者用 yield* 委托给另一个生成器函数。next() 方法返回一个对象，其 value 属性包含了 yield 表达式的值，done 属性是布尔类型，表示生成器是否已经返回了最后一个值。如果 next() 方法带有参数，那么它会恢复生成器函数的执行，并用参数替换暂停执行的 yield 表达式。

3. 生成器函数的属性与方法

  1. suspended：挂起状态。
  2. next() ：让程序从suspended挂起状态进入到执行状态，代码会继续向后执行。返回一个对象{value:值,done:布尔值} 。value是代码返回的值，done是表示当前函数是否执行完成。next()可以传参。

  3. closed：关闭状态。关闭状态就是代码执行完成后。

  4. yield：暂停执行并且等待传参返回。遇到yield就暂停。下次代码执行从上次暂停的地方开始执行。

案例1： 

function* fn(a, b) {//a=1,b=3// yield 暂停执行并且等待传参返回yield a;//同步阻塞,返回a的值1，done: falsea++;//2yield a;//返回a的值2，done: falseyield b;b++;yield b;let sum = a + b;yield sum;return sum}let g = fn(1, 3);//第一次调用//value:1,done: falseconsole.log(g.next());//第二次调用//value:2,done: falseconsole.log(g.next());//...,以此类推console.log(g.next());console.log(g.next());console.log(g.next());console.log(g.next());

案例2：

        function* fn(a, b) {//a=1,b=5a++;//a=2let c = yield a;//把10传给了c,继续向下执行b++;//b=6let d = yield b;//把100传给了d,继续向下执行return a + b + c + d;//2+6+10+100=118}var g = fn(1, 5);console.log(g.next());//2console.log(g.next(10));//6console.log(g.next(100));//118

案例3：

       // 生成器函数可以同步阻塞，可以中间传参function* loadImage() {let arr = []for (var i = 39; i < 44; i++) {let img = new Image();img.src = `./img/img_${i}.jpg`;//遇到yield阻塞,for循环就可以不一次循环完毕yield img.onload = function () {arr.push(img);//等待每一张图片加载完毕,在执行后续代码g.next();}}loadFinish(arr);}function loadFinish(arr) {arr.forEach((item) => {console.log(item.src);})}let g = loadImage()g.next();

注意！！！ 

生成器函数可以同步阻塞，可以中间传参。

4. 错误对象

4.1 错误类型

  1. Error() : 基础类型。
  2. EvalError() ：eval错误。
  3. RangeError() ；范围错误。
  4. ReferenceError() ；引用错误。
  5. SyntaxError() : 语法错误。
  6. TypeError() : 类型错误。
  7.  URIError() : URI错误。

4.2 错误类型详解

1. Error()  ：eval()函数执行出错时会抛出EvalError错误，该类型在ES5中已不再出现，为了向后兼容，所以被保留了下来。 

2.RangeError(): RangeError是一个值超过有效范围时，会抛出RangeError范围错误。例如设置数组的长度为一个负值。

 new Array(-1);

3. ReferenceError()：ReferenceError是引用一个不存在的变量或左值时，会抛出ReferenceError引用错误。

a;

4. SyntaxError() ：SyntaxError是代码解析时会抛出SyntaxError语法错误(语法不符合规则)。

        var 1bar = 1;
--------------------------------function fn() {var a =}fn();

5.TypeError() ： 执行某些操作时，类型不符合要求会导致TypeError类型错误。

null.toString();

 6.  URIError() ：URIEror是指调用URI相关函数的参数不正确时会发生URIError错误，例如，调用decodeURl、 encodeURl、decodeURIComponent、encodeURIComponent、escape、unescape时发生的错误。

decodeURI("%2");

4.3 throw语句

1. throw语句用于抛出错误，后面必须指定一个值用来表示错误信息，值的类型没有要求。

2. throw语句用来抛出一个用户自定义的异常。当前函数的执行将被停止(throw之后的语句将不会执行)，并且控制将被传递到调用堆栈中的第一个catch块。如果调用者函数中没有catch块，程序将会终止。

throw 'hello world ";throw new Error(" something bad happened ");throw new SyntaxError("I don\ 't like your syntax. ");
throw new TypeError(" what type of variable do you take me for? ' );
throw new RangeError(' sorry,you just don\'t have the range. ');
throw new EvalError("That doesn\'t evaluate.");
throw new URIError("URI,is that you?");
throw new ReferenceError('you didn\'t cite your references properly")；

4.4 try...catch...语句

        try-catch语句用于捕获和处理JavaScript中的异常，try从句定义了可能出现异常的代码块，catch从句定义当try从句抛出异常时执行的代码。try从句中的任何代码抛出异常，都会导致代码终止执行，然后执行catch中的代码。catch从句后面还可以跟finally从句，用于放置清理代码。无论try从句是否抛出错误，finally从句中的代码都会执行，这里代码正常执行, 即使try中出现return语句也要执行。catch和finally都是可选的，但是try从句至少要和其中一个组合成完整的语句。

        try {// 这里可能会产生楼读，可能是程序偿误，可能是throw语句抛出的错误}catch (e) {//当try中抛出错误时这里才执行,变量e包含了错误信息} finally {//无论try是否搭出异常，这里代码正常执行。即使try中出现return语句也要执行}

注意！！！

在catch中抛出异常，用throw e，不要用throw new  Error(e)，因为e本身就是一个Error对象了, (因为在try代码块中使用throw抛出的newError()，是一个使用构造函数new Error()创建的错误实例对象) 具有错误的完整堆栈信息stack，new Error会改变堆栈信息，将堆栈定位到当前这一行。

案例1:

        function fn() {try {console.log(a);return 10;} catch (error) {console.log(error);return 20;} finally {console.log("必须执行");return 30;}}let res = fn();console.log(res);//30

案例2：

        try {console.log(a);} catch (error) {console.log(error);//throw error;} finally {console.log("必须执行");}

 

5. 模块化开发

5.1 es5中js的三种加载方法

  1. 在js的文件中相对地址都是相对html的。
  2. 在css的文件中相对地址是相对css的。
  3. script标签引入外部文件既可以是同步的（默认是同步的），也可以是异步的。
  4. link标签引入外部文件既是同步的。
//使用script标签引入外部js文件，src的相对地址是html 
<script src="./js/a.js"></script>
//使用link 标签引入外部js文件，href的相对地址是谁引用就是相当于谁的
<link rel="stylesheet" href="./css/a.css" >

1. 正常模式：<script src="./js/a.js"></script>

2. async模式：script标签使用async关键字可以让script标签执行异步操作。async异步时不需要等待直接向后执行后续html，等待DOM渲染后再执行，不能操作DOM，减少白屏，库比较大。 

<!-- async:异步时不需要等待直接向后执行后续html,不能操作DOM,减少白屏,库比较大 -->
<script src="./js/a.js" async></script>
<script src="./js/b.js" async></script>

 3. defer模式：script标签使用defer关键字也可以让script标签执行异步操作。defer可以操作DOM，但是图片视频都没有加载完成。script 加载的完成后，立即会做预解析。

加载流程：加载html--DOM树创建--CSS树创建--DOM渲染树完成--图片加载、视频加载、defer的script执行。

<!-- defer：js中会操作DOM，图片视频都没有加载完成-->
<script src="./js/a.js" defer></script>
<script src="./js/b.js" defer></script>

async与defer的区别：加载流程

5.2 es6中js的加载方法

module模式 ：script使用module后会加入严格模式，js加载和执行将会在DOM渲染树、图片加载、视频加载完成后。module模式 比defer模式执行的更晚。因为 module时开始不做加载，DOM渲染完成才加载，加载完成后才做预解析。所以在使用module时不要在标签上写事件。

<script type="module" src="./js/c.js"></script>

5.3 几个加载的执行先后

正常模式 ---> asyncm模式 ---> defer模式 ---> module模式。

5.4 模块化

将 JavaScript 程序拆分为可按需导入的单独模块的机制。(就是使用script标签导入多个js文件)

1. 模块导出关键字export ：export 声明用于从 JavaScript 模块中导出值。 export 声明运行时必须将该文件解释为模块。在 HTML 中，可通过在 <script> 标签中添加 type="module" 或由其他模块导入来实现。模块会自动以严格模式解释。

2. 模块导入关键字import ：export 导出的值可通过 import 声明或动态导入来将其导入其他程序。这里的导入名字必须和导出名字相同，导入多个可以使用{ }包裹起来。如果导入多个文件中名字有重复必须使用as 关键字起别名 。

1. 在utils.js文件中导出
// export 导出多个
export let arr=[1,2,3];
export let obj={a:1,b:2};
export function fn(){console.log("fn");
}-------------------------------
2. 在其它文件中导入
// 这里的名字必须和Utils.js中的导出名相同,导入多个
// 如果导入的名字有重复必须起别名 as 别名
import {arr as arr1,obj,fn} from "./Utils.js";
//导入后可以使用utils.js文件中的数据
console.log(arr,obj);
fn();

3. 模块默认导出关键字export default：默认导出一个js文件中只能有一个默认导出 。 当一个js文件中即有默认导出也有多个导出，首先先接受默认导出，然后再接收多个导出。

1.在Manager.js文件中
// 默认导出 一个js文件中只能有一个默认导出
export default function fns(){console.log("fns");
}
export let s=new Set([1,2,3]);
-----------------------------------------
2.import {arr as arr1,obj,fn} from "./Utils.js";// 当一个js文件中即有默认导出也有多个导出，首先先接受默认导出，然后再接收多个导出import fns,{s} from "./Manager.js";
let arr=["a","b"]
console.log(arr,arr1);
console.log(obj);
fn();console.log(s);
fns();

6. 动画案例

补充知识：

requestAnimationFrame(函数名) ：请求帧动画，每帧请求下次执行该函数。

cancelAnimationFrame()：清除帧动画。

7. 多选框案例


http://www.ppmy.cn/embedded/107628.html

相关文章

原型与原型链

原型与原型链

在JavaScript中&#xff0c;原型&#xff08;prototype&#xff09;和原型链&#xff08;prototype chain&#xff09;是理解对象如何继承属性和方法的关键概念。 原型 每一个对象&#xff08;函数也是对象&#xff09;都有一个特殊的属性叫做原型&#xff08;prototype&…
阅读更多...
数学建模强化宝典（13）M-K检验法

数学建模强化宝典（13）M-K检验法

前言 M-K检验法&#xff0c;全称为Mann-Kendall检验法&#xff0c;是一种非参数的假设检验方法&#xff0c;广泛应用于时间序列数据的趋势性变化检验&#xff0c;特别是气候序列中的趋势分析和突变点检测。以下是对M-K检验法的详细介绍&#xff1a; 一、定义与背景 M-K检验法由…
阅读更多...
pdf转word怎么转换？2024快速进行文件格式转换的几款软件

pdf转word怎么转换？2024快速进行文件格式转换的几款软件

pdf转word怎么转换&#xff1f;2024快速进行文件格式转换的几款软件 将PDF文件转换为Word文档是日常工作中常见的需求&#xff0c;尤其是当你需要编辑或重新利用PDF中的内容时。市面上有许多软件可以帮助你轻松完成PDF转Word的任务&#xff0c;以下是五款值得推荐的软件&#…
阅读更多...
无人直播怎么防止封号，用灰豚数字人阿凡达2.0直播模式完美解决

无人直播怎么防止封号，用灰豚数字人阿凡达2.0直播模式完美解决

现在这个时候&#xff0c;大家可能谈起数字人无人直播都觉得是天方夜谈&#xff0c;特别是以D音直播对数字人几乎是一刀切&#xff0c;能撑的过30分钟都算是不错的数字人了。但是世事无绝对&#xff0c;近日&#xff0c;灰豚数字人发布的阿凡达2.0直播技术引起整个无人直播行业…
阅读更多...
python-小理的三角形

python-小理的三角形

题目描述 小理有一个数组长度大小为 n &#xff0c;数组中有 n 个正整数。 现在小理请你从其中选出三个元素&#xff08;注意选择元素的下标不能相同&#xff0c;但是其值可以相同&#xff09;组成一个三角形。 无法做到&#xff0c;请输出一行一个字符串"No solution&quo…
阅读更多...
Sqoop 数据迁移

Sqoop 数据迁移

Sqoop 数据迁移 一、Sqoop 概述二、Sqoop 优势三、Sqoop 的架构与工作机制四、Sqoop Import 流程五、Sqoop Export 流程六、Sqoop 安装部署6.1 下载解压6.2 修改 Sqoop 配置文件6.3 配置 Sqoop 环境变量6.4 添加 MySQL 驱动包6.5 测试运行 Sqoop6.5.1 查看Sqoop命令语法6.5.2 测…
阅读更多...
2024.9.2

2024.9.2

还没写完 #include <iostream> #include <cstring> using namespace std;class myString { private:char *str; //字符串int size; //实际字符长度int len; //字符串容量 public:myString():size(10) //无参构造函数{len siz…
阅读更多...
BAT脚本实现基础爬虫功能

BAT脚本实现基础爬虫功能

在编程和自动化领域&#xff0c;BAT脚本&#xff08;批处理脚本&#xff09;通常用于执行简单的命令行任务。尽管BAT脚本不是专门设计用来编写复杂爬虫的工具&#xff0c;但我们可以利用它的基本功能来执行一些简单的网页数据抓取任务。本文将全面讲解如何使用BAT脚本结合外部工…
阅读更多...
最新文章

Copyright @ 2022~2023