JS进阶——运算符与表达式

最新推荐文章于 2024-10-14 10:50:25 发布

青墨潮

最新推荐文章于 2024-10-14 10:50:25 发布

阅读量157

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 前端开发语言

本文链接：https://blog.youkuaiyun.com/weixin_56161036/article/details/123361506

本文探讨了JavaScript中通过点运算符和中括号运算符访问对象属性的方法，并详细解释了逻辑运算符（&&、||）的工作原理，包括短路原则。通过实例展示了如何利用短路原则在函数参数中设置默认值以及增强程序的健壮性。同时，文章还提供了使用&&和||组合实现条件语句的简洁方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

属性命名

通过点（.）运算符
- 要求后面的属性名是合法的标识符，不合法的不可以使用
通过中括号（[ ]）运算符
- 中括号要求的则是一个字符串，不必是合法的标识符

var obj = {
      x:12,
      y:"xy"
  }
  console.log(obj.x);
  console.log(obj["x"]);

运算符与表达式

字面量

字面量，就是表示自身的常量

运算符

逻辑运算符 (&&、||、!)
算数运算符 (+、-、*、/)
比较运算符 (== 与 = = =、!= 与 != =、>、<)
赋值运算符( = )

逻辑运算符

逻辑运算符两边的操作都是布尔类型时
- 对于&&来说，除了两边都是真时为真，其他情况都为假
- 对于 | | 来说，除了两边都是假时为假，其他情况都为真
当两边的操作数不是布尔类型时
1. 首先，将左操作符转换成布尔类型
2. 对转换后的左操作数进行逻辑判断（true or false）
3. 根据短路原则返回原始左操作数或原始右操作数

短路原则

对于&&，转换后左边的操作数若为 true，则直接返回原始右操作数，若为 false，则直接返回原始左操作数。
对于| |，转换后的左操作数若为 true，则直接返回原始左操作数，若为 false，则直接返回原始右操作数。
练习1

//操作数非布尔类型，&&短路原则
      //null->false , {}->true，是object类型的
      console.log(2 && 4);  //4
      console.log(0 && 4);  //0
      console.log({ x: 2 } && { name: "Jack" });  //{ name: "Jack" }
      console.log(null && "hello");  //null
      console.log({} && "world");  //world

练习2

//操作数非布尔类型，||短路原则
      console.log(2 || 4);  //2
      console.log(0 || 4);  //4
      console.log({ x: 2 } || { name: "Jack" }); //{x:2}
      console.log(null || "hello");  //hello
      console.log({} || "world"); //{}

练习3

     //所有对象转换为布尔类型 都为 true
     console.log(new Boolean(false) && 234); //234
     console.log(new Boolean(false) || 234);  //Boolean(false)

短路原则应用

遵循短路特性，使用 | | 来设置函数参数的默认值

 //定义一个计算圆面积的函数area_of_circle()，它有两个参数：
   //r: 表示圆的半径；
   //pi: 表示π的值，如果不传，则默认3.14
    function area_of_circle(r, pi) {
     	return r*r*(pi||3.14);
   }

使用&& 提升程序的健壮性

//定时5秒完成任务，确保传递了callback并且callback是函数才执行callback()
    function animate(callback) {
      setTimeout(function() {
        //do something
        var a=1;
        //这个不能判断是不是 function，如果传个2 的话也可以，会崩溃
        // callback && callback();
        //表示必须传了一个函数，才会正常执行，否则到此结束
        callback && typeof callback === 'function' && callback();
      }, 5000);
    }

使用&& 和 || 可用来实现条件语句

改进后，减少了代码的量
增加了程序的执行效率
原代码：

var score = 76;
   if (score > 90) {
     console.log("优");
   } else if (score > 75) {
     console.log("良");
   } else if (score > 60) {
     console.log("及格");
   } else {
     console.log("不及格");
   }

改进后：

//通过&&和||的组合实现如上功能，注：小括号优先级最高
   console.log(
     (score > 90 && "优") ||
     (score > 75 && "良") ||
     (score > 60 && "及格") ||
     "不及格"
   );