资讯专栏INFORMATION COLUMN

JavaScript学习笔记(运算符)

vvpale / 634人阅读

摘要:运算符运算符概述提供了一组用于操作数据值的运算符,又称为操作符。减法运算符注意在进行减法运算时,如果是数字类型,运算结果就是数字类型的值进行减法运算如果是或者是类型,就将类型转换为类型再进行计算。

运算符

运算符
概述:

JavaScript提供了一组用于操作数据值的运算符,又称为操作符。这些运算符可以按照作用的不同或者操作变量数量的不同进行分类

分类:

-算数运算符(+ - * / % ++ --)
-比较运算符(> >= < <= == != === !==)
-逻辑运算符(&& || !)
-赋值运算符(= += -= *= /= %=)
-字符串连接运算符(+)
-条件运算符(?:)
-特殊运算符(typeof instanceof delete)


算数运算符

var num = 100;
var str1 ="EVA";
var str2 = "200";
var boo = true;

加法运算符

console result1 = num +100;/*200*/
console result2 = str1 + 100;/*EVA100*/ 
console result3 = str2 + 100;/*200100*/
console result4 = boo + 100;/*101*/

注意:在加法运算中,如果是数字类型,运算结果就是数字类型的值进行加法运算

              如果是string类型,运算结果就是字符串的连接计算(无论string类型中是普
              通的文本还是数字)
              如果是布尔类型,就将布尔类型转换为数字类型,true转换为1,false转化为 
              0.再进行计算。

减法运算符

console result5 = num - 100;/*0*/
console result6 = str1 - 100;/*NaN*/
console result7 = str2 - 100;/*100*/
console result8 = boo - 100;/*-99*/

注意:在进行减法运算时,如果是数字类型,运算结果就是数字类型的值进行减法运算

  如果是string或者是boolean类型,就将类型转换为number类型再进行计算。

乘法、除法运算的规则与减法运算的相同,但是在除法中,如果被除数为0,那么结果就为无穷大(Infinity)

求余运算符

console .log(100 % 3);/*1*/
console .log(8 % 4);/*0*/
console .log(100 % -3);/*1*/
console .log(-100 % 3);/*-1*/
console .log(-100 % -3);/*-1*/

注意:求余的运算结果的正负值与第一个操作数有关

自增运算符
操作当前变量的值;每自增一次(+1)
a.
前置自增运算符(++变量名)
先自增,再进行赋值

var num = 10;
console .log(num);/*10*/

var result = ++num;
console .log(result);/*11*/
console .log(num);/*11*/

因为前置自增运算是先自增,再赋值,num原本的值为10,进行一次自增后,值变为11,再进行赋值给result,所以result的值也为11.
b.
后置自增运算符(变量名++)
先赋值,再自增

var num = 10;
console .log(num);/*10*/

var result = num++;
console .log(result);/*10*/
console .log(num);/*11*/

因为后置自增是先赋值,再自增,num原本的值为10,赋值给result,所以result的值就为10。num再进行自增,值变为11.

运算符的优先级别
a.优先计算优先级别高的运算符
b.运算符级别相同,从左至右进行计算
c.运算符中优先级别最高的是‘()’

比较运算符
大于小于比较运算符
a.number类型

console .log(10 > 11);/*false*/
console .log(10 > 9);/*true*/
console .log(10>=10);/*true*/

b.boolean类型(将boolean类型转换为number类型)

console .log(true > false);/*true*/
console .log(true > 0);/*true*/

c.string类型(1.英文 2.中文)
*英文或者中文,将文本转换为Unicode码(对应具有数字值)
*英文单词,从左至右的顺序比较字母的Unicode码的大小,如果两个字母的Unicode的码相同,就比较下一个字母。

相等不等比较运算符
相等运算符(==) 不等运算符(!=)
a.number类型

console .log(10 == 10);/*true*/
console .log(10 == 11);/*false*/

b.boolean类型

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

c.string类型

console.log("a" == "a");// true
console.log("a" == "b");// false
console.log("100" == 100);// true

注意:相等不等运算符在比较时只会比较值而不会比较类型

全等不全等运算符
全等运算符(===) 不全等运算符(!==)
全等不全等运算符与相等不等运算符的区别就是全等不全等运算符不仅比较值并且比较类型

console .log(10 ===10);/*true*/
console.log("10" === 10);/*false*/

isNaN()函数与isFinite()函数

isNaN()函数
作用 - 判断当前值是否为 NaN
true - 表示当前值是 NaN(不是一个数字值)
false - 表示当前值不是 NaN(不是一个数字值)

console.log(isNaN(100));/*false*/
console.log(isNaN(Number("卧龙学苑")));/*true*/

isFinite()函数
作用 - 判断当前值是否为无穷大

  false - 表示当前值是无穷大
  true - 表示当前值是有限数值
var result = 100/0;
console.log(result);/*Infinity*/
console .log(isFinite(result));/*false*/

逻辑运算符
逻辑与运算符(&&)
boolean类型

console.log(true && true);// true
console.log(true && false);// false
console.log(false && true);// false
console.log(false && false);// false

