Web全栈-JavaScript-笔记2

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了Web全栈-JavaScript-笔记2，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含23480字，纯文字阅读大概需要34分钟。

内容图文

2. JavaScript基本语法-3

2. 运算符?

1. 定义

运算符也叫操作符

通过运算符可以对一个或多个值进行运算,并获取运算结果

比如：typeof就是运算符，可以来获得一个值的类型, 它会将该值的类型以字符串的形式返回: number string boolean undefined object

2. 作用

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

例如告诉程序, 某两个数相加, 相减等

3. 分类

1. 按照功能划分

算术运算符

位运算符

关系运算符

逻辑运算符

2. 按照操作数个数划分

单目运算

只有一个操作数 如 : i++ !

双目运算

有两个操作数 如 : a+b;

三目运算

三目运算也称为问号表达式 a>b ? 1 : 0;

4. 运算符的结合性

JavaScript中各种运算符的结合性分为两种

左结合性(自左至右)

右结合性(自右至左)

自左至右,即先左后右

例如表达式: x - y + z;
则y 应先与“-”号结合,执行 x-y 运算,然后再执行+z 的运算。
这种自左至右的结合 方向就称为“左结合性”。

自右至左,即先右后左

  例如:如x = y = z = 10;
  由于“=”的 右结合性,应先执行z = 10; 再执行y = z 再执行x = y运算。

3. 算术运算符

加法运算

格式:  Number1 + Number2

var res = 1 + 1;
console.log(res); // 2

var num1 = 10;
var num2 = 20;
var res2 = num1 + num2;
console.log(res2); // 30

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

var result = true + 1;
console.log(result); // 2
result = true + false;
console.log(result); // 1
result = 2 + null;
console.log(result);// 2

任何值和NaN做运算都得NaN

var result = 1 + NaN;
console.log(result); //NaN

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

var result = 10 + "123";
console.log(result); // 10123
result = 1 + "true";
console.log(result); // 1rue

减法运算

格式: Number1 - Number2

var res = 1 - 1;
console.log(res); // 0

var num1 = 10;
var num2 = 20;
var res2 = num1 - num2;
console.log(res2); // -10

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

任何值和NaN做运算都得NaN

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

var result = 2 - "1";
console.log(result); // 1
result = "2" - "1";
console.log(result); // 1

乘法运算

格式: Number1 * Number2

var res = 2 * 2;
console.log(res); // 4

var num1 = 10;
var num2 = 20;
var res2 = num1 * num2;
console.log(res2); // 200

其它规律和减法一样

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

任何值和NaN做运算都得NaN

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

除法运算

格式: Number1 / Number2

var res = 5 / 5;
console.log(res); // 1

var num1 = 100;
var num2 = 200;
var res2 = num1 / num2;
console.log(res2); // 0.5

其它规律和减法一样

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

任何值和NaN做运算都得NaN

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

取余运算

格式: Number1 % Number2

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

var res = 10 % 4;
console.log(res); // 2

var num1 = 10;
var num2 = 2.5;
var res2 = num1 % num2;
console.log(res2); // 0

n等于0 返回NaN

m等于0 结果为0

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

m<n 结果是m 如:2%4 = 2

其它规律和减法一样

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

任何值和NaN做运算都得NaN

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

4. 一元运算符

只需要一个操作数

正号

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

var num = 123;
num = +num;
console.log(num); // 123

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

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

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

var str2 = "123abc";
res = +str2;
console.log(res); // NaN, 所以内部不是调用parseInt, 而是Number()函数

var temp = null;
res = +temp;
console.log(res); // 0

负号

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

var num = 456;
num = -num;
console.log(num); // -456

var result = 1 + -"2" + 3;
console.log("result = "+result);

5. 赋值运算符

简单赋值运算符

=

格式: 变量 = 数据

// 将等号右边的常量100赋值给左边的变量num
var num = 100;

// 将等号右边的变量num中存储的值赋值给左边的变量value
var value = num;

赋值运算符左边只能是变量

110 = 220; // 错误写法
  var str = 110;
  220 = str; // 错误写法

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

