返回顶部
首页 > 资讯 > 前端开发 > JavaScript >js不常见操作运算符总结
  • 876
分享到

js不常见操作运算符总结

2024-04-02 19:04:59 876人浏览 独家记忆
摘要

目录2、逗号运算符3、javascript空值合并操作符(??)4、javaScript可选链操作符( ?. )1、前言 js的运算符很多,之前有文章提过。例

1、前言

js的运算符很多,之前有文章提过。例如如下:

js整数的操作:

使用|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空值合并操作符(??)

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

与逻辑或操作符(||)不同,逻辑或操作符会在左侧操作数为假值时返回右侧操作数。也就是说,如果使用 || 来为某些变量设置默认值,可能会遇到意料之外的行为。比如为假值(例如,'' 或 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操作运算符内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: js不常见操作运算符总结

本文链接: https://lsjlt.com/news/157783.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • js不常见操作运算符总结
    目录2、逗号运算符3、javaScript空值合并操作符(??)4、javaScript可选链操作符( ?. )1、前言 js的运算符很多,之前有文章提过。例...
    99+
    2024-04-02
  • js中不常见的运算符与操作符总结
    javaScript常用运算符和操作符总结 类别 ...
    99+
    2024-04-02
  • python中字符串的常见操作总结(二)
    目录字符串的编码格式什么是编码格式?常见的编码格式字符串格式化什么是字符串格式化?格式化字符串的使用场景第一种格式化方法—%第二种格式化方法–格式化函数for...
    99+
    2024-04-02
  • python中字符串的常见操作总结(一)
    目录前言python中的对象什么是对象?字符串的capitalize()函数capitalize()的功能capitalize()的用法字符串的小写内置函数字符串的upper()函数...
    99+
    2024-04-02
  • Expression操作运算符、表达式和操作方法总结
    一、Expression中的操作运算符 成员名称说明Add加法运算,如 a + b, ,不进行溢出检查,针对数值操作数。AddAssign加法复合赋值运算,如 (a += b), ,...
    99+
    2024-04-02
  • Shell常用操作符总结
    一、算术操作 + - * / % 二、关系操作 < > >= <= == != && || 三、测试操作 ...
    99+
    2022-06-04
    常用 操作 Shell
  • Python中字符串的常见操作技巧总结
    本文实例总结了Python中字符串的常见操作技巧。分享给大家供大家参考,具体如下: 反转一个字符串 >>> S = 'abcdefghijklmnop' >>> S[...
    99+
    2022-06-04
    字符串 操作技巧 常见
  • JavaScript中极易出错的操作符运算总结
    目录算术运算符非正常情况1: 有特殊值字面量参与的运算非正常情况2: 其他类型的数据参与数学运算。比较运算符非正常情况1: 特殊值参与比较运算非正常情况2: 其他数据类型参与比较运算...
    99+
    2024-04-02
  • MYSQL 运算符总结
    目录1、算数运算符2、比较运算符3、逻辑运算符4、位运算符5、运算符的优先级1、算数运算符 MySQL支持的算术运算符: ...
    99+
    2024-04-02
  • python常见运算符及用法小结
    目录算术运算符关系运算符逻辑运算符成员运算符身份运算符三目运算符运算符优先级算术运算符 运算符描述+两个数相加两个数相加,或是字符串连接-两个数相减*两个数相乘,或是返回一个重复若干...
    99+
    2024-04-02
  • js常用节点操作实例总结
    一:父节点 1:返回父节点 element.parentNode,得到的是离元素最近的父节点。如果找不到则返回为null代码: <body> <div>...
    99+
    2023-05-17
    js 节点操作
  • python常用字符串操作的总结
    本篇内容主要讲解“python常用字符串操作的总结”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“python常用字符串操作的总结”吧!1、字符串使用乘法运算符*做乘法运算的含义是复制。>&...
    99+
    2023-06-20
  • python中字典的常见操作总结2
    目录判断字典中的元素是否存在in 与 not in判断元素是否存在get()函数判断元素是否存在字典中的popitem()函数所有数据类型与其布尔值深拷贝与浅拷贝总结判断字典中的元素...
    99+
    2024-04-02
  • python中字典的常见操作总结1
    目录python中字典的常见操作字典添加与修改数据[]处理法字典中的update()函数字典中的setdefault()函数获取字典的key与value字典中的keys()函数字典中...
    99+
    2024-04-02
  • 总结20个常见的JavaScript数组操作
    JavaScript中的Array对象与其他编程语言中的数组一样,是一组数据的集合。在JavaScript中,数组里面的数据可以是不同类型的,并具有用于执行数组常见操作的方法。声明数组有三种不同的声明方式1. 常规方式const hobby...
    99+
    2023-05-14
    前端
  • 20个常见的JavaScript数组操作总结
    目录声明数组1. 常规方式2. 简洁方式3. 字面Array 对象方法1. forEach2. map3. concat4. push5. unshift6. pop7. shift...
    99+
    2024-04-02
  • JS中一些高效的魔法运算符总结
    JavaScript 现在每年都会发一个新版本,里面也会新增一些操作更加便利、高效的运算符。今天我们就来盘点下几个高效的魔法运算符。 1. 可选链运算符 之前当我们想要使用某个结构...
    99+
    2024-04-02
  • 一文总结JS中逻辑运算符的特点
    目录Js中的逻辑运算符描述JS逻辑运算符的特点1. 取反 !2. 逻辑与 &&3. 逻辑或 ||总结 Js中的逻辑运算符 JavaScript中有三个逻辑运...
    99+
    2024-04-02
  • Python运算符详细总结
    算术运算符 运算符 描述 实例 + 加 - 两个对象相加 a + b 输出结果 30 - 减 - 得到负数或是一个数减去另一个数 a - b 输出结果 -10 * 乘 - 两个数相乘或是返回一个被重复若干次的字符串 a...
    99+
    2023-01-31
    运算符 详细 Python
  • Java运算符知识点总结
    本篇内容介绍了“Java运算符知识点总结”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!Java 运算符计算机的最基本用途之一就是执行数学运算...
    99+
    2023-06-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作