《JavaScript的基础教程》课件

基础教程JavaScript欢迎来到基础教程！本课程将带领您从零开始学习，JavaScript JavaScript掌握这门强大的编程语言无论您是初学者还是想要巩固基础的开发者，本教程都将为您提供系统、全面的知识体系JavaScript作为网页开发的三大核心技术之一，与和一起构成了JavaScript HTML CSS现代网页的基础它不仅能为网页添加交互功能，还能用于服务器端开发、移动应用开发等多个领域让我们一起开始这段学习旅程，探索的精彩世界！JavaScript课程概述课程目标本课程旨在帮助学员从零开始掌握编程通过系统学习，您将能够理解的核心概念，独立编写程序，并能运用所学知识解JavaScript JavaScript JavaScript决实际开发问题课程内容课程涵盖基础语法、数据类型、控制结构、函数、对象、操作、异步编程等核心内容，同时介绍新特性和现代开发实践JavaScript DOMES6+JavaScript学习要求建议学员具备基本的和知识，熟悉网页结构和样式课程不要求学员有编程经验，将从最基础的概念开始讲解学习过程中，请保持耐心和持续HTML CSS实践简介JavaScript什么是JavaScript1是一种轻量级的、解释型的、面向对象的脚本语言，主要用JavaScript于创建动态网页内容它能够在用户的浏览器中运行，为网页添加交互功能，如表单验证、动画效果、动态内容更新等的历史JavaScript2由于年在开发，最初名为JavaScript BrendanEich1995Netscape，后改名为，最终命名为年，Mocha LiveScriptJavaScript1997被提交给国际组织，形成了标准规范JavaScript ECMAECMAScript的应用领域JavaScript3如今，已经远超出了最初设计的范围，从单纯的前端脚本语JavaScript言发展为全栈开发语言它可用于网页开发、服务器端开发、Node.js移动应用开发、桌面应用开发、游戏开发等多个领域的特点JavaScript解释型语言1是一种解释型语言，不需要编译就可以直接在浏览器中运行浏览器的JavaScript引擎会逐行解释并执行代码，这使得开发和调试过程更加便捷，但执行速度可能JavaScript比编译型语言慢一些动态类型2是动态类型语言，变量的类型在运行时确定，而且可以随时改变这赋予了JavaScript极大的灵活性，但也需要开发者更加小心地处理数据类型转换和检查JavaScript面向对象3采用基于原型的面向对象方式，不同于传统的基于类的面向对象语言引入JavaScript ES6了类语法，但本质上仍是基于原型的实现这种机制为提供了强大的对象创建和JavaScript继承能力跨平台4最初设计用于浏览器环境，现在已经发展为一种跨平台语言通过，JavaScript Node.js可以在服务器端运行；通过各种框架，它还可以用于移动应用和桌面应用开发，JavaScript实现一次编写，到处运行开发环境搭建浏览器代码编辑器在线编程平台开发首先需选择一个适合的代码编对于初学者，也可以使JavaScript要一个现代浏览器推辑器能够提高开发效率用在线编程平台进行学荐使用、习，无需安装任何软件Chrome VisualStudio CodeVS或，它们都是目前最流行的、、Firefox EdgeCode JSFiddleCodePen具有强大的开发者工具，选择，它免费、功能强等平台允许您直接JS Bin可以运行代大，并提供丰富的在浏览器中编写和运行JavaScript码、查看控制台输出、插件支持，代码，并且JavaScript JavaScript调试和分析性能浏览如代码高亮、自动完成、可以方便地分享代码示器的开发者工具按语法检查等其他选择例这些平台通常还提F12或右键选择检查是学包括、供和的编辑功Sublime TextHTMLCSS习的重要辅、等能JavaScript AtomWebStorm助工具基本语法JavaScript语句注释程序由语句组成，每个语句通常以分号结束虽然在大多数支持两种注释方式单行注释使用双斜杠，多行注释使用JavaScript;JavaScript///*情况下分号是可选的，但建议始终使用分号，以避免潜在的解析错误例和注释不会执行，但对提高代码可读性和维护性非常重要例如//*/如let x=5;console.logx;这是单行注释和/*这是多行注释*/大小写敏感空格和换行是大小写敏感的，这意味着变量、函数名和其他标识符必须使会忽略多余的空格和换行符，这允许您通过合理安排代码格式JavaScript JavaScript用一致的大小写例如，变量myVar和myvar是两个完全不同的变量提高可读性建议使用一致的缩进风格（通常是2或4个空格）来表示代码的层次结构变量声明constlet也是引入的，用于声明常量，其值一const ES6var是引入的变量声明方式，具有块级作用旦设定就不能再修改也具有块级作用let ES6const是最早的变量声明方式它的作域（花括号内）声明的变量不允许在同var JavaScript{}let域，同样不允许重复声明对于引用类型（如用域是函数级的，如果在函数外声明，则为全一作用域内重复声明，但可以修改其值的对象和数组），声明只保证引用不变，let const局变量声明的变量可以被重新声明和修引入解决了的一些问题，使代码更加可预var var但对象或数组的内容仍然可以修改例如改，这可能导致一些意外问题例如var x测例如let y=10;//let y=20;错误不能const PI=

3.14159;//PI=

3.14;//=10;var x=20;//允许重复声明//错误不能重复声明重新赋值数据类型概览基本数据类型1直接存储在栈内存中的简单数据段（数值）Number2整数和浮点数（字符串）String3文本数据（布尔）Boolean4true/false和Undefined Null5特殊值中的数据类型可以分为基本数据类型和复杂数据类型两大类基本数据类型（也称为原始类型）包括、、、、和（新增）JavaScript NumberString BooleanUndefined NullSymbol ES6以及（新增）这些类型直接在栈内存中存储值BigInt ES2020复杂数据类型主要是（对象），包括一般对象、数组、函数等这些类型在堆内存中存储，变量实际保存的是指向对象的引用了解数据类型的特性和行为是掌握的关Object JavaScript键数值类型（）Number整数和浮点数和NaN Infinity的类型同时表示整数和浮点数所有数字（）表示非法的数值，例如尝试将字符串JavaScript NumberNaN Nota Number都以位浮点格式存储，遵循标准整数范围安全解析为数字时可能得到表示无穷大，当数值超64IEEE754NaN Infinity精确到，即，超出这个范围可过能表示的最大数值时返回表示负无穷±2^53-1±9007199254740991JavaScript-Infinity能导致精度丢失大示例let integer=42;//整数示例let notANumber=NaN;let float=

