找回密码
 立即注册
首页 业界区 业界 JavaScript同样的意思,更巧的写法

JavaScript同样的意思,更巧的写法

郗新语 2025-5-29 16:31:29
   今天来介绍一下javascript不一样的写法,很简单哦。
1、当条件成立时执行a方法,当条件失败是执行b方法
通常我们会这样写:
  1. var result;
  2. if(isOk){
  3.   result=funA();
  4. }else{
  5. result=funB();
  6. }
复制代码
还可以这样表达:
  1. var result=isOk? funA():funB()
复制代码
2、当条件成立执某个方法
通常方式:
  1. if(isOk){
  2.      doSomething();
  3. }
复制代码
我更喜欢这样写:
  1. isOk&&doSomething();
复制代码
如果一个变量没定义或没有值则给它一默认值
  1. str=str||"ok";
  2. arr=arr||[];
复制代码
上面的方式可行,是因为在js逻辑运算中,返回值不一定是true或false,也可以是其他任何值,而且 0、""、null、false、undefined、NaN都会判为false,其他都为true。举例:
  1. 1&&"OK"  //表达式的值为字符串"OK",逻辑上被判定为 true
  2. 1||"OK"  //表达式的值为数字1,逻辑上被判定为 true
  3. null||[]  //表达式的值为数组[],逻辑上被判定为 true
  4. null&&[]  //表达式的值为null,逻辑上被判定为 false
复制代码
3、当进行多个条件判段时
    给一个例子:每种颜色对应一个值,比如"white","red","green","yellow","gray","blue" 分别对应的值为0,1,2,3,4,5
1) 问题一:根据值获取颜色
实现方式一
  1. function getColorByVal(val) {
  2.     var color = "";
  3.     if (val == 0){
  4.         color = "white";
  5.     }else if (val == 1) {
  6.         color = "red";
  7.     } else if (val == 2) {
  8.         color = "green";
  9.     } else if (val == 3) {
  10.         color = "yellow";
  11.     } else if (val == 4) {
  12.         color = "gray";
  13.     } else if (val == 5) {
  14.         color = "blue";
  15.     }
  16.     return color;
  17. }
复制代码
实现方式二
  1. function getColorByVal(val) {
  2.     var color;
  3.     switch (val) {
  4.         case 0:
  5.             color = "white";
  6.         case 1:
  7.             color = "red";
  8.             break;
  9.         case 2:
  10.             color = "green";
  11.             break;
  12.         case 3:
  13.             color = "yellow";
  14.             break;
  15.         case 4:
  16.             color = "gray";
  17.             break;
  18.         case 5:
  19.             color = "blue";
  20.             break;
  21.             
  22.     }
  23.     return color;
  24. }
复制代码
实现方式三
  1. function getColorByVal(val) {
  2.    return ["white","red","green","yellow","gray","blue"][val];
  3. }
复制代码
调用: var color=getColorByVal(2);
方式一和方式二相比没什么差别,但方式二稍微好一点,而方式三则是让人眼前一亮,短小精悍就完成了功能。不过有的人会说颜色的值刚好是数组下标,所以我们再来一题:
2) 问题二:根据颜色获取值

你可以用if 或switch 语句来完成,不过这里给出另外两种方式:
方式一:
  1. function getValByColor(color){
  2.     var colors=["white","red","green","yellow","gray","blue"];
  3.     var result;
  4.      for(var i=colors.length;i--;){
  5.         if(colors[i]==color){
  6.             result=i;
  7.             break;
  8.         }
  9.      }
  10.      return result;
  11. }
复制代码
方式二:
  1. function getValByColor(color){
  2.     return {"white":0,"red":1,"green":2,"yellow":3,"gray":4,"blue":5}[color];
  3. }
复制代码
调用: var val=getValByColor("red");
对比一下很明显,方式二更简单而且易懂,巧妙在于构造一个对象,通过属性获取值,从而避开了繁琐的判断。
 4、交换两个变量的值
通常是这样实现的:
  1. var temp=0,a=5,b=10;
  2. temp=a;
  3. a=b;
  4. b=temp;
复制代码
不过还可以更巧一些:
  1. var a=5,b=10;
  2. a=[b,b=a][0];
复制代码
  1. a=[b,b=a][0] 执行过程:先执行数组里两个表达式b和b=a,作用是把5赋值给b并产生一个数组[10,5] ,然后 a=[10,5][0]即 a=10,这样就完成了交换,不过也借助了无名的数组,但看起来好想没借助第三个变量,不过不提倡这样做,毕竟第一种方式更易懂。<br><br><strong>5、获取对象的属性<br><br></strong>方式一
复制代码
  1. var arr=[],i=0;
  2. var colors={"white":0,"red":1,"green":2,"yellow":3,"gray":4,"blue":5};
  3. for(var key in colors){
  4.    arr[i++]=key;
  5. }
复制代码
方式二
  1. var arr=[],i=0;
  2. var colors={"white":0,"red":1,"green":2,"yellow":3,"gray":4,"blue":5};
  3. for(arr[i++] in colors);
复制代码
      两种方式都得到了对象colors的属性(arr=["white", "red", "green", "yellow", "gray", "blue"]), 第二种方式不过搭了 for in 语句的顺风车。方式一中for in语句依次从colors获取一个属性赋值给key,只不过在方式二中赋值给了arr[i++]。这个纯粹是为了好玩,享受编程的乐趣也是编程的一部分吧。。
   是不是发现javascript也很有意思呢? 有意思就推荐一下吧。

来源:程序园用户自行投稿发布,如果侵权,请联系站长删除
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!
您需要登录后才可以回帖 登录 | 立即注册