03-JS基础-运算符

  • 运算符的优先级
运算符 描述
() 表达式分组
++ -- - ~ ! 一元运算符
* / % 乘法、除法、取模
+ - + 加法、减法、字符串连接
<< >> >>> 移位
< <= > >= 小于、小于等于、大于、大于等于
== != === !== 等于、不等于、严格相等、非严格相等
& 按位与
^ 按位异或
| 按位或
&& 逻辑与
|| 逻辑或
?: 条件
= += -= *= /= %= 赋值运算
, 多重求值
  • 运算符的结合性
    JavaScript中各运算符的结合性分为两种,即左结合性(自左至右)和右结合性(自右至左)。
    算术运算符的结合性是自左至右,即先左后右。
    最典型的右结合性运算符是赋值运算符。例如:如x = y = z = 10;
算数运算符
名称 符号 说明
加法运算符 + 对两个值进行加法运算,并将结果返回
减法运算符 - 对两个值进行减法运算,并将结果返回
乘法运算符 * 对两个值进行乘法运算,并将结果返回
除法运算符 / 对两个值进行除法运算,并将结果返回
取余运算符 (模运算符) % 对两个值进行取余运算,并将结果返回

1)非Number类型的值进行运算时,会将这些值转换为Number然后在运算;
2)任何值和NaN做运算都得NaN;
3)任何的值和字符串做加法运算,都会先转换为字符串,然后再和字符串做拼串的操作;
4)字符串在做除了 加法 外的其它算数运算时,会先转换为Number;
5)取模运算,当m%n 中n=0时,返回NaN;

/** 加法 */
var result = true + 1;  // 2
result = 2 + null;      // 2
result = 2 + NaN;       //NaN
result = 1 + "123";     // 1123

/** 减法 */
result = 2 - null;    // 2
result = 2 - NaN;     //NaN
result = 2 - "1";     // 1
result = "2" - "1";   // 1

/** 乘法 */
result = "10" * 2;      // 20
result = 2 * undefined; // NaN
result = 2 * null;      // 0

/** 除法 */
result = 10 / 20;     // 0.5
result = "10" / 2;    // 5

/** 取模 */
result = 10 % 3;      // 1
var res2 = 10 % 2.5;  // 0
一元运算符
  • + 正号
    正号不会对数字产生任何影响。
var num = 123;
num = +num;
console.log(num); // 123

对于非Number类型的值,会先转换为Number,然后再进行运算

var res = +true;
console.log(res);   // 1
console.log(typeof res); // number

var str = "123";
res = +str;
console.log(res);     // 123
console.log(typeof res); // number  

var str2 = "123abc";
res = +str2;
console.log(res); // NaN 内部调用Number()函数
  • - 负号
    负号可以对数字进行负号的取反。
var num = 123;
num = -num;
console.log(num); // -123

对于非Number类型的值,会先转换为Number,然后再进行运算

var res = -true;
console.log(res);   // -1
console.log(typeof res); // number

var str = "123";
res = -str;
console.log(res);     // -123
console.log(typeof res); // number 
赋值运算符
  • 简单赋值运算符
    格式: 变量 = 数据;
// 将等号右边的常量10赋值给左边的变量num
var num = 10;
a = b = c = 10;
// 将等号右边的变量num中存储的值赋值给左边的变量value
var value = num; 
  • 复合赋值运算符
符号 作用 举例
+= 加后赋值 a+=3;   即a=a+3
-= 减后赋值 a-=3;   即a=a-3
*= 乘后赋值 a=3;  即a=a*3
/= 除后赋值 a/=3;   即a=a/3
%= 取模后赋值 a%=3;  即a=a%3
value *= 5 - 2; // 等价于  value = value * (5 - 2);
自增、自减运算符

后缀表达式: x++, x--; 先用x的当前值作为表达式的值,再进行自增自减1运算。即“先用 后变”,也就是先用变量的值参与运算,变量的值再进行自增自减变化。

var a, b;
a = 10;
b = 20;
// ++ 在后, 变量先参与其它运算, 然后再自增
var res = (a++) + (b++);
console.log(res); // 30
console.log(a); // 11
console.log(b); // 21

a = 10;
b = 20;
// -- 在后, 变量先参与其它运算, 然后再自减
res = (a--) + (b--);
console.log(res); // 30
console.log(a); // 9
console.log(b); // 19

var c = 10;
c = c++;   // var d = c ++; c = d;
console.log("c = " + c);  // 10

前缀表达式:++x, --x; 其中x表示变量名,先完成变量的自增自减1运算,再用x的值作为表 达式的值;即“先变后用”,也就是变量的值先变,再用变量的值参与运算。

var a, b;
a = 10;
b = 20;
// ++ 在前, 变量先自增, 然后再参与其它运算
res = (++a) + (++b);
console.log(res); // 32
console.log(a); // 11
console.log(b); // 21

a = 10;
b = 20;
// ++ 在前, 变量先自增, 然后再参与其它运算
res = (--a) + (--b);
console.log(res); // 28
console.log(a); // 9
console.log(b); // 19
逻辑运算符
  • && 逻辑与

格式:条件A && 条件B

只有当条件A和条件B都成立时,结果才为true;其余情况的结果都为false。一假则假
运算过程
1)先判断条件A是否成立;
2)如果条件A成立,接着再判断条件B是否成立:如果条件B成立,“条件A && 条件B”的结果就为true,如果条件B不成立,结果就为false;
3)如果条件A不成立,就不会再去判断条件B是否成立:因为条件A已经不成立了,不管条件B如何结果肯定是false;