// 从右至左计算
//  先将10赋值给变量c, 然后将变量c中存储的值赋值给变量b
// 然后将变量b中存储的值赋值给变量a, 最后a,b,c存储的都是10
a = b = c = 10;

复合赋值运算符

复合赋值运算符

+= 加后赋值 变量+=表达式 如:a+=1;即a=a+1

-= 减后赋值 变量-=表达式 如:a-=1;即a=a-1

*= 乘后赋值 变量=表达式 如:a=1;即a=a*1

/= 除后赋值 变量/=表达式 如:a/=1;即a=a/1

%= 取模后赋值 变量%=表达式 如:a%=1;即a=a%1

复合赋值表达式运算

格式: 变量 复合赋值运算符 表达式; 如: a *= 1 + 2;

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

var value = 5;
value *= 2 - 2; // 等价于  value = 5 * (2 - 2);
console.log(value); // 0
// 设想如果先计算复合运算符结果是什么?
value = (5 * 2) - 2 = 10 - 2 = 8

6. 自增/自减运算符

自增、自减运算符介绍

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

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

自增、自减运算符求值过程

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

var num = 1;
num++; // 等价于 num = num + 1;
console.log(num); // 2

num = 1;
++num;
console.log(num); // 2

num = 1;
num--; // 等价于 num = num - 1;
console.log(num); // 0

num = 1;
--num;
console.log(num); // 0

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

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

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

前缀表达式:++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

7. 逻辑运算符

目的

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

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

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

逻辑与

格式: 条件A && 条件B

运算结果

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

口诀:一假则假

逻辑与运算过程

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

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

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

//如果两个值都是true则返回true
var result = true && true;

//只要有一个false，就返回false
result = true && false;
result = false && true;
result = false && false;

短路测试

//第一个值为true，会检查第二个值
  true && alert("我来了！！");

  //第一个值为false，不会检查第二个值
  false && alert("我没有来！！");

注意点

对于非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

口诀:一真为真

逻辑或运算过程

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

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

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

//两个都是false，则返回false
var result = false || false;

//只有有一个true，就返回true
result = true || false;
result = false || true ;
result = true || true ;

短路测试

//第一个值为false，则会检查第二个值
  false || alert("123");

  //第一个值为true，则不再检查第二个值
  true || alert("123");

注意点

对于非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

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

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

8. 关系运算符

关系运算符存在的意义

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

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

JavaScript中的真假性

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

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

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

图示

示例

    var a, b;
    a = 20;
    b = 20;
    console.log(a > b);
    console.log(a < b);
    console.log(a >= b);
    console.log(a <= b);
    console.log(a == b);
    console.log(a != b);

    var a, b;
    a = 20;
    b = 20;
    console.log(a > b); // false
    console.log(a < b); // false
    console.log(a >= b); // true
    console.log(a <= b); // true
    console.log(a == b); // true
    console.log(a != b); // false

对于非数值进行比较时，会将其转换为数值然后在比较

console.log(1 > true);
console.log(1 >= false);
console.log(1 > "0");
console.log(1 > null);

console.log(1 > true); //false
console.log(1 >= false); //true
console.log(1 > "0"); //true
console.log(1 > null); //true

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

比较字符编码时是一位一位进行比较

如果两位一样，则比较下一位，所以借用它来对英文进行排序

比较中文时没有意义

测试

console.log("a" < "b");
console.log("abc" < "abd");

console.log("你" > "我");

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

注意

比较两个字符串型的数字，可能会得到不可预期的结果

所以, 在比较两个字符串型的数字时，一定要转型

console.log("1111123" < "124");

9. 逗号运算符

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

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

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

求值过程

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

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

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

案例

var a, b, c, d;
/*
1.先计算表达式1, a = 2
2.再计算表达式2, b = 12
3.再计算表达式3, c = 5
4.将表达式3的结果返回给d
*/
d = (a = 1 + 1,b = 3 * 4, c = 10 / 2);
console.log(d); // 5

使用注意

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

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

var a, b, c;  //这里的逗号只是分隔符
function sendMessage(num, content) { //这里的逗号只是分隔符
      console.log(num, content);
 }

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

格式: 条件表达式 ? 语句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");

11. 运算符的优先级

优先级

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

