从零开始学习JavaScript：轻松掌握编程语言的核心技能③-Toy模板网

这篇具有很好参考价值的文章主要介绍了从零开始学习JavaScript：轻松掌握编程语言的核心技能③。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

🏘️🏘️个人简介：以山河作礼。
🎖️🎖️:Python领域新星创作者，CSDN实力新星认证，阿里云社区专家博主
🎁🎁:Web全栈开发专栏：《Web全栈开发》免费专栏，欢迎阅读！

从零开始学习JavaScript：轻松掌握编程语言的核心技能③

一，JavaScript条件语句

1.1 if…Else 语句

📑📑JavaScript中的if…else语句是一种条件语句，用于在满足特定条件时执行不同的代码块。
📌if语句的语法如下：

if (condition) {
  // 如果条件为真，执行这里的代码块
}

如果条件为真，代码块中的语句将被执行。如果条件为假，则代码块将被跳过。
在if语句中，可以使用else关键字来指定一个代码块，该代码块将在条件为假时执行。

📌if…else语句的语法如下：

if (condition) {
  // 如果条件为真，执行这里的代码块
} else {
  // 如果条件为假，执行这里的代码块
}

在这种情况下，如果条件为真，则执行if代码块中的语句，否则执行else代码块中的语句。

📌还可以使用else if语句来指定多个条件。语法如下：

if (condition1) {
  // 如果条件1为真，执行这里的代码块
} else if (condition2) {
  // 如果条件2为真，执行这里的代码块
} else {
  // 如果条件1和条件2都为假，执行这里的代码块
}

在这种情况下，如果条件1为真，则执行if代码块中的语句。如果条件1为假且条件2为真，则执行else
if代码块中的语句。如果所有条件都为假，则执行else代码块中的语句。

1.2 if…else if…else 语句

📑📑if…else if…else语句是一种多重条件语句，用于在满足不同条件时执行不同的代码块。它的语法如下：

if (condition1) {
  // 如果条件1为真，执行这里的代码块
} else if (condition2) {
  // 如果条件2为真，执行这里的代码块
} else {
  // 如果所有条件都为假，执行这里的代码块
}

如果条件1为真，那么if代码块中的语句将被执行；如果条件1为假且条件2为真，那么else
if代码块中的语句将被执行；如果所有条件都为假，那么else代码块中的语句将被执行。

📌可以使用多个else if语句来指定多个条件。例如：

if (condition1) {
  // 如果条件1为真，执行这里的代码块
} else if (condition2) {
  // 如果条件2为真，执行这里的代码块
} else if (condition3) {
  // 如果条件3为真，执行这里的代码块
} else {
  // 如果所有条件都为假，执行这里的代码块
}

如果条件1为真，那么if代码块中的语句将被执行；如果条件1为假且条件2为真，那么else
if代码块中的语句将被执行；如果条件1和条件2都为假且条件3为真，那么第二个else
if代码块中的语句将被执行；如果所有条件都为假，那么else代码块中的语句将被执行。

if…else if…else语句中的条件是按顺序执行的。也就是说，只要某个条件为真，那么它后面的所有条件都不会被执行。因此，在使用if…else if…else语句时，应该根据实际情况，将最有可能成立的条件放在前面。

1.3 switch 语句

📑📑JavaScript中的switch语句是一种多重条件语句，用于在满足不同条件时执行不同的代码块。
它的语法如下：

switch (expression) {
  case value1:
    // 如果 expression 的值等于 value1，执行这里的代码块
    break;
  case value2:
    // 如果 expression 的值等于 value2，执行这里的代码块
    break;
  ...
  default:
    // 如果 expression 的值都不等于前面的值，执行这里的代码块
    break;
}

在这个语法中，expression是一个表达式，通常是一个变量或一个函数的返回值。每个case语句后面跟着一个值，如果expression的值等于这个值，那么对应的代码块将被执行。如果没有一个case语句的值与expression的值相等，那么执行default语句块。
需要注意的是，每个case语句后面必须加上break关键字，否则程序会继续执行下一个case语句的代码块。如果省略break关键字，会导致程序执行出现错误。
下面是一个使用switch语句的例子：

var fruit = "apple";
switch (fruit) {
  case "banana":
    console.log("这是香蕉");
    break;
  case "apple":
    console.log("这是苹果");
    break;
  case "orange":
    console.log("这是橙子");
    break;
  default:
    console.log("这不是香蕉、苹果或橙子");
    break;
}

