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 相关文章推荐
Auntion-TableSort国人写的一个javascript表格排序的东西
Nov 12 Javascript
由JavaScript中call()方法引发的对面向对象继承机制call的思考
Sep 12 Javascript
jQuery中需要注意的细节问题小结
Dec 06 Javascript
使用js判断数组中是否包含某一元素(类似于php中的in_array())
Dec 12 Javascript
javascript实现表格排序 编辑 拖拽 缩放
Jan 02 Javascript
JS中作用域和变量提升(hoisting)的深入理解
Oct 31 Javascript
bootstrap下拉菜单使用方法解析
Jan 13 Javascript
Vue异步组件使用详解
Apr 08 Javascript
vue自定义全局组件(自定义插件)的用法
Jan 30 Javascript
微信小程序 MinUI组件库系列之badge徽章组件示例
Aug 20 Javascript
Vue-CLI 3.X 部署项目至生产服务器的方法
Mar 22 Javascript
Vue infinite update loop的问题解决
Apr 23 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安全的URL字符串base64编码和解码
2014/06/19 PHP
PHP上传Excel文件导入数据到MySQL数据库示例
2016/10/25 PHP
Javascript UrlDecode函数代码
2010/01/09 Javascript
JavaScript DOM学习第六章 表单实例
2010/02/19 Javascript
JavaScript 存在陷阱 删除某一区域所有节点
2010/05/10 Javascript
基于jquery的页面划词搜索JS
2010/09/14 Javascript
取得窗口大小 兼容所有浏览器的js代码
2011/08/09 Javascript
jquery ajax,ashx,json的用法总结
2014/02/12 Javascript
jquery 新建的元素事件绑定问题解决方案
2014/06/12 Javascript
Javascript中数组方法汇总(推荐)
2015/04/01 Javascript
在JavaScript的正则表达式中使用exec()方法
2015/06/16 Javascript
详解JavaScript的流程控制语句
2015/11/30 Javascript
关于Vue.js 2.0的Vuex 2.0 你需要更新的知识库
2016/11/30 Javascript
AJAX和jQuery动态加载数据的实现方法
2016/12/05 Javascript
jQuery UI Grid 模态框中的表格实例代码
2017/04/01 jQuery
详解Vue SSR( Vue2 + Koa2 + Webpack4)配置指南
2018/11/13 Javascript
Vue分页器实现原理详解
2019/06/28 Javascript
JS常见面试试题总结【去重、遍历、闭包、继承等】
2019/08/27 Javascript
微信小程序国际化探索实现(附源码地址)
2020/05/20 Javascript
Vue解决移动端弹窗滚动穿透问题
2020/12/15 Vue.js
python3设计模式之简单工厂模式
2017/10/17 Python
python抓取需要扫微信登陆页面
2019/04/29 Python
利用matplotlib实现根据实时数据动态更新图形
2019/12/13 Python
Python while循环使用else语句代码实例
2020/02/07 Python
Python GUI编程学习笔记之tkinter事件绑定操作详解
2020/03/30 Python
Python 多线程共享变量的实现示例
2020/04/17 Python
python的reverse函数翻转结果为None的问题
2020/05/11 Python
Python爬虫如何应对Cloudflare邮箱加密
2020/06/24 Python
Python使用Turtle模块绘制国旗的方法示例
2021/02/28 Python
Html5新特性用canvas标签画多条直线附效果截图
2014/06/30 HTML / CSS
班会关于环保演讲稿
2013/12/29 职场文书
创业计划书的内容步骤和要领
2014/01/04 职场文书
工厂实习感言
2014/01/14 职场文书
司机检讨书
2014/02/13 职场文书
教师党员个人剖析材料
2014/09/29 职场文书
2015年社区纪检工作总结
2015/04/21 职场文书