JavaScript中的 || 与 &&的使用

目录

• 一、使用描述
  • 1、|| 和 && ✨
  • 2、三元运算
  • 3、总结
• 二、控制台测试
  • 1、||
  • 2、&&
• 三、更多使用
  • 1、容错判断
  • 2、条件设定

---

Top

一、使用描述

1、|| 和 && ✨

  以前在js逻辑代码中，常常会用到类似于三元运算的||逻辑运算符。

// 如果this.redirect为真，就使用它，不然就使用 "/"
this.$router.replace(this.redirect || '/')

  今天在vue项目中实现登录跳转未遂地址优化时，发现一个比较有趣的代码：

  watch: {
    $route: {
      handler: function (route) {
	  // 如果route.query为真，使用更深层次的route.query.redirect；
	  // 如果route.query为假，直接使用它即可
        this.redirect = route.query && route.query.redirect
      },
      immediate: true
    }
  },

2、三元运算

// (关系表达式) ? 表达式1 : 表达式2;
// 关系表达式为真时，使用表达式1
// 关系表达式为假时，使用表达式2

3、总结

  三元运算并不需要将自己作为选择结果，而||、&&在参与逻辑运算的同时也将自己作为结果选项。

Top

二、控制台测试

1、||

2、&&

Top

三、更多使用

1、容错判断

由 0 || 0结果为假可知，只有在所有选项都为假的时候，结果才会为假。

// 只要有一个为真✨，即可进入
export function parseTime(time, cFormat) {
	// 没有传参、time参数为undefined/null等
	if(arguments.length === 0 || !time) {
		return null
	}
}

2、条件设定

由 1 && 1结果为真可知，只有在所有选项都为真的时候，结果才会为真。

// 监听事件
xhr.onreadystatechange = function () {
	// 若条件都满足✨，才可以进入
	if (xhr.readyState === 4 && xhr.status === 200) {
		// 3、获取响应数据
		console.log(xhr.responseText)
	}
}