JavaScript常用操作符代码举例

 更新时间:2025年05月30日 10:47:02   作者:年纪轻轻只想中奖  
这篇文章主要给大家介绍了关于JavaScript常用操作符的相关资料,包括条件运算符(?:)、空值合并(??)、可选链(?.)等,以及算术、赋值、比较、逻辑、位运算等,文中通过代码介绍的非常详细,需要的朋友可以参考下

常用运算符

条件运算符(三元运算符)? :

语法: condition ? exprIfTrue : exprIfFalse

用途: 根据条件condition的结果选择执行两个表达式中的一个。如果condition为真,则执行exprIfTrue;否则执行exprIfFalse

空值合并运算符 ??

用途: 返回其两个操作数中的一个,如果第一个操作数为nullundefined,则返回第二个操作数;否则返回第一个操作数。

这个运算符用于处理默认值的情况,当一个变量可能为nullundefined时,可以使用它来提供一个替代的默认值。

可选链运算符 ?.

用途: 允许安全地读取位于连接对象链深处的属性的值,而不必明确验证链中的每个引用是否有效。

如果在访问链的任何部分遇到nullundefined,那么表达式的求值将立即停止,并返回undefined

按位或运算符 |

用途: 对两个整数进行按位或运算。对于每一位,只要有一个操作数的对应位为1,结果就为1;否则为0。

此外,单个竖线|也可以用于将浮点数转换为32位有符号整数(通过与0进行按位或运算)。

逻辑或运算符 ||

用途: 对两个表达式进行逻辑或运算。如果第一个表达式为真(即不是false0""nullundefined, 或NaN),则返回第一个表达式;否则返回第二个表达式。

常用于设置默认值,类似于??,但会处理更多的“假”值。

按位与运算符 &

用途: 对两个整数进行按位与运算。对于每一位,只有当两个操作数的对应位都为1时,结果才为1;否则为0。

逻辑与运算符 &&

用途: 对两个表达式进行逻辑与运算。如果第一个表达式为假,则返回第一个表达式;如果第一个表达式为真,则返回第二个表达式。

常用于确保多个条件都为真时才执行某些代码,或者用于短路求值。

算术运算符

  • + 加法
  • - 减法
  • * 乘法
  • / 除法
  • % 取模(求余数)
  • ** 幂运算(指数)
let sum = 5 + 3; // 8
let difference = 10 - 4; // 6
let product = 7 * 6; // 42
let quotient = 15 / 3; // 5
let remainder = 17 % 5; // 2
let power = 2 ** 3; // 8

赋值运算符

  • = 简单赋值
  • += 加后赋值
  • -= 减后赋值
  • *= 乘后赋值
  • /= 除后赋值
  • %= 取模后赋值
  • **= 幂运算后赋值

比较运算符

  • == 松散相等 (会进行类型转换)
  • === 严格相等 (不会进行类型转换)
  • != 松散不相等
  • !== 严格不相等
  • > 大于
  • < 小于
  • >= 大于等于
  • <= 小于等于

逻辑运算符

let isAdult = age >= 18 && age <= 65;
let hasPermission = isUser || isAdmin;
let isNotAvailable = !isAvailable;
  • && 逻辑与
  • || 逻辑或
  • ! 逻辑非

位运算符

对数字的二进制表示进行操作

  • & 按位与
  • | 按位或
  • ^ 按位异或
  • ~ 按位非
  • << 左移
  • >> 带符号右移
  • >>> 无符号右移
let result = 5 & 3; // 1
result = 5 | 3; // 7
result = 5 ^ 3; // 6
result = ~5; // -6
result = 5 << 1; // 10
result = 5 >> 1; // 2
result = 5 >>> 1; // 2 (对于正数,与 `>>` 相同)

类型运算符

  • typeof 返回一个字符串,指示操作数的类型
  • instanceof 用于检查对象是否是某个构造函数的实例
console.log(typeof 42); // "number"
console.log(typeof "hello"); // "string"
console.log([] instanceof Array); // true

其他运算符

  • , 逗号运算符:可以在一条语句中执行多个表达式。
  • delete:删除对象的属性。
  • in:检查对象是否有指定的属性。
  • new:创建一个用户定义的对象类型的实例,或特殊对象类型的实例。
  • ... 扩展运算符/剩余参数:用于解构数组或对象,或者作为函数参数列表中的剩余参数。
let obj = { a: 1, b: 2 };
delete obj.a; // 删除属性 'a'
console.log('b' in obj); // true
let arr = [1, 2, 3];
let newArr = [...arr, 4, 5]; // 使用扩展运算符复制并添加元素
function add(...args) { return args.reduce((a, b) => a + b, 0); }
console.log(add(1, 2, 3)); // 6

总结

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

相关文章

  • javascript实现连续赋值

    javascript实现连续赋值

    javascript如何实现连续赋值呢?下面小编就给大家介绍下用javascript实现连续赋值,有需要的朋友可以参考下
    2015-08-08
  • JS实现在浏览器标签页失去焦点时网页Title改变

    JS实现在浏览器标签页失去焦点时网页Title改变

    这篇文章主要介绍了JS实现仿在浏览器标签页失去焦点时网页Title改变,需要的朋友可以参考下
    2017-06-06
  • JavaScript模板引擎EJS特性及用法详解

    JavaScript模板引擎EJS特性及用法详解

    EJS是一种简单而灵活的模板引擎,用于将数据动态渲染到网页上,本文将从介绍EJS的背景和起源开始,详细介绍EJS的特性和使用方法,包括安装配置、基本语法和标签、数据绑定和逻辑控制、模板的继承和包含等方面,感兴趣的同学跟着小编一起来学习吧
    2023-06-06
  • JavaScript中闭包的作用和应用场景

    JavaScript中闭包的作用和应用场景

    这篇文章将给大家详细介绍JavaScript 中闭包是什么,有哪些应用场景,文章通过代码示例介绍的非常详细,对大家的学习或工作有一定的参考价值,需要的朋友可以参考下
    2023-09-09
  • echarts柱状图坐标轴内容显示不全的两种解决办法

    echarts柱状图坐标轴内容显示不全的两种解决办法

    本文主要介绍了echarts柱状图坐标轴内容显示不全的两种解决办法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-05-05
  • js实现鼠标跟随运动效果

    js实现鼠标跟随运动效果

    这篇文章主要为大家详细介绍了js实现鼠标跟随运动效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-09-09
  • 详解JavaScript数组的常用方法

    详解JavaScript数组的常用方法

    这篇文章主要为大家介绍了JavaScript数组的常用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2021-11-11
  • JS利用原生canvas实现图形标注功能

    JS利用原生canvas实现图形标注功能

    这篇文章主要为大家详细介绍了JS如何利用原生canvas实现图形标注功能,支持矩形、多边形、线段、圆形等已绘制的图形进行缩放,移动,需要的可以参考下
    2024-03-03
  • JavaScript表单通过正则表达式验证电话号码

    JavaScript表单通过正则表达式验证电话号码

    通过正则表达式实现判断一个输入量是否为电话号码,需要的朋友可以参考下
    2014-03-03
  • 纯js代码实现未知宽高的元素在指定元素中垂直水平居中显示

    纯js代码实现未知宽高的元素在指定元素中垂直水平居中显示

    本章节介绍一下如何实现未知宽高的元素在指定元素下实现垂直水平居中效果,代码简单易懂,需要的朋友可以参考下本文
    2015-09-09

最新评论