前端入门9-JavaScript语法之运算符

时间:2022-09-04 21:18:20

声明

本系列文章内容全部梳理自以下几个来源:

作为一个前端小白,入门跟着这几个来源学习,感谢作者的分享,在其基础上,通过自己的理解,梳理出的知识点,或许有遗漏,或许有些理解是错误的,如有发现,欢迎指点下。

PS:梳理的内容以《JavaScript权威指南》这本书中的内容为主,因此接下去跟 JavaScript 语法相关的系列文章基本只介绍 ES5 标准规范的内容、ES6 等这系列梳理完再单独来讲讲。

正文-运算符

程序中的代码其实就是利用各种运算符来辅助完成各种指令功能,在 JavaScript 中,有一些不同于 Java 中的运算符处理,这次就来讲讲这些运算符。

由于我已经有了 Java 的基础了,本节不会讲基础的运算符介绍,比如算术表达式中的加减乘除取余等、关系表达式中的大于小于等、逻辑表示式中的自增、自减、移位等等,这些基础运算符的含义、用法、优先级这些跟 Java 基本没有区别,所以就不介绍了。

下面着重讲一些在 JavaScript 比较不同的行为的一些运算符:

"+" 运算符

任何数据类型的变量都可以通过 "+" 运算符来进行计算,所以它有一套处理规则,通常要么就是按数字的加法运算处理、要么就是按照字符串的拼接处理,处理规则如下:

  1. 如果操作数中存在对象类型,先将其按照上节介绍的转换规则,转成原始值;
  2. 如果操作数已经全部是原始值,此时如果有字符串类型的原始值,那么将两个原始值都转为字符串后,按字符串拼接操作处理;
  3. 如果操作数已经全部是原始值且没有字符串类型的,那么将操作数都转为数字类型后,按数字的加法处理;
  4. NaN 加上任意类型的值后都是 NaN.

以上的处理规则是针对于通过 "+" 运算符处理两个操作数的场景,如果一个表达式中存在多个 "+" 运算符,那么分别以优先级计算过程中,每一次计算 "+" 运算符的两个操作数使用上述规则进行处理。

举个例子:

1 + 2    // => 3, 因为操作数都是数字类型的原始值
1 + "2" // => "12",因为操作数中存在字符串类型的原始值,所以是按字符串拼接来处理
1 + {} // => "1[object Object]",因为有操作是对象类型,先将其转为原始值,{} 转为原始值为字符串 "[object Object]",所以将操作数都转为字符串后,按字符串拼接处理
1 + true // => 2,因为两个都是原始值,且没有字符串类型,所以将 true 转为数字类型后是 1,按加法处理
1 + undefined // => NaN,因为 undefined 转为数字类型后为 NaN,NaN 与任何数运算结果都为 NaN 1 + 2 + " dasu" // => "3 dasu", 因为先计算 1+2=3,然后再计算 3 + " dasu",所以是 "3 dasu"
1 + (2 + " dasu") // => "12 dasu",因为先计算 2 + " dasu" = "2 dasu",再计算 1 + "2 dasu" = "12 dasu"

因为 "+" 运算符在编程中很常见,也很常用,而 JavaScript 又是弱类型语言,变量无需声明类型,那么程序中,"+" 运算符的两个操作数究竟是哪两种类型在进行计算,结果又会是什么,这点在心里至少是要明确的。

"" 和 "=" 相等运算符

"" 和 "=" 都是用于判断两个操作数是否相等的运算符,但它们是有区别的。

"==" 比较相等的两个操作数会自动进行一些隐式的类型转换后,再进行比较,俗称不严格相等。

"===" 比较相等的两个操作数,不会进行任何类型转换,相等的条件就是类型一样,数值也一样,所以俗称严格相等。

而 "!=" 和 "!==" 自然就是这两个相等运算符的求反运算。下面分别来看看:

"==="

当通过这个运算符来比较两个操作数是否严格相等时,具体规则如下:

  • 如果两个操作数的类型不相同,则它们不相等
  • 如果其中一个操作数是 NaN 时,则它们不相等(因为 NaN 跟任何数包括它本身都不相等)
  • 如果两个操作数都是对象类型,那么只有当两个操作数都指向同一个对象,即它们的引用一样时,它们才相等
  • 如果两个操作数都是字符串类型时,当字符串一致时,在某些特殊场景下,比如具有不同编码的 16 位值时,它们也不相等,但大部分情况下,字符串一致是会相等,但要至少清楚不是百分百
  • 如果两个操作数都是布尔类型、数字类型、null、undefined,且值都一致时,那它们相等

总之,这里的规则跟 Java 里的相等比较类似,Java 里没有严格不严格之分,它处理的规则就是按照 JavaScript 这里的严格相等来处理,所以大部分比较逻辑可参考 Java。

需要注意的就是,NaN 与任何数包括它本身也不相等、同一个字符串内容可能会有不同的编码值,所以并不是百分百相等。

"=="

