百度前端技术学园

# “如果”可以“重来”

# 课程目标

  • 掌握 JavaScrip 隐式转换 场景和常见假值类别
  • 学习 JavaScript 流程控制基础知识，重点掌握选择结构和循环结构

# 隐式转换和假值

在学习条件判断和循环语句之前，我们先了解布尔隐式转换是如何发生的。比如如下代码：

const condition1 = "Sam";
const condition2 = 0;

if (condition1) {
  console.log("第一个添加条件为真");
}

if (condition2) {
  console.log("第二个条件为真");
}

上面的代码只会输出第一个添加条件为真。让我们看看为什么。

当 JavaScript 需要一个布尔值但被赋予一个非布尔值时，就会发生隐式转换。因此 if 语句需要一个布尔值。但是，当您为它提供另一种类型的值时，它会自动将其转换为布尔值。

转换规则为：假值值转换为 false. 其他所有内容都转换为 true.

# JavaScript 中常见假值：

  • false
  • null
  • undefined
  • 0
  • NaN
  • ""

如下为完整假值列表

以上只谈论了布尔隐式转换场景，阅读下面材料学习 JavaScript 更全面隐式转换知识：

# 条件判断

# 阅读

# 编码一

编写程序实现标准体重判断：开发一款软件，根据国际肥胖指标 BMI 指数判断一个人的体型.BMI = 体重/身高的平方。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <label>请输入您的身高:</label><input type="text" >
    <br>
    <label>请输入您的体重:</label><input type="text" >
    <br>
    <button>开始测量您的体型</button>
    <p id="result"></p>
    <script>
        //在这里实现编写您的代码
    </script>
</body>
</html>

需求说明

  • 实现当点击开始测量您的体型按钮时，将用户输入的实际体重和体重计算 BMI 值,然后提示结果在 id 为 reslut 的 p 标签中。
  • 如果 BMI 值低于 18.5 ,体重过轻，就提示您是偏瘦体型，可以适当增肥咯
  • 如果 BMI 值在 18.5-25 之间，属于正常体型，就提示您是标准体型，保持的不错哟
  • 如果 BMI 值在 25-28 之间，就属于有点重，就提示您是微胖体型，可以多吃粗粮，让饮食结构更加健康吧！
  • 如果 BMI 值在 28-32 之间，就属于重了，就提示您是肥胖体型，管住嘴迈开腿开始减肥吧！
  • 如果 BMI 值大于 32，就属于严重超重了，就提示您是肥胖体型，管住嘴迈开腿开始减肥吧！
  • 如果实际体重小于标准体重，并且差值大于 10kg，就提示您是过重体型，已经影响健康了，需要重视自己的饮食管理了

# 编码二

基于上一个任务，利用 switch 语句重写上面的任务

# 编码三

根据用户输入的数据，判断水仙花数（三位数），水仙花数是指一个 n 位数 ( n≥3 )，它的每个位上的数字的 n 次幂之和等于它本身。

<label>请输需要判断的水仙花数(三位数):</label><input type="text" >
<br>
<button>开始判断</button>
<script>
function  numDaffodils(num) {
      // 判断是否为水仙花数
}
</script>

需求说明

  • 当点击开始判断按钮，就执行 numDaffodils 函数判断输入的数字是否为水仙花数.
  • 如果是，就弹出提示框提示是水仙花数，如果不是，就提示不是水仙花数
  • 例如输入 153，153=1 _ 1 _ 1+5 _ 5 _ 5+3 _ 3 _ 3 ,是水仙花数，就提示 153 是水仙花数。
  • 请加入输入判断，必须输入数字，不能输入其他类型。

# 循环语句

# 阅读

# 编码一

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>IFE ECMAScript</title>
</head>
<body>
    <input id="dec-number" type="number" placeholder="输入一个十进制非负整数">
    <button id="trans-btn">转化为二进制</button>
    <p id="result">运算结果</p>
    <script>

function dec2bin(decNumber) {
    // 在这里实现你的转化方法，注意需要判断输入必须为一个非负整数
}

// 实现当点击转化按钮时，将输入的十进制数字转化为二进制，并显示在result的p标签内
// Some coding

    </script>
</body>
</html>

需求说明

  • 实现当点击转化按钮时，将输入的十进制数字转化为二进制，并显示在 result 的 p 标签内

# 编码二

基于上一个任务，继续完成更多需求。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>IFE ECMAScript</title>
</head>
<body>
    <input id="dec-number" type="number" placeholder="输入一个十进制非负整数">
    <input id="bin-bit" type="number" placeholder="输入转化后二进制数字位数">
    <button id="trans-btn">转化为二进制</button>
    <p id="result">运算结果</p>
    <script>

function dec2bin(decNumber) {
    // 在这里实现你的转化方法，注意需要判断输入必须为一个非负整数
    // 这里是上一个任务的实现
}

// 实现当点击转化按钮时，将输入的十进制数字转化为二进制，并显示在result的p标签内
// 新的需求是，转化显示后的二进制数为bin-bit中输入的数字宽度，例如
// dec-number为5，bin-bit为5，则转化后数字为00101
// 如果bin-bit小于转化后的二进制本身位数，则使用原本的位数，如dec-number为5，bin-bit为2，依然输出101，但同时在console中报个错
// Some coding

    </script>
</body>
</html>

需求说明

  • 新的需求是，转化显示后的二进制数为 bin-bit 中输入的数字宽度，例如
  • dec-number 为 5 ，bin-bit 为 5 ，则转化后数字为 00101
  • 如果 bin-bit 小于转化后的二进制本身位数，则使用原本的位数，如 dec-number 为 5 ，bin-bit 为 2 ，依然输出 101 ，但同时在 console 中报个错。

# 编码三

3 的小游戏，练习使用循环和条件语句，实现如下需求：

  • 从 1 到 100 ，以此在 console 输出各数字，但是，当数字为 3 的倍数或者含有 3 的时候，输出“PA”
  • 比如：1,2,PA,4,5,PA,……,11,PA,PA,14,PA……

# 编码四

小练习，练习使用循环实现一个九九乘法表

  • 第一步，最低要求：在 Console 中按行输出 n * m = t
  • 然后，尝试在网页中，使用 table 来实现一个九九乘法表

# 编码五

今天最后一个练习，在你的简历中，实现一个，当用户访问页面的时候，根据当前时间，在页面中输出不同的问候语。

比如早上的时候，输出早上好，晚上的时候是晚上好。

# 提交

把你今天觉得做得最好的代码放在 Github 后进行提交。

# 总结

依然把今天的学习用时，收获，问题进行记录。

以上的练习，你应该能够掌握 JavaScript 基本的语法，如果有余力，你不妨去 LeetCode 使用 JavaScript 来做更多的练习。

# 预告

下一节我们将学习 JavaScript 中 字符串 的相关知识。

← 操作字符串对象 →