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 相关文章推荐
利用a标签自动解析URL分析网址实例
Oct 20 Javascript
浅析javascript的间隔调用和延时调用
Nov 12 Javascript
深入探寻javascript定时器
Jan 02 Javascript
jQuery 处理页面的事件详解
Jan 20 Javascript
如何实现chrome浏览器关闭页面时弹出“确定要离开此面吗?”
Mar 05 Javascript
分享Javascript实用方法二
Dec 13 Javascript
Vue.js每天必学之过滤器与自定义过滤器
Sep 07 Javascript
jQuery查找dom的几种方法效率详解
May 17 jQuery
vue 挂载路由到头部导航的方法
Nov 13 Javascript
JS实现可用滑块滑动的缓动图代码
Sep 01 Javascript
vue 避免变量赋值后双向绑定的操作
Nov 07 Javascript
Vue组件化(ref,props, mixin,.插件)详解
May 15 Vue.js
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
PHP 修复未正常关闭的HTML标签实现代码(支持嵌套和就近闭合)
2012/06/07 PHP
php 获取本地IP代码
2013/06/23 PHP
php中数字、字符与对象判断函数用法实例
2014/11/26 PHP
Ubuntu中启用php的mail()函数并解决发送邮件速度慢问题
2015/03/27 PHP
Apache连接PHP后无法启动问题解决思路
2015/06/18 PHP
探究Laravel使用env函数读取环境变量为null的问题
2016/12/06 PHP
PHP微信模板消息操作示例
2017/06/29 PHP
php 二维数组快速排序算法的实现代码
2017/10/17 PHP
jquery live()重复绑定的解决方法介绍
2014/01/03 Javascript
JavaScript实现将数组数据添加到Select下拉框的方法
2015/08/21 Javascript
JS遍历对象属性的方法示例
2017/01/10 Javascript
Vue中的字符串模板的使用
2018/05/17 Javascript
Bootstrap的aria-label和aria-labelledby属性实例详解
2018/11/02 Javascript
微信小程序常用简易小函数总结
2019/02/01 Javascript
微信小程序 bindtap 传参的实例代码
2020/02/21 Javascript
JS Generator 函数的含义与用法实例总结
2020/04/08 Javascript
Vuex的各个模块封装的实现
2020/06/05 Javascript
vue 数据遍历筛选 过滤 排序的应用操作
2020/11/17 Javascript
手写Vue源码之数据劫持示例详解
2021/01/04 Vue.js
Python访问纯真IP数据库脚本分享
2015/06/29 Python
Python中的左斜杠、右斜杠(正斜杠和反斜杠)
2016/08/30 Python
Python实现全角半角字符互转的方法
2016/11/28 Python
使用python遍历指定城市的一周气温
2017/03/31 Python
python中正则表达式 re.findall 用法
2018/10/23 Python
Numpy之random函数使用学习
2019/01/29 Python
浅谈tensorflow 中的图片读取和裁剪方式
2020/06/30 Python
套娃式文件夹如何通过Python批量处理
2020/08/23 Python
简单了解Python字典copy与赋值的区别
2020/09/16 Python
C有"按引用传递"吗
2016/09/06 面试题
物业总经理助理岗位职责
2014/06/29 职场文书
作风建设年活动总结
2014/08/27 职场文书
表扬稿范文
2015/01/17 职场文书
2015安全保卫工作总结
2015/04/25 职场文书
薪资证明范本
2015/06/19 职场文书
常住证明范本
2015/06/23 职场文书
2016年七夕情人节宣传语
2015/11/25 职场文书