【前端开发】一文带你快速入门JavaScript（下）Web 前端必备程序语言 | 条件语句与循环结构

Java资料网推荐【前端开发】一文带你快速入门JavaScript（下）Web 前端必备程序语言 | 条件语句与循环结构这篇文章给大家，欢迎收藏Java资料网享受知识的乐趣

💯 欢迎光临清流君的博客小天地，这里是我分享技术与心得的温馨角落 💯

🔥 个人主页:【清流君】🔥 📚 系列专栏: 运动控制 | 决策规划 | 机器人数值优化 📚 🌟始终保持好奇心，探索未知可能性🌟

引言

  本篇博客是快速入门 JavaScript 的极简教程，旨在让非科班、对前端开发感兴趣的同学快速入手，本文将深入探讨 JavaScript 中的 if 条件语句、三目运算符以及 switch 语句，帮助读者理解它们的使用场景和实际应用。同时还将介绍 for 和 while 循环的基本结构及其在遍历数组时的有效应用。

---

一、if 条件语句

  先来了解一下 if 条件语句。

1.1 基本 if 语句

  首先声明 $x$ 常量，写 if 去检查一下 $x$ 是否等于 $10$ ，现在使用三等号来检验 $x$ 是否等于 $10$ 。如果条件为真，就打印 $x$ 是 $10$ 。

const x = 10;
if (x === 10) {
    console.log('x is 10');
}

运行，得到了 $x$ 是 $10$ 。

1.2 双等号与三等号的区别

如果把三等号改成双等号，它就不再考虑数据的类型了。

如果把 $x$ 从数 $10$ 改为字符串 $10$ ：

const x = "10";
if (x == 10) {
    console.log("x is 10");
}

还会得到打印的结果。

但如果再改回三等号，可以看到就不再得到打印的结果，因为字符串和数不是类型的，所以改回数时，就又得到了打印结果。

  不同的程序员也许会有不同的使用习惯，但有很多人喜欢使用三等号来保证数据类型也是相同的。

1.3 if-else 语句

  再来了解一下 else ， else 会在 if 条件是假时被执行，所以再打印 $x$ 不是 $10$ ，将 $x$ 改为 $20$ ：

const x = 20;
if (x === 10) {
    console.log("x is 10");
} else {
    console.log("x is not 10");
}

于是就得到了 $x$ 不是 $10$ 。

1.4 else-if 语句

  如果还希望有其他的条件区块，就可以添加 else - if 条件语句，写 else - if $x$ 是否大于 $10$ ，打印 $x$ 是大于 $10$ 的，根据比较区间，于是将 else 中的打印语句改为 $x$ 是小于 $10$ 的，将 $x$ 改为 $4$ 。

const x = 4;
if (x === 10) {
    console.log("x is 10");
} else if (x > 10) {
    console.log("x is grater than 10")
} else {
    console.log("x is less than 10");
}

是得到了 $x$ 小于 $10$ 。

1.5 逻辑运算符的使用

  再来声明常量 $y$ 赋值为 $10$ ，写 if $x$ 大于 $5$ 或这里使用双竖线表示或 $y$ 大于 $10$ ，删掉后面的区块，写 $x$ 是大于 $5$ 的，且 $y$ 是大于 $10$ 的。

const x = 4;
const y = 10;
if (x > 5 || y > 10) {
    console.log("x is grater than 5 or y is grater than 10");
}

现在什么也没有得到，但如果将 $y$ 改成 $11$ const y = 11;就得到了打印结果。

如果使用且关系使用两个与符号，这时候又什么都得不到了。

if (x > 5 && y > 10)

因为且关系必须要两边同时是真的时候，整个条件句才能为真。

此时如果再把 $x$ 改为 $6$ ：

const x = 6;
const y = 11;
if (x > 5 && y > 10) {
    console.log("x is grater than 5 and y is grater than 10");
}

现在就得到了打印的结果。

---

二、三目运算符

  下面介绍与条件判断有关的三目运算符。

2.1 基本用法

  首先声明常量 $x$ 并赋值为 $10$ ，声明 color 其实与 $x$ 是否大于 $10$ 有关，所以在等号右面写 $x$ 大于 $10$ ，使用问号来表示条件为真时，希望表达式的返回值，设为红色，使用冒号表示 else ，也就是条件为假时，表达式的值是多少，设为蓝色。

const x = 10;
const color = x > 10 ? "red" : "blue";
console.log(color);

2.2 运行结果

打印一下 color ：

得到了蓝色，因为 $10$ 并不大于 $10$ 。

将 $x$ 改为 $11$ const x = 11; 现在得到了红色，因为 $11$ 大于 $10$ 。

大家记住三目运算符后，就可以在很多地方简化自己的 if else 代码。

---

三、switch 语句

3.1 switch 语句结构

下面来了解一下 switch 语句， switch 语句也是一种条件语句