在表达式中,优先级较高的先于优先级较低的进行运算。

先计算优先级高的

优先级相同则左结合计算

可以使用()来改变优先级

图示

3. JavaScript基本语法-4

1. 代码块

简介

程序是由一条一条语句构成的, 语句是按照自上向下的顺序一条一条执行的, 在JS中可以使用{}来为语句进行分组

同一个{}中的语句我们称为是一组语句，它们要么都执行，要么都不执行，

使用

JS中的代码块，只具有分组的的作用，没有其他的用途

代码块里面的内容，在外部是完全可见的

演示

{
       var name = '拼课学院';    
       console.log("itlike.com");
       document.write("喜欢IT, 就上拼课!");
}

console.log("name = " + name);

2. 流程控制语句

1. 基本概念

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

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

为了方便我们控制程序的运行流程，JavaScript提供3种流程结构，不同的流程结构可以实现不同的运行流程。这3种流程结构分别是顺序、选择、循环三种基本控制结构构造.

顺序结构

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

选择结构

对给定的条件进行判断，再根据判断结果来决定执行哪一段代码

循环结构

在给定条件成立的情况下，反复执行某一段代码

2. if

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

if(条件表达式)
{
    语句块1
}
后续语句;

if(age > 18)
{
    console.log("可以上网");
}

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

if(条件表达式)
{
    语句块1
}else{
    语句块2
}

if(age > 18)
{
    console.log("可以上网");
}else{
    console.log("你妈妈喊你吃饭");
}

特点

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

3. 如果条件表达式1为真,则执行语句块1,否则判断条件表达式2,如果为真执行语句块2,否则再判断条件表达式3,如果真执行语句块3, 当表达式1、2、3都不满足,会执行最后一个else语句。

if(条件表达式1)
{
    语句块1
}else if(条件表达式2){
    语句块2
}else if(条件表达式3){
    语句块3
}else{
    语句块4
}

演示

if(age>40)
{
    console.log("老年人");
}else if(age>25){
    console.log("中年人");
}else if(age>18){
    console.log("成年人");
}else{
    console.log("未成年");
}

特点

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

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

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

4. 注意点

1. 如果只有一条语句时if后面的大括号可以省略

if(age > 18)
    console.log("成年人");

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

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

if(false)
    console.log("语句1");
console.log("语句2"); // 语句2会被输出

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

if(4 > 6);
{
    console.log("4 > 6");
}
// 输出结果: 4 > 6, if管制的紧跟其后的那个分号
// {}在JS中仅仅代表告诉系统里面的语句是一个整体, 没有别的用途,不会影响代码的执行

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

   if(0)
        if(1)
            console.log("A");
        else
            console.log("B");
    else
        if (1)
            console.log("C");
        else
            console.log("D");

if(0)
        if(1)
            console.log("A");
        else // 这个else会匹配上面的 if(1)
            console.log("B");
    else // 这个else会匹配上面的 if(0)
        if (1)
            console.log("C"); // 最终输出C
        else
            console.log("D");

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

 if (0) {
        console.log("itlike\n"); // 不会被执行
    }

5. 判断变量与常量问题

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

// if(a = 0)  // 错误写法, 但不会报错
  
    if (0 == a) {
        console.log("a的值是0\n");
    }else{
       console.log("a的值不是0\n");
    }

 /*
    本来是先判断变量a存储的值是否等于0,
    但是如果不小心写成a=0,代表把0存储到a中.
    为了避免这种问题判断是否相等时把常量写前面,
    因为等号左边只能是变量, 所以如果少写一个等号会报错
*/

6. if语句可以嵌套使用

 var num = 20;
    if (num >= 10)
    {
        if(num <= 30)
        {
            console.log("一个10~30之间的数")
        }
    }

3. Switch

1. 简介

Switch和if一样都属于选择结构, 都会对给定的条件进行判断，再根据判断结果来决定执行哪一段代码。

2. 基本格式

switch(条件表达式){
  case 表达式:
      语句1;
      break;
  case 表达式:
      语句2;
      break;
  case 表达式n:
      语句n;
      break;
  default:
      语句n+1;
      break;
}

3. 含义