在这个例子中，expression的值是变量fruit的值，根据不同的值，执行对应的代码块。如果fruit的值是"apple"，那么执行第二个case语句中的代码块，输出"这是苹果"。

1.4 for 循环

📑📑JavaScript中的for循环是一种重复执行代码块的语句，用于循环遍历数组或执行指定次数的操作。

它的语法如下：

for (initialization; condition; increment) {
  // 在这里执行循环体代码块
}

在这个语法中，initialization是一个表达式，用于初始化循环计数器。condition是一个表达式，用于指定循环的终止条件。increment是一个表达式，用于在每次循环迭代之后更新循环计数器。

📌for循环的执行过程如下：

执行initialization表达式，初始化循环计数器。
检查condition表达式的值，如果为true，则执行循环体代码块。
执行increment表达式，更新循环计数器。
重复第2步和第3步，直到condition表达式的值为false。

📌下面是一个使用for循环的例子：

for (var i = 0; i < 5; i++) {
  console.log(i);
}

在这个例子中，循环计数器i的初始值为0，循环的终止条件是i小于5，每次循环后i的值会自增1。因此，这个for循环会输出0、1、2、3、4。
需要注意的是，循环计数器的初始值、循环的终止条件和每次循环后的更新操作都可以是任何有效的JavaScript表达式。例如，循环计数器的初始值可以是一个函数的返回值，循环的终止条件可以是一个变量的值，每次循环后的更新操作可以是一个复杂的表达式。

1.5 while 循环

📑📑JavaScript中的while循环是一种重复执行代码块的语句，与for循环不同，它不需要指定循环计数器。

它的语法如下：

while (condition) {
  // 在这里执行循环体代码块
}

在这个语法中，condition是一个表达式，用于指定循环的终止条件。

📌while循环的执行过程如下：

检查condition表达式的值，如果为true，则执行循环体代码块。
重复第1步，直到condition表达式的值为false。

📌下面是一个使用while循环的例子：

var i = 0;
while (i < 5) {
  console.log(i);
  i++;
}

在这个例子中，循环的终止条件是i小于5，每次循环后i的值会自增1。因此，这个while循环会输出0、1、2、3、4。
需要注意的是，如果循环的终止条件始终为true，那么这个循环将永远不会结束，这种情况被称为“死循环”，应该避免出现。

二，JavaScript break 和 continue 语句

📑📑JavaScript中的break和continue语句是控制循环执行的语句。

2.1 break语句

break语句用于立即终止循环，并跳出循环体。
它的语法如下：

break;

📌在for循环和while循环中，break语句通常与if语句结合使用，用于在满足特定条件时终止循环。
例如：

for (var i = 0; i < 10; i++) {
  if (i === 5) {
    break;
  }
  console.log(i);
}

在这个例子中，当i等于5时，break语句会立即终止循环，并跳出循环体。

2.2 continue语句

📌continue语句用于跳过当前循环迭代，直接进入下一次迭代。
它的语法如下：

continue;

📌在for循环和while循环中，continue语句通常与if语句结合使用，用于在满足特定条件时跳过当前循环迭代。
例如：

for (var i = 0; i < 10; i++) {
  if (i === 5) {
    continue;
  }
  console.log(i);
}

在这个例子中，当i等于5时，continue语句会跳过当前循环迭代，直接进入下一次迭代。

三，JavaScript typeof, null, 和 undefined

3.1 typeof运算符

📑📑typeof运算符用于返回操作数的数据类型，它的语法如下：

typeof operand

其中operand是一个JavaScript表达式。typeof运算符返回一个字符串，表示operand的数据类型。

📌常见的数据类型有：

“undefined” - 表示未定义的值。
“boolean” - 表示布尔值。
“number” - 表示数字。
“string” - 表示字符串。
“object” - 表示对象或null。
“function” - 表示函数。

3.2 null值

📑📑null是一个表示空值的JavaScript关键字。它表示一个空对象指针，表示不存在任何对象。
例如：

var obj = null;

在这个例子中，变量obj被赋值为null，表示该变量不指向任何对象。

3.3 undefined值

📌undefined是一个表示未定义值的JavaScript全局变量。它表示一个未初始化的变量或属性，或者函数没有返回值。
例如：
var x;
console.log(typeof x); // 输出 “undefined”

在这个例子中，变量x未被初始化，因此它的值为undefined。