• switch color ，用 case 匹配 color 的值。
• case red 表示 color 是红色的条件下，要打印颜色是红色的，要写 break
• case blue 表示 color 是蓝色的条件下，要打印颜色是蓝色的，再写 break
• 最后写 default ，表示上面任何 case 都没匹配成功的时候想要匹配的内容，所以打印颜色既不是红色也不是蓝色的。

const x = 11;
const color = x > 10 ? "red" : "blue";
switch (color) {
    case "red":
        console.log("color is red");
        break;
    case "blue":
        console.log("color is blue");
        break;
    default:
        console.log("color is not red or blue");
}

3.2 case 和 break

  break 是非常重要的，如果不写 break ，程序就会执行其匹配到的 case 后面的所有语句，而无视后面的 case 条件，直到遇到 break 或者执行完全部在 switch 中的程序语句后才会停止。

---

四、for 和 while 循环

  下面介绍一下循环语句。

4.1 for 循环的基本结构

  先来了解一下 for 循环，for 后面跟一对小括号。在这里要先声明循环变量，比如 $i$ 并初始化，写一下循环条件，例如 $i$ 小于 $10$ ，当 $i$ 小于 $10$ 的时候，循环就会被执行。最后使用加加的运算符，让 $i$ 每次循环后递增，来保证循环不是死循环。在循环里打印 $i$ ：

for (let i = 0; i < 10; i++){
    console.log(i);
}

运行，得到了从 $0$ 到 $9$ 的结果。

因为 $10$ 不小于 $10$ ，所以 $10$ 没有被输出。

如果希望 $10$ 被打印出来，可以将小于改成小于等于。

可以在循环里做任何事情，比如写模板字符串：

for (let i = 0; i < 10; i++){
    console.log(`For Loop Number: ${i}`);
}

输出这样的结果。

4.2 while 循环的基本结构

  还有 while 循环，它和 for 的区别是要在外部声明循环变量。写 let $i$ ，赋值为 $0$ ，在 while 括号里写循环条件。在花括号里，使用同样的循环语句。有一件事是一定要注意的，就是要在 while 里面改变循环变量，否则它就会变成死循环。要让 $i$ 每次递增 $1$

for (let i = 0; i < 10; i++){
    console.log(`For Loop Number: ${i}`);
}
let i = 0;
while (i < 10) {
    console.log(`While Loop Number: ${i}`);
    i++;
}

执行，得到了相同的结果。

4.3 for 循环遍历数组

  现在使用曾经使用过的对象数组来作为循环的对象，使用 for 循环来做这件事情，将循环条件的 $10$ 改为 todos 的长度，打印 todos 中每对象的 text 属性的值。

const todos =[
    {
        id: 1,
        text: "Take out trash",
        isCompleted: true,
    },
    {
        id: 2,
        text: "Meeting with boss",
        isCompleted: true,
    },
    {
        id: 3,
        text: "Dentist appt",
        isCompleted: false,
    },
];
for (let i = 0; i < todos.length; i++){
    console.log(`${todos[i].text}`);
}

运行，得到了期望的结果。

4.4 for…of 循环

  还可以使用另一种 for 循环的写法，在括号中声明循环变量 todo ，在 todos 中，前面的循环变量可以是任何东西，而后面的 todos 是被循环的数组，此时 todo 就是数组中的每一项，如果把 todo 打印出来，就会得到数组中的每一项。如果希望得到每一项的 text ，只需打印todo.text。

const todos =[
    {
        id: 1,
        text: "Take out trash",
        isCompleted: true,
    },
    {
        id: 2,
        text: "Meeting with boss",
        isCompleted: true,
    },
    {
        id: 3,
        text: "Dentist appt",
        isCompleted: false,
    },
];
for (let todo of todos) {
    console.log(todo.text);
}

如果希望得到每一项的 ID ，只需要打印 todo.id。

---

五、总结

  本篇博客介绍了 JavaScript 中的条件语句和循环语句的基本用法，适合初学者或需要复习基础知识的开发者。首先，通过详细示例讲解了 if 语句、双等号与三等号的区别、 if - else 和 else - if 语句的用法，并演示了逻辑运算符的使用。

  此外，还介绍了三目运算符的简洁表达方式，并详细解释了 switch 语句的结构与用法。接着，深入剖析了 for 和 while 循环的基本结构，展示了如何利用循环遍历数组，最后引入了 for … of 循环。

---

参考资料

  JavaScript快速入门 | WEB前端必备程序语言

---

后记：

🌟 感谢您耐心阅读这篇关于 快速入门JavaScript | 条件语句与循环结构 的技术博客。 📚

🎯 如果您觉得这篇博客对您有所帮助，请不要吝啬您的点赞和评论 📢

🌟您的支持是我继续创作的动力。同时，别忘了收藏本篇博客，以便日后随时查阅。🚀

🚗 让我们一起期待更多的技术分享，共同探索移动机器人的无限可能！💡

🎭感谢您的支持与关注，让我们一起在知识的海洋中砥砺前行 🚀

文章来源:https://blog.csdn.net/weixin_51200029/article/details/143222273
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系邮箱：jacktools123@163.com进行投诉反馈，一经查实，立即删除！