学习
实践
活动
工具
TVP
写文章

独自修行:第二天

按别人的要求,自己写上注释,再按自己的理解,一步步实现.代码并非越少越好,是逻辑性越高越好,使别人看懂自己的代码.

1.运算符

运算符基本概念

运算符是告诉程序执行特定算术或逻辑操作的符号。

运算符的优先级和结合性

JavaScript中,运算符的运算优先级共分为15 级。1 级最高,15 级最低。

一般情况下不需要死记硬背优先级, 只需要记住()优先级最高即可

结合性

JavaScript中各运算符的结合性分为两种,即左结合性(自左至右)和右结合性(自右至左)。

,即先左后右

例如表达式: x - y + z;

则y 应先与“-”号结合,执行 x-y 运算,然后再执行+z 的运算。

这种自左至右的结合 方向就称为“左结合性”。

而自右至左的结合方向称为“右结合性”。

最典型的右结合 性运算符是赋值运算符 例如:如x = y = z = 10; 由于“=”的 右结合性,应先执行z = 10; 再执行y = z 再执行x = y运算。

优先级

先计算优先级高的

优先级相同则左结合计算

3*5/3*2先算3*5,然后再算除3,最后再乘以2

2.算术运算符

加(+)减(-)乘(*)除(/)求余(%)

加法运算

格式: Number1 + Number2;

非Number类型的值进行运算时,会将这些值转换为Number然后在运算

任何值和NaN做运算都得NaN

任何的值和字符串做加法运算,都会先转换为字符串,然后再和字符串做拼串的操作

减法运算(除了字符串其他和加法运算一样)

字符串做减法也会转换为Number

乘法运算

格式: Number1 * Number2;

非Number类型的值进行运算时,会将这些值转换为Number然后在运算

任何值和NaN做运算都得NaN

字符串做乘法也会转换为Number

其它规律和减法一样

除法运算

格式: Number1 / Number2;

非Number类型的值进行运算时,会将这些值转换为Number然后在运算

任何值和NaN做运算都得NaN

字符串做乘法也会转换为Number

其它规律和乘法一样

取余运算

规律

var result = 10 % 0;

console.log(result);

// NaN

result = 0 % 10;

console.log(result); // 0

result = 2 % 10;

console.log(result); // 2

其它规律和减法一样

n等于0 返回NaN

m等于0 结果为0

m>n 正常求余 如:8%3 = 2

m

非Number类型的值进行运算时,会将这些值转换为Number然后在运算

任何值和NaN做运算都得NaN

字符串做取余也会转换为Number

格式: Number1 % Number2;

m%n 求余,相当于m/n 获取余数

3.正负运算符

正号

+ 正号不会对数字产生任何影响

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

负号

- 负号可以对数字进行负号的取反

4.赋值运算符

简单赋值运算符: =

格式: 变量 = 数据;

赋值运算符左边只能是变量而不能是数据

多个赋值运算符可以组成, 赋值表达式具备右结合性

// 从右至左计算

// 先将10赋值给变量c, 然后将变量c中存储的值赋值给变量b

// 然后将变量b中存储的值赋值给变量a, 最后a,b,c存储的都是10

a = b = c = 10;

复合赋值运算符: +=、-=、*=、/=、%=

+= 加后赋值 变量+=表达式 如: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

复合赋值表达式运算

格式: 变量 复合赋值运算符

表达式; 如: a *= 1 + 2;

由于赋值运算符是右结合性, 所以会先计算等号右边, 然后再进行复合运算

var value = 5;

value *= 2 - 2;

// 等价于 value = 5 * (2 - 2);

console.log(value); // 0

5.自增自减运算符

在程序设计中,经常遇到“i=i+1”和“i=i-1”这两种极为常用的操作。

JavaScript语言为这种操作提供了两个更为简洁的运算符,即++和--,分别叫做自增运算符和自减运算符。

无论运算符号在前还是在后,变量在自身基础上都会改变

var num = 1;

num++; // 等价于 num = num + 1;

console.log(num); // 2

var num = 1;

++num;

console.log(num); // 2

var num = 1;

num--; // 等价于 num = num - 1;

console.log(num); // 0

num = 1;

--num;

console.log(num); // 0

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

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

6.关系运算符

为什么要学习关系运算符?

默认情况下,我们在程序中写的每一句正确代码都会被执行。但很多时候,我们想在某个条件成立的情况下才执行某一段代码

这种情况的话可以使用条件语句来完成,但是学习条件语句之前,我们先来看一些更基础的知识:如何判断一个条件成不成立。

JavaScript中的真假性

在JavaScript中,条件成立称为“真”,条件不成立称为“假”,因此,判断条件是否成立就是判断条件的“真假”。

在JavaScript已经给我们定义好了一个Boolean类型的值, 取值是true和false, true代表真, false代表假

而接下来我们要学习的关系运算符它的返回值正好就是Boolean类型的值, 也就是说关系运算符的返回值要么是true,要么是false

关系运算符

在程序中经常需要比较两个量的大小关系,以决定程序下一步的工作。比较两个量的运算符称为关系运算符。

特殊示例

对于非数值进行比较时,会将其转换为数字然后在比较 true1 false0

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

Unicode编码转换地址

null、undefined 、NaN比较

7.逻辑运算符

为什么要学习逻辑运算符?

有时候,我们需要在多个条件同时成立的时候才能执行某段代码

比如:用户只有同时输入了QQ和密码,才能执行登录代码,如果只输入了QQ或者只输入了密码,就不能执行登录代码。这种情况下,我们就要借助于JavaScript提供的逻辑运算符。