3.14159;//浮点数let infinity=Infinity;console.log0/0;//输出NaN输出console.log1/0;//Infinity字符串类型（）String在中，字符串是用于表示文本的数据类型字符串可以使用单引号、双引号或反引号来定义单引号和双引号的使用基本相同，选JavaScript`择一种风格并保持一致即可例如let singleQuoted=Hello;和let doubleQuoted=World;模板字符串（）是引入的新功能，使用反引号定义它们支持多行字符串和字符串插值（在字符串中嵌入表达式）例如Template StringsES6`let greeting=`Hello,${name}!`;其中会被变量的值替换模板字符串大大简化了字符串拼接和格式化的操作${name}name布尔类型（）Boolean真值（）Truthy在中，当非布尔值在需要布JavaScript尔值的上下文中使用时（如条件语句），它们会被转换为布尔值除了少数几个2值被转换为外，大多数值都会被和falsetrue false转换为，这些值被称为真值true布尔类型（）只有两个可能Boolean（）Truthy的值（真）和（假）布true false1尔值通常用在条件语句中，如语句、if假值（）Falsy循环等，用于控制程序的执行流while以下值在布尔上下文中会被视为false程（假值）、、、（false0-00n BigInt3零）、（空字符串）、、null和所有其他值，包括undefined NaN所有对象和数组（即使是空数组或空[]对象），都被视为{}true未定义类型（）和空值（）Undefined Null使用场景undefined vsnull和都表示无或空的概念，但它们有细微的区别的常见场景undefined nullundefined变量声明但未初始化•是一个变量被声明但尚未赋值时的默认值•undefined函数参数未提供•函数没有返回值时，默认返回•undefined函数无返回值•访问对象不存在的属性时，返回•undefined的常见使用场景null而表示一个空对象指针，它是一个明确的空值，需要显式赋值null表示一个对象变量暂时没有对象引用•作为函数的参数，表示该参数不是对象•当想要表示一个变量没有值时，应该明确地赋值为•null作为函数的返回值，表示该函数本应返回对象但没有可返回的•返回，这实际上是的一个历史•typeof nullobject JavaScript值遗留bug在比较时，为，但为undefined==null trueundefined===null，因为它们是不同类型的值false数组（）Array创建数组访问数组元素常用数组方法中有多种创建数组的方法最通过索引访问数组元素，索引从开始数组提供了丰富的方法JavaScript0JavaScript常见的是使用数组字面量语法let letfirstFruit=fruits

[0];//push和pop用于在数组末尾添加/删除fruits=[苹果,香蕉,橙子苹果数组的length属性返回数组的长元素；unshift和shift用于在数组开];也可以使用Array构造函数let度let fruitCount=头添加/删除元素；splice用于在任意位numbers=new Array1,2,3;fruits.length;//3可以通过索引置添加/删除元素；concat合并数组；创建空数组后可以动态添加元素修改数组元素fruits

