大家好,给大家分享一下js赋值运算符有哪些,很多人还不知道这一点。下面详细解释一下。现在让我们来看看!
这篇文章主要介绍了js中的赋值运算符,具有一定借鉴价值,需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获,下面让小编带着大家一起了解一下快码论文。
一、赋值运算符
赋值运算符: = += -= *= /= %=
(一)赋值运算符的概念
赋值运算符 | 意义 |
---|---|
= (等于赋值) | 将右侧表达式结果赋值给左侧变量储存 等于赋值执行的是覆盖赋值效果,后赋值的数据会覆盖之前存储的数据 |
+= (加等赋值) | 1、左侧变量储存原始数据的基础上累加,右侧表达式执行结果 再将最终的运算结果赋值给左侧变量储存 2、计算右侧表达式 ,左侧变量储存的原始数据的基础上,累加右侧表达式结果 最终的结果再赋值给左侧变量储存 |
*= (乘等赋值) | 在左侧变量储存原始数据的基础上累乘,右侧表达式执行结果 再将最终的运算结果赋值给左侧变量储存 |
/= (除等赋值) | 在左侧变量储存原始数据的基础上累除,右侧表达式执行结果 再将最终的运算结果赋值给左侧变量储存 |
%= (模等赋值) | 左侧变量储存的原始数值是被除数右侧,表达式的执行结果是除数 将余数赋值给左侧变量储存 |
-= (减等赋值) | 在左侧变量储存原始数据的基础上累减,右侧表达式执行结果 再将最终的运算结果赋值给左侧变量储存 |
1、加等赋值
var a = 100 ;
// 展开语法 a = a + (50) ;
a += 50 ;
console.log( a ); //150
2、减等赋值
var b = 100 ;
// 展开 b = b - (40) ;
b -= 40 ;
console.log( b ); //60
var c = 100 ;
// 1、展开语法 c = c - (40+20) ;
// 2、先计算右侧表达式的结果是 40+20 也就是 60
// 3、左侧变量储存原始值是100, 减去右侧表达式的结果60
// 4、最终结果是40, 赋值给左侧变量储存
c -= 40 + 20 ;
console.log( c ); //40
3、模等赋值
var d = 100 ;
// 展开 d = d % 50 ;
d %= 50 ;
console.log( d ); //0
4、重点
1、如果有字符串参与 += 执行的是字符串拼接效果
// += 有字符串参与执行的是字符串拼接操作
var str = '' ;
str += '<div>';
str += '我是js程序拼接的内容';
str += '<ul>';
str += '<li>我是第一个li</li>';
str += '<li>我是第二个li</li>';
str += '<li>我是第三个li</li>';
str += '<li>我是第四个li</li>';
str += '<li>我是第五个li</li>';
str += '</ul>';
str += '</div>';
console.log( str );
document.write( str );
2、执行 += -= *= /= %= 操作的标签要赋值原始值
// 变量要赋值存储原始值
var a = 100 ;
a += 50 ;
// 只定义变量b,没有给变量b赋值存储的数据
var b ;
b += 50 ; //+= -= *= /= %= 都是NaN
console.log( b ); //NaN
3、为什么结果是NaN?
- 变量b只是定义,没有赋值数据, JavaScript自动给没有赋值的变量赋值 undefined
- b += 50 展开就是 b = b + 50 ; 也就是 b = undefined + 50 ;
- 没有字符串参与,执行的是加法运算
- undefined + 50是将undefined自动转化为数值类型 — NaN,也就是 NaN + 50
- 有NaN参与的运算结果任然是 NaN
(二)自增自减运算符(++ --)
- 自增自减运算符,每次执行,变量储存的原始数据都会
自增1或者自减1
- 可以理解为 ++ 就是 +=1 的效果
- 可以理解为 – 就是 -=1 的效果
- 但是 ++ 和 – 和 +=1 -=1 的执行原理完全不同
var a = 100 ;
// 相对于执行累加1的效果
// 每次执行++操作都会累加1
a++;
a++;
a++;
a++;
a++;
a++;
console.log( a ); 对应结果为:106
var b = 100 ;
// 相对于执行累减1的效果
// 每次执行--操作都会累减1
b--;
b--;
b--;
b--;
b--;
console.log( b ); 对应结果为:95
自增自减 和 +=1 -=1 的区别
1、+=1和 -=1
- 直接执行算数运算
- 在变量储存原始数据的基础上,累加或者累减操作
var a = '100' ;
// 加等操作有字符串参与,执行的是字符串拼接操作
// 字符串'100' 拼接数值100 结果是 100100
a += 100 ;
console.log( a );
2、++ 和 –
- 先将变量储存的原始数据,转化为数值类型
- 对转化结果,执行累加1或者累加1的操作
- 也就是变量储存的原始数据,可以自动转化为数值类型 就支持 ++ – 的操作
var b = '100';
// ++操作,先将变量储存的数值转化为数值类型,再执行加1操作
// 变量b存储的是字符串'100',专业为数值类型是数值100
// 对数值100执行+1操作,执行结果是 101
b++;
console.log( b );
// 变量存储的原始数据,只要可以转化为数值类型就支持 ++ -- 操作
var a = '2e3' ;
a++ ;
console.log( a ); //2001
二、逻辑运算符
(一)逻辑与 &&
表达式1 && 表达式2
- 口诀:两真且为真
- 如果两个表达式结果都是true,整个逻辑运算符的结果是true
- 如果有一个表达式的结果是false,整个逻辑运算符的结果是false
(二)逻辑或 ||
表达式1 || 表达式2
- 口诀:有真或为真
- 如果两个表达式结果都是false,整个逻辑运算符的结果是false
- 如果有一个表达式的结果是true,整个逻辑运算符的结果是true
(三)逻辑非 !
! ( 表达式 )
- 口诀:假非真,真非假
- 如果表达式结果是true,!(表达式)取反的结果就是false
- 如果表达式结果是false,!(表达式)取反的结果就是true
(四)逻辑运算案例
案例要求:
判断 10 - 50 范围之间
条件1大于等于10
条件2小于等于50
两个条件之间的关系是都要满足,也就是并且的关系,也就是逻辑与
数值 >= 10 && 数值 <= 50
计算机程序判断在 10 - 50 范围之内
// 通过输入框输入数据,判断输入数值的范围是 10-50 之间
var num = Number( window.prompt('请您输入数据') );
if( num >= 10 && num <= 50 ){
// 如果逻辑与的整体结果是true
// 证明两个表达式的结果都是true
// 也就是数值同时满足大于等于10和小于等于50两个条件,即数值在10 - 50范围内
console.log( `您输入的数值${num}在10-50范围内` );
}else{
// 如果逻辑与的整体结果是false
// 证明两个表达式至少有一个结果是false
// 也就是大于等于10和小于等于50有一个不满足,即数值不在10 - 50范围内
console.log( `您输入的数值${num} 不在 10-50 范围内` );
}
(五)逻辑运算符短路求值
- 所谓的
短路求值
,是逻辑运算符的一种执行机制或者执行原理- 为了提高计算机程序的执行效率
- 如果第一个表达式已经可以决定整个逻辑运算符的结果,第二个表达式不触发执行
1、逻辑与
- 第一个表达式结果是false
- 第二个表达式不会执行
var a = 100 ;
var b = 200 ;
// 第一个表达式的结果是 true,不能决定整个逻辑运算符的结果
// 第二个表达式会触发执行,也就是会执行 b++ > 10 ,即会执行b++ 操作
a > 10 && b++ > 10 ;
// 执行结束 b 执行 b++ 变成 201
console.log(a); //100
console.log( b ); //201
/*变形*/
var c = 100 ;
var d = 200 ;
// 第一个表达式 c < 10 的结果是 false ;
// 第一个表达式已经可以决定整个逻辑运算符的结果
// 第二个表达式不会触发执行, 也就是 d++ > 10不会触发执行
// 也就是 d++ 不会执行
c < 10 && d++ > 10 ;
// 执行之后d仍然是 200
console.log( d );
2、逻辑或
第一个表达式结果是 true
第二个表达式不会执行
(六)逻辑运算符的赋值操作
逻辑运算符的赋值操作是使用逻辑云算符,执行赋值的一种特殊语法
逻辑运算符执行赋值操作的原理
1、逻辑与
有短路求值现象,也就是第一个表达式结果是false,第二个表达式不会触发执行
赋值原理
- 第一个表达式,如果自动转化为布尔值 false,整个逻辑运算符,赋值第一个表达式的值
- 第一个表达式,如果自动转化为布尔值 true ,整个逻辑运算符,赋值第二个表达式的值
var d = 50 && 100 ;
console.log( d ); // 100
var e = null && 100 ;
console.log( e ); //null
2、逻辑或
有短路求值现象,也就是第一个表达式结果是true,第二个表达式不会触发执行
赋值原理
- 第一个表达式如果自动转化为布尔值true,整个逻辑运算符,赋值第一个表达式的值
- 第一个表达式如果自动转化为布尔值 false ,整个逻辑运算符,赋值第二个表达式的值
// 第一个表达式是50,自动转化为 true
// 给变量b赋值的是第一个表达式的值50
var b = 50 || 100 ;
console.log( b );
// 第一个表达式是0,自动转化为false
// 给变量c赋值的是第二个表达式的值100
var c = 0 || 100 ;
console.log( c );
3、三元运算符
三元运算符也可以达到相同的效果,应用效果更好。使用更多
var a = null ;
var f = a === null ? a : 100 ;
console.log(f); //null