有学有练才叫学习:学而不思则罔,思而不学则殆:学而不习,纸上谈兵,习而不进,画地为牢!

js 中的运算符与表达式

javascript cat 11个月前 (11-16) 31次浏览 已收录 0个评论 扫描二维码

1、运算符与表达式

运算符:也被称为操作符,用于执行程序代码运算,会针对一个以上操作数来进行运算

表达式:是由一个或多个操作数通过运算符连接起来的式子,每个表达式最终都会有一个结果,返回给开发者

运算符的分类

算术运算符

赋值运算符

比较运算符

逻辑运算符

三目运算符

1、算术运算符

1、加+

规则

1、如果两边都是数字,则就是普通的数学计算

2、如果有一边是字符串,则另一边也转成字符串,变成字符串的拼接

3、如果没有字符串,则调用 Number 方法,转成数字,再进行相加

4、如果有一边是对象,则对象调用 toString 得到字符串表示,再进行计算

var a = '5';
var b = 20;
console.log(a + b);

console.log(null + '小王'); // 'null小王'
console.log('a' + NaN); // 'aNaN'

console.log(null + true); // 1
console.log(false + undefined); // NaN

console.log(1 + [1]); // '11'

console.log(true + false); // 1
console.log(true + 'false'); // 'truefalse'
console.log(true + ''); // 'true'
console.log(true + undefined); // NaN
console.log(true + [true]); // 'truetrue'
console.log(1 + {}); // '1[object Object]'

// 加法运算出错的场景
var a = 5;
var b = 20;
// console.log('5+20的和是25');
console.log(a + '+' + b + '的和是' + (a + b));

2、减乘除 - * /

规则:将操作符的两边都调Number()转数字,再进行操作

console.log(20 - '5'); // 15
console.log('小王' - 5); // NaN
console.log('3' * '10'); // 30

3、取余 %

规则:将操作符的两边都调Number()转数字,再进行操作

console.log(10 % 3); // 1
console.log('10' % 3); // 1

// 一个递增的变量取模n,得到的是0 到 n-1之间的数
console.log(0 % 3); // 0
console.log(1 % 3); // 1
console.log(2 % 3); // 2
console.log(3 % 3); // 0
console.log(4 % 3); // 1
console.log(5 % 3); // 2
console.log(6 % 3); // 0
console.log(7 % 3); // 1

4、加加减减

规则:如果不是数字,则调Number()转数字,再进行操作

// ++ --
var a = 2;
a++;
console.log(a); // 3

var b = 2;
++b;
console.log(b); // 3

// 加加在前和加加在后的区别:
// 加加在前,先自增,再参与表达式的计算,加加在后,先参与表达式的计算,再自增
var c = 2;
var f = 2;
d = c++;
e = ++f;
console.log(d); // 2
console.log(e); // 3
console.log(c); // 3
console.log(f); // 3

var num1 = 2;
var num2 = 20;
var num3 = --num1 + num2;
var num4 = num1 + num2;
console.log(num3, num4);

var a = 10;
var b = ++a + a++;
console.log(a, b);

2、赋值运算符

= += -= *= /= %=

作用:操作符的两边先操作,结果赋给左边

var a = 5; // 将5赋给a

a += 3; // a = a + 3; 
console.log(a); // 8

a *= 3;
console.log(a); // 24

3、比较运算符

比较运算符: 返回的是布尔值

// > >= < <=
// 如果操作符的两边都是字符串,则是字符串的比较,比较的是ASCII编码。是从左向右,一位一位的比较
// 如果有一边不是字符串,则调用Number转成数字,再进行比较
console.log(12 > 2); // true
console.log(12 > '2'); // true
console.log('12' > '2'); // false

console.log(false >= 0); // true
console.log('false' >= 0); // false
console.log(null >= false); // true
console.log(null >= undefined); // false

js 中的运算符与表达式

// == !=
// 比较值是否相等,为了比较,它会调Number()隐式类型转换
// 但是null和undefined不进行转换,它们的相等比较为真
console.log('10' == 10); // true
console.log(null == undefined); // true

