《JavaScript基本概念》课件

基本概念JavaScript欢迎大家学习JavaScript基本概念课程JavaScript是现代Web开发的核心技术之一，掌握它对于任何网页开发者来说都至关重要本课程将系统地介绍JavaScript的基础知识，从语言特性、语法结构到高级概念，帮助您建立坚实的JavaScript编程基础无论您是编程新手还是有经验的开发者，都能在这里找到有价值的内容让我们一起开始探索JavaScript的精彩世界！课程目标掌握基础语法1JavaScript学习JavaScript的核心语法、数据类型、变量、操作符和控制结构，为进一步学习打下坚实基础理解函数与对象概念2深入理解JavaScript中的函数定义、调用机制以及对象创建、属性操作等面向对象编程概念学习操作3DOM掌握如何使用JavaScript操作网页元素，实现动态网页效果，提升用户体验理解异步编程4了解JavaScript的异步编程模式，包括回调函数、Promise和async/await语法，为开发复杂应用做准备简介JavaScript什么是的历史JavaScript JavaScriptJavaScript是一种轻量级、解释型的编程语言，主要用于为网页JavaScript由Brendan Eich在1995年开发，最初被称为Mocha，添加交互功能它是一种脚本语言，在客户端（浏览器）运行，后改名为LiveScript，最终定名为JavaScript这个名称选择主要使网页能够对用户操作做出反应是出于营销考虑，为了借助当时流行的Java语言的声势作为Web三大核心技术之一（HTML、CSS和JavaScript），它允许开发者创建动态更新的内容、控制多媒体、制作动画以及几乎尽管名字相似，JavaScript与Java是完全不同的语言如今，所有其他的交互功能JavaScript已成为世界上最流行的编程语言之一，远远超出了它最初设计的范围的应用领域JavaScript网页交互服务器端开发移动应用开发JavaScript最初的应用随着Node.js的出现，通过React Native、领域是增强网页的交互JavaScript突破了浏览Ionic等框架，性通过JavaScript，器的限制，能够在服务JavaScript能够用于构开发者可以创建表单验器端运行开发者可以建跨平台的移动应用证、动态内容更新、动使用JavaScript构建高这些应用可以同时运行画效果等，使网站具有性能的Web服务器、在iOS和Android平台更好的用户体验如今，API接口和后端应用程上，大大降低了开发成几乎所有现代网站都使序，实现全栈本和维护难度用JavaScript来实现其JavaScript开发交互功能与和的关系JavaScript HTMLCSSJavaScript负责行为和交互1CSS2负责样式和外观HTML3负责结构和内容在现代网页开发中，这三种技术各司其职又紧密协作HTML创建网页的基本结构和内容，是网页的骨架；CSS负责设计网页的视觉呈现，包括布局、颜色、字体等样式属性；JavaScript则为网页添加动态行为，处理用户交互和数据操作良好的网页开发实践是保持这三层分离HTML负责内容，CSS负责表现，JavaScript负责行为这种分离有助于提高代码的可维护性和可扩展性，使网页更易于开发和维护的特点JavaScript解释型语言动态类型面向对象JavaScript是一种解释型语言，这意味着JavaScript是动态类型语言，变量类型在尽管JavaScript的面向对象模型与Java或代码不需要编译成机器码就能运行浏览运行时确定，而不是在编译时这意味着C++等传统面向对象语言不同，但它确实支器中的JavaScript引擎会逐行读取代码并同一个变量可以在不同时刻保存不同类型持面向对象编程JavaScript使用基于原执行，这使得开发和调试过程更加便捷的数据，为开发者提供了极大的灵活性型的继承而非基于类的继承，虽然ES6引入不过，这也意味着JavaScript通常比编译然而，这也可能导致难以发现的类型相关了class语法糖JavaScript中几乎所有东型语言执行速度慢，尽管现代JavaScript错误，因此现代JavaScript开发中常使用西都是对象，包括函数和数组，这赋予了引擎通过即时编译JIT技术大大提高了性TypeScript等工具来增加类型检查语言强大的表达能力能的运行环境JavaScript浏览器环境浏览器是JavaScript最常见的运行环境每个现代浏览器都包含JavaScript引擎Chrome使用V8引擎，Firefox使用SpiderMonkey，Safari使用JavaScriptCore环境Node.jsNode.js是一个基于Chrome V8引擎的JavaScript运行环境，使JavaScript可以在浏览器中，JavaScript可以访问DOM（文档对象模型）和BOM（浏览器对象模在服务器端运行它提供了文件系统、网络通信等服务器端功能型），使其能够操作网页内容和与浏览器交互不同浏览器对JavaScript标准的实现可能有细微差异，这是开发中需要注意的在Node.js中，JavaScript可以访问操作系统API、创建HTTP服务器、读写文件等它使用事件驱动、非阻塞I/O模型，非常适合构建高性能的网络应用程序Node.js的包管理器npm是世界上最大的开源库生态系统之一在中嵌入HTML JavaScript内联脚本1内联脚本是将JavaScript代码直接嵌入HTML文档中的方式使用script标签包裹JavaScript代码，可以放置在HTML文档的head或body部分内联脚本适合小型代码段或页面特定逻辑，但不利于代码复用和维护示例scriptalertHello World!;/script外部脚本文件2外部脚本是将JavaScript代码保存在独立的.js文件中，然后通过script标签的src属性引入这种方式有利于代码复用、缓存和维护，是推荐的做法示例script src=script.js/script脚本加载策略3JavaScript脚本的加载会阻塞HTML解析，影响页面加载速度可以使用defer属性让脚本在HTML解析完成后执行，或使用async属性让脚本异步加载执行选择适当的加载策略对优化页面性能很重要基本语法JavaScript语句注释大小写敏感JavaScript程序由语句组成，每条语句通常以分JavaScript支持两种注释方式单行注释使用//JavaScript是大小写敏感的语言，变量名myVar号;结束虽然在某些情况下分号可以省略，但开头，多行注释使用/*和*/包围注释对代码可和myvar被视为两个不同的变量关键字、变量良好的编程习惯是总是添加分号，以避免潜在的读性和维护性至关重要，应当用来解释复杂逻辑、名、函数名等都必须使用正确的大小写解析错误记录函数用途等函数名和变量名通常使用小驼峰命名法示例let x=5;console.logx;示例//这是单行注释/*这是多行注释*/camelCase，如myFunction、userName等变量变量声明JavaScript提供三种声明变量的方式var、let和constvar是传统方式，有函数作用域；let是ES6引入的块级作用域变量；const用于声明常量，赋值后不能改变现代JavaScript开发推荐使用let和const，避免使用var变量命名规则变量名必须以字母、下划线_或美元符号$开头，后面可以包含字母、数字、下划线或美元符号不能使用JavaScript保留字作为变量名变量名对大小写敏感，通常使用小驼峰命名法camelCase变量作用域作用域决定了变量的可访问性全局变量在整个程序中可访问；局部变量只在其声明的代码块内可访问块级作用域使用let和const限制变量只在声明的代码块内有效，有助于避免变量泄露和意外覆盖数据类型概览复杂数据类型Object（对象）是JavaScript唯一的复杂数据类型，包括普通对象、数组、函数等复基本数据类型杂数据类型是可变的，按引用传递这意味2着当您将一个对象赋值给变量时，变量存储JavaScript有7种基本数据类型的是对象的引用，而不是对象本身的副本Number（数字）、String（字符串）、Boolean（布尔值）、Undefined（未1定义）、Null（空值）、Symbol（符类型检测号，ES6新增）和BigInt（大整数，ES2020新增）这些类型是不可变的，可以使用typeof运算符检查变量的类型，但3按值传递它对null和数组等特殊情况的处理不够精确对于更复杂的类型检测，可以使用instanceof运算符或Object.prototype.toString方法数字类型（）Number整数和浮点数和NaN InfinityJavaScript只有一种数字类型NaN（Not aNumber）表示非法的数Number，用于表示整数和浮点数内字，例如试图将字符串解析为数字时可部实现使用IEEE754标准的64位浮点数能出现尽管名为非数字，typeof格式，可以表示NaN实际返回number可以使用±