[1]=梨;slice创建子数组对象（）Object创建对象访问对象属性对象方法对象是键值对的集合创建有两种方式访问对象属性点符号法和对象的属性值可以是函数，这种情况下JavaScript对象最常用的方式是对象字面量语法方括号法点符号法let name=该属性被称为方法let person=let person={name:张三,person.name;方括号法let age{name:张三,greet:functionage:30,isStudent:false};也=person[age];当属性名包含特{console.log你好!;}};调可以使用构造函数let person=殊字符或是变量时，必须使用方括号法用方法person.greet;//输出你好!new Object;person.name=张三;运算符类型运算符描述算术运算符用于执行算术计算，如加法、+,-,*,/,%,**,++,--减法、乘法、除法、取模、幂运算、递增和递减比较运算符用于比较两个值，返回布尔==,===,!=,!==,,,=,=结果和进行严格比===!==较（同时检查值和类型）逻辑运算符用于组合多个条件,||,!（与）（或）（非）,||,!赋值运算符用于给变量赋值，包括结合=,+=,-=,*=,/=算术运算的简写形式三元运算符条件运算符，根据条件返回:不同值condition value1:value2条件语句语句if1最基本的条件语句语句if...else2条件为真或假时执行不同代码块语句if...else if...else3测试多个条件语句switch4基于不同条件执行不同代码块条件语句用于根据不同条件执行不同的代码块语句根据条件判断是否执行一段代码，语法为if condition{//当条件为真时执行}语句则JavaScript ifif...else提供了条件为假时的替代执行路径if condition{//当条件为真时执行}else{//当条件为假时执行}当需要检查多个条件时，可以使用结构而当需要根据一个表达式的值匹配多个可能的情况时，语句通常比多个更清晰if...else if...else switchif...else ifswitchexpression{case value1://代码块1;break;case value2://代码块2;break;default://默认代码块}记得在每个末尾使用语case break句，否则程序会继续执行下一个case循环语句循环循环for while1当您事先知道执行次数当条件为真时重复执行2控制循环循环4do...while3和语句至少执行一次，然后在条件为真时重复break continue循环语句允许重复执行代码块，是编程中的基本结构循环提供了一种紧凑的循环语法，通常用于已知迭代次数的情况for let i=0;ifor5;i++{console.logi;}该循环包含初始化、条件和递增三个部分循环在指定条件为真时重复执行代码块while condition{//执行代码}循环类似，但至少执行一次代码块，然后再检while do...while查条件do{//执行代码}while condition;语句用于完全退出循环，而语句跳过当前迭代并继续下一次迭代break continue函数基础函数声明函数表达式参数和返回值使用关键字函数也可以作为表达函数可以接受参数function声明函数是最基本的式定义let greet（输入）并返回值方式function=functionname（输出）参数是在greetname{return你好，函数定义中列出的变{return你好，+name;};函数表量，调用函数时传入+name;}函数声达式不会被提升，必实际值JavaScript函明会被提升，这意味须在定义后才能调用数可以使用语return着您可以在声明前调匿名函数是没有名称句返回值，如果没有用函数函数名应该的函数，常用于函数语句或使用不return清晰地表明函数的用表达式和回调函数带值的，函数return途默认返回undefined函数进阶箭头函数默认参数12引入的箭头函数提供了更简支持设置函数参数的默认值ES6ES6洁的函数语法let greet=function greetname=访name=你好，+客{return你好，+name;箭头函数没有自己的name;}这样，如果没有提，它会从它所在的上下文供参数或提供的是，this undefined继承值，这常常用于回调将使用默认值这简化了函数this函数中避免传统函数的绑内部处理参数缺失的逻辑this定问题剩余参数3剩余参数语法允许将不确定数量的参数表示为数组functionsum...numbers{return numbers.reducetotal,num=total+num,0;}这使得处理可变数量的参数更加简单，替代了传统的对象arguments作用域全局作用域在函数外部或直接在脚本中声明的变量属于全局作用域，它们在整个程序中都可以访问在浏览器环境中，全局变量成为对象的属性window过度使用全局变量可能导致命名冲突和代码难以维护局部作用域在函数内部声明的变量具有局部作用域，只能在该函数内部访问这种封装性有助于避免变量冲突，使函数更独立函数参数也属于函数的局部作用域局部变量在函数执行完毕后会被销毁块级作用域引入的和关键字支持块级作用域，即变量只在定义它的块ES6let const（由包围的区域）内可见这解决了声明的变量提升和作用域问题，{}var提高了代码的可预测性例如，在语句或循环中使用声明的变if for let量只在该块内可见闭包什么是闭包闭包的应用闭包的注意事项闭包是中一个强大的特性，指的是函数及闭包有许多实际应用使用闭包时需要注意几点JavaScript其周围状态（词法环境）的组合简单说，闭包使函数据封装和私有变量模拟闭包会保留对外部变量的引用，可能导致内存占••数能够记住并访问其词法作用域中的变量，即使当该用函数工厂（生成特定功能的函数）函数在其原始作用域之外执行时•在循环中创建闭包时要特别小心，可能会出现变回调函数中保存状态••每当函数被创建时，它就会形成闭包在实践中，闭量共享问题实现模块模式包最明显的表现是当一个函数返回另一个函数，而返•过度使用闭包可能使代码难以理解和维护•回的函数可以访问原函数作用域中的变量例如，可以使用闭包创建计数器函数理解闭包对于掌握中的高级概念和设计模JavaScript式至关重要function createCounter{let count=0;return function{return++count;};}const counter=createCounter;console.logcounter;//1console.logcounter;//2事件处理常见事件类型1可以响应各种用户交互和浏览器事件JavaScript鼠标事件等•click,dblclick,mouseover,mouseout键盘事件•keydown,keyup,keypress表单事件•submit,change,focus,blur窗口事件•load,resize,scroll,unload不同事件类型使开发者能够创建对用户交互做出反应的动态网页事件监听2添加事件监听器的主要方法是使用方法addEventListenerelement.addEventListenerclick,functionevent{//事件处理代码},useCapture;这种方法允许为同一事件添加多个监听器，并且可以轻松删除还可以通过属性（如）或属性（如HTML onclickDOM）添加事件处理程序，但这些方法限制每个事件只能有一个处理程序element.onclick事件冒泡和捕获3当事件触发时，它会经历三个阶段•捕获阶段事件从window向下传播到目标元素•目标阶段事件到达目标元素•冒泡阶段事件从目标元素向上冒泡到window默认情况下，事件处理程序在冒泡阶段执行通过设置的第三个参数为，可以在捕获阶段注册事件addEventListener true方法可以阻止事件进一步传播event.stopPropagation操作基础DOM什么是选择元素修改元素内容和属性DOM（文档对象模型）是和文档的编提供多种方法选择元素选择元素后，可以通过多种方式修改它们DOM HTMLXML JavaScript DOM程接口它将网页表示为节点树，使能JavaScript通过选择单个元素修改元素的内容•getElementById ID•innerHTML HTML够访问和操作网页的内容、结构和样式每个通过类名选择修改元素的文本内容•getElementsByClassName•textContent元素都是一个节点，包括文本、属性等HTML元素集合设置元素属性是动态网页交互的基础•setAttributeDOM通过标签名选择•getElementsByTagName获取元素属性•getAttribute元素集合修改元素的内联样式•element.style使用选择器选择第一个•querySelector CSS匹配元素使用选择器选择所•querySelectorAll CSS有匹配元素操作进阶DOM创建和删除元素创建新元素const newElement=document.createElementdiv;创建文本节点const textNode=document.createTextNodeHello;添加到DOM中parentElement.appendChildnewElement;插入到特定位置parentElement.insertBeforenewElement,referenceNode;移除元素parentElement.removeChildchildElement;或element.remove;（现代浏览器）修改样式通过style属性修改内联样式element.style.color=red;注意，CSS属性名使用驼峰命名法element.style.backgroundColor=#fff;获取计算样式const style=window.getComputedStyleelement;通过属性一次修改多个样式较为繁琐，对于大量样式变更，考虑使用类名或style cssText操作类名添加类element.classList.addactive;移除类element.classList.removeactive;切换类element.classList.toggleactive;检查是否包含类element.classList.containsactive;提供了操作元素类名的现代方法，比直接修改属性更便捷classList APIclassName操作BOM对象对象对象window locationhistory对象是浏览器中的对象提供了当前窗对象管理浏览器的历window locationhistory全局对象，表示浏览器窗口口的信息和导航功能史记录出于安全考虑，URL所有全局变量和函数都是主要属性包括完整无法直接访问href JavaScript对象的属性和方法、主机名、主要方法包括window URLhostnameURL常用的方法包括路径、返回上一页，相当于window pathnameback、、查询字符串、浏览器的后退按钮；alert confirmsearch用于显示各种对话锚点部分常用方法前进到下一页，相prompt hashforward框；和有加载新页面、当于浏览器的前进按钮；setTimeout assign用于延时和定替换当前页面不保前进或后退指定的页面setInterval replacegon时执行代码；和留历史记录、重新数，可以是正数或负数openreload n用于打开和关闭窗口加载当前页面通过修改引入了close HTML5对象还提供了访问或调用这些方和window location.href history.pushState其他对象的接口法可以实现页面导航方法，BOM history.replaceState支持不刷新页面的变更URL异步编程基础同步异步回调函数定时器vs同步编程指代码按照编写的顺序一步一步执行，每个回调函数是传递给异步函数的函数，它将在异步操作提供两种基本的定时器函数JavaScript操作完成后才会执行下一个操作这种模式在执行耗完成时被调用这是中最基本的异步模式JavaScript在指定延迟后执行一次函数setTimeout-时操作时会阻塞程序，导致用户界面冻结和响应延迟const timeoutId=setTimeout={function fetchDatacallback{异步编程允许长时间运行的操作在后台执行，而不阻console.log3秒后执行;//模拟异步操作塞主线程当操作完成时，通过回调函数或其他机制},3000;setTimeout={通知程序这使得可以处理网络请求、文JavaScriptconst data={name:张三};件操作等耗时任务，同时保持用户界面的响应性//取消定时器callbackdata;clearTimeouttimeoutId;},1000;}按指定时间间隔重复执行函数setInterval-fetchDatadata={console.logdata;//1秒后打印const intervalId=setInterval={{name:张三}console.log每2秒执行一次;};},2000;虽然回调简单直观，但容易导致回调地狱，特别是//取消定时器在多个嵌套异步操作的情况下clearIntervalintervalId;PromisePromise的基本用法1是异步编程的一种解决方案，比传统的回调函数更清晰和强大对象代表一个异步操作的最终完成（或失败）Promise Promise及其结果值一个有三种状态待定（）、已兑现（）、已拒绝（）Promise pendingfulfilled rejected链式调用2const promise=new Promiseresolve,reject={Promise的主要优势之一是可以链式调用，避免回调地狱then方法返回一个新的Promise，允许链接多个异步操作//异步操作const success=true;fetchUserDataif success{.thenuser=fetchUserPostsuser.idresolve操作成功;//成功时调用.thenposts=fetchCommentsposts