这个通常称为不严格相等,当比较是否相等的两个操作数的数据类型不一样时,会尝试先进行转换,然后再进行比较,相比于上面的 "===" 严格相等运算符来说,它其实就是放宽了比较的条件,具体规则如下:

  • 如果两个操作数的类型一样,那么规则跟 "===" 一样
  • 如果一个类型是 null,另一个类型是 undefined,此时,它们也是相等的
  • 如果一个类型是数字,另一个类型是字符串,那么先将字符串转为数字,再进行比较
  • 如果一个类型是布尔,先将布尔转成 1(true)或 0(false),然后再根据当前两个类型是否需要再进一步处理再比较
  • 如果一个类型是对象,那么先将对象转换成原始值,然后再根据当前两个类型是否需要再进一步处理再比较

总之,"" 的比较相对于 "=" 会将条件放宽,下面可以看些例子:

null === undefined    // => false,两个类型不一样
null == undefined // => true,不严格情况下两者可认为相等 1 == "1" // => true,"1" 转为数字 1 后,再比较
1 == [1] // => true,[1] 先转为字符串 "1",此时等效于比较 1 == "1",所以相等
2 == true // => false,因为 true 先转为数字 1,此时等效于比较 2 == 1

"&&” 逻辑与

逻辑与就是两个条件都要满足,这点跟 Java 里的逻辑与操作 && 没有任何区别。

但 JavaScript 里的逻辑与 && 操作会更强大,在 Java 里,逻辑与 && 运算符的两个操作数都必须是关系表达式才行,而且整个逻辑与表达式最终的结果只返回 true 或 false。

但在 JavaScript 里,允许逻辑与 && 运算符的两个操作数是任意的表达式,而且整个逻辑与 && 表达式最终返回的值并不是 true 或 false,而是其中某个操作数的值。

什么意思,来看个例子:

x == 0 && y == 0

这是最基本的用法,跟 Java 没有任何区别,当且仅当 x 和 y 都为 0 时,返回 true,否则返回 false。

上面那句话,是从这个例子以及延用 Java 那边对逻辑与 && 运算符的理解所进行的解释。

但实际上,在 JavaScript 里,它是这么处理逻辑与 && 运算符的:

  • 如果左操作数的值是假值,那么不会触发右操作数的计算,且整个逻辑与 && 表达式返回左操作数的值
  • 如果左操作数的值是真值,那么整个逻辑与 && 表达式返回右操作数的值
  • 假值真值可以通俗的理解成,上节介绍各种数据类型间的转换规则中,各类型转换为布尔类型的值,转为布尔后为 true,表示这个值为真值。反之,为假值。

所以,按照这种理论,我们再来看看上面那个例子,首先左操作数是个关系表达式:x == 0,如果 x 为 0,这个表达式等于 true,所以它为真值,那么整个逻辑与 && 表达式返回右操作数的值。右操作数也是个关系表达式:y == 0,如果 y 也等于 0,右操作数的值就为 true,所以整个逻辑与 && 表达式就返回 true。

虽然结果一样,但在 JavaScript 里对于逻辑与 && 表达式的解释应该按照第二种,而不是按照第一种的 Java 里的解释。如果还不理解,那么再来看几个例子:

function getName() {
return "dasu"
} null && getName() //输出 => null,因为左操作数 null 转成布尔是 false,所以它是假值,所以逻辑与 && 直接返回左操作数的值 null getName && getName() //输出 => "dasu",因为左操作数是一个函数对象,如果该函数对象被声明定义了,那么转为布尔值就是 true,所以逻辑与 && 表达式返回右操作数的值,右操作数是 getName(),调用了函数,返回了 "dasu",所以这个就是这个逻辑与 && 表达式的值。

第一个逻辑与表达式:null && getName() 会输出 null,是因为左操作数 null 转成布尔是 false,所以它是假值,所以逻辑与 && 直接返回左操作数的值 null。

第二个逻辑与表达式:getName && getName() 会输出 "dasu",是因为左操作数是一个函数对象,如果该函数对象被声明定义了,那么转为布尔值就是 true,所以逻辑与 && 表达式返回右操作数的值,右操作数是 getName(),调用了函数,返回了 "dasu",所以这个就是这个逻辑与 && 表达式的值。

所以 JavaScript 里的逻辑与 && 表达式会比 Java 更强大,它有一种应用场景:

应用场景

function queryName(callback) {
//... //回调处理
callback && callback();
}

在 Java 中,我们提供回调机制的处理通常是定义了一个接口,然后接口作为函数的参数,如果调用的时候,传入了这个接口的具体实现,那么在内部会去判断如果传入的接口参数不为空,就调用接口里的方法实现通知回调的效果。

在 JavaScript 里实现这种回调机制就特别简单,通过逻辑与 && 表达式,一行代码就搞定了,如果有传入 callback 函数,那么 callback 就会是真值,逻辑与 && 表达式就会去执行右操作数的 callback()。

当然,如果你想严谨点,你可以多加几个逻辑与 && 表达式来验证传入的 callback 参数是否是函数类型。

"||" 逻辑或

