js不常见操作运算符总结


Posted in Javascript onNovember 20, 2021

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小知识,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操作运算符内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JavaScript中的History历史对象
Jan 16 Javascript
javascript中this做事件参数相关问题解答
Mar 17 Javascript
让IE8浏览器支持function.bind()方法
Oct 16 Javascript
js获取UserControl内容为拼html时提供方便
Nov 02 Javascript
jQuery解析json数据实例分析
Nov 24 Javascript
JavaScript中setTimeout的那些事儿
Nov 14 Javascript
bootstrap 下拉多选框进行多选传值问题代码分析
Feb 14 Javascript
js实现关闭网页出现是否离开提示
Dec 07 Javascript
JavaScript中的E-mail 地址格式验证
Mar 28 Javascript
Angular 2使用路由自定义弹出组件toast操作示例
May 10 Javascript
vue-froala-wysiwyg 富文本编辑器功能
Sep 19 Javascript
微信小程序纯文本实现@功能
Apr 08 Javascript
javascript的setTimeout()使用方法总结
Nov 20 #Javascript
JavaScript异步操作中串行和并行
Nov 20 #Javascript
vue中 this.$set的使用详解
如何用vue实现网页截图你知道吗
利用 JavaScript 构建命令行应用
Nov 17 #Javascript
Ajax实现异步加载数据
Nov 17 #Javascript
36个正则表达式(开发效率提高80%)
Nov 17 #Javascript
You might like
全国FM电台频率大全 - 16 河南省
2020/03/11 无线电
php 变量定义方法
2009/06/14 PHP
php使用curl伪造浏览器访问操作示例
2019/09/30 PHP
JS取文本框中最小值的简单实例
2013/11/29 Javascript
javascript 判断整数方法分享
2014/12/16 Javascript
javascript自动生成包含数字与字符的随机字符串
2015/02/09 Javascript
javascript实现table表格隔行变色的方法
2015/05/13 Javascript
js实现将选中内容分享到新浪或腾讯微博
2015/12/16 Javascript
JS实现数字格式千分位相互转换方法
2016/08/01 Javascript
jQuery插件DataTable使用方法详解(.Net平台)
2016/12/22 Javascript
JavaScript表单验证的两种实现方法
2017/02/11 Javascript
基于jQuery代码实现圆形菜单展开收缩效果
2017/02/13 Javascript
ui-router中使用ocLazyLoad和resolve的具体方法
2017/10/18 Javascript
vue添加axios,并且指定baseurl的方法
2018/09/19 Javascript
Python日志模块logging简介
2015/04/13 Python
Python多进程原理与用法分析
2018/08/21 Python
详解小白之KMP算法及python实现
2019/04/04 Python
django admin.py 外键,反向查询的实例
2019/07/26 Python
基于Python词云分析政府工作报告关键词
2020/06/02 Python
使用Python构造hive insert语句说明
2020/06/06 Python
用HTML5制作一个简单的桌球游戏的教程
2015/05/12 HTML / CSS
加拿大著名时装品牌:SOIA & KYO
2016/08/23 全球购物
eBay比利时购物网站:eBay.be
2019/08/09 全球购物
Super-Pharm波兰:药房和香水在一个地方
2020/08/18 全球购物
捷克母婴用品购物网站:Feedo.cz
2020/12/28 全球购物
自荐书模板
2013/12/15 职场文书
平安建设工作方案
2014/06/02 职场文书
2014大学生中国梦主题教育学习思想汇报
2014/09/10 职场文书
县委班子四风对照检查材料思想汇报
2014/09/29 职场文书
2014年建筑工作总结
2014/11/26 职场文书
初中作文评语集锦
2014/12/25 职场文书
社区服务活动感想
2015/08/11 职场文书
导游词之吉林吉塔
2019/11/11 职场文书
新手必备之MySQL msi版本下载安装图文详细教程
2021/05/21 MySQL
python中%格式表达式实例用法
2021/06/18 Python
SQLServer中exists和except用法介绍
2021/12/04 SQL Server