文章目录十二、JavaScript控制语句1.条件语句2.循环语句2.1 for...in 循环2.2 for...of 循环2.2.1 基本语法2.2.2 遍历数组、Set、字符串2.2.3 变量名做属性名时需要 [ ]2.2.4 关于 Symbol 值做对象的键2.2.5 关于 Symbol.iterator2.2.6 实现可迭代对象2.2.7 生成器函数2.2.8 使用生成器函数简化代码3. 跳转语句十三、JavaScript 异常处理1. 异常处理的基本概念1.1 什么是异常1.2 错误类型2. 基础异常处理语法2.1 try-catch 语句2.2 finally 语句2.3 throw 语句3. Error 对象属性4. 自定义异常4.1 创建自定义异常类4.2 使用自定义异常十四、avaScript常用全局函数1. ECMAScript 标准全局函数1.1 类型转换函数1.2 数值处理函数1.3 URI 编码/解码函数1.4 其他 ECMAScript 全局函数2. 浏览器环境提供的全局函数2.1 定时器函数2.2 定时器函数十二、JavaScript控制语句JavaScript 中的控制语句可以分为以下几类1.条件语句● if 语句● if…else 语句● if…else if…else 语句● switch 语句2.循环语句● for 循环● for…in 循环 (遍历对象属性)● for…of 循环 (遍历可迭代对象)● while 循环● do…while 循环2.1 for…in 循环for…in 语句用于遍历对象的可枚举属性包括继承的可枚举属性。基本语法for(variableinobject){// 执行的代码}特点● 遍历对象自身的和继承的可枚举属性不仅遍历自身属性还会遍历原型链上的可枚举属性默认属性都是可枚举的letuser{name:jack,sayHi:function(){console.log(hi);}}user.__proto__.emailjack123;user.__proto__.sayHellofunction(){console.log(hello);}for(letkeyinuser){console.log(user[key]);}结果如下● 遍历顺序不固定依赖于 JavaScript 引擎实现● 不适合遍历数组会遍历数组的所有可枚举属性包括非数字键letarr[1,2,3];for(letkeyinarr){console.log(key,-----,arr[key]);}数组的遍历方式推荐传统的 for 循环或者 forEach 方法或者 for…of 循环。2.2 for…of 循环for…of 语句用于遍历可迭代对象如 Array, Map, Set, String, arguments 等的值。2.2.1 基本语法for(variableofiterable){// 执行的代码}特点● 遍历可迭代对象的值● 不会遍历对象的属性● 是 ES6 新增的语法● 可以配合 break, continue 和 return 使用2.2.2 遍历数组、Set、字符串数组、Set、字符串等都是可迭代对象都可以使用 for…of来遍历这些对象中的值代码如下// 数组letarr[1,2,3,4];for(constvalueofarr){console.log(value);}// Set集合letmySetnewSet();mySet.add(张三);mySet.add(李四);mySet.add(王五);for(constnameofmySet){console.log(name);}// 字符串letnameking;for(constcofname){console.log(c);}2.2.3 变量名做属性名时需要 [ ]用变量名做对象属性名时需要使用 [ ]如下代码letpropertyNamename;letuser{[propertyName]:jack,};console.log(user[propertyName]);2.2.4 关于 Symbol 值做对象的键Symbol可以创建唯一值用它做对象属性的键可以保证一定可以创建一个新的属性代码如下letpropertyNameSymbol(随便);letmethodNameSymbol(随便);// Symbol值独一无二console.log(propertyNamemethodName);// false// 用Symbol值做属性名做方法名letuser{[propertyName]:jackson,[methodName](){console.log(这是一个方法);}};// 访问属性、调用方法console.log(user[propertyName]);user[methodName]();2.2.5 关于 Symbol.iteratorSymbol.iterator 就是一个内置的 Symbol 值。它是一个变量存着一个 Symbol 值。它被作为一个约定好的名字让 JS 知道你这个对象怎么被 for…of 遍历。怎么能够知道这个对象是否能够被 for…of遍历typeof obj[Symbol.iterator] ‘function’如果是 true 则表示该对象是可迭代对象可以被 for…of遍历。怎么能够让一个不可迭代的对象变成可迭代的对象在对象内部添加一个 Symbol.iterator {}方法这是程序员与 for…of之间的约定。2.2.6 实现可迭代对象让该对象实现 Symbol.iterator方法【在这个方法中编写自定义的迭代逻辑】。对象就可以被 for…of遍历。 代码如下// 要想实现对象可迭代必须手动编写迭代器编写迭代规则。// Js的执行引擎和Js程序员之间怎么约定的呢?我们程序员把迭代规则写到什么地方呢?// 通过 Symbol.iterator 来约定.// Symbol.iterator是JS内置的变量这个变量中保存了“获取迭代器对象” 的 方法名。// 这个方法是干啥的?返回一个迭代器对象。然后我们程序员就可以在这个迭代器对象内部指定具体的迭代规则。// 我要达到的效果:希望user对象是可迭代的。并且迭代user对象的时候请把user对象中data数组迭代一下。letuser{arr:[1,2,3],[Symbol.iterator](){letindex0;return{next:(){if(indexthis.arr.length){return{done:false,value:this.arr[index]};}else{return{done:true};}}}}}for(constvalofuser){console.log(val);}//实现迭代器遍历对象属性letvip{name:jack,age:18,sex:1,password:123456,[Symbol.iterator](){letindex0;letkeysObject.keys(this);return{next:(){if(indexkeys.length){return{done:false,value:this[keys[index]]}}else{return{done:true}}}}}}for(constvalofvip){console.log(val);}2.2.7 生成器函数为了让迭代器写起来更简单专门为迭代器准备了一个生成器函数可以大大简化迭代器代码的编写。生成器函数是迭代器的语法糖。按照下面代码格式编写生成器函数会返回一个迭代器。function* 是生成器函数的标志// 生成器函数function*generator(){yield1;yield2;yield3;}// 调用生成器函数返回迭代器对象constgengenerator();// 通过迭代器对象来取值(根据迭代器协议所有迭代器对象都有next()方法并且next()方法的执行结果是一个含有value和done属性的对象done为true时表示已迭代完毕。)console.log(gen.next().value);console.log(gen.next().value);console.log(gen.next().value);yield 可以理解为 “暂停并返回值”每次调用迭代器的 .next() 方法时函数会执行到下一个 yield 处暂停yield 后面的表达式会被作为返回值2.2.8 使用生成器函数简化代码letuser{name:jack,age:18,weight:50,[Symbol.iterator]:function*(){letkeysObject.keys(this);// for(let index 0;indexkeys.length;index){// yield this[keys[index]];// }for(letpropertyNameinthis){yieldthis[propertyName];}}}for(letvalofuser){console.log(val);}3. 跳转语句● break 语句● continue 语句● return 语句 (在函数中)十三、JavaScript 异常处理异常处理是 JavaScript 编程中的重要概念它能帮助我们优雅地处理程序运行中可能出现的错误情况。本文将从基础语法角度详细介绍 JavaScript 中的异常处理机制。1. 异常处理的基本概念1.1 什么是异常异常Exception是指程序执行过程中出现的意外情况它会打断代码的正常执行流程。例如constnum10;console.log(num.toUpperCase());// TypeError: num.toUpperCase is not a function1.2 错误类型JavaScript 中有几种常见的错误类型● Error通用错误类型所有其他错误类型的基类● SyntaxError语法错误● ReferenceError引用未定义的变量● TypeError类型错误如调用不存在的方法● RangeError数值超出有效范围● URIErrorURI 处理函数使用不当2. 基础异常处理语法2.1 try-catch 语句try-catch 是 JavaScript 中最基本的异常处理结构try{// 可能出错的代码constresultriskyOperation();console.log(result);}catch(error){// 出错时执行的代码console.log(发生错误:,error.message);}当catch语句里不需要异常对象时可以简写成以下代码try{// 可能抛出异常的代码}catch{// 注意这里没有 error 参数// 仍然可以处理错误但无法访问错误对象console.log(发生了错误但不知道具体是什么错误);}2.2 finally 语句finally 块中的代码无论是否发生异常都会执行try{console.log(尝试执行);constdataJSON.parse(无效的JSON);}catch(error){console.log(捕获到错误:,error.message);}finally{console.log(这部分总会执行);}2.3 throw 语句使用 throw 可以主动抛出异常functioncheckAge(age){if(age0){thrownewError(年龄不能为负数);}if(age18){thrownewError(未满18岁);}return验证通过;}try{checkAge(-5);}catch(error){console.log(error.message);// 年龄不能为负数}3. Error 对象属性Error 对象的主要属性try{notDefinedFunction();}catch(err){console.log(err.name);// ReferenceErrorconsole.log(err.message);// notDefinedFunction is not definedconsole.log(err.stack);// 堆栈跟踪信息调试用}4. 自定义异常4.1 创建自定义异常类JavaScript 通过继承 Error 类来实现自定义异常classMyCustomErrorextendsError{constructor(message,extraInfo){super(message);// 调用父类构造函数this.nameMyCustomError;// 设置错误名称this.extraInfoextraInfo;// 添加自定义属性this.timestampnewDate();// 添加时间戳}logError(){console.error([${this.timestamp}]${this.name}:${this.message});}}4.2 使用自定义异常functionvalidateInput(input){if(!input){thrownewMyCustomError(输入不能为空,{code:EMPTY_INPUT});}if(input.length5){thrownewMyCustomError(输入太短,{code:TOO_SHORT,minLength:5});}}try{validateInput(abc);}catch(err){if(errinstanceofMyCustomError){err.logError();// 调用自定义方法console.log(额外信息:,err.extraInfo);}else{console.error(其他错误:,err);}}十四、avaScript常用全局函数以下是 JavaScript 中可以直接调用的全局函数不依赖任何对象属于全局作用域包括 ECMAScript 标准函数 和 浏览器环境提供的函数并附带简单示例1. ECMAScript 标准全局函数1.1 类型转换函数1.2 数值处理函数1.3 URI 编码/解码函数URL 中如果含有中文、空格等特殊字符时浏览器向服务器发送请求后服务器接收到的 URL 可能是乱码。为了避免这种情况的发生建议在传参前对 URL 进行编码在服务器中接参后解码。encodeURI 编码时会保留URL结构字符不编 ?#[]!$()*,;encodeURIComponent 编码时不会保留 URL 结构字符全部都编适合单独仅对参数值进行编码。它的使用频率较高。因为大部分情况下是对参数值进行编码例如 用户提交的数据是 ?xabcydef如果不对这个参数值进行编码服务器会把这个参数值中的 ?当做结构字符来处理。我想让服务器把它们当成普通数据而不是解析成结构。JavaScript中所有URI编码/解码函数都固定采用UTF-8字符集1.4 其他 ECMAScript 全局函数2. 浏览器环境提供的全局函数2.1 定时器函数2.2 定时器函数