强大且广受欢迎的编程语言JavaScript具有庞大的内置函数库,可用于执行各种任务。 本文涵盖了每个开发人员都应该知道的15个JavaScript特性。无论您是新手还是经验丰富的开发人员,这些功能都会派上用场。那么,让我们来讨论一下这15个重要的JavaScript特性。1。重复一个字符串 要在JavaScript中多次重复一个字符串,您可以使用普通方法或速记方法。速写: 您可以使用循环多次重复一个字符串。 以下是如何使用for循环执行此操作的示例:functionrepeatString(string,num){letresult;for(leti0;inum;i){结果字符串;}返回结果;}console。log(repeatString(你好,5));输出:HelloHelloHelloHelloHello速记: 在速记方法中,我们使用该repeat()方法多次重复一个字符串。 repeat()仅支持现代浏览器,因此您必须使用普通方法来支持旧浏览器。例子:console。log(你好。重复(5));输出:HelloHelloHelloHelloHello2。数组的组合 在JavaScript中,您可以使用普通方法和快捷方法来合并两个或多个数组。速写: 以下是如何使用for循环执行此操作的示例:让array1〔10,20,30〕;让array2〔40,50,60〕;让mergedArray〔〕;for(leti0;iarray1。length;i){mergedArray。推(array1〔i〕);}for(leti0;iarray2。length;i){mergedArray。推(array2〔i〕);}控制台。日志(合并数组);输出:〔10,20,30,40,50,60〕速记: 对于速记,您可以使用concat()、。。。和reduce()方法。concat()and方法通过。。。将第二个数组的元素附加到第一个数组的末尾来组合两个或多个数组的元素。 以下是如何使用contact(),。。。方法的示例:concat()让array1〔10,20,30〕;让array2〔40,50,60〕;让mergedArrayarray1。连接(数组2);控制台。日志(合并数组);输出:〔10,20,30,40,50,60〕。。。letarray1〔10,20,30〕;让array2〔40,50,60〕;让mergedArray〔。。。array1,。。。array2〕;控制台。日志(合并数组);输出:〔10,20,30,40,50,60〕 如果您想以不同的方式组合数组,可以使用reduce()方法。例子:reduce()letarray1〔10,20,30〕;让array2〔40,50,60〕;让mergedArrayarray1。reduce((acc,val)acc。concat(val),array2);控制台。日志(合并数组);输出:〔40,50,60,10,20,30〕3。函数接受的参数 您可以通过3种不同的方式找到函数接受的参数数量。方法一: 根据函数定义中命名参数的数量,函数的length属性返回函数期望接收的参数数量。functionmyFunction(a,b,c){函数体}console。日志(myFunction。length);输出:3方法二: 传递给函数的参数存储在一个名为的对象中argument,它看起来像一个数组。使用length参数对象的属性,您可以找出有多少参数传递给函数。 由于对象arguments不是真正的数组,因此并非所有数组方法都可以访问。如果您希望在对象上使用数组方法,请使用该Array。from()函数将arguments对象转换为实际数组。函数myFunction(a,b,c){myFunction(a,b,c){console。log(arguments。length);输出:3}myFunction(1,2,3); 您不能使用该arguments对象来计算函数期望从函数外部获得多少参数,因为它只能在函数内部访问。length然后需要使用该属性,就像在方法1中一样。4。JavaScript中的循环 JavaScript提供了几种类型的循环来重复重复代码块。 一些常用的循环示例是:for循环 自增或自减表达式、循环条件和for循环的变量是它的三个主要部分。只要条件为真,循环就会一直运行。 从1计数到5的for循环示例:for(让i1;i5;i){console。log(一);} 输出:12345forin循环 您可以使用循环遍历对象的属性forin。 在此示例中,我们使用循环遍历对象的属性forin。 例子:让对象{a:1,b:2,c:3};对象{a:1,b:2,c:3};for(letpropertyinobject){console。log(property:object〔property〕);} 输出:一个:1乙:2丙:3for循环 如果可迭代对象是数组或字符串,您可以使用forof循环来迭代这些值。 forof使用循环迭代元素数组:让数组〔1,2,3〕;for(let数组元素){console。日志(元素);} 输出:1235。字符串转数组 您可以使用该split方法在JavaScript中将字符串转换为数组。此方法使用分隔符字符串或正则表达式将字符串拆分为子字符串。 以下示例显示如何使用方法将字符串转换为数组split:letstringapple,banana,orange;string苹果、香蕉、橘子;letarraystring。split(,);安慰。日志(数组);打印〔apple,banana,orange〕 使用速记方法,您可以获得相同的结果:letstringapple,banana,orange;string苹果、香蕉、橘子;letarray〔。。。string。split(,)〕;安慰。日志(数组);打印〔apple,banana,orange〕 您可以使用forloop。使用此方法,您可以通过将每个字符推入其自己的数组来将字符串转换为数组。 一个例子是:letstringapple,banana,orange;string苹果、香蕉、橘子;让数组〔〕;for(leti0;istring。length;i){array。push(string〔i〕);}控制台。日志(数组);打印〔a,p,p,l,e,,,b,a,n,a,n,a,,,n,g,e〕 在此方法中,不是将字符串拆分为子字符串,而是字符串的每个字符都是数组中的一个单独元素。split方法允许您根据分隔符分隔字符串,如前两个示例所示。6。数组中的最大值和最小值 您可以使用下面的JavaScript示例查找数组中的最大数和最小数。 速写:找出数组中的最大数constarray〔3,7,1,9,2,5〕;让maxNumberarray〔0〕;for(leti1;iarray。length;i){if(array〔i〕maxNumber){maxNumberarray〔i〕;}}}控制台。日志(最大数量);输出:9找到数组中的最小数constarray〔3,7,1,9,2,5〕;让minNumberarray〔0〕;for(leti1;iarray。length;i){if(array〔i〕minNumber){minNumberarray〔i〕;}}}控制台。日志(最小数量);输出:1 使用Math。max()andMath。min(),您可以轻松计算最大值或最小值:找出数组中的最大数constarray〔3,7,1,9,2,5〕;常数maxNumber数学。最大值(。。。数组);控制台。日志(最大数量);输出:9找到数组中的最小数constarray〔3,7,1,9,2,5〕;constminNumber数学。分钟(。。。数组);控制台。日志(最小数量);输出:17。将字符串转换为数字 要在JavaScript中将字符串转换为数字,有几种方法。 使用parseInt()或parseFloat()功能:将字符串转换为整数constnum142;constnum2parseInt(num1);num2现在是值为42的数字类型将字符串转换为浮点数constnum33。14;constnum4parseFloat(num3);num4现在是数字类型,值为3。14 使用一元加运算符():将字符串转换为数字constnum142;常量num2num1;num2现在是值为42的数字类型将字符串转换为负数constnum342;常量num4num3;num4现在是数字类型,值为428。为多个变量赋值 JavaScript提供了普通函数和速记函数来为多个变量赋值: 使用单独的赋值语句方法:让x;让你;让z;x1;y2;z3; 解构赋值简写法:让x,y,z;〔x,y,z〕〔1,2,3〕; 解构赋值也可用于从对象分配变量:constobj{a:1,b:2,c:3};设a、b、c;({a,b,c}对象);9。指数幂 在JavaScript中有几种方法可以计算一个数的指数幂。这里有些例子:使用for循环:functionpower(base,exponent){让结果1;for(leti0;iexponent;i){结果base;}返回结果;}控制台。日志(功率(2,3));输出:8 使用Math。pow()功能:函数幂(基数,指数){返回数学。pow(基数,指数);}控制台。日志(功率(2,3));输出:8 此外,您还可以使用求幂运算符()求出数字的指数幂:常量基础2;常量指数3;常量结果基数指数;结果现在是810。双位非运算符() 在()运算符的帮助下,您可以将数字四舍五入为最接近的整数。例子:constnum3。14;constroundedNumnum;roundedNum现在是3 您可以使用()运算符代替Math。floor()。constnum3。14;constroundedNum数学。楼层(数量);roundedNum现在是3 您还可以使用()将非整数值转换为整数。例如:constnum3。14;constintNumnum;intNum现在是3 这类似于使用parseInt()函数:constnum3。14;constintNumparseInt(num);intNum现在是311。函数参数的默认值 在JavaScript中,您可以通过不同的方式为函数参数分配默认值。速写:函数问候(名称){名称名称匿名;控制台。日志(你好,{name}!);} 在上面的示例中,name参数的默认值为Anonymous。name如果调用函数时没有为参数传递值greet,它将使用默认值。速记:功能问候(名称匿名){控制台。日志(你好,{name}!);} 在此示例中,参数的默认值是使用语法name在函数定义中直接指定的。如果调用函数时没有为参数传递值,它将使用默认值。namegreet12。三元运算符 它也被称为条件运算符或三元条件运算符。 JavaScript中三元运算符的语法是:健康)状况?valueiftrue:valueiffalse;如果别的 您可以使用ifelse语句获得与三元运算符相同的结果。例子:让x10;让y20;如果(xy){最大值x;}else{最大值y;}控制台。日志(最大值);输出20 在下面的示例中,我们将使用JavaScript三元运算符:让x10;让y20;让maxValue(xy)?x:y;控制台。日志(最大值);输出20 在此示例中,条件xy被评估为false,因此的值y被分配给maxValue。如果条件为true,x则将分配给的值maxValue。 三元运算符有助于在单行代码中表达条件逻辑,尽管它比ifelse形式更难阅读和理解。 当条件逻辑变得更加复杂时,使用三元运算符是个好主意。13。交换两个变量 在JavaScript中,要交换两个变量的值,可以使用不同的方法。 这里有些例子:速写:让x1;让y2;让温度x;xy;y温度; 在上面的示例中,我们创建了一个临时变量(temp)来存储x的值,然后将x的值赋给y的值,将y的值赋给temp。让x1;让y2;〔x,y〕〔y,x〕; 在此示例中,使用解构赋值方法交换x和y的值。您可以使用解构赋值将变量分配给数组或对象的元素。无需临时变量,它可以成为交换值的便捷方式。 如果使用任何一种方法,x将为2,y将为1。14。检查多个条件 有几种不同的方法可以在JavaScript中检查多个条件。 这里有几个选项:1。使用运营商: 此运算符允许您检查多个条件是否为真。 例如:if(x0y10){0y10){执行一些代码} 如果两个条件(x0和y10)都为真,这将只执行if语句中的代码。2。使用运营商: 此运算符允许您检查多个条件中是否至少有一个为真。 例如:if(x1x2x3){1x2x3){执行一些代码} 如果x等于1、2或3,这将执行if语句中的代码。3。使用switch语句: 这允许您检查多个条件并根据给定表达式的值执行不同的代码块。例如:switch(x){case1:执行一些代码break;case2:执行一些代码break;case3:执行一些代码break;default:执行一些代码} 这将执行case块内匹配x值的代码。如果所有情况都不匹配,则将执行default块内的代码。 请务必注意,and运算符具有特定的优先顺序,因此您可能需要使用括号以您想要的方式对条件进行分组。4。数组。prototype。include() 您可以使用Array。prototype。include()方法检查JavaScript中的多个条件。 例子:常数值2;if(〔1,one,2,two〕。includes(value)){控制台。log(该值为1、one、2或two);}else{控制台。log(该值不是1、one、2或two);}输出:值为1、one、2、 该Array。prototype。include()the函数检查值是否存在。如果存在该值,则if块内的代码将在上面的示例中运行。如果找不到该值,将执行else块中的代码。15。删除属性 delete运算符允许您从对象中删除多个属性。 以下面为例:让obj{prop1:value1,prop2:value2,prop3:value3,prop4:value4};删除对象。支柱1;删除对象。支柱3;控制台。日志(对象);输出{prop2:value2,prop4:value4} 或者,您可以使用该Object。assign()方法创建一个删除了所需属性的新对象。 例子:让obj{prop1:value1,prop2:value2,prop3:value3,prop4:value4};让newObj对象。分配({},对象);删除新对象。支柱1;删除新对象。支柱3;控制台。日志(新对象);输出{prop2:value2,prop4:value4} 在现代JavaScript(ES6及更高版本)中,您可以使用Object。entries()和Object。fromEntries()方法从对象中删除多个属性。 例子:让obj{prop1:value1,prop2:value2,prop3:value3,prop4:value4};让newObj对象。fromEntries(Object。entries(obj)。filter((〔key〕)key!prop1key!prop3));控制台。日志(新对象);输出{prop2:value2,prop4:value4} 如果对你有帮助,记得点赞支持哦,目前我们的系统班正在讲解JavaScript正则表达式,这个课程讲完系统班的JavaScript阶段就算完结了,正式开始进入ES6阶段了,这几个月我们在JavaScript课程中融入了大量的面试题、算法以及底层原理知识,目的就是为了帮助大家夯实基础,查漏补缺,有扎实的JavaScript基础,对于学到后面阶段更加有帮助!这也是2023年通向职业道路,面试求职必须要懂得的技术能力!感兴趣可以联系我参与! 为了更好的让大家认识到JavaScript的精髓,我们在三十天计划群里推出了几节非常重要的JavaScript课程体系,而且每个系列知识点都保障是完整的。感兴趣可以通过下方的练习方式参与课程哦。如果你正在学习JavaScript,我们已经在三十天计划中完成了4个综合项目实战,那不妨可以听下这个课程体系,三十天计划群里还提供了算法、数组等知识体系! 前端工程师成长方法 更多完整JavaScript课程体系在我们的系统班里有完整的呈现,包含了JavaScript基础篇、重点、算法、原理、面试题、实战案例讲解!同时也为你提供了前端高级工程师成长体系!(详细看下图内容) 如果需要深度学习的同学可以联系助理老师了解详细的课程以及课程的报名方式!(不定期会推出活动,有大额优惠券推出,活动详情联系助理老师了解即可!)如果你才开始学习前端,那么可以先学习我们的三十天计划(零基础的同学报名系统班同学可以和老师沟通制定学习计划,可以得到更快的成长!) 为帮助到一部分同学不走弯路,真正达到一线互联网大厂前端项目研发要求,首次实力宠粉,打造了《30天挑战学习计划》,内容如下: HTMLHTML5,CSSCSS3,JavaScript,真实企业项目开发,云服务器部署上线,从入门到精通PC端项目开发(1个)移动WebApp开发(2个)多端响应式开发(1个) 共4大完整的项目开发!一行一行代码带领实践开发,实际企业开发怎么做我们就是怎么做。从学习一开始就进入工作状态,省得浪费时间。 从学习一开始就同步使用Git进行项目代码的版本的管理,Markdown记录学习笔记,包括真实大厂项目的开发标准和设计规范,命名规范,项目代码规范,SEO优化规范 从蓝湖UI设计稿到PC端,移动端,多端响应式开发项目开发真机调试,云服务部署上线;Linux环境下的Nginx部署,Nginx性能优化;Gzip压缩,HTTPS加密协议,域名服务器备案,解析;企业项目域名跳转的终极解决方案,多网站、多系统部署;使用使用Git在线项目部署; 这些内容在《30天挑战学习计划》中每一个细节都有讲到,包含视频图文教程项目资料素材等。只为实力宠粉,真正一次掌握企业项目开发必备技能,不走弯路! 过程中【不涉及】任何费用和利益,非诚勿扰。 如果你没有添加助理老师微信,可以添加下方微信,说明要参加30天挑战学习计划,来自今日头条!老师会邀请你进入学习,并给你发放相关资料。 30天挑战学习计划Web前端从入门到实战arry老师的博客艾编程