非Boolean值
对于非Boolean类型的数值, 逻辑与会将其转换为Boolean类型来判断;
如果条件A不成立, 则返回条件A的数值本身;
如果条件A成立, 不管条件B成不成立都返回条件B数值本身;

var result =  "123" && "abc";
console.log(result);   // "abc"
result =  "123" && 0;
console.log(result);   // 0
result =  null && 0;
console.log(result);   // null
  • || 逻辑或

格式: 条件A || 条件B

当条件A或条件B有一个成立时(也包括条件A和条件B都成立),结果就为true;只有当条件A和条件B都不成立时,结果才为false。
一真为真

运算过程
1)先判断条件A是否成立;
2)如果条件A成立,就不会再去判断条件B是否成立:因为条件A已经成立了,不管条件B如何结果肯定是true;
3)如果条件A不成立,接着再判断条件B是否成立:如果条件B成立,“条件A || 条件B”的结果就为true,如果条件B不成立,结果就为false;

非Boolean值:
对于非Boolean类型的数值, 逻辑与会将转换为Boolean类型来判断;
如果条件A不成立, 则不管条件B成不成立都返回条件B数值本身;
如果条件A成立, 则返回条件A的数值本身;

var  result =  null || 0;
console.log(result); // 0

result =  "123" || "abc";
console.log(result); // "123"
result =  "123" || 0;
console.log(result); // "123"
  • ! 逻辑非

格式: ! 条件A

对条件A进行取反:若条件A成立,结果就为false;若条件A不成立,结果就为true。也就是说:真的变假,假的变真。

注意:
对一个值进行两次取反,它不会变化;

var bool = true;
var res = !!bool;
console.log(res); // true

对非布尔值进行取反,则会将其转换为布尔值,然后再取反;

var num = 10;
var res = !num; // 先将10转换为true, 然后再取反
console.log(res); // false
  • 逻辑与和逻辑或的特殊用法
    1.调用对象中的函数前,判断函数是否存在
obj.eat && obj.eat();
关系运算符
运算符 作用
> 大于
< 小于
>= 大于等于
<= 小于等于
== 判断值是否相等
!= 判断值是否不相等
=== 判断值和类型是否相等
!== 判断值和类型是否不相等

数字和字符串比较,会将字符串转为Number再进行比较

console.log(5 > "10"); // false
console.log(true > false); // true

任何值与NaN比较,结果都是false

console.log(5 > "a"); // false  "a"转为Number为NaN
onsole.log(5 <= "a"); // false

如果符号两侧的值都是字符串时,不会将其转换为数字进行比较, 而会分别比较字符串中字符的Unicode编码。

// a的Unicode编码是:0061
// b的Unicode编码是:0062
console.log("a" > "b");// false
console.log("5" > "10"); // true

// 比较多位时则是从前往后一位一位比较
// 第一位相同比较第二位, 直到比较到不一样或者结束为止
// c的Unicode编码是:0063
console.log("ab" < "ac");//true

当使用 == 比较时,如果两个值类型不同,会自动转换为相同类型进行比较。大部分情况转为Number。

console.log("1" == 1); // true
console.log(true == 2); // false
console.log(true == 1); // true

null、undefined 、NaN比较

console.log(null == 0); // false
console.log(undefined == 0); // false
// 永远不要判断两个NaN是否相等
console.log(NaN == NaN); // false

/*
 * 可以通过isNaN()函数来判断一个值是否是NaN
 *    如果该值是NaN则返回true,否则返回false
 */
var num = NaN;
console.log(isNaN(num)); // true

// undefined 衍生自 null, 所以返回true
console.log(null == undefined); // true;
console.log(null === undefined); // false;

// == 判断值是否相等
// == 会进行数据类型转换
console.log("123" == 123); // true
// === 判断值和类型时候同时相等
// === 不会进行数据类型转换
console.log("123" === 123); // false
条件运算符(三目运算符)

格式:条件表达式 ? 语句1 : 语句2;

求值规则:
如果条件表达式为true,则执行语句1,并返回执行结果;
如果条件表达式为false,则执行语句2,并返回执行结果;

注意:
如果条件的表达式的求值结果是一个非布尔值, 会将其转换为布尔值然后在运算。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,905评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,140评论 2 379
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,791评论 0 335
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,483评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,476评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,516评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,905评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,560评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,778评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,557评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,635评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,338评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,925评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,898评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,142评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,818评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,347评论 2 342

推荐阅读更多精彩内容

  • 第2章 基本语法 2.1 概述 基本句法和变量 语句 JavaScript程序的执行单位为行(line),也就是一...
    悟名先生阅读 4,114评论 0 13
  • 运算符是处理数据的基本方法,用来从现有的值得到新的值。JavaScript 提供了多种运算符,本章逐一介绍这些运算...
    徵羽kid阅读 653评论 0 0
  • 运算符是处理数据的基本方法,用来从现有的值得到新的值。JavaScript 提供了多种运算符,本章逐一介绍这些运算...
    许先生__阅读 596评论 0 3
  • 接着之前的知识点,继续学习js.还是一如既往的在简书上求个赞~ 表达式呢,它是JavaScript的一个短语,js...
    我就是z阅读 638评论 3 2
  • 嗨!欢迎归来!一想到与你们见面了,你们猜我的心情是怎么样的?唉,又要上班了,又要面对这群小屁孩了?错,一想到与你们...
    锦时2018阅读 147评论 0 0