JS中实用且强大的操作符和运算符
1、短路运算符 ||
从左往右
1、只要有一个条件为true时、结果就为true。
2、当两个条件都为false时、结果才为false。
3、当一个条件为true时、后面的条件不再判断。
注意:当数值参与逻辑或运算时、结果为true、会返回第一个为真的值;如果结果为false、会返回第二个为假的值;
console.log( 5 || 4 );//当结果为真时、返回第一个为真的值 所以此处打印的是5
console.log( 0 || false );//当结果为假时、返回第二个为假的值 所以此处打印的是false
在实际开发中、可以利用这一特性、实现如下操作。
1、给某个变量设置初始值
var name = this.name || "张三";
2、判断某个值
// 如果age等于10或者等于20或者等于30都执行
if(age === 10 || age === 20 || age === 30){
console.log(age)
}
2、短路运算符 &&
从左往右
1、两边条件都为true时、结果才为true。
2、如果有一个为false、结果就为false。
3、当第一个条件为false时、就不再判断后面的条件。
注意:当数值参与逻辑与运算时、结果为true、那么会返回的会是第二个为真的值;如果结果为false、返回的会是第一个为假的值
在实际开发中、可以利用这一特性、实现如下操作。
1、如果某个值为true、则运行某个function
function pdd(){
console.log("我是学新通");
};
var type = true;
type && pdd(); //此时会执行pdd方法、打印出"我是学新通";
2、判断某个值
//如果age大于10并且小于20才会执行
if(age > 10 && age < 20){
console.log(age)
}
3、零合并操作符 ??
零合并操作符 ?? 是一个逻辑操作符、当左侧的操作数为 null 或者 undefined 时、返回右侧操作数、否则返回左侧操作数。
空值合并操作符一般用来为常量提供默认值、保证常量不为 null 或者 undefined、以前一般使用|| 来做这件事、比如本文2.1章的例子。然而、由于 || 是一个布尔逻辑运算符、左侧的操作数会被强制转换成布尔值用于求值。任何假值0、 ''、 NaN、 null、 undefined都不会被返回。这导致如果你使用 0、''、NaN 作为有效值、就会出现不可预料的后果。正因为 || 存在这样的问题、而 ?? 的出现就是解决了这些问题、?? 只会在左侧为 undefined、null 时才返回后者、?? 可以理解为是 || 的完善解决方案。
在实际开发中、可以利用这一特性、实现如下操作。
1、给某个变量设置初始值
undefined ?? '默认值' //打印出 '默认值'
null ?? '默认值' //打印出 '默认值'
false ?? '默认值' //打印出 'false'
0 ?? '默认值' //打印出 0
NaN ?? '默认值' //打印出 NaN
'' ?? '默认值' //打印出 ''
2、在赋值的时候、可以运用赋值运算符的简写 ??=
let pdd = {a: null, b: 10}
pdd.a ??= 20
pdd.b ??= 20
console.log(pdd) // 输出 { a: 20, b: 10 }
4、可选链操作符 ?.
可选链操作符 ?. 允许读取位于连接对象链深处的属性的值、而不必验证链中的每个引用是否有效。?. 操作符的功能类似于.链式操作符、不同之处在于、在引用为null或者undefined的情况下不会引起错误、该表达式短路返回值是undefined。
在实际开发中、可以利用这一特性、实现如下操作。
1、当尝试访问可能不存在的对象属性时
var obj = {
a: '张三',
b: {
c: '李四'
}
};
console.log(obj.b?.c) // 输出 李四
console.log(obj.age?.c) // 输出 undefined
console.log(obj.name?.()) // 不报错、输出 undefined
2、在不确定的情况下获取一个深度嵌套的子属性
var obj = {
a:'李四',
b:'王五',
c:{
name:"你猜我有没有"
}
};
//原本的写法
if(obj && obj.c && obj.c.name){
console.log("哈哈哈")
};
//使用可选链操作符的写法
if(obj?.c?.name){
console.log("哈哈哈")
};
5、位运算符 & 和 |
位运算符是按位进行运算、& 与、| 或、使用位运算符时会抛弃小数位、我们可以利用| 0来给数字取整。也可以使用 & 1来判断奇偶数
在实际开发中、可以利用这一特性、实现如下操作。
1、取整
1.3 | 0 // 打印出 1
-1.9 | 0 // 打印出 -1
2、判断奇偶数
var num = 5
!!(num & 1) // true
!!(num % 2) // true
6、双位运算符 ~~
可以使用双位操作符来替代正数的 Math.floor( )、替代负数的 Math.ceil( )。双否定位操作符的优势在于它执行相同的操作运行速度更快、对正数来说~~运算结果与 Math.floor( ) 运算结果相同、而对于负数来说与 Math.ceil( ) 的运算结果相同。
在实际开发中、可以利用这一特性、实现如下操作。
1、取整
Math.floor(3.9) === 3 // true
~~3.9 === 3 // true
Math.ceil(-4.5) === -4 // true
~~-4.5 === -4 // true
7、逻辑运算符 !
!、可将变量转换成boolean类型、null、undefined和空字符串''取反都为true、其余都为false。一般来说会有好几种用法、!、!!、!=、!==、下面来逐个说明。
在实际开发中、可以利用这一特性、实现如下操作。
1、利用!取反
let a = false;
console.log(!a); //打印出true
// 在vue.js中、利用这一特性很容易就可以写一个开关函数
<div v-show="isShow">我是一个DIV</div>
show(){
this.isShow = !this.isShow;
};
2、利用!!来做类型判断、判断变量a不等于null、undefined和''才能执行的方法
var a;
if(a != null && typeof(a) != undefined && a != ''){
//a有内容才执行的代码
}
实际上我们只需要写一个判断表达
if(!!a){
//a有内容才执行的代码...
}
3、利用!=和!==来判断两个值是否相等
一般来说都是用的全不等于!==、因为使用不等于!=的话、0 != ""返回的是false、原因是JS中0和''转化成布尔型都为false、所以推荐还是使用全不等于! 。
var a = 0;
var b = 0;
var c = "0";
var d = '';
a != b //false
a != c // false number和string的0 被判断为相等
a != d // false0和空字符串被判断为相等
a !== b // false
a !== c // true
a !== d // true
(!(~ []) {})[--[~ ""][ []]*[~ []] ~~! []] ({} [])[[~! []]*~ []]
//打印一下看看你得到了什么?
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/taneeke
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
excel下划线不显示怎么办
PHP中文网 06-23 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
photoshop蒙版画笔没反应怎么办
PHP中文网 06-24