JavaScript中提供了三种逻辑运算符:

&&(与运算) ||(或运算) !(非运算)

逻辑与

格式: 条件A && 条件B

运算结果:

只有当条件A和条件B都成立时,结果才为true;其余情况的结果都为false。因此,条件A或条件B只要有一个不成立,结果都为false

口诀:一假则假

逻辑与运算过程

总是先判断条件A是否成立

如果条件A成立,接着再判断条件B是否成立:如果条件B成立,“条件A && 条件B”的结果就为true,如果条件B不成立,结果就为false

如果条件A不成立,就不会再去判断条件B是否成立:因为条件A已经不成立了,不管条件B如何结果肯定是false

逻辑与短路现象

注意点:

对于非Boolean类型的数值, 逻辑与会将其悄悄咪咪转换为Boolean类型来判断

如果条件A不成立, 则返回条件A的数值本身

如果条件A成立, 不管条件B成不成立都返回条件B数值本身

逻辑或

运算过程

总是先判断条件A是否成立

如果条件A成立,就不会再去判断条件B是否成立:因为条件A已经成立了,不管条件B如何结果肯定是1,也就是true

如果条件A不成立,接着再判断条件B是否成立:如果条件B成立,“条件A || 条件B”的结果就为true,如果条件B不成立,结果就为false

口诀:一真为真

逻辑或短路现象

注意点:

对于非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 bool1 = true;

var res1 = !bool1;

console.log(res1); // false

var bool2 = false;

var res2 = !bool2;

console.log(res2); // true

注意点:

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

var bool = true;

var res = !!bool;

console.log(res); // true

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

var num = 10;

var res = !num;

// 先将10转换为true, 然后再取反

console.log(res); // false

所以, 要想将其它类型转换为Number类型除了Boolean()函数, 还可以使用 !!数值;

值得注意的是!!数值;的形式,实现原理和Boolean()函数一样

8.逗号和三目运算符

逗号运算符

在JavaScript中逗号“,”也是一种运算符,称为逗号运算符。 其功能是把多个表达式连接起来组成一个表达式, 称为逗号表达式。

一般形式形式: 表达式1,表达式2,… …,表达式n;

例如: a = 1 + 1,b = 3 * 4, c = 10 / 2;

求值过程

表达式1,表达式2,… …,表达式n;

逗号表达式的运算过程是:先算表达式1,再算表达式2,依次算到表达式n

整个逗号表达式的值是最后一个表达式的值

逗号运算符使用注意

程序中使用逗号表达式,通常是要分别求逗号表达式内各表达式的值,并不一定要求整个逗号表达式的值。

并不是在所有出现逗号的地方都组成逗号表达式,例如在变量说明中,函数参数表中逗号只是用作各变量之间的间隔符。

练习

三目运算符(条件运算符)

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

求值规则:

如果条件表达式为true,则执行语句1,并返回执行结果

如果条件表达式为false,则执行语句2,并返回执行结果

// 弹第一个

true?alert("语句1") : alert("语句2");

// 弹第二个

false?alert("语句1") : alert("语句2");

注意点:

条件运算符 ? 和 : 是一对运算符,不能分开单独使用

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

// 弹第二个

null?alert("语句1") : alert("语句2");

// 弹第一个

"abc"?alert("语句1") : alert("语句2");

9.流程控制基本概念

默认情况下,程序的运行流程是这样的:运行程序后,系统会按书写从上至下顺序执行程序中的每一行代码,但是这并不能满足我们所有的开发需求

实际开发中, 我们需要根据不同的条件执行不同的代码或者重复执行某一段代码

为了方便我们控制程序的运行流程,JavaScript提供3种流程结构,不同的流程结构可以实现不同的运行流程。

这3种流程结构分别是顺序、选择、循环三种基本控制结构构造.

顺序结构:默认的流程结构。按照书写顺序从上至下执行每一条语句。

选择结构:对给定的条件进行判断,再根据判断结果来决定执行哪一段代码。

循环结构:在给定条件成立的情况下,反复执行某一段代码。

10.流程控制-if语句

选择结构-if基本概念

1.if第一种形式

表示如果条件表达式为,执行语句块1,否则不执行。

示例:

2.if第二种形式

如果条件表达式为,则执行语句块1,否则执行语句块2

示例:

特点:

if和else后面的代码块({})只有一个会被执行

3.if第三种形式

如果条件表达式1为,则执行语句块1,

否则判断条件表达式2,如果为真执行语句块2,

否则再判断条件表达式3,如果真执行语句块3,

当表达式1、2、3都不满足,会执行最后一个else语句。

示例:

特点:

这么多大括号中只有一个大括号中的内容会被执行

当执行到后面条件的时候证明前面的条件不满足

可以只有一个, 也可以有多个,但是都必须添加在if和else之间

选择结构-if注意点

如果只有一条语句时if后面的大括号可以省略(不建议省略)

注意点:

受到if管制的只有紧跟其后的那条语句

在企业开发中尽量不要省略大括号

分号“;”也是一条语句, 空语句

if else是一个整体, else匹配if的时候匹配离它最近的一个if

对于非Boolean类型的值,会先转换为Boolean类型后再判断

判断变量与常量问题

但凡遇到比较一个变量等于或者不等于某一个常量的时候,把常量写在前面

if语句可以嵌套使用

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180802G20QLB00?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

同媒体快讯

扫码关注腾讯云开发者

领取腾讯云代金券