计算条件表达式的值。 并逐个与case后面表达式的结果值比较

当条件表达式的值与某个表达式的值全等时, 执行其后的语句,并且不会再与其它case进行比较

如果条件表达式的值与所有case后的表达式均不相同时,则执行default后的语句。

4. 示例

    var num = 3;
    switch(num){
        case 1:
            console.log("壹");
            break;
        case 2:
            console.log("贰");
            break;
        case 3:
            console.log("叁");  // 输出叁
            break;
        default:
            console.log("其它数字");
            break;
    }

5. 注意事项

1. case全等于问题

JavaScript中case判断是否相等时是全等于(===),而不是等于(==),也就是说既会判断类型是否相等又会判断值是否相等

var str = "123";
switch (str){
    case 123:
        console.log("123数字");
        break;
    case "123":
        console.log("123字符串"); // 输出123字符串
        break;
    default:
        console.log("default");
        break;
}

case后可以是常量也可以是变量

var num = 120;
switch (120){
    case num:
        console.log("120");
        break;
    case 110:
        console.log("110");
        break;
    default:
        console.log("default");
        break;
}

var num = 120;
switch (120){
    case num: // 这里可以是变量
        console.log("120"); // 输出120
        break;
    case 110: // 这里可以是常量
        console.log("110");
        break;
    default:
        console.log("default");
        break;
}

2. 表达式判断问题

判断时会先计算表达式的值,再判断

switch (110 + 1){
    case 110:
        console.log("110");
        break;
    case 1:
        console.log("1");
        break;
    case 1 + 110:
        console.log("1 + 110");
        break;
    default:
        console.log("default");
        break;
}

switch (110 + 1){ // 计算后为111
    case 110:
        console.log("110");
        break;
    case 1:
        console.log("1");
        break;
    case 1 + 110: // 计算后为111
        console.log("1 + 110"); // 输出1 + 110
        break;
    default:
        console.log("default");
        break;
}

3. case的穿透问题

switch里面的case只要匹配一次其它的都会失效，包括default.

在case语句最后增加 break 语句,使每一次执行之后均可跳出switch语句,从而避免输出不应有的结果

var num = 2;
switch(num){
    case 1:
        console.log("壹");
    case 2:
        console.log("贰");
    case 3:
        console.log("叁");
    default:
        console.log("非法数字");
}

var num = 2;
switch(num){
    case 1:
        console.log("壹");
    case 2:
        console.log("贰"); // 输出贰
    case 3:
        console.log("叁");// 输出叁
    default:
        console.log("非法数字");  // 输出非法数字
}

4. default的位置问题

default可以省略

switch(2){
    case 1:
        console.log("壹");
        break;
    case 2:
        console.log("贰");
        break;
}

default语句可以写在switch语句中的任意位置

switch(3){
    case 1:
        console.log("壹");
        break;
    default: // 无论写在哪, 都只会在所有case不匹配才执行
        console.log("非法数字~~");
        break;
    case 2:
        console.log("贰");
        break;
}

3. 循环

循环结构是程序中一种很重要的结构。其特点是,在给定条件成立时,反复执行某程序段, 直到条件不成立为止。

给定的条件称为循环条件,反复执行的程序段称为循环体

循环结构简单来说就是:一次又一次的执行相同的代码块

现实生活中的循坏

JavaScript中的循坏

while语句

do-while语句

for语句

4. while循环

格式

while ( 条件表达式 ) {
     语句1;
     语句2;
     ....
 }

执行流程

判断条件表达式是否为真, 如果为真执行后面大括号中的内容

执行完毕再次判断条件表达式是否还为真,如果为真执行后面大括号中的内容

重复上述过程,直到条件不成立就结束while循环

var num = 0;
while (num < 10){
  console.log(num);
  num++;
}

构成循环结构的几个条件

循环控制条件(条件表达式)

循环退出的主要依据,来控制循环到底什么时候退出

循环体(while后面的大括号{})

循环的过程中重复执行的代码段

循环结束语句(递增,递减,break等)

能够让循环条件为假的依据,否则退出循环

while循环特点

如果while中的条件一开始就不成立,那么循环体中的语句永远不会被执行