[0].id}else{.thencomments={reject操作失败;//失败时调用console.logcomments;}}};每个回调的返回值会传递给下一个如果返回的是，下一个会等待这个完成then thenPromise thenPromise错误处理3提供了方法用于处理错误如果链中的任何被拒绝，控制权将跳到链中的下一个处理程序Promise catch Promise catchfetchData.thendata=processDatadata.thenresult=displayResultresult.catcherror={console.error处理过程出错:,error;}.finally={//无论成功或失败都会执行console.log处理完成;};async/awaitasync函数是引入的语法糖，建立在之上，使异步代码看起来更像同步代码关键字用于声明一个异步函数async/await ES2017Promise asyncasyncfunction fetchUserData{//函数体return userData;//自动包装为Promise}函数总是返回一个如果函数返回一个值，该值会被包装；如果抛出异常，则由包装async PromisePromise.resolve Promise.rejectawait关键字关键字只能在函数内使用，它使暂停执行，直到解决，然后返回结果值await asyncJavaScript Promiseasyncfunction showUserPosts{const user=await fetchUseruserId;const posts=await fetchPostsuser.id;return posts;}这种写法比链更清晰，特别是对于有多个依赖步骤的复杂异步逻辑使代码看起来像是同步的，但不会阻塞主线程Promise await错误处理在中，可以使用标准的块处理错误，这比链中使用更直观async/await try/catchPromisecatchasync functionfetchAndProcessData{try{const rawData=await fetchData;const processedData=await processDatarawData;return processedData;}catch error{console.error发生错误:,error;//处理错误return defaultData;}}JSON格式和1JSON2JSON.parse JSON.stringify是一种轻量级的数据提供了两个关键方法处理JSONJavaScript ObjectNotation JavaScriptJSON交换格式，易于人阅读和编写，也易于机器解析和生成将字符串转换为对象数组JSON.parse:JSON JavaScript/使用对象的文本表示法，但它是语言无JSON JavaScript关的，许多编程语言都支持JSON的基本结构有两种形式JSON constjsonString={name:张三,对象一组无序的键值对，形如张三age:30};•{name:,const person=JSON.parsejsonString;age:30}console.logperson.name;//张三数组一组有序的值的列表，形如苹果香蕉•[,,将对象数组转换为字橙子JSON.stringify:JavaScript/JSON]符串中的值可以是字符串、数字、对象、数组、布尔值JSON或，但不支持、函数、日期等true/false nullundefinedconst person={name:张三,age:30};特有的类型JavaScriptconst jsonString=JSON.stringifyperson;console.logjsonString;//{name:张三,age:30}使用进行数据交换3JSON是现代和服务器通信的标准格式在实际应用中，通常用于JSON Web API JSON前后端数据交换通过请求发送和接收数据•HTTP JSON配置文件许多应用程序使用文件存储配置•JSON数据存储在或数据库中存储结构化数据•localStorage第三方集成大多数使用作为数据格式•API Web API JSON使用和方法，应用可以轻松处理各种数据交换场景JSON.parse JSON.stringify JavaScript正则表达式创建正则表达式常用元字符正则表达式方法中有两种创建正则表达式的方法正则表达式使用特殊字符表示特定含义中使用正则表达式的主要方法JavaScript JavaScript使用正则表达式字面量匹配除换行符外的任何单个字符对象方法

1.•.-RegExp匹配任何数字，等价于•\d-[0-9]测试字符串是否匹配模式，返回布尔•test-const regex=/pattern/flags;匹配任何字母数字字符，等价于•\w-[a-zA-值Z0-9_]执行搜索匹配，返回结果数组或•exec-null使用构造函数

2.RegExp匹配任何空白字符•\s-匹配字符串的开始•^-对象中使用正则表达式的方法const regex=new RegExppattern,String匹配字符串的结束•$-flags;返回匹配结果的数组或•match-null匹配前面的表达式次或多次•*-0返回首次匹配的索引，未找到则返•search-匹配前面的表达式次或多次常用的标志包括•+-1flags回-1匹配前面的表达式次或次•-01（全局匹配）查找所有匹配项替换匹配的子串•g•replace-精确匹配次•{n}-n（忽略大小写）不区分大小写使用正则表达式或固定字符串分割字•i•split-匹配至少次•{n,}-n（多行匹配）使和匹配每行的开始和符串•m^$匹配到次结束•{n,m}-n m新特性概览ES6+（）及后续版本为带来了诸多重要新特性，显著改善了语言的能力和开发体验其中和关键字引入了块级作用域，解ES6ECMAScript2015JavaScript letconst决了使用声明变量时的提升和作用域问题允许声明变量，用于声明常量，它们的作用域限于包含它们的块var letconst解构赋值提供了一种从数组或对象中提取数据并赋值给变量的简洁方法例如const{name,age}=person;从对象中提取和属性扩展person nameage运算符用于展开数组或对象，方便地合并数组、传递参数或复制对象其他重要特性包括箭头函数、类语法、、模块系统等，这些将在后续章节详...Promise细介绍模板字符串详解基本用法多行字符串嵌入表达式模板字符串使用反引号而不是单引号或双引号来定义字符模板字符串可以直接跨越多行，保留所有空格和换行符，而模板字符串可以嵌入任何有效的表达式，不仅限`JavaScript串与传统字符串相比，它提供了更清晰的字符串拼接方式，无需使用特殊转义字符或字符串连接这大大提高了多行文于变量引用表达式需要放在中${}不再需要通过运算符拼接字符串和变量本的可读性+const a=5;//传统字符串拼接//传统多行字符串const b=10;const name=张三;const multiline=第一行\n+console.log`求和:${a}+${b}=${a+b}`;const greeting=你好，+name+！;第二行\n+//输出:求和:5+10=15第三行;//使用模板字符串const user={name:李四,age:28};const betterGreeting=`你好，${name}！`;//使用模板字符串console.log`${user.name}今年${user.age}岁，const betterMultiline=`第一行${user.age=18已成年:未成年}`;第二行//输出:李四今年28岁，第三行`;//已成年箭头函数详解1基本语法2this绑定箭头函数是引入的一种更简洁的函数语法，它简化了函数的创建箭头函数最重要的特性是没有自己的值箭头函数内的值继承自ES6this this外围词法作用域（即定义时的上下文），而不是调用时的上下文//传统函数表达式const add=functiona,b{function Person{return a+b;this.age=0;};//使用箭头函数//箭头函数setInterval={const addArrow=a,b=a+b;this.age++;//这里的this正确引用Person实例},1000;对于单个参数，可以省略括号；对于单行函数体，可以省略花括号和//传统函数需要额外处理this语句；空参数或多个参数需要使用括号；多行函数体需要花括号return//setIntervalfunction{和显式的语句return//this.age++;//这里的this指向全局对象//},1000;}这使得箭头函数非常适合用作回调函数，特别是当需要访问外部时this3使用注意事项箭头函数虽然简洁，但不适用于所有场景不能用作构造函数（不能使用操作符）•new没有对象（但可以使用剩余参数代替）•arguments...不能用作方法函数（会导致指向问题）•this不能用关键字，因此不能作为生成器函数•yield在需要动态值的场景，如对象方法、原型方法、构造函数或事件处理程序，传统函数通常是更好的选择this类和继承类的定义引入了语法，为基于原型的继承提供了更清晰的语法糖ES6classclass Person{构造函数constructorname,age{this.name=name;是类的特殊方法，在创建新实例时自动调用，用于初始化对象constructorthis.age=age;}const person=new Person张三,30;sayHello{console.log`你好，我是${this.name}`;1}2}继承和关键字super静态方法和属性extends关键字用于类继承，创建子类4static关键字定义静态方法和属性，这些属于类本身而非实例3class Studentextends Person{constructorname,age,grade{class MathUtil{supername,age;//调用父类构造函数static PI=

3.14159;this.grade=grade;}static suma,b{return a+b;study{}console.log`${this.name}正在学习`;}}}模块化import和export模块系统允许代码分割成独立的模块，通过导出功能，通过导入功能这种机制提高了代码的可维护性、可重用性和组织性ES6export import//math.js-导出模块export functionadda,b{return a+b;}export functionsubtracta,b{return a-b;}//app.js-导入模块import{add,subtract}from./math.js;console.logadd5,3;//8console.logsubtract5,3;//2默认导出和命名导出模块可以有多个命名导出和一个默认导出默认导出通常用于导出模块的主要功能//user.jsexport defaultclass User{constructorname{this.name=name;}}export functioncreateUsername{return new Username;}//app.jsimport User,{createUser}from./user.js;const admin=new User管理员;const user=createUser用户;和Set MapSet的基本用法Map的基本用法WeakSet和WeakMap是引入的新数据结构，类似于数组，但成员值唯一，没有重复元素是类似于对象的键值对集合，但键可以是任何类型，不限于字符串和是特殊版本的和，它们对键使用弱引用，不阻Set ES6Map WeakSetWeakMap SetMap止垃圾回收//创建Map只能包含对象，不可迭代，主要用于存储对象的集合而不影响•WeakSet//创建Set constmap=new Map;垃圾回收const set=new Set[1,2,3,3,4,4];只能使用对象作为键，键被弱引用，当键对象不再被引用时，•WeakMapconsole.logset;//Set{1,2,3,4}//添加键值对相关键值对会被自动清除map.setname,张三;//添加和删除元素map.set42,数字键;这两个数据结构适用于需要将额外数据关联到对象，同时不干扰垃圾回收的场set.add5;map.settrue,布尔键;景，如缓存或私有数据存储set.delete1;//获取值//检查元素是否存在console.logmap.getname;//张三console.logset.has2;//true//检查键是否存在//获取Set大小console.logmap.has42;//trueconsole.logset.size;//4//删除键值对//遍历Set map.deletetrue;for constitem ofset{console.logitem;//获取Map大小}console.logmap.size;//2//遍历MapSet常用于数组去重const uniqueArray=[...new Setarray];for const[key,value]of map{console.log`${key}:${value}`;}Symbol的创建和使用作为对象属性内置值1Symbol2Symbol3Symbol是引入的原始数据类型，表示独一无二的值每个的主要用途是作为对象属性的标识符，确保属性名不会冲内置了一些常量，用于自定义对象的行为Symbol ES6Symbol JavaScriptSymbol值都是唯一的，即使描述相同突Symbol定义对象的迭代行为•Symbol.iterator自定义对象的返回值•Symbol.toStringTag toString//创建Symbol constnameSymbol=Symbolname;控制对象转换为原始值的行为•Symbol.toPrimitiveconst sym1=Symbol;const ageSymbol=Symbolage;自定义操作符的行为const sym2=Symbol描述;•Symbol.hasInstance instanceofconstsym3=Symbol描述;//与sym2不同const person={例如，通过定义方法，可以使对象可迭代[Symbol.iterator][nameSymbol]:张三,console.logsym2===sym3;//false[ageSymbol]:30const collection={console.logtypeof sym1;//symbol};items:[A,B,C],[Symbol.iterator]{//使用Symbol.for创建全局共享的Symbol console.logperson[nameSymbol];//张三leti=0;const globalSym1=Symbol.for全局;return{const globalSym2=Symbol.for全局;//普通方式无法访问Symbol属性next:={console.logObject.keysperson;//[]return{console.logglobalSym1===globalSym2;//truedone:i=this.items.length,//获取对象的Symbol属性value:this.items[i++]console.logObject.getOwnPropertySymbolsperso};n;}//[Symbolname,Symbolage]};}};和循环Iterator for...of可迭代对象for...of循环自定义迭代器可迭代对象是实现了特定接口的对象，允许使用循环遍历其元素是引入的新循环语法，专门用于遍历可迭代对象可以为自定义对象实现迭代器，使其可用于循环for...of for...of ES6for...of中的内置可迭代对象包括JavaScript//遍历数组const range={数组•Arrayconst fruits=[苹果,香蕉,橙子];from:1,字符串•Stringfor constfruit offruits{to:5,•Map console.logfruit;•Set}//使对象可迭代[Symbol.iterator]{对象•arguments//遍历字符串let current=this.from;•TypedArrayconst message=Hello;const last=this.to;等集合•NodeList DOMfor constchar ofmessage{console.logchar;//返回迭代器对象一个对象要成为可迭代的，必须实现方法，该方法返回一个[Symbol.iterator]}return{迭代器对象，迭代器对象必须实现方法，返回next{done:Boolean,value://next方法在每次迭代时被调用格式的结果any}//遍历Set next{const uniqueNumbers=new Set[1,2,3];if current=last{for constnum ofuniqueNumbers{return{done:false,value:current++};console.lognum;}else{}return{done:true};}//遍历Map}const userMap=new Map[};[name,李四],}[age,25]};];for const[key,value]of userMap{//现在range对象可以使用for...ofconsole.log`${key}:${value}`;for constnum ofrange{}console.lognum;//输出1,2,3,4,5}生成器函数生成器的应用关键字yield生成器函数的主要应用场景包括语法function*关键字是生成器函数的核心，它有两个作用yield创建可迭代对象生成器函数返回的生成器对象自动实现了迭代器•生成器函数是引入的特殊函数，使用语法定义它们可以ES6function*•暂停函数执行并返回一个值接口暂停执行并在之后恢复，这为处理异步操作和可迭代序列提供了强大的工具•接收外部传入的值，作为yield表达式的返回值•惰性计算按需生成值，避免一次性生成大量数据简化异步编程配合使用，可以用同步风格的代码处理异•Promisefunction*twoWayGenerator{步操作function*simpleGenerator{const a=yield请输入第一个数;console.log开始执行;•状态机管理复杂的状态流转console.log收到第一个数:,a;yield1;console.log第一次暂停后;//惰性生成无限斐波那契数列const b=yield请输入第二个数;yield2;function*fibonacci{console.log收到第二个数:,b;console.log第二次暂停后;let a=0,b=1;yield3;while true{return a+b;console.log生成器函数结束;yield a;}}[a,b]=[b,a+b];}const gen=twoWayGenerator;const gen=simpleGenerator;//创建生成器对象，但函}console.loggen.next;//{value:请输入第一数体不会立即执行个数,done:false}console.loggen.next;//{value:1,done:false}，//只生成需要的元素console.loggen.next10;//{value:请输入第二打印开始执行const fib=fibonacci;个数,done:false}，打印收到第一个数:10console.loggen.next;//{value:2,done:false}，forleti=0;i10;i++{console.loggen.next20;//{value:30,done:打印第一次暂停后console.logfib.next.value;true}，打印收到第二个数:20console.loggen.next;//{value:3,done:false}，}//输出:0,1,1,2,3,5,8,13,21,34打印第二次暂停后console.loggen.next;//{value:undefined,done:true}，打印生成器函数结束和Proxy Reflect的基本用法常用对象Proxy trapReflect是引入的对象包装器，允许拦截和自定义对象的基本操作支持多种拦截器（），用于定制对象的各种操作是内置对象，提供拦截操作的方法Proxy ES6Proxy trapReflect JavaScriptJavaScript与大多数全局对象不同，不是构造函数，它的所有方法都是属性读取操作Reflect•get静态的的方法与的方法相对应Reflect Proxyhandler属性设置操作•setconst target={操作符•has inname:张三,操作符age:30•deleteProperty delete//传统方式};•apply函数调用name inobj;操作符delete obj.name;•construct newconsthandler={Object.definePropertyobj,name,{value:李四•getOwnPropertyDescriptorgettarget,prop,receiver{};方法Object.getOwnPropertyDescriptorconsole.log`正在获取${prop}属性`;方法return Reflect.gettarget,prop,receiver;•defineProperty Object.defineProperty//Reflect等价方法},•getPrototypeOfObject.getPrototypeOf方法Reflect.hasobj,name;方法Reflect.deletePropertyobj,name;•setPrototypeOf Object.setPrototypeOfsettarget,prop,value,receiver{Reflect.definePropertyobj,name,{value:李四方法•isExtensible Object.isExtensibleconsole.log`正在设置${prop}属性为${value}`;};的优势包括返回值更有意义（例如，布尔值而不是抛出错Reflect方法•preventExtensions Object.preventExtensionsreturn Reflect.settarget,prop,value,误）；比间接使用构造函数的操作更优雅；与Object Proxy和receiver;•ownKeys Object.getOwnPropertyNames方法一一对应，便于在中转发操作handler handler方法}Object.getOwnPropertySymbols};const proxy=new Proxytarget,handler;console.logproxy.name;//打印正在获取name属性，然后是张三proxy.age=31;//打印正在设置age属性为31装饰器类装饰器方法装饰器属性装饰器装饰器是一种特殊的声明，可以附加到类、方法、属性或参数上类装饰器应用于类构造方法装饰器应用于类的方法定义，可以用来观察、修改或替换方法定义属性装饰器应用于类的属性定义，可以用来观察或修改属性定义函数，可以用来观察、修改或替换类定义//方法装饰器//属性装饰器//类装饰器function timingtarget,name,descriptor{function readonlytarget,name,descriptor{function logtarget{//保存原始方法descriptor.writable=false;//保存原始构造函数const original=descriptor.value;return descriptor;const original=target;}//替换为新方法//返回包装后的构造函数descriptor.value=function...args{class User{function constructconstructor,args{console.timename;@readonlyconsole.log`创建${constructor.name}的新实例`;const result=original.applythis,args;username=default;const instance=new constructor...args;console.timeEndname;}return instance;return result;}};const user=newUser;//尝试修改会失败或在严格模式下抛出错误//创建新的构造函数return descriptor;user.username=newname;const wrapped=function...args{}return constructoriginal,args;需要注意的是，装饰器目前是的第阶段提案，尚未正式纳入标准要使用ECMAScript3};class Calculator{装饰器，需要使用或等转译工具，并配置相应的插件Babel TypeScript@timing//复制原型adda,b{wrapped.prototype=original.prototype;return a+b;}return wrapped;}}const calc=new Calculator;@log calc.add1,2;//会记录add方法的执行时间class Person{constructorname{this.name=name;}}错误处理try...catch语句1语句是的基本错误处理机制，它允许你尝试执行代码块，并在出现异常时捕获并处理错误try...catch JavaScript2throw语句try{//可能会抛出错误的代码throw语句用于抛出自定义错误，可以抛出任何值，但通常抛出Error对象或其子类const data=JSON.parseinvalidJSON;console.logdata;function dividea,b{}catch error{if typeofa!==number||typeof b!==number{//捕获并处理错误throw newTypeError参数必须是数字;console.error解析JSON时出错:,error.message;}//可以进行错误恢复或提供默认值const data={default:true};if b===0{}finally{throw newError除数不能为零;//无论是否发生错误都会执行的代码}console.logJSON处理过程结束;}return a/b;}块是可选的，包含无论块是否抛出异常都会执行的代码，通常用于释放资源或执行清理操作finally trytry{const result=divide10,2;Error对象3}catch error{内置了多种错误类型console.error`计算出错:${error.message}`;JavaScriptif errorinstanceof TypeError{所有错误的基类•Error console.error这是一个类型错误，请检查输入;语法错误•SyntaxError}•ReferenceError引用不存在的变量}类型不符合预期•TypeError数值超出范围•RangeError处理函数使用不当•URIError URI使用不当•EvalError eval自定义错误类可以继承基类Errorclass ValidationErrorextends Error{constructormessage,field{supermessage;this.name=ValidationError;this.field=field;}}function validateUseruser{if!user.username{throw newValidationError用户名不能为空,username;}//其他验证...}调试技巧对象断点调试性能分析1console23对象提供了丰富的方法用于调试和记录信息浏览器开发者工具提供强大的断点调试功能分析和优化代码性能的工具console•console.log输出一般信息代码中添加debugger语句debugger;当执行到此处时自•Performance面板记录和分析页面运行时的性能输出错误信息，通常显示为红色动暂停面板分析内存使用和查找内存泄漏•console.error•Memory•console.warn输出警告信息，通常显示为黄色•开发者工具中设置断点在Sources面板中点击行号•Lighthouse全面的性能、可访问性和最佳实践审计输出信息性消息条件断点在断点上右键，设置只在特定条件满足时面板分析网络请求和资源加载时间•console.info••Network暂停以表格形式显示数据•console.table性能分析技巧断点在面板中，右键元素设置和测量代码执行•DOM ElementsDOM•console.time console.timeEnd使用PerformanceAPIperformance.mark和修改断点时间performance.measure记录关键操作的性能断点在网络请求触发时暂停和创建分组•XHR/fetch•console.group console.groupEnd注意分析生产环境中的代码，而不仅仅是开发环境输出•事件监听器断点在特定事件触发时暂停•使用的查看页面内存使用情况•Chrome TaskManager•console.count计数某些事件发生的次数断点触发后，可以检查变量值、调用栈和作用域，单步执条件不满足时输出错误行代码，帮助找出问题所在•console.assert单元测试测试框架介绍编写测试用例运行测试JavaScript单元测试框架帮助开发者自动化测试代码的个别单元（通常是函数或方法）以Jest为例，测试代码通常包括以下部分配置和运行测试的步骤流行的测试框架包括安装测试框架npm install--save-dev jest//math.js开发的零配置测试平台，内置断言、模拟和覆盖率报告•Jest Facebook在package.json中添加测试脚本test:jestexport functionadda,b{灵活的测试框架，需要搭配断言库（如）使用•Mocha Chaireturna+b;运行测试npm test行为驱动的测试框架，包含断言和模拟功能•Jasmine}高级测试技术简约的测试运行器，支持并行测试执行•AVA•Karma测试运行器，可以在真实浏览器中运行测试//math.test.js•模拟函数和依赖使用jest.fn、jest.mock等import{add}from./math;钩子函数、、、这些框架通常与断言库（用于验证结果）和测试覆盖率工具（如）配合使•beforeEach afterEachbeforeAll afterAllIstanbul/nyc测试异步代码使用或回调用//测试套件•async/awaitdescribe数学函数测试,={•快照测试验证UI组件渲染结果//测试用例测试覆盖率报告了解测试的完整性•testadd函数正确相加两个数,={单元测试是提高代码质量、防止回归错误和促进重构的关键实践//准备测试数据const a=1,b=2;//执行被测函数const result=adda,b;//断言预期结果expectresult.toBe3;};testadd函数处理负数,={expectadd-1,-