1.7976931348623157×10^308范围isNaN函数检测NaN值内的数值，精度约为15-17位小数Infinity表示无穷大，当数字超出可表示例let integer=42;let float=示范围或除以零时出现JavaScript区

3.14;分正无穷Infinity和负无穷-Infinity数字运算JavaScript支持所有基本算术运算加+、减-、乘*、除/、取模%和幂运算**此外，Math对象提供了高级数学函数，如Math.sin、Math.sqrt等数字也有方法如toFixed来格式化数字输出字符串类型（）String字符串定义转义字符字符串方法字符串是由零个或多个字在字符串中使用特殊字符，JavaScript字符串提供了符组成的文本在如引号或换行符，需要使丰富的方法，如length属JavaScript中，可以用单用反斜杠\进行转义常性获取长度，indexOf引号、双引号或反引见的转义序列包括\表查找子串，slice和号`包围文本来创建字符示单引号，\表示双引号，substring提取子串，串反引号创建的是模板\\表示反斜杠，\n表示换toUpperCase和字符串，支持多行和嵌入行，\t表示制表符等toLowerCase改变大小表达式写，replace替换内容，split分割字符串等示例let str1=Hello;示例let text=She字符串是不可变的，所有let str2=World;let said,\Hello!\;let修改方法都返回新字符串，str3=`Hello${str2}`;path=C:\\Program原字符串保持不变Files;布尔类型（）Boolean和真值和假值true false布尔类型只有两个值true（真）和false（假）这是在需要布尔值的上下文中（如if条件、逻辑运算），JavaScript会JavaScript中最简单的数据类型，主要用于条件判断和逻辑运算自动将其他类型的值转换为布尔值这种转换遵循一定规则布尔值可以直接使用字面量true和false，也可以通过Boolean假值Falsy values转换为false的值包括false、

0、（空字符函数将其他类型转换为布尔值，或者是逻辑运算的结果串）、null、undefined和NaN示例let isActive=true;let hasPermission=false;真值Truthy values除假值外的所有值，包括所有对象和数组（即使是空的），都会转换为true未定义类型（）和空值（）Undefined Null相似点1表示无或空的概念undefined2变量声明但未赋值时的默认值null3表示故意设置的空值或不存在的对象undefined通常表示系统级、出乎意料或错误的无，例如未赋值的变量、访问不存在的对象属性、或没有明确返回值的函数typeof undefined返回undefinednull表示程序级、意料之中或正常的无，通常由程序员明确赋值，表示一个变量当前没有值或不指向任何对象typeof null错误地返回object，这是JavaScript的一个历史遗留错误虽然undefined==null为true（宽松相等），但undefined===null为false（严格相等），因为它们是不同的类型在编程中，通常推荐使用严格相等运算符===进行比较数组（）Array数组定义数组是一种特殊的对象，用于存储有序的元素集合JavaScript数组可以存储不同类型的元素，并且大小可以动态调整创建数组可以使用数组字面量[]或Array构造函数示例let fruits=[Apple,Banana,Orange];let numbers=new Array1,2,3;数组索引数组元素通过索引访问，索引从0开始使用方括号表示法访问元素array[index]超出范围的索引不会报错，而是返回undefinedlength属性返回数组的长度（元素个数）示例let firstFruit=fruits

[0];//Apple fruits.length;//3数组方法JavaScript数组提供了丰富的方法push和pop在末尾添加和删除元素；shift和unshift在开头删除和添加元素；splice在任意位置添加或删除元素；slice复制数组的一部分；concat合并数组；join将数组元素连接为字符串此外还有高阶函数如map、filter、reduce等，用于数组操作和转换对象（）Object对象定义1对象是JavaScript中最复杂的数据类型，用于存储键值对（属性和值）的集合对象可以包含数据和功能（方法）创建对象可以使用对象字面量{}、Object构造函数或自定义构造函数示例let person={name:John,age:30,greet:function{return Hello!;}};属性访问2对象属性可以通过两种方式访问点表示法object.property和方括号表示法object[property]点表示法更常用，但当属性名含有特殊字符或是变量时，必须使用方括号表示法示例person.name;//John person[age];//30方法3方法是属于对象的函数可以定义为匿名函数并赋值给对象属性，或使用方法简写语法方法内部可以使用this关键字引用当前对象示例person.greet;//Hello!let car={start{console.logEngine started;}};对象操作4Object.keys返回对象的所有键数组；Object.values返回所有值数组；Object.entries返回所有[键,值]对数组使用for...in循环可以遍历对象的所有可枚举属性delete运算符可以删除对象属性类型转换隐式转换显式转换JavaScript是弱类型语言，在运算过程中会自动进行类型转换为避免隐式转换带来的不确定性，可以使用显式转换函数这种转换遵循一定的规则，但有时会产生反直觉的结果例如，Number转换为数字，String转换为字符串，Boolean转换字符串与数字相加会进行字符串拼接，而不是数学加法为布尔值示例5+2//52（字符串拼接）5-2//3（数学减法，字符此外，还可以使用parseInt和parseFloat将字符串解析为整数串转为数字）true+1//2（布尔值转为数字）或浮点数，这些函数会尝试从字符串开头解析数字，直到遇到非法字符示例Number5//5String5//5Boolean1//trueparseInt10px//10运算符概览特殊运算符1条件、逗号、typeof、instanceof等逻辑运算符

2、||、!关系运算符3==、===、!=、!==、、、=、=算术运算符4+、-、*、/、%、**赋值运算符5=、+=、-=、*=、/=等JavaScript运算符按功能和优先级分为多个类别算术运算符用于数学计算；赋值运算符用于变量赋值；关系运算符用于比较值；逻辑运算符用于组合布尔值或表达式；特殊运算符包括条件三元运算符、typeof、instanceof、delete等运算符优先级决定了表达式中运算的执行顺序优先级较高的运算符先执行，同一优先级的运算符从左到右执行（大多数情况）为避免优先级混淆，推荐使用括号明确表达式的计算顺序算术运算符运算符名称示例结果+加法5+27-减法5-23*乘法5*210/除法5/

22.5%取模余数5%21**幂运算5**225++自增let x=5;x++;x变为6--自减let x=5;x--;x变为4算术运算符执行数学计算并返回数值结果加法运算符+还用于字符串拼接当一个操作数为字符串时，另一个操作数会被转换为字符串，然后进行拼接自增++和自减--运算符有前置和后置两种形式，区别在于返回值前置形式++x先增加变量值再返回，后置形式x++先返回原值再增加变量这在赋值语句中尤为重要比较运算符相等运算符1==（相等）和!=（不相等）比较两个值是否相等，进行隐式类型转换===（严格相等）和!==（严格不相等）比较值和类型是否都相等，不进行类型转换示例5==5//true（值相等）5===5//false（类型不同）关系运算符2（大于）、（小于）、=（大于等于）和=（小于等于）比较两个值的大小关系这些运算符也会进行隐式类型转换比较字符串时，按字符的Unicode值逐字符比较示例53//true applebanana//true（按字母顺序）对象比较3比较运算符在比较对象时比较的是引用，而不是内容只有两个引用指向同一个对象时，才视为相等示例{}=={}//false（不同对象）let obj={};obj==obj//true（同一个对象）比较4NaNNaN与任何值（包括自身）比较都不相等检测一个值是否为NaN，需要使用isNaN函数或Object.isvalue,NaN示例NaN==NaN//false isNaNNaN//true逻辑运算符逻辑与逻辑或||运算符要求所有操作数都为真才返回真||运算符只要有一个操作数为真就返回真如果任一操作数为假，则返回第一个假值只有当所有操作数都为假时，才返回假它它采用短路评估如果第一个操作数为假，返回第一个真值，或者如果都为假，则返回则不再评估第二个操作数最后一个操作数它也采用短路评估还可用于执行条件操作，形如expr1expr2，只有当expr1为真时，才执行||常用于设置默认值，形如value||expr2default，当value为假时使用default示例truetrue//true true示例true||false//true false||truefalse//false falseanything////true false||false//falsefalse，不评估第二个表达式逻辑非!!运算符将真值转换为false，将假值转换为true它是一元运算符，只接受一个操作数双重否定!!常用于将值转换为布尔类型示例!true//false!false//true!0//true!hello//false!!hello//true赋值运算符基本赋值=最基本的赋值运算符，将右侧的值赋给左侧的变量示例let x=10;//将10赋值给变量x复合赋值运算符将其他运算符与赋值结合，提供简写形式包括+=（加法赋值）、-=（减法赋值）、*=（乘法赋值）、/=（除法赋值）、%=（取模赋值）、**=（幂运算赋值）等示例x+=5;//等同于x=x+5x*=2;//等同于x=x*2解构赋值ES6引入的语法，允许从数组或对象中提取值，快速赋给多个变量示例let[a,b]=[1,2];//a=1,b=2let{name,age}={name:John,age:30};//name=John,age=30条件（三元）运算符条件判断2计算condition布尔值语法结构1conditionexpr1:expr2结果选择true返回expr1，false返回expr23条件（三元）运算符是JavaScript中唯一使用三个操作数的运算符，提供了if-else语句的简短形式它根据条件表达式的真假，返回两个表达式之一的值条件运算符特别适合简单的条件赋值，可以使代码更简洁例如，let status=age=18成年:未成年;比使用if-else语句更简洁条件运算符可以嵌套使用，但过度嵌套会降低代码可读性例如let result=aba大:abb大:a等于b;推荐在复杂条件下使用if-else语句，保持代码清晰易读运算符优先级最高优先级1圆括号、成员访问.、new、函数调用一元运算符2!、+、-、++、--、typeof、delete算术运算符3**、*、/、%、+、-关系运算符

4、、=、=、==、===、!=、!==逻辑运算符

5、||条件运算符6:最低优先级7赋值运算符=、+=、-=等运算符优先级决定了表达式中运算符的执行顺序高优先级的运算符先执行，同优先级的运算符通常从左到右执行（除了一些右结合运算符如赋值和幂运算）为避免记忆复杂的优先级规则，推荐使用圆括号明确表达式的计算顺序这不仅能确保表达式按照预期计算，还能提高代码的可读性例如，a+b*c比a+b*c更清晰控制流程语句if语句if...else2提供两种执行路径语句if1最基本的条件判断语句if...else if...else处理多条件情况3if语句是最基本的条件语句，用于根据条件执行代码基本形式是if condition{statements}，当condition为真时执行statements条件表达式会被转换为布尔值，遵循JavaScript的真值和假值规则if...else形式是if condition{statements1}else{statements2}，当condition为真时执行statements1，否则执行statements2这提供了条件的两条执行路径if...else if...else形式处理多个条件if condition1{statements1}else ifcondition2{statements2}else{statements3}JavaScript会从上到下评估条件，执行第一个为真的条件块如果所有条件都为假，则执行else块（如果存在）控制流程语句switch表达式求值1switch语句首先计算switchexpression中的表达式值这个值与每个case标签的值进行比较表达式可以是变量、字面量或更复杂的表达式匹配2case从上到下依次比较expression与每个case值比较使用严格相等===，类型和值都必须匹配找到匹配的case后，执行该case下的代码，直到遇到break语句或switch结束和贯穿3break每个case末尾通常都有break语句，用于跳出switch语句如果省略break，会发生贯穿现象，继续执行下一个case的代码，无论该case是否匹配贯穿有时是有意为之，以实现多个case共享代码处理4defaultdefault标签用于处理所有case都不匹配的情况它可以放在任何位置，通常在最后default也需要break，除非它是最后一个case循环循环for基本循环forfor循环是最常用的循环结构，适合已知迭代次数的情况语法为for初始化;条件;更新{语句}初始化部分在循环开始前执行一次；条件部分在每次迭代前检查，为真则继续循环；更新部分在每次迭代后执行示例for let i=0;i5;i++{console.logi;}//输出0到4循环for...infor...in循环用于遍历对象的可枚举属性语法为for变量in对象{语句}循环变量表示对象的属性名（键），而不是属性值注意for...in不应用于数组，因为它会遍历索引和可能的非索引属性，且不保证顺序示例for let key in{a:1,b:2}{console.logkey;}//输出a,b循环for...ofES6引入的for...of循环用于遍历可迭代对象（如数组、字符串、Set、Map等）的值语法为for变量of可迭代对象{语句}循环变量表示当前迭代的值，而不是索引或键示例for letvalue of[1,2,3]{console.logvalue;}//输出1,2,3循环和循环while do-while循环循环while do-whilewhile循环在不确定迭代次数、只知道循环条件的情况下使用语do-while循环与while循环类似，但条件检查在循环体执行后进法为while条件{语句}每次迭代前都会检查条件，为真则执行语法为do{语句}while条件;这确保循环体至少执行一行循环体，为假则跳出循环次，即使初始条件为假如果初始条件为假，循环体一次也不会执行通常需要在循环前do-while适用于需要至少执行一次的情况，如用户输入验证它初始化变量，并在循环体内更新条件，否则可能导致无限循环也需要在循环体内更新条件，以避免无限循环示例let i=0;do{console.logi;i++;}while i5;//输出0示例leti=0;while i5{console.logi;i++;}//输出0到4到4，即使初始i≥5也会输出至少一次函数基础函数定义函数调用函数作用域函数是可重用的代码块，用调用函数是执行函数代码的函数创建自己的作用域在于执行特定任务过程函数名后跟圆括号和函数内部声明的变量（使用JavaScript提供多种定义函实际参数（如果有）函数var、let或const）在函数数的方式函数声明、函数可以有返回值，使用return外部不可访问外部变量在表达式和箭头函数语句返回函数内部可以访问，但如果函数内部有同名变量，则会函数声明function示例function遮蔽外部变量nameparameters greetname{return{statements}`Hello,${name}!`;}ES6引入的let和const创建块级作用域，而传统的var创函数表达式let name=let message=建函数作用域块级作用域functionparameters greetJohn;//调用并获限制变量在其声明的代码块{statements}取返回值JavaScript函数可以赋值给（花括号内）中可见箭头函数let name=变量、作为参数传递、从其parameters=他函数返回，这是{statements}JavaScript函数式编程特性的体现函数参数形参与实参1形参Parameters是函数定义时声明的变量，实参Arguments是函数调用时传入的值JavaScript不检查参数数量，传入少于定义的参数数量时，未接收值的参数为undefined；传入过多参数时，多余的实参被忽略示例function adda,b{return a+b;}add1;//b为undefined，结果为NaN add1,2,3;//3被忽略，结果为3默认参数2ES6引入了参数默认值，当参数未传递或为undefined时使用默认值默认值可以是字面量、表达式或函数调用示例function greetname=Guest{return`Hello,${name}!`;}greet;//Hello,Guest!剩余参数3ES6引入的剩余参数语法...paramName收集多余的实参到一个数组中剩余参数必须是最后一个形参示例function sum...numbers{return numbers.reducetotal,num=total+num,0;}sum1,2,3,4;//10对象4arguments函数内部可访问arguments对象，它类似数组但不是真正的数组，包含所有传入的实参在箭头函数中不可用示例function logArgs{console.logarguments;}logArgs1,a,true;//[1,a,true]函数返回值语句隐式返回returnreturn语句用于从函数返回值并结束函如果函数没有return语句，或return后数执行一个函数可以有多个return语没有表达式，函数默认返回undefined句，但只有一个会被执行return后面箭头函数如果只有一个表达式并省略花可以跟任何类型的表达式括号，会隐式返回表达式结果示例function squarex{return x*x;}let result=square4;//16示例function doSomething{/*没有return*/}doSomething;//undefined constdouble=x=x*2;//隐式返回x*2返回对象和函数函数可以返回对象或其他函数，这是JavaScript函数式和面向对象编程的关键特性返回函数称为高阶函数，是闭包实现的基础示例function createCounter{let count=0;return function{return++count;};}const counter=createCounter;counter;//1counter;//2变量作用域块级作用域let/const限于声明的代码块内1函数作用域var2限于声明的函数内全局作用域3整个程序可访问全局作用域中声明的变量在整个程序中可访问在浏览器中，全局变量是window对象的属性；在Node.js中，是global对象的属性全局变量应当谨慎使用，以避免命名冲突和内存泄漏函数作用域是使用var声明的变量的默认作用域这些变量在整个函数内可见，包括嵌套的代码块，但在函数外不可访问var声明的变量存在变量提升现象声明（但不是赋值）会提升到函数顶部块级作用域是ES6引入的let和const创建的作用域这些变量只在声明的代码块（花括号内）中可见let和const没有变量提升，使用前必须先声明，否则会引发暂时性死区错误块级作用域更符合大多数编程语言的直觉，有助于避免var带来的难以发现的错误匿名函数和函数表达式匿名函数函数表达式函数声明函数表达式vs匿名函数是没有名称的函数，通常用于一函数表达式是将函数赋值给变量或常量函数声明会被提升到作用域顶部，可以在次性使用的场景它可以作为参数传递给函数可以有名称（命名函数表达式）或匿声明前调用；函数表达式不会被提升，必其他函数，作为方法添加到对象，或立即名通过变量名调用函数须在声明后调用调用示例const greet=function函数表达式可以在条件语句中定义，而函示例sayHelloname{return`Hello,数声明在某些JavaScript实现中可能导致不确定行为document.getElementByIdbutton.${name}!`;};greetJohn;//Hello,addEventListenerclick,function John!示例fn1;//有效function fn1{}{console.logButton clicked!;};在命名函数表达式中，函数名sayHello fn2;//错误！const fn2=function匿名函数在调用栈中显示为只在函数内部可见，主要用于递归调用或{};anonymous，调试时可能不够清晰调试箭头函数语法绑定限制this箭头函数是ES6引入的简洁函数语法，使用箭头=箭头函数不创建自己的this上下文，而是继承外围箭头函数没有arguments对象，但可以使用剩余定义基本形式为参数=表达式或{语句}作用域的this值这解决了传统函数中this指向不参数...args明确的问题箭头函数不能作为构造函数使用（不能用new调当只有一个参数时，可以省略括号；当函数体只有在回调函数、事件处理程序或setTimeout中，箭用）一个表达式时，可以省略花括号和return关键字头函数特别有用，因为不需要bind或保存外部箭头函数没有prototype属性（隐式返回）this引用箭头函数不适合需要动态this的场景，如对象方法、示例const square=x=x*x;//等同于示例function Timer{this.seconds=0;DOM事件处理程序（需要this指向事件目标）、const square=functionx{return x*x;};setInterval=this.seconds++,1000;}使用arguments的函数闭包内部函数2访问外部函数的变量闭包概念1函数与其词法环境的组合保留词法作用域即使外部函数已执行完毕3闭包是JavaScript中一个强大而独特的特性，由函数及其能够访问的周围状态（词法环境）组成简单说，闭包允许函数访问并操作函数外部的变量，即使在外部函数执行完毕后闭包的核心是内部函数可以访问外部函数的变量和参数，这些变量在外部函数执行完毕后通常会被销毁，但如果内部函数形成闭包，这些变量会保持存活这使得内部函数可以记住它被创建时的环境闭包的应用非常广泛可用于创建私有变量和方法，实现函数工厂，处理回调函数，甚至是模块化编程的基础不过，闭包也可能导致内存泄漏，因为保留的变量不会被垃圾回收对象基础创建对象访问对象属性修改对象JavaScript提供多种创建对象的方式最常用的是访问对象属性有两种语法点表示法JavaScript对象是动态的，可以在创建后添加、修对象字面量使用花括号直接创建对象，内部用键object.property和方括号表示法改或删除属性使用赋值语句添加或修改属性，使值对定义属性另外可以使用Object构造函数或object[property]点表示法更常用，而方括用delete运算符删除属性使用Object.freezeObject.create方法创建对象号表示法允许使用变量作为属性名或使用包含特殊可以使对象不可变，Object.seal可以防止添加/字符的属性名删除属性但允许修改现有属性示例let person={name:John,age:30};letempty=new Object;let clone=示例person.name;//John person[age];//Object.createperson;30letkey=name;person[key];//John示例person.job=Developer;//添加属性delete person.age;//删除属性构造函数和运算符new构造函数构造函数是用于创建和初始化对象的特殊函数按照惯例，构造函数名首字母大写，与普通函数区分构造函数内部使用this关键字引用新创建的对象，为其设置属性和方法示例function Personname,age{this.name=name;this.age=age;this.greet=function{return`Hello,Im${this.name}`;};}运算符newnew运算符用于调用构造函数，创建该构造函数实例当使用new调用函数时，会执行以下步骤

1.创建一个新的空对象

2.将对象的原型链接到构造函数的prototype属性

3.将构造函数内的this绑定到新对象

4.如果构造函数没有返回对象，则返回this示例let john=new PersonJohn,30;构造函数问题构造函数的主要问题是每次创建实例时，实例方法都会被重新创建，导致内存浪费例如，上面的greet方法在每个Person实例中都是独立的函数副本解决方案是将方法定义在构造函数的prototype上，让所有实例共享同一个方法Person.prototype.greet=function{return`Hello,Im${this.name}`;};原型和原型链原型概念1JavaScript中几乎所有对象都有一个原型（prototype），它是另一个对象的引用，当前对象继承了原型对象的属性和方法通过对象的__proto__属性或Object.getPrototypeOf方法可以访问对象的原型原型机制是JavaScript实现继承的核心机制，与基于类的继承截然不同构造函数与原型2每个函数都有一个prototype属性，指向一个对象当该函数作为构造函数使用时，new创建的实例对象的原型__proto__指向构造函数的prototype对象构造函数的prototype对象有一个constructor属性，指回构造函数本身，形成循环引用原型链3当访问对象的属性或方法时，JavaScript首先在对象自身查找如果找不到，会继续在对象的原型上查找，然后是原型的原型，形成一个原型链这个查找过程一直持续到找到属性/方法或到达原型链末端Object.prototype的原型为null原型链是JavaScript实现继承和属性共享的机制继承原型继承类继承ES6传统的JavaScript继承通过原型链实现将子构ES6引入了class语法，使继承更直观，但底层仍造函数的prototype设置为父构造函数的实例，是基于原型使用extends关键字表示继承关系，使子类实例能访问父类方法和属性super关键字调用父类构造函数和方法示例function Animalname{this.name=name;}Animal.prototype.speak=示例class Animal{constructornamefunction{return`${this.name}makes a{this.name=name;}speak{returnnoise.`;};function Dogname`${this.name}makes anoise.`;}}class Dog{Animal.callthis,name;/*继承属性*/}extends Animal{speak{returnDog.prototype=`${this.name}barks.`;}}Object.createAnimal.prototype;/*继承方法*/Dog.prototype.constructor=Dog;/*修复constructor*/对象组合除了继承，JavaScript还支持通过组合实现代码复用将功能封装在独立对象中，然后在需要时组合使用，避免了继承层次过深的问题示例const swimmer={swim{return`${this.name}swims.`;}};const flyer={fly{return`${this.name}flies.`;}};const duck={name:Duck};Object.assignduck,swimmer,flyer;//组合功能关键字this全局上下文1在全局执行上下文（任何函数外部）中，this指向全局对象在浏览器中是window，在Node.js中是global在严格模式use strict下，全局上下文中的this是undefined示例console.logthis;//浏览器中输出window对象函数上下文2在函数内部，this的值取决于函数如何被调用默认情况下（简单调用），this指向全局对象，严格模式下是undefined作为对象方法调用时，this指向调用该方法的对象使用call,apply或bind可以显式设置函数的this值示例obj.method;//this指向obj fn.callcontext;//this指向context构造函数3当函数用作构造函数（使用new调用）时，this指向新创建的对象实例示例new Person;//构造函数内的this指向新Person实例箭头函数4箭头函数没有自己的this，保留定义时外层作用域的this值这使箭头函数特别适合回调和需要保留外层this值的场景示例const obj={method{setTimeout=console.logthis,100;}};obj.method;//this仍然指向obj类语法ES6类声明构造函数和方法继承ES6引入的class关键字提供了更清晰的语constructor是类的特殊方法，用于创建extends关键字实现类继承子类需要调法来创建和使用基于原型的类类声明和初始化实例每个类只能有一个用super来执行父类构造函数语法为class ClassName{...}类声明constructor子类可以重写父类方法，并用不会被提升，必须先声明后使用类中定义的方法自动添加到类的super.method调用父类方法类可以用表达式方式定义const prototype上，所有实例共享同一方法示例class Studentextends PersonMyClass=class{...};类方法简写语法省略了function关键字和{constructorname,grade示例class Person逗号method{...}而不是method:{supername;this.grade=grade;}{constructorname{this.name=function{...}greet{return`${super.greet},Imname;}greet{return`Hello,in grade${this.grade}`;}}静态方法static属于类本身而非实例，${this.name}`;}}用类名调用ClassName.staticMethod数组方法（上）添加和删除元素查找元素数组变换123push向数组末尾添加一个或多个元素，返回indexOfitem,start从start位置开始查找splicestart,deleteCount,...items从新长度item，返回第一个匹配的索引，未找到返回-1start位置删除deleteCount个元素，并插入新items，返回被删除的元素数组这是唯一能在pop删除并返回数组最后一个元素任意位置添加/删除元素的方法lastIndexOfitem,start从右向左查找，返unshift向数组开头添加一个或多个元素，回最后一个匹配的索引slicestart,end返回从start到end（不含）返回新长度的数组浅拷贝，不修改原数组includesitem,start检查数组是否包含shift删除并返回数组第一个元素item，返回布尔值concat...arrays合并两个或多个数组，返回这些方法直接修改原数组push/pop操作数组新数组，不修改原数组findcallback返回第一个满足测试函数的元末尾速度较快，而unshift/shift操作开头需要素值移动所有元素，性能较差findIndexcallback返回第一个满足测试函数的元素索引数组方法（下）遍历方法检测方法12forEachcallback为每个元素执行回调函somecallback检查是否至少有一个元素数，无返回值通过测试，返回布尔值mapcallback对每个元素执行回调，返回everycallback检查是否所有元素都通过新数组，不修改原数组测试，返回布尔值filtercallback返回所有通过测试的元素这些方法对空数组调用，some返回false，组成的新数组every返回truereducecallback,initialValue使用回调函数将数组减少为单一值reduceRight与reduce相同，但从右向左处理数组排序和其他方法3sortcompareFunction对数组元素排序，修改原数组默认按字符串排序，常需要自定义比较函数reverse反转数组顺序，修改原数组joinseparator用指定分隔符连接所有元素为字符串fillvalue,start,end用静态值填充数组指定部分flatdepth按指定深度递归展平数组字符串方法JavaScript字符串提供了丰富的方法来操作文本length属性返回字符串的长度charAtindex返回指定位置的字符，与string[index]类似substringstart,end和slicestart,end提取子字符串，不同之处在于对负数索引的处理substrstart,length也提取子字符串，但第二个参数是长度而非结束位置toUpperCase和toLowerCase转换大小写trim、trimStart和trimEnd删除空白字符indexOfsearchStr,position和lastIndexOf查找子字符串位置replacesearchValue,replaceValue替换子字符串，只替换第一个匹配，可使用正则表达式和全局标志替换所有匹配splitseparator将字符串分割为数组正则表达式基础创建正则表达式正则表达式是描述字符模式的对象JavaScript支持两种创建方式字面量语法/pattern/flags构造函数new RegExppattern,flags构造函数适合动态生成的模式，而字面量语法更简洁常用的标志包括i（忽略大小写）、g（全局搜索）、m（多行模式）基本语法正则表达式由普通字符和特殊字符（元字符）组成元字符包括.（点）匹配任意单个字符^匹配字符串开头$匹配字符串结尾\d匹配数字\w匹配字母、数字、下划线\s匹配空白字符[abc]匹配a、b或ca|b匹配a或b量词和分组量词指定匹配次数*匹配0次或多次+匹配1次或多次匹配0次或1次{n}精确匹配n次{n,}匹配至少n次{n,m}匹配n到m次圆括号用于分组和捕获pattern正则方法RegExp对象方法简介DOM什么是树结构DOM DOMDOM（文档对象模型）是HTML和XML文档的编程接口，将文档DOM树中的关系术语如下表示为节点树通过DOM，JavaScript可以动态地访问和修改网父节点直接包含另一个节点的节点页内容、结构和样式子节点直接被另一个节点包含的节点DOM不是JavaScript的一部分，而是由浏览器实现的API，使JavaScript能与网页交互DOM标准由W3C维护，但各浏览器实兄弟节点共享同一父节点的节点现可能略有不同祖先节点包含该节点的所有节点（父、祖父等）DOM树由节点组成，包括文档节点、元素节点、文本节点、注释后代节点该节点包含的所有节点（子、孙等）节点等根节点是document对象，代表整个HTML文档每个DOM节点都有属性如nodeType、nodeName、nodeValue，以及访问相关节点的属性如parentNode、childNodes、firstChild、lastChild、previousSibling、nextSibling等选择元素DOM传统选择器document.getElementByIdid根据ID选择单个元素，返回元素对象或nulldocument.getElementsByTagNamename根据标签名选择元素，返回HTMLCollection（类数组对象）document.getElementsByClassNamename根据类名选择元素，返回HTMLCollection这些方法返回的集合是动态的，当DOM发生变化时会自动更新方法querySelectordocument.querySelectorselector使用CSS选择器选择第一个匹配的元素，返回元素对象或nulldocument.querySelectorAllselector选择所有匹配的元素，返回静态NodeList这些方法功能强大，支持所有CSS选择器语法，如#id、.class、[attribute]、:pseudo等这些方法也可以在任何元素上调用，而不仅仅是document，此时只会在该元素的后代中查找选择特殊元素document.documentElement选择html元素document.body选择body元素document.head选择head元素document.forms所有表单的集合document.images所有图片的集合document.links所有链接的集合操作元素DOM修改内容创建元素1修改元素内容和属性创建新DOM节点2样式操作插入和删除4修改元素样式和类3添加和移除元素修改元素内容element.innerHTML设置或获取元素的HTML内容，但有XSS风险；element.textContent设置或获取文本内容，自动转义HTML字符；element.innerText类似textContent，但受CSS影响修改属性element.getAttributename获取属性；element.setAttributename,value设置属性；element.removeAttributename删除属性；也可直接通过属性访问如element.src、element.href等创建和操作元素document.createElementtagName创建元素；parentNode.appendChildnode添加子节点；parentNode.insertBeforenewNode,referenceNode在特定位置插入；parentNode.removeChildnode删除子节点；element.remove从DOM中移除自身样式操作element.style.property修改内联样式；element.className获取/设置类名；element.classList.add/remove/toggle/contains操作类名事件处理添加事件监听器常见事件类型事件对象现代JavaScript使用鼠标事件click、dblclick、当事件触发时，浏览器自动创addEventListener方法添加mouseover、mouseout、建事件对象并传递给监听器函事件监听器mousedown、mouseup、数事件对象包含与事件相关element.addEventListener mousemove的信息和方法type,listener,options键盘事件keydown、keyup、常用属性target（触发事件type是事件类型，如click、keypress的元素）、currentTargetload、submit等；listener（附加监听器的元素）、type表单事件submit、reset、是事件触发时执行的函数；（事件类型）change、input、focus、options是可选的配置对象，blur常用方法preventDefault包含capture、once、（阻止默认行为）、passive等属性窗口事件load、resize、stopPropagation（阻止冒scroll、unload、一个元素可以添加多个相同类泡）beforeunload型的事件监听器，它们会按添特定事件的属性鼠标事件的加顺序执行使用触摸事件touchstart、clientX/Y、键盘事件的removeEventListener可以移touchend、touchmovekey/code等除监听器简介BOM对象对象window locationBOM（浏览器对象模型）提供了与浏览器交互的接口，与网页内容无关window.location对象提供了当前URL的信息和导航功能它的属性包括window对象是BOM的核心，表示浏览器窗口href完整URLwindow是全局对象，全局变量和函数都是window的属性和方法可以省protocol协议（如http:）略window前缀，如alert等同于window.alerthost主机名和端口window对象的常用属性和方法包括innerHeight/innerWidth（视口尺寸）、open/close（打开/关闭窗口）、scrollTo/scrollBy（滚动窗hostname主机名口）、alert/confirm/prompt（对话框）、port端口号setTimeout/setInterval（定时器）pathname路径search查询字符串hash片段标识符location的方法包括assignurl（加载新页面）、replaceurl（替换当前页面，不保留历史）、reload（重新加载页面）定时器定时器应用setTimeout setIntervalsetTimeoutcallback,delay,...args函数用于在setIntervalcallback,interval,...args函数用于定时器常用于动画效果（虽然现在推荐指定的延迟（毫秒）后执行一次回调函数它返回每隔指定时间（毫秒）重复执行回调函数，直到被requestAnimationFrame）、延迟执行逻辑、定一个数字ID，可用于取消定时器取消它也返回一个可用于取消的ID期检查或更新数据、实现打字机效果和轮播图等UI功能clearTimeoutid函数用于取消尚未执行的clearIntervalid函数用于停止setInterval的重setTimeout复执行嵌套setTimeout（在回调中设置新setTimeout）可以比setInterval更精确地控制间隔，因为它考示例const timeoutId=setTimeout=示例const intervalId=setInterval=虑了回调执行时间console.log3秒后执行,3000;//取消console.log每2秒执行一次,2000;//停止clearTimeouttimeoutId;clearIntervalintervalId;在React等现代框架中，注意在组件卸载时清理定时器，以防内存泄漏setTimeout的实际延迟可能比指定值长，因为如果回调函数执行时间超过间隔时间，可能导致回JavaScript是单线程的，如果主线程忙于其他任务，调连续执行，没有预期的间隔定时器回调必须等待JSON格式解析序列化JSON JSONJSONJSON（JavaScript对象表示法）将JSON字符串转换为将JavaScript值转换为JSON字是一种轻量级的数据交换格式，JavaScript对象使用符串使用JSON.stringify方法易于人阅读和编写，也易于机JSON.parse方法器解析和生成它基于const obj=const json=JavaScript语法，但是独立于JSON.parse{name:John JSON.stringify{name:语言的文本格式,age:30};John,age:30};JSON的基本数据类型包括对JSON.parse可接受可选的JSON.stringify可接受象（键值对集合）、数组（有reviver函数，用于在返回解析replacer参数（数组或函数）序值列表）、字符串、数字、值前对其进行转换来过滤要序列化的属性，以及布尔值（true/false）、nullspace参数控制缩进JSON.parsetext,key,JSON不支持undefined、函数、value=key===dateJSON.stringifyobj,[name],正则表达式、Date对象等new Datevalue:value;2;//只包含name属性，2空JavaScript特有类型格缩进解析无效JSON会抛出SyntaxError异常序列化时，函数、undefined、Symbol会被忽略，Date对象会转换为ISO字符串异步编程概念回调函数Promise回调函数是JavaScript中最早的异步编程方式，将函数作为参数Promise是ES6引入的异步编程解决方案，表示一个异步操作的最传递给异步操作，操作完成时调用该函数终完成（或失败）及其结果值Promise有三种状态pending（进行中）、fulfilled（已成功）和rejected（已失败）回调函数模式简单直观，但在复杂异步流程中容易导致回调地狱（嵌套层级深、代码难以维护）错误处理也比较复杂，通常采用第一个参数表示错误的约定Promise通过链式调用.then和.catch方法处理结果和错误，避免了回调地狱Promise.all、Promise.race等静态方法支示例fs.readFilefile.txt,err,data={if errthrow err;持并行异步操作console.logdata;};示例fetch/api/data.thenresponse=response.json.thendata=console.logdata.catcherror=console.errorerror;语法async/await并行执行表达式await虽然await是顺序执行的，但可以通过Promise.all实函数asyncawait关键字只能在async函数内使用，用于等待现并行异步操作async/await是ES2017引入的语法糖，基于Promise Promise解决它暂停async函数的执行，直到示例async functionfetchAllData{const构建，使异步代码更像同步代码，提高可读性Promise解决，然后返回解决值[users,posts]=awaitasync关键字用于声明异步函数，它总是返回一个如果Promise被拒绝，await会抛出拒绝的值，可以用Promise.all[fetch/api/users.thenr=Promise函数内的return值会被Promise.resolve try/catch捕获r.json,fetch/api/posts.thenr=r.json];包装return{users,posts};}示例async functiongetUseruserId{try示例async function fetchData{return data;}{const response=await//等同于functionfetchData{return fetch`/api/users/${userId}`;const user=awaitPromise.resolvedata;}response.json;return user;}catch error{console.error获取用户失败:,error;}}错误处理语句try...catchtry...catch语句用于处理可能引发异常的代码基本语法为try{//可能引发异常的代码}catch error{//处理异常}finally{//总是执行的代码}try块包含可能出错的代码如果发生异常，执行立即转移到catch块catch块捕获异常对象，可以访问异常信息finally块包含无论是否发生异常都会执行的代码，通常用于清理资源语句throwthrow语句用于显式抛出异常可以抛出任何值，但通常抛出Error对象或其子类的实例示例throw newError发生错误;Error对象包含message属性（错误消息）和stack属性（堆栈跟踪）内置错误类型包括Error（通用）、SyntaxError（语法错误）、ReferenceError（引用错误）、TypeError（类型错误）、RangeError（范围错误）等异步错误处理对于基于回调的异步代码，错误通常作为回调的第一个参数传递Promise使用.catch方法或第二个.then参数处理拒绝在async/await函数中，可以使用普通的try...catch包围await表达式示例async functionfetchData{try{const data=await fetch/api/data;return awaitdata.json;}catch error{console.error获取数据失败:,error;}}模块化JavaScript模块概念模块是独立的代码单元，有自己的作用域，可以导出公共API供其他模块使用模块化的好处包括代码组织、重用性、维护性和封装JavaScript最初没有内置模块系统，社区开发了CommonJS（Node.js使用）、AMD（浏览器端）等解决方案ES6引入了标准的模块系统模块语法ES6导出语法export关键字用于导出变量、函数、类等可以单独导出（export functionfn{}）或批量导出（export{name,age}）export default用于导出默认值导入语法import关键字用于导入其他模块的导出可以导入命名导出（import{name,age}from./module.js）、默认导出（import defaultExportfrom./module.js）或二者结合模块路径可以是相对路径（./、../）或绝对路径（http://、/）浏览器中使用模块在浏览器中使用ES6模块，需要在script标签添加type=module属性script type=module src=main.js/script模块脚本自动应用defer属性（HTML解析完成后执行）、严格模式，并有自己的作用域（不会污染全局）浏览器会对模块发出CORS请求，因此需要适当的跨域头或通过服务器提供文件新特性概览ES6和解构赋值模板字符串let constES6引入了let和const关键字声明变量，替解构赋值是一种从数组或对象中提取值的简模板字符串使用反引号`定义，支持多行文代varlet声明的变量具有块级作用域，不洁方式数组解构let[a,b]=[1,2];对本和字符串插值（使用${expression}）会被提升，不能重复声明const声明常量，象解构let{name,age}={name:John,例如`Hello,${name}!Your ageis赋值后不能重新赋值（但如果值是对象，对age:30};解构可以嵌套，设置默认值，忽${age}.`它比传统字符串连接更清晰易读，象的属性仍可修改）这些特性使代码更安略某些值，甚至用于函数参数这大大简化特别是在构建HTML或SQL查询等复杂字符全、更可预测了变量赋值和数据处理串时模板字符串还支持标签函数，允许自定义字符串处理开发工具和调试技巧JavaScript浏览器开发者工具是JavaScript开发的重要助手Chrome DevTools、Firefox开发者工具等提供了Console（执行代码、查看输出和错误）、Sources（查看、编辑和调试代码）、Network（监控网络请求）、Performance（性能分析）等功能使用断点、watch表达式和调用栈可以有效跟踪代码执行代码编辑器如Visual StudioCode、WebStorm等提供代码高亮、自动完成、实时错误检查等功能VSCode的调试扩展允许直接在编辑器中调试JavaScript构建工具如Webpack、Rollup、Parcel等帮助管理依赖、打包代码、优化资产代码质量工具如ESLint（静态代码分析）、Prettier（代码格式化）、Jest（测试框架）有助于维护高质量代码库使用console.log、debugger语句、性能API等进行调试和性能优化版本控制（如Git）和文档工具也是现代JavaScript开发流程的重要组成部分总结与展望核心概念实用技能1掌握了语言基础学习了DOM操作和异步编程2未来方向现代特性4探索框架和高级应用3了解了ES6+新功能在本课程中，我们系统地学习了JavaScript的基础知识，从语言特性、数据类型和控制结构，到函数、对象和DOM操作，再到异步编程和模块化等高级概念这些知识构成了JavaScript编程的坚实基础，为进一步学习和实践打下了基础JavaScript语言持续发展，每年都有新特性加入TC39委员会负责JavaScript（正式名称为ECMAScript）的标准化未来发展趋势包括更强大的类型系统、更完善的模块化、元编程能力增强等掌握了基础后，可以进一步学习流行的JavaScript框架和库（如React、Vue、Angular）、服务器端JavaScript（Node.js）、移动应用开发（React Native）、桌面应用（Electron）等不断实践和学习新知识，将帮助您成为一名优秀的JavaScript开发者。