四，JavaScript 类型转换

📑📑JavaScript中有两种类型转换：隐式类型转换和显式类型转换。

4.1 隐式类型转换

📌隐式类型转换是指在运行时自动进行的类型转换，通常发生在不同类型之间的操作或比较时。
例如：

// 字符串和数字相加，会将数字转换为字符串
var result = "3" + 4; // result 的值为 "34"

// 布尔值和数字相加，会将布尔值转换为数字
var result = true + 4; // result 的值为 5

// 字符串和布尔值相加，会将布尔值转换为字符串
var result = "hello" + false; // result 的值为 "hellofalse"

在这些例子中，JavaScript会自动将不同类型的值转换为相应的类型，以便进行操作或比较。

4.2 显式类型转换

📌显式类型转换是指通过一些内置函数或语句，将一个类型转换为另一个类型。
常见的显式类型转换函数有：

Number() - 将一个值转换为数字。
String() - 将一个值转换为字符串。
Boolean() - 将一个值转换为布尔值。

例如：

// 将字符串转换为数字
var num = Number("123");

// 将数字转换为字符串
var str = String(123);

// 将值转换JavaScript中的类型转换是指将一个数据类型转换为另一个数据类型。

📌以下是一些常见的类型转换：

字符串转换：使用String()函数或者将变量用双引号包裹起来即可将其转换为字符串类型。
数字转换：使用Number()函数或者使用+号将字符串转换为数字类型。
布尔转换：使用Boolean()函数或者使用双叹号!!将值转换为布尔类型。
对象转换：使用Object()函数可以将基本类型转换为对象类型。
数组转换：使用Array()函数可以将其他类型的数据转换为数组类型。

五，JavaScript 正则表达式

📑📑正则表达式是一种用来匹配字符串的模式，通过使用特定的语法规则，可以匹配字符串中的特定字符、单词或模式。

创建正则表达式

在JavaScript中，可以使用RegExp对象来创建正则表达式。
正则表达式的语法由两个斜杠之间的字符组成，例如：

// 匹配字符串中的所有数字
var pattern = /\d/g;

在这个例子中，正则表达式/\d/g用来匹配字符串中的所有数字。其中/是正则表达式的开始和结束符号，\d表示匹配任意一个数字，g表示全局匹配。

正则表达式方法

📌在JavaScript中，可以使用正则表达式的方法来进行匹配、替换和搜索等操作。

常见的正则表达式方法有：

test() - 测试一个字符串是否匹配正则表达式。
exec() - 在一个字符串中执行正则表达式匹配，并返回匹配结果。
match() - 在一个字符串中查找匹配正则表达式的子串，并返回一个数组。
replace() - 在一个字符串中查找匹配正则表达式的子串，并用新的字符串替换它们。
search() - 在一个字符串中查找匹配正则表达式的子串，并返回它的位置。

例如：

// 匹配字符串中的所有数字
var pattern = /\d/g;
var str = "abc123def456";

// 使用test()方法测试字符串是否匹配正则表达式
var result = pattern.test(str); // 返回 true
// 使用exec()方法执行正则表达式匹配
var match = pattern.exec(str); // 返回 ["1"]
// 使用match()方法查找匹配正则表达式的子串
var matches = str.match(pattern); // 返回 ["1", "2", "3",JavaScript 的正则表达式是一种强大的工具，用于在字符串中搜索和替换文本。它们由一个模式和一些可选标志组成，模式由一些字符和元字符组成，用于描述要匹配的文本。

📌下面是一些常用的元字符：

.：匹配除了换行符以外的任意字符。
^：匹配字符串的开头。
$：匹配字符串的结尾。
*：匹配前面的字符或子表达式零次或多次。
+：匹配前面的字符或子表达式一次或多次。
?：匹配前面的字符或子表达式零次或一次。
[]：匹配中括号内的任意一个字符。
()：标记一个子表达式的开始和结束位置。
|：指明两项之间的一个选择。

📌下面是一些常用的正则表达式示例：

/hello/：匹配字符串中的 "hello"。
/[aeiou]/：匹配字符串中的任何一个元音字母。
/^\d/：匹配字符串中的开头是数字的字符串。
/\.com$/：匹配以 ".com" 结尾的字符串。
/a+/：匹配一个或多个 "a"。
/a{2,4}/：匹配两个到四个 "a"。
/(\d{3})-(\d{4})/：匹配电话号码格式，如 "123-4567"。