当类型为布尔类型时,只有当两个操作数都为true,结果才为true,否则都为false
其他类型:需要将其他类型转换为布尔类型再进行

console.log(100 && 1);// 1
console.log(1 && 0);// 0
console.log(0 && 1);// 0
console.log(0 && 0);// 0

console.log("卧龙学苑" && "卧龙学苑");// 卧龙学苑
console.log("卧龙学苑" && "");// ""
console.log("" && "卧龙学苑");// ""
console.log("" && "");// ""

当左边的操作数为true时,结果为右边操作数的值
当左边的操作数为false时,结果为左边操作数的值

逻辑或运算符(||)
boolean类型
如果有一个操作数为true那么结果就为true 否则结果就为false

console.log(true || true);// true
console.log(true || false);// true
console.log(false || true);// true
console.log(false || false);// false

其他类型:需要将其他类型转换为布尔类型再进行

console.log(100 || 1);// 100
console.log(1 || 0);// 1
console.log(0 || 1);// 1
console.log(0 || 0);// 0

console.log("卧龙学苑" || "卧龙学苑");// 卧龙学苑
console.log("卧龙学苑" || "");// 卧龙学苑
console.log("" || "卧龙学苑");// 卧龙学苑
console.log("" || "");// ""

当左边的操作数为true时,结果为左边操作数的值
当左边的操作数为false时,结果为右边操作数的值

赋值运算符
赋值扩展运算符

var b = 10, c = 20;
var a = b + c;
console.log(a);// 30
b += c/*是b=b+c的等价写法*/
console.log(b);// 30

条件运算符

var result = 8 > 9 ? "对" : "错";
console.log(result);/*错*/
var score = 95;
score > 90 ? console.log("优秀") : console.log("及格");/*优秀*/

嵌套条件运算符

var score = 55;
var result = score > 90 ? "优秀" : (score > 80 ? "良好" : (score > 60 ? "及格" : "不及格"));
console.log(result);/*不及格*/

嵌套条件运算符的优点:扩展了条件运算符本身的计算能力

           缺点:可读性比较差
                 性能随着嵌套的层级越多越差

建议 - 最多不要超过三层嵌套

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/110158.html

相关文章

  • 重学前端学习笔记(二十七)--JavaScript的词法

    摘要:模板语法四种词法定义二空白符号空白符号分类或称是,是缩进符,字符串中写的。注意换行符会影响的两个重要语法特性自动插入分号和规则。 笔记说明 重学前端是程劭非(winter)【前手机淘宝前端负责人】在极客时间开的一个专栏,每天10分钟,重构你的前端知识体系,笔者主要整理学习过程的一些要点笔记以及感悟,完整的可以加入winter的专栏学习【原文有winter的语音】,如有侵权请联系我,邮箱...

    jayzou 评论0 收藏0
  • 重学前端学习笔记(二十七)--JavaScript的词法

    摘要:模板语法四种词法定义二空白符号空白符号分类或称是,是缩进符,字符串中写的。注意换行符会影响的两个重要语法特性自动插入分号和规则。 笔记说明 重学前端是程劭非(winter)【前手机淘宝前端负责人】在极客时间开的一个专栏,每天10分钟,重构你的前端知识体系,笔者主要整理学习过程的一些要点笔记以及感悟,完整的可以加入winter的专栏学习【原文有winter的语音】,如有侵权请联系我,邮箱...

    shuibo 评论0 收藏0
  • 重学前端学习笔记(二十七)--JavaScript的词法

    摘要:模板语法四种词法定义二空白符号空白符号分类或称是,是缩进符,字符串中写的。注意换行符会影响的两个重要语法特性自动插入分号和规则。 笔记说明 重学前端是程劭非(winter)【前手机淘宝前端负责人】在极客时间开的一个专栏,每天10分钟,重构你的前端知识体系,笔者主要整理学习过程的一些要点笔记以及感悟,完整的可以加入winter的专栏学习【原文有winter的语音】,如有侵权请联系我,邮箱...

    Hegel_Gu 评论0 收藏0
  • 重学前端学习笔记(二十七)--JavaScript的词法

    摘要:模板语法四种词法定义二空白符号空白符号分类或称是,是缩进符,字符串中写的。注意换行符会影响的两个重要语法特性自动插入分号和规则。 笔记说明 重学前端是程劭非(winter)【前手机淘宝前端负责人】在极客时间开的一个专栏,每天10分钟,重构你的前端知识体系,笔者主要整理学习过程的一些要点笔记以及感悟,完整的可以加入winter的专栏学习【原文有winter的语音】,如有侵权请联系我,邮箱...

    MageekChiu 评论0 收藏0
  • 学习笔记javascript数字格式化

    摘要:下溢运算结果无限接近于零,或者比所能表示的最小值还小时,发生下溢,结果是返回当一个负数发生下溢时,返回负零。被零整除分母为零,结果是返回无穷大或负无穷大。但是,当零整除零,即分子分母都是零时,结果是返回非数字。用以判断数字是否合法 千位分割符 // 三位数字用,号隔开 splitByComma (value) { return Number(value).t...

    wangym 评论0 收藏0

发表评论

0条评论

vvpale

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<