console.log('10' != 10); // false
console.log(null != undefined); // false
// === !==   (推荐使用)
// 三等:值和类型都要相等,不会发生隐式类型转换
console.log('10' === 10); // false
console.log(null === undefined); // false

console.log(null !== undefined); // true
// 错误的情况
var a = 5;
if (a = 5) { }

4、逻辑运算符

// && 与,并且
console.log(12 > 10 && 12 >= 12); // true
console.log(12 < 10 && 12 >= 12); // false
// 短路操作,一边能决定的事,就不用看另一边了

// 如果左边为假,则不用跑到右边;直接看左边,如果左边是表达式,则表达式求值,如果左边是值,则返回这个值
// 如果左边为真,则跑到右边;直接看右边,如果右边是表达式,则表达式求值,如果右边是值,则返回这个值
console.log(0 && 12 > 10); // 0
console.log(null && 12 > 10); // null
console.log(3 > 5 && 12 > 10); // false

console.log(5 && 6); // 6
console.log(5 && 6 > 3); // true
console.log(5 && null); // null
// || 或,或者  
// 只要一边为真,结果就为真,左边为真,就不用跑到右边
// 如果左边为真,则不用跑到右边;直接看左边,如果左边是表达式,则表达式求值,如果左边是值,则返回这个值
// 如果左边为假,则跑到右边;直接看右边,如果右边是表达式,则表达式求值,如果右边是值,则返回这个值
console.log(12 > 10 || 12 < 10); // true
console.log(1 || 12 < 10); // 1
console.log(0 || 12 < 10); // false
// ! 非,取反
var a = 4;
console.log(!a); // false
console.log(!!a); // true   相当于调用了Boolean()这个方法

console.log(!!!!!!!!a); // true

5、三元运算符

// 三目(三元)
// 语法:表达式 ? 表达式为真执行这里 : 表达式为假执行这里;

var age = 7;
// age >= 7 ? console.log('上小学') : console.log('上大班');

// 推荐
var msg = age >= 7 ? '上小学' : '上大班';
console.log(msg);

6、运算符的优先级

https://github.com/xhlwill/blog/issues/16

console.log(3 + 4 * 5); // 23
console.log(3 > 2 && 2 > 1); // true

console.log(10 > 5 > 4); // false
console.log(1 < 2 < 3); // true

7、隐式类型转换

数据在进行 +、-、*、/、%、++、-- 等操作的时候会自动转换数据类型进行操作。

// 加 +
console.log(10 + 100); // 110
console.log(10 + 'string'); // '10string'
console.log(19 + 10 + 'age' + 18 + 10) // '29age1810'
console.log(10 + '100'); // '10100'
console.log(10 + true); // 11
console.log(true + false); // 1
console.log('10' + true); // '10true'
console.log('' + 100); // '100'
console.log(10 + null); // 10
console.log(10 + undefined); // NaN
// 减 -
console.log(100 - 10); // 90
console.log(100 - 't'); // NaN
console.log(100 - ''); // 100
console.log(100 - true); // 99
console.log(100 - '80'); // 20
console.log(100 - null); // 100
console.log(100 - undefined); // NaN
// 乘 *
console.log(100 * 'a'); // NaN
console.log(100 * ''); // 0
console.log(100 * '100');// 10000
console.log(100 * null); // 0
console.log(100 * undefined);// NaN
// 除 /
console.log(100 / 'a'); // NaN
console.log(100 / ''); // 无穷
console.log(100 / '70'); // 1.4
console.log(100 / null); // 无穷
console.log(100 / undefined); // NaN
// 取余 %
console.log(100 % 'a'); // NaN
console.log(100 % ''); // NaN
console.log(100 % '70'); // 30
console.log(100 % null); // NaN
console.log(100 % undefined); // NaN
// ++
var n = '10';
n++;
console.log(n); // 11
// 取反
console.log(!true); // false
console.log(!10); // false
console.log(!'web'); // false

8、强制类型转换和隐式类型转换

1、强制类型转换

Number(参数)   
parseInt(参数)   
parseFloat(参数)   
String(参数)   
参数.toString()   
Boolean(参数)

2、隐式类型转换

+ - * / % ++ -- 都具有隐式类型转换的作用

喜欢 (0)
cat
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址