JavaScript 不常见操作运算符详解:逗号、空值合并与可选链

作者:小括号时间:2026-10-24 19:30:42浏览:340

本文总结 JavaScript 中几种不常见但实用的操作运算符。包括利用位运算符快速转换浮点为整型、双叹号转布尔值、逗号运算符的优先级陷阱、空值合并操作符(??)与逻辑或的区别,以及可选链操作符(?.)的安全访问属性与短路计算原理。

1、前言

JavaScript 提供了丰富的运算符,此前已有文章进行过介绍。例如以下示例所示:

JavaScript 整数处理相关操作:

使用|0和~~可以将浮点数转换为整型,其效率通常优于同类的parseInt和Math.round 。在处理像素计算及动画位移等场景时,这种方法非常实用。具体的性能对比可参考相关测试。


var foo = (12.4 / 4.13) | 0;//结果为3
var bar = ~~(12.4 / 4.13);//结果为3


此外还有一个小技巧,使用!!2可以将任意值快速转换为布尔类型。读者可以自行测试验证。


var eee="eee";
alert(!!eee)


以上列举的均为常见或进阶运算符,更多详细内容可参阅《四十九个javascript小知识实用技巧》以及关于js运算符单竖杠“|”的解析。

今天在此基础上再补充几个不常见的运算符:

2、逗号运算符


let x = 1;
x = (x++, x);
console.log(x);
// expected output: 2
x = (2, 3);
console.log(x);
// expected output: 3

逗号运算符的执行机制是:先计算左侧表达式的值,再计算右侧表达式的值,最后返回最右侧参数的值。


var a = 10, b = 20;

function CommaTest(){
    return a++, b++, 10;
}

var c = CommaTest();

alert(a); // 返回11
alert(b); // 返回21
alert(c); // 返回10

了解函数调用运算符后,我们可以通过一个示例来说明如何处理它们之间的优先级冲突。


alert(2*5, 2*4); // 输出10

上述代码输出结果为10,但如果仅依据逗号运算符的原理推导,结果似乎应该是8。这是为什么呢?

原因在于JavaScript中,逗号运算符的优先级是最低的。牢记这一点非常关键。因此,函数调用运算符会先于逗号运算符执行,导致alert函数输出第一个参数的值。若希望得到预期结果,可将代码修改为如下形式:


alert((2*5, 2*4)); // 返回8

3、javaScript空值合并操作符(??)

只有当左侧操作数为null和undefined时,空值合并操作符(??)才会返回右侧的值。该操作符是一个逻辑运算符,当左侧操作数为 null 或者 undefined 时,返回右侧操作数;否则返回左侧操作数。

与逻辑或操作符(||)不同,逻辑或操作符在左侧操作数为假值(falsy)时会返回右侧操作数。这意味着,如果使用 || 来设置变量默认值,可能会遇到意料之外的行为,例如当值为空字符串('')或数字0时。具体表现见下面的示例。


let str = null||undefined
let result = str??'haorooms博客'
console.log(result)//haorooms博客

const nullValue = null;
const emptyText = ""; // 空字符串,是一个假值,Boolean("") === false
const someNumber = 42;

const valA = nullValue ?? "valA 的默认值";
const valB = emptyText ?? "valB 的默认值";
const valC = someNumber ?? 0;

console.log(valA); // "valA 的默认值"
console.log(valB); // ""(空字符串虽然是假值,但不是 null 或者 undefined)
console.log(valC); // 42

4、javaScript可选链操作符( ?. )

可选链操作符( ?.)允许读取连接对象链深处属性的值,而无需显式验证链中每个引用是否有效。?. 操作符的功能类似于 . 链式操作符,不同之处在于,当引用为空(nullish,即 null 或 undefined)时不会抛出错误,而是直接短路并返回值。

使用可选链操作符(?.)时,浏览器不会报错!


const demo = {
    name: 'haorooms',
    cat: {
        name: 'haorooms cat'
    }
};
console.log(demo.dog?.name); 
// expected output: undefined
console.log(demo.what?.());
// expected output: undefined


函数调用场景:


let result = someOne.customMethod?.();

如果希望允许 someOne 也为 null 或者 undefined ,那么你需要像这样写 someOne?.customMethod?.()

可选链与表达式:


let nestedProp = obj?.['prop' + 'Name'];

可选链访问数组:


let arrayItem = arr?.[42];

短路计算机制:


let potentiallyNullObj = null;
let x = 0;
let prop = potentiallyNullObj?.[x++];

 
console.log(x); // x 将不会被递增,依旧输出 0

//当在表达式中使用可选链时,如果左操作数是 null 或 undefined,表达式将不会被计算


let customer = {
  name: "haorooms",
  details: { age: 82 }
};

let customerCity = customer?.city ?? "中国";
console.log(customerCity);  // “中国”

到此这篇关于js不常见操作运算符总结的文章就介绍到这了,更多相关js操作运算符内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站!

作者最新文章