2.toBe-3;};testadd函数处理零值,={expectadd0,

0.toBe0;};};好的测试用例遵循模式（准备）、（执行）、（断言）AAA ArrangeAct Assert性能优化代码优化代码层面的性能优化技巧减少全局变量全局变量处理较慢，占用内存时间更长•避免不必要的操作操作成本高昂，尽量批量处理•DOM DOM使用适当的数据结构如查找键值、存储唯一值•Map Set避免深度嵌套循环复杂度会呈指数增长•使用事件委托减少事件监听器数量•避免内存泄漏清理不再使用的引用和事件监听器•使用处理耗时计算不阻塞线程•Web WorkersUI惰性加载和计算只在需要时加载或计算•资源加载优化提高资源加载效率的策略脚本异步加载使用和属性•async defer代码分割将代码分成小块，按需加载•资源优先级使用、指定加载优先级•preload prefetch图片优化使用适当格式、响应式图片、图片延迟加载•WebP压缩资源使用压缩、混淆和最小化•Gzip/Brotli JavaScript使用分发静态资源，减少延迟•CDN缓存策略设置合理的缓存头部，利用浏览器缓存•渲染优化提高页面渲染性能的方法避免回流和重绘批量修改，使用代替位置属性•reflow repaintDOM transform避免强制同步布局不要在修改后立即读取布局信息•DOM使用进行动画与浏览器渲染周期同步•requestAnimationFrame使用动画加速，性能更好•CSS3GPU虚拟滚动只渲染可见区域的内容•减少复杂的选择器简化提高渲染速度•CSS优化关键渲染路径减少阻塞资源，提高首次渲染速度•安全性考虑1XSS攻击2CSRF攻击跨站脚本攻击是一种注入攻击，攻击者将恶意跨站请求伪造攻击诱导用户执行非Cross-Site Scripting,XSS Cross-Site RequestForgery,CSRF脚本注入到受信任的网站中，这些脚本会在用户浏览器中执行本意的操作，利用用户已经通过身份验证的会话主要类型CSRF攻击工作原理•存储型XSS恶意脚本被保存在服务器上，影响所有访问包含该脚•用户登录网站A并获得认证cookie本的页面的用户•用户在不登出A的情况下访问恶意网站B反射型恶意脚本包含在中，通常通过钓鱼邮件传播•XSS URL•B包含自动提交到A的表单或触发对A的请求型漏洞存在于客户端代码中，不涉及服务器•DOM XSS•A的服务器收到请求时，会看到来自已认证用户的合法请求防御措施防御措施输出编码将不可信数据插入前进行转义•HTML使用令牌在表单中包含不可预测的令牌•CSRF内容安全策略限制可执行的脚本来源•CSP验证请求来源检查和头•Referer Origin使用替代•textContent innerHTML使用属性•SameSite cookie对输入数据进行验证和清理•要求重要操作进行重新认证•输入验证3输入验证是防止注入攻击的基本措施客户端验证提供即时反馈，但不可依赖（可被绕过）•服务端验证必不可少的安全层•白名单验证只允许已知安全的输入•规范化和清理统一格式并移除潜在危险内容•使用参数化查询防止注入•SQL验证和输入防止注入和拒绝服务攻击•JSON XML其他安全最佳实践定期更新依赖库，修复已知漏洞•实施适当的错误处理，避免泄露敏感信息•使用保护数据传输•HTTPS遵循最小权限原则•浏览器存储sessionStoragelocalStorage临时存储，关闭标签页即清除21永久存储机制，数据不会过期IndexedDB客户端数据库，存储复杂数据35Cache APICookies存储网络请求响应，实现离线功能4小型文本文件，主要用于身份验证浏览器提供多种客户端存储机制，适用于不同场景提供简单的键值存储，容量通常为，数据不会过期，除非被明确清除适用于长期保localStorage5-10MB存的用户设置、主题偏好等类似于，但数据只在当前会话期间有效，关闭标签页或浏览器后数据即被清除sessionStorage localStorage是一个功能强大的低级，提供了一个事务性数据库系统它允许存储大量结构化数据，包括文件和二进制对象操作是异步的，不IndexedDB APIIndexedDB会阻塞主线程是最古老的客户端存储机制，容量有限通常，主要用于身份验证和会话管理是的一部分，用Cookies≤4KB CacheAPI ServiceWorker API于存储网络请求的响应，实现离线功能和性能优化概览WebAPI现代浏览器提供了丰富的，扩展了的能力是一个现代化的网络请求接口，用于替代传统的它基于，语法更简WebAPI JavaScript FetchAPI XMLHttpRequestPromise洁，功能更强大支持请求和响应对象、请求头设置、、流式数据等高级功能，是现代网页应用中进行请求的首选方式Fetch CORSHTTP提供了全双工通信通道，使客户端和服务器之间可以实时交换数据，而无需频繁建立新连接在聊天应用、实时协作工具、游戏等需要低延迟WebSocket APIWebSocket通信的场景中非常有用允许在后台线程中运行脚本，不阻塞主线程（线程）这对于执行计算密集型任务（如图像处理、数据分析）非常Web WorkersAPIJavaScriptUI有用，可以保持用户界面的响应性还有许多其他强大的，如地理定位、通知、音频和视频、等，大大扩展了应用的能力API WebGLWeb生态系统JavaScript包管理常用开发工具流行框架和库npm（）是现代开发使用多种工具提高效率生态系统包含许多流行的框架和库npm NodePackage ManagerJavaScriptJavaScript生态系统的核心，它是世界上最大构建工具如、和处理模块前端框架方面，、和主导市JavaScript WebpackRollup ViteReact VueAngular的软件注册表，拥有超过万个包允打包和资源优化；转译器如将现代场，各有特色；状态管理库如、和100npm BabelRedux Vuex许开发者发布、共享和使用代码包，大大提高转换为兼容旧浏览器的代码；代码简化复杂应用的状态管理；服务器端有JavaScript MobX了开发效率常用命令包括（安装检查工具如确保代码质量和一致性；格生态，包括、和等npm installESLint Node.js ExpressKoa NestJS依赖）、（创建项目）、式化工具如保持代码风格统一；类型框架；移动应用开发有和；npm initnpm runPrettier ReactNative Ionic（运行脚本）等和是的替代检查工具如提供静态类型检查；测桌面应用开发有；数据可视化有Yarn pnpmnpm TypeScriptElectron D

3.js品，提供更快的安装速度和更好的依赖锁定试工具如和自动化测试流程和；动画库有和等Jest CypressChart.js GSAPAnime.js总结与展望掌握现代JavaScript1成为高级开发者深入框架与生态系统2专注于特定领域理解核心概念与API3掌握、事件、异步等DOM熟练基础语法4变量、类型、函数、对象学习目标与态度5持续学习与实践本课程涵盖了的核心概念和基础知识，从语法基础到高级特性，从操作到异步编程我们学习了的数据类型、控制结构、函数、对象、事件处理等基础知识，也探讨了的JavaScriptDOMJavaScript ES6+新特性、模块化、、异步等现代概念Promise/await JavaScript正在持续发展，每年都有新特性加入未来趋势包括更强大的类型系统支持、更多函数式编程特性、更好的模块化和构建优化、与的深度集成等学习的旅程永JavaScript WebAssembly JavaScript无止境，建议选择项目实践所学知识、阅读优质源码深入理解语言、参与开源项目积累经验、关注官方规范和提案了解新特性祝愿大家在的学习道路上取得成功！JavaScript。