var num = 10;
while (num < 10){
    alert(num); // 什么都不弹
    num++;
}

while循坏注意点

死循环

条件表达式永远为真, 循坏永远无法结束,我们称之为死循环

 while (true){
        alert("itlike.com");
    }

任何值都有真假性

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

 while (1){ // 先把1转换为Boolean, 然后再判断真假
        alert("itlike.com");
    }

while 后如果只有一条语句它可以省略大括号

如果省略大括号, while只会管制紧跟其后的那条语句

while (0)
   alert("会执行我么?"); // 不会执行
alert("itlike.com");

分号问题

分号(;)也是一条语句, 代表空语句

 while (0);
  {
      alert("123"); // 会被执行, 因为while管制的是分号(;)
  }

最简单的死循环

开发中慎用死循环, 会导致程序阻塞

 while (1);

break关键字

作用

跳出Switch语句

var num = 1;
switch(num){
    case 1:
        console.log("壹");// 输出壹
        break; // 跳出switch语句, 后面代码不会执行
    case 2:
        console.log("贰");
        break;
    default:
        console.log("非法数字");
        break;
}

跳出循环语句

var num = 0;
while(true){
    console.log(num);
    if(3 == num){
        break; // 当num等于3时跳出循环
    }
    num++
}

注意点

break关键字只能用于循环语句和switch语句, 在其它地方没有意义

break;  // 浏览器会报错
alert("我会输出么?");

if(true){
    break; // 浏览器会报错
    alert("我会输出么?");
}

在多层循环中,一个break语句只向外跳一层

while (1){
    while (2){
        console.log("我是while2"); // 会被输出多次
        break; // 跳出while2,但是不会跳出while1
    }
    console.log("我是while1");
}

break后面的语句永远不会被执行

while (1){
    break;
    alert("会弹出来么?"); // 不会弹出
}

continue关键字

作用

跳过当前循环体中剩余的语句而继续下一次

var num = 0;
  while (num < 10){
      num++;
      if(num % 2 == 0){
          continue;
      }
      console.log(num); // 1, 3, 5, 7, 9
  }

注意点

只能用于循环结构, 在其它地方没有意义

continue后面的语句永远不会被执行

while (1){
    continue;
    alert("会弹出来么?"); // 不会弹出
}

5. do-while循环

格式

 do {
     语句1;
     语句2;
     ....
 } while ( 条件 );

执行流程

首先会执行一次循环体中的语句

接着判断while中的条件表达式是否为真，如果为真再次执行循环体中的语句

重复上述过程，直到条件不成立就结束while循环

var num = 20;
  do{
      console.log(num); // 输出一次10
  }while (num < 10);

特点

不管while中的条件是否成立，循环体中的语句至少会被执行一遍

应用场景

口令校验

6. for循环

JavaScript中的for语句使用最为灵活,不仅可以用于循环次数已经确定的情况,而且可以用于循环次数不确定而只给出循环结束条件的情况,它完全可以代替while语句。

格式

for(①初始化表达式；②循环条件表达式；④循环后操作表达式)
{
    ③执行语句；
}

for循环执行流程

for循环开始时，会先执行初始化表达式，而且在整个循环过程中只执行一次初始化表达式

接着判断循环条件表达式是否为真，如果条件为真，就会执行循环体中的语句

循环体执行完毕后，接下来会执行循环后的操作表达式

执行完循环后操作表达式, 然后再次判断循环条件表达式是否为真，如果条件为真，就会执行循环体中的语句

重复上述过程，直到条件不成立就结束for循环

for(var i = 0; i < 10; i++){
    alert(i); // 输出0-9
}

for循环和while循环如何选择?

一般情况下while和for可以互换, 但是如果循环执行完毕之后就不需要使用用于控制循环的增量, 那么用for更好

注意点

for循环中初始化表达式,循环条件表达式,循环后操作表达式都可以不写

循环条件表达式默认为真

for(; ;) 语句相当于while(1), 都是死循环

其它注意点和while一样

内容总结

以上是互联网集市为您收集整理的Web全栈-JavaScript-笔记2全部内容，希望文章能够帮你解决Web全栈-JavaScript-笔记2所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端