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中对象的不同创建方法
Aug 12 Javascript
Base64(二进制)图片编码解析及在各种浏览器的兼容性处理
Feb 09 Javascript
JS验证不重复验证码
Feb 10 Javascript
完美实现js焦点轮播效果(一)
Mar 07 Javascript
老生常谈js中0到底是 true 还是 false
Mar 08 Javascript
Angular2中select用法之设置默认值与事件详解
May 07 Javascript
Three.js如何用轨迹球插件(trackball)增加对模型的交互功能详解
Sep 25 Javascript
vuex实现登录状态的存储,未登录状态不允许浏览的方法
Mar 09 Javascript
微信小程序中的canvas 文字断行和省略号显示功能的处理方法
Nov 14 Javascript
js form表单input框限制20个字符,10个汉字代码实例
Apr 12 Javascript
Angular单元测试之事件触发的实现
Jan 20 Javascript
简单了解Vue + ElementUI后台管理模板
Apr 07 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
初次接触php抽象工厂模式(Elgg)
2010/03/21 PHP
php 智能404跳转代码,适合换域名没改变目录的网站
2010/06/04 PHP
php中选择什么接口(mysql、mysqli)访问mysql
2013/02/06 PHP
PHP严重致命错误处理:php Fatal error: Cannot redeclare class or function
2017/02/05 PHP
JavaScript判断两种格式的输入日期的正确性的代码
2007/03/25 Javascript
JavaScript 嵌套函数指向this对象错误的解决方法
2010/03/15 Javascript
基于Jquery实现的一个图片滚动切换
2012/06/21 Javascript
使用jquery操作session方法分享
2015/01/22 Javascript
jQuery实现按钮的点击 全选/反选 单选框/复选框 文本框 表单验证
2015/06/25 Javascript
jquery实现点击变换导航样式的方法
2015/08/31 Javascript
AngularJS实现按钮提示与点击变色效果
2016/09/07 Javascript
jQuery实现两个select控件的互移操作
2016/12/22 Javascript
jQuery插件HighCharts绘制的基本折线图效果示例【附demo源码下载】
2017/03/07 Javascript
Node.JS文件系统解析实例详解
2017/05/15 Javascript
w3c编程挑战_初级脚本算法实战篇
2017/06/23 Javascript
es6在react中的应用代码解析
2017/11/08 Javascript
JavaScript实现微信号随机切换代码
2018/03/09 Javascript
vue框架搭建之axios使用教程
2018/07/11 Javascript
jQuery插件实现非常实用的tab栏切换功能【案例】
2019/02/18 jQuery
如何从零开始手写Koa2框架
2019/03/22 Javascript
JavaScript中交换值的10种方法总结
2020/08/18 Javascript
Python基于scapy实现修改IP发送请求的方法示例
2017/07/08 Python
Python编程二分法实现冒泡算法+快速排序代码示例
2018/01/15 Python
使用 Python 实现文件递归遍历的三种方式
2018/07/18 Python
Python 实现Windows开机运行某软件的方法
2018/10/14 Python
总结python中pass的作用
2019/02/27 Python
python openCV获取人脸部分并存储功能
2019/08/28 Python
用Python进行websocket接口测试
2020/10/16 Python
CSS3 background-image颜色渐变的实现代码
2018/09/13 HTML / CSS
Manuka Doctor英国官网:真正的麦卢卡蜂蜜和护肤品
2018/10/26 全球购物
试用期员工考核制度
2014/01/22 职场文书
企业指导教师评语
2014/04/28 职场文书
亮剑精神演讲稿
2014/05/23 职场文书
公司任命书模板
2014/06/06 职场文书
暑期政治学习心得体会
2014/09/02 职场文书
2014年机关作风建设工作总结
2014/10/23 职场文书