逻辑或 || 跟逻辑与 && 就基本是一个东西了,理解了上面讲的逻辑与 && 运算符的理论,那么自然也就能够理解逻辑或 || 运算符了。

它们的区别,仅在于对表达式的处理,逻辑或 || 表达式是这么处理的:

  • 如果左操作数的值是真值,那么不会触发右操作数的计算,且整个逻辑或 || 表达式返回左操作数的值
  • 如果左操作数的值是假值,那么整个逻辑或 || 表达式返回右操作数的值
  • 假值真值可以通俗的理解成,上节介绍各种数据类型间的转换规则中,各类型转换为布尔类型的值,转为布尔后为 true,表示这个值为真值。反之,为假值。

这里就直接来说下它的一个应用场景了:

应用场景

function queryNameById(id) {
//参数的默认值
id = id || 10086;
//...
}

处理参数的默认值,如果调用函数时,没有传入指定的参数时。

当然,还有其他很多应用场景。总之,善用逻辑与 && 和逻辑或 || 运算符,可以节省很多编程量,同时实现很多功能。

"," 逗号运算符

在 Java 中,"," 逗号只用于在声明同一类型变量时,可同时声明,如:

int a, b, c;

在 JavaScript 里,"," 逗号运算符同样具有这个功能,但它更强大,因为带有 "," 逗号运算符的表达式会有一个返回值,返回值是逗号最后一项操作数的值。

逗号运算符跟逻辑与和逻辑或唯一的区别,就在于:逗号运算符会将每一项的操作数都进行计算,而且表示式一直返回最后一项的操作数的值,它不管每个操作数究竟是真值还是假值,也不管后续操作数是否可以不用计算了。

举个例子:

function getName() {
return "dasu"
} function queryNameById(id, callback) {
id = id || 10086;
callback && callback();
} function myCallback() {
console.log("I am dasu");
} var me = (queryNameById(0, myCallback), getName()) //me会被赋值为 "dasu",且控制台输出 "I am dasu"

前端入门9-JavaScript语法之运算符

变量 me 会被赋值为 "dasu",且控制台输出 "I am dasu"。

typeof 运算符

返回指定操作数的数据类型,例:

前端入门9-JavaScript语法之运算符

在 JavaScript 中数据类型大体上分两类:原始类型和引用类型。

原始类型对应的值是原始值,引用类型对应的值为对象。

对于原始值而言,使用 typeof 运算符可以获取原始值所属的原始类型,对于函数对象,也可以使用 typeof 运算符来获取它的数据类型,但对于其他自定义对象、数组对象、以及 null,它返回的都是 object,所以它的局限性也很大。

delete 运算符

delete 是用来删除对象上的属性的,因为 JavaScript 里的对象有个特性,允许在运行期间,动态的为对象添加某个属性,那么,自然也允许动态的删除属性,就是通过这个运算符来操作。

这个在对象一节还会拿出来讲,因为并不是所有的属性都可以成功被删除的,属性可以设置为不可配置,此时就无法通过 delete 来删除。

另外,之前也说过,在函数外声明的全局变量,本质上都是以属性的形式被存在在全局对象上的,但这些通过 var 或 function 声明的全局变量,无法通过 delete 来进行删除。

之前也说过,如果在声明变量时,不小心漏掉了 var 关键字,此时程序并不会出异常,因为漏掉 var 关键字对一个不存在的变量进行赋值操作,会被 js 解释器认为这行代码是要动态的为全局对象添加一个属性,这个动态添加的属性就可以通过 delete 来进行删除,因为动态添加的属性默认都是可配置的。

instanceof 运算符

在 Java 中,可以通过 instanceof 运算符来判断某个对象是否是从指定类实例化出来的,也可以用于判断一群对象是否属于同一个类的实例。

在 JavaScript 中有些区别,但也有些类似。

var b = {}
function A() {}
A.prototype = b;
var a = new A();
if (a instanceof A) { //符合,因为 a 是从A实例化的,继承自A.prototype即b
console.log("true");
} function B() {}
B.prototype = b;
var c = new B();
if (c instanceof A) {//符合,虽然c是从B实例化的,但c也同样继承自b,而A.prototype指向b,所以满足
console.log("true");
}
if (c instanceof Object) {//符合,虽然 c 是继承自 b,但 b 继承自 Object.prototype,所以c的原型链中有 Object.prototype
console.log("true");
}

在 JavaScript 中,instanceof 运算符的左侧是对象,右侧是构造函数。但他们的判断是,只要左侧对象的原型链中包括右侧构造函数的 prototype 指向的原型,那么条件就满足,即使左侧对象不是从右侧构造函数实例化的对象。

例子代码看不懂么事,这个在后续介绍原型时,还会再拿出来说,先清楚有这么个运算符,运算符大概的作用是什么就可以了。


大家好,我是 dasu,欢迎关注我的公众号(dasuAndroidTv),公众号中有我的联系方式,欢迎有事没事来唠嗑一下,如果你觉得本篇内容有帮助到你,可以转载但记得要关注,要标明原文哦,谢谢支持~

前端入门9-JavaScript语法之运算符