js中switch的用法？switch中default用法
这篇文章给大家聊聊关于js中switch的用法，以及switch中default用法对应的知识点，希望对各位有所帮助，不要忘了收藏本站哦。
js 四则运算 switch
加减法
[javascript] view plain copy
function accAdd(arg1,arg2){
var r1,r2,m;
try{r1=arg1.toString().split(".")[1].length}catch(e){r1=0}
try{r2=arg2.toString().split(".")[1].length}catch(e){r2=0}
m=Math.pow(10,Math.max(r1,r2))
return(arg1*m+arg2*m)/m
}
原理：
取小数位多的一个（Math.max(r1,r2)）
将加数都乘以10的m次方（变成整数）
相加后再除以m，得出精确数据
乘除法：
[javascript] view plain copy
function accMultiply(arg1,arg2){
var m=0,s1=arg1.toString(),s2=arg2.toString();
try{m+=s1.split(".")[1].length}catch(e){}
try{m+=s2.split(".")[1].length}catch(e){}
return Number(s1.replace(".",""))*Number(s2.replace(".",""))/Math.pow(10,m);
}
原理：
将乘数和被乘数转成字符串，计算其小数点后位数的和（m）
将乘数和被乘数去掉小数点（转成整数）后，转为Number类型（可以精确乘运算）
相乘后除以10的m次方，得出精确数据
js中if判断多个条件怎么写的
在 JavaScript中，使用 if判断多个条件时，可以通过逻辑操作符&&（与）、||（或）以及()（分组）灵活组合条件。以下是具体方法和示例：
1.基本用法&&（与操作符）：所有条件需同时为 true，整体才为 true。
if(condition1&& condition2){//仅当 condition1和 condition2都为 true时执行}||（或操作符）：任一条件为 true，整体即为 true。
if(condition1|| condition2){//当 condition1或 condition2至少一个为 true时执行}2.组合多个条件通过混合使用&&和||，可以构建复杂逻辑。注意运算符优先级：&&高于||，建议用()明确分组。
示例 1：用户年龄和登录状态const userAge= 20;const isLoggedIn= true;if(userAge> 18&& isLoggedIn){ console.log("允许访问");//两个条件均满足时执行} else{ console.log("拒绝访问");}示例 2：复杂条件（优先级分组）const hasPermission= true;const isAdmin= false;const isTrialUser= true;//优先级：()>&&>||if((hasPermission|| isAdmin)&& isTrialUser){ console.log("允许试用功能");} else{ console.log("无权限");}3.注意事项运算符优先级：
&&的优先级高于||，不加括号可能导致逻辑错误。
错误示例：if(A|| B&& C)//实际解析为 A||(B&& C)，可能不符合预期
正确做法：用()明确优先级：if((A|| B)&& C)//明确分组
条件类型一致性：
确保条件返回布尔值（或可隐式转换为布尔值，如 0、""为 false）。
代码可读性：
复杂条件建议拆分为变量或函数，避免冗长的嵌套。const isEligible=(userAge> 18)&& isLoggedIn;if(isEligible){/*...*/}
4.扩展：其他多条件判断方式switch语句：适合多分支等值判断。三元运算符：简单条件赋值。const result=(A&& B)?"通过":"不通过";通过合理组合逻辑操作符和分组，可以高效处理多条件判断。关键点：明确优先级、保持代码清晰、验证条件类型。
less的LESS 原理及使用方式
本质上，LESS包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 CSS文件。LESS并没有裁剪 CSS原有的特性，更不是用来取代 CSS的，而是在现有 CSS语法的基础上，为 CSS加入程序式语言的特性。我们可以直接在客户端使用.less（LESS源文件），只需要从下载 less.js文件，然后在我们需要引入 LESS源文件的 HTML中加入如下代码：
<link rel=stylesheet/less type=text/css href=styles.less>
LESS源文件的引入方式与标准 CSS文件引入方式一样：
<link rel=stylesheet/less type=text/css href=styles.less>
需要注意的是：在引入.less文件时，rel属性要设置为“stylesheet/less”。还有更重要的一点需要注意的是：LESS源文件一定要在 less.js引入之前引入，这样才能保证 LESS源文件正确编译解析。 LESS在服务器端的使用主要是借助于 LESS的编译器，将 LESS源文件编译生成最终的 CSS文件，目前常用的方式是利用 node的包管理器(npm)安装 LESS，安装成功后就可以在 node环境中对 LESS源文件进行编译。
在项目开发初期，我们无论采用客户端还是服务器端的用法，我们都需要想办法将我们要用到的 CSS或 LESS文件引入到我们的 HTML页面或是桥接文件中，LESS提供了一个我们很熟悉的功能— Importing。我们可以通过这个关键字引入我们需要的.less或.css文件。如：
@import“variables.less”;
.less文件也可以省略后缀名，像这样：
@import“variables”;
引入 CSS同 LESS文件一样，只是.css后缀名不能省略。 LESS允许开发者自定义变量，变量可以在全局样式中使用，变量使得样式修改起来更加简单。
我们可以从下面的代码了解变量的使用及作用：
清单 3 LESS文件@border-color:#b5bcc7;.mythemes tableBorder{ border: 1px solid@border-color;}
经过编译生成的 CSS文件如下：
清单 4. CSS文件.mythemes tableBorder{ border: 1px solid#b5bcc7;}
从上面的代码中我们可以看出，变量是 VALUE（值）级别的复用，可以将相同的值定义成变量统一管理起来。
该特性适用于定义主题，我们可以将背景颜色、字体颜色、边框属性等常规样式进行统一定义，这样不同的主题只需要定义不同的变量文件就可以了。当然该特性也同样适用于 CSS RESET（重置样式表），在 Web开发中，我们往往需要屏蔽浏览器默认的样式行为而需要重新定义样式表来覆盖浏览器的默认行为，这里可以使用 LESS的变量特性，这样就可以在不同的项目间重用样式表，我们仅需要在不同的项目样式表中，根据需求重新给变量赋值即可。
LESS中的变量和其他编程语言一样，可以实现值的复用，同样它也有生命周期，也就是 Scope（变量范围，开发人员惯称之为作用域），简单的讲就是局部变量还是全局变量的概念，查找变量的顺序是先在局部定义中找，如果找不到，则查找上级定义，直至全局。下面我们通过一个简单的例子来解释 Scope。
清单 5. LESS文件@width: 20px;#homeDiv{@width: 30px;#centerDiv{ width:@width;//此处应该取最近定义的变量 width的值 30px}}#leftDiv{ width:@width;//此处应该取最上面定义的变量 width的值 20px}
经过编译生成的 CSS文件如下：
清单 6. CSS文件#homeDiv#centerDiv{ width: 30px;}#leftDiv{ width: 20px;} Mixins（混入）功能对用开发者来说并不陌生，很多动态语言都支持 Mixins（混入）特性，它是多重继承的一种实现，在 LESS中，混入是指在一个 CLASS中引入另外一个已经定义的 CLASS，就像在当前 CLASS中增加一个属性一样。
我们先简单看一下 Mixins在 LESS中的使用：
清单 7. LESS文件//定义一个样式选择器.roundedCorners(@radius:5px){-moz-border-radius:@radius;-webkit-border-radius:@radius; border-radius:@radius;}//在另外的样式选择器中使用#header{.roundedCorners;}#footer{.roundedCorners(10px);}
经过编译生成的 CSS文件如下：
清单 8. CSS文件#header{-moz-border-radius:5px;-webkit-border-radius:5px; border-radius:5px;}#footer{-moz-border-radius:10px;-webkit-border-radius:10px; border-radius:10px;}
从上面的代码我们可以看出：Mixins其实是一种嵌套，它允许将一个类嵌入到另外一个类中使用，被嵌入的类也可以称作变量，简单的讲，Mixins其实是规则级别的复用。
Mixins还有一种形式叫做 Parametric Mixins（混入参数），LESS也支持这一特性：
清单 9. LESS文件//定义一个样式选择器.borderRadius(@radius){-moz-border-radius:@radius;-webkit-border-radius:@radius; border-radius:@radius;}//使用已定义的样式选择器#header{.borderRadius(10px);//把 10px作为参数传递给样式选择器}.btn{.borderRadius(3px);////把 3px作为参数传递给样式选择器}
经过编译生成的 CSS文件如下：
清单 10. CSS文件#header{-moz-border-radius: 10px;-webkit-border-radius: 10px; border-radius: 10px;}.btn{-moz-border-radius: 3px;-webkit-border-radius: 3px; border-radius: 3px;}
我们还可以给 Mixins的参数定义一人默认值，如
清单 11. LESS文件.borderRadius(@radius:5px){-moz-border-radius:@radius;-webkit-border-radius:@radius; border-radius:@radius;}.btn{.borderRadius;}
经过编译生成的 CSS文件如下：
清单 12. CSS文件.btn{-moz-border-radius: 5px;-webkit-border-radius: 5px; border-radius: 5px;}
像 JavaScript中arguments一样，Mixins也有这样一个变量：@arguments。@arguments在 Mixins中具是一个很特别的参数，当 Mixins引用这个参数时，该参数表示所有的变量，很多情况下，这个参数可以省去你很多代码。
清单 13. LESS文件.boxShadow(@x:0,@y:0,@blur:1px,@color:#000){-moz-box-shadow:@arguments;-webkit-box-shadow:@arguments; box-shadow:@arguments;}#header{.boxShadow(2px,2px,3px,#f36);}
经过编译生成的 CSS文件如下：
清单 14. CSS文件#header{-moz-box-shadow: 2px 2px 3px#FF36;-webkit-box-shadow: 2px 2px 3px#FF36; box-shadow: 2px 2px 3px#FF36;}
Mixins是 LESS中很重要的特性之一，我们这里也写了很多例子，看到这些例子你是否会有这样的疑问：当我们拥有了大量选择器的时候，特别是团队协同开发时，如何保证选择器之间重名问题？如果你是 java程序员或 C++程序员，我猜你肯定会想到命名空间 Namespaces，LESS也采用了命名空间的方法来避免重名问题，于是乎 LESS在 mixins的基础上扩展了一下，看下面这样一段代码：
清单 15. LESS文件#mynamespace{.home{...}.user{...}}
这样我们就定义了一个名为 mynamespace的命名空间，如果我们要复用 user这个选择器的时候，我们只需要在需要混入这个选择器的地方这样使用就可以了。#mynamespace>.user。在我们书写标准 CSS的时候，遇到多层的元素嵌套这种情况时，我们要么采用从外到内的选择器嵌套定义，要么采用给特定元素加 CLASS或 ID的方式。在 LESS中我们可以这样写：
清单 16. HTML片段<div id=home><div id=top>top</div><div id=center><div id=left>left</div><div id=right>right</div></div></div>清单 17. LESS文件#home{ color: blue; width: 600px; height: 500px; border:outset;#top{ border:outset; width: 90%;}#center{ border:outset; height: 300px; width: 90%;#left{ border:outset; float: left; width: 40%;}#right{ border:outset; float: left; width: 40%;}}}
经过编译生成的 CSS文件如下：
清单 18. CSS文件#home{ color: blue; width: 600px; height: 500px; border: outset;}#home#top{ border: outset; width: 90%;}#home#center{ border: outset; height: 300px; width: 90%;}#home#center#left{ border: outset; float: left; width: 40%;}#home#center#right{ border: outset; float: left; width: 40%;}
从上面的代码中我们可以看出，LESS的嵌套规则的写法是 HTML中的 DOM结构相对应的，这样使我们的样式表书写更加简洁和更好的可读性。同时，嵌套规则使得对伪元素的操作更为方便。
清单 19. LESS文件a{ color: red; text-decoration: none;&:hover{//有&时解析的是同一个元素或此元素的伪类，没有&解析是后代元素 color: black; text-decoration: underline;}}
经过编译生成的 CSS文件如下：
清单 20. CSS文件 a{ color: red; text-decoration: none;} a:hover{ color: black; text-decoration: underline;}在我们的 CSS中充斥着大量的数值型的 value，比如 color、padding、margin等，这些数值之间在某些情况下是有着一定关系的，那么我们怎样利用 LESS来组织我们这些数值之间的关系呢？我们来看这段代码：
清单 21. LESS文件@init:#111111;@transition:@init*2;.switchColor{ color:@transition;}
经过编译生成的 CSS文件如下：
清单 22. CSS文件.switchColor{ color:#222222;}
上面的例子中使用 LESS的 operation是特性，其实简单的讲，就是对数值型的 value（数字、颜色、变量等）进行加减乘除四则运算。同时 LESS还有一个专门针对 color的操作提供一组函数。
使用这些函数和 JavaScript中使用函数一样。
清单 23 LESS文件init:#f04615;#body{ background-color: fadein(@init, 10%);}
经过编译生成的 CSS文件如下：
清单 24. CSS文件#body{ background-color:#f04615;}
从上面的例子我们可以发现，这组函数像极了 JavaScript中的函数，它可以被调用和传递参数。这些函数的主要作用是提供颜色变换的功能，先把颜色转换成 HSL色，然后在此基础上进行操作，LESS还提供了获取颜色值的方法，在这里就不举例说明了。
LESS提供的运算及函数特性适用于实现页面组件特性，比如组件切换时的渐入渐出。同类框架还有 SASS:与 LESS相比，两者都属于 CSS预处理器，功能上大同小异，都是使用类似程序式语言的方式书写 CSS,都具有变量、混入、嵌套、继承等特性，最终目的都是方便 CSS的书写及维护。
LESS和 SASS互相促进互相影响，相比之下 LESS更接近 CSS语法。
好了，本文到此结束，如果可以帮助到大家，还望关注本站哦！