Create 第三天_布尔值_运算符_日期.md

3 years ago · 1060e404a2
parent 47d55b9d5b
commit 1060e404a2
1 changed files with 631 additions and 0 deletions
--- a/中文_Chinese/第三天_布尔值_运算符_日期/第三天_布尔值_运算符_日期.md
+++ b/中文_Chinese/第三天_布尔值_运算符_日期/第三天_布尔值_运算符_日期.md
@ -0,0 +1,631 @@
+<div align="center">
+  <h1> 30天入门JavaScript：布尔值、运算符、日期</h1>
+  <a class="header-badge" target="_blank" href="https://www.linkedin.com/in/asabeneh/">
+  <img src="https://img.shields.io/badge/style--5eba00.svg?label=LinkedIn&logo=linkedin&style=social">
+  </a>
+  <a class="header-badge" target="_blank" href="https://twitter.com/Asabeneh">
+  <img alt="Twitter Follow" src="https://img.shields.io/twitter/follow/asabeneh?style=social">
+  </a>
+
+  <sub>作者:
+  <a href="https://www.linkedin.com/in/asabeneh/" target="_blank">Asabeneh Yetayeh</a><br>
+  <small> 1月, 2020</small>
+  </sub>
+</div>
+
+[<< Day 2](../第二天_数据类型/第二天_数据类型.md) | [Day 4 >>](../04_Day_Conditionals/04_day_conditionals.md)
+
+![Thirty Days Of JavaScript](/images/banners/day_1_3.png)
+
+- [📔 第三天](#-第三天)
+  - [布尔值](#布尔值)
+    - [程序识别为true的值](#程序识别为true的值)
+    - [程序识别为False的值](#程序识别为false的值)
+  - [未定义值](#未定义值)
+  - [Null](#null)
+  - [运算符](#运算符)
+    - [赋值运算符（=）](#赋值运算符)
+    - [算术运算符](#算术运算符)
+    - [比较操作符](#比较操作符)
+    - [逻辑运算符](#逻辑运算符)
+    - [增值运算符](#增值运算符)
+    - [减值运算符](#减值运算符)
+    - [条件运算符](#条件运算符)
+    - [运算符优先次序](#运算符优先次序)
+  - [视窗函数（Window Method）](#视窗函数window-method)
+    - [视窗 alert() 函数](#视窗-alert-函数)
+    - [视窗 prompt() 函数](#视窗-prompt-函数)
+    - [视窗 confirm() 函数](#视窗-confirm-函数)
+  - [日期对象](#日期对象)
+    - [建立 time 对象](#建立-time-对象)
+    - [获取完整的年份](#获取完整的年份)
+    - [获取月份](#获取月份)
+    - [获取日期](#获取日期)
+    - [获取星期日期](#获取星期日期)
+    - [获取小时数](#获取小时数)
+    - [获取分钟数](#获取分钟数)
+    - [获取秒数](#获取秒数)
+    - [获取时间](#获取时间)
+  - [💻 第三天：作业](#-第三天作业)
+    - [作业：难度水平 1](#作业难度水平-1)
+    - [作业：难度水平 2](#作业难度水平-2)
+    - [作业：难度水平 3](#作业难度水平-3)
+
+# 📔 第三天
+
+## 布尔值
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 布尔数据类型只有两个值：_true_ 和 _false_。这种数据类型最常运用于比较中。所有比较都会返回布尔值，即 true 或 false。
+
+**例：布尔值**
+
+```js
+let isLightOn = true
+let isRaining = false
+let isHungry = false
+let isMarried = true
+let truValue = 4 > 3    // true
+let falseValue = 4 < 3  // false
+```
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 再次强调，布尔数据类型只有两个值：true 和 false。
+
+### 程序识别为true的值
+
+- 所有数字（正或负）都是true，除了0；
+- 所有字符串都是true，除了空字符串‘’；
+- 布尔值true。
+
+### 程序识别为False的值
+
+- 0
+- 0n（BigInt 型变量）
+- 空值（null）
+- 未定义值（undefined）
+- 非数字（NaN）
+- 布尔值False
+- '', "", ``, 空白字符
+
+熟记这些程序识别为true或false的值很有用，在之后的章节中我们会在条件结构中利用这个性质做决策。
+
+## 未定义值
+
+如果我们声明一个变量但不赋值，那么这个变量的类型就是未定义值。另外，如果一个函数没有返回任何值（即没有 return 语句），那么这个函数的返回值默认是未定义值。（注意：函数本身是function类型）
+
+```js
+let firstName
+console.log(firstName) //未定义值，因为还未赋值
+```
+
+## Null
+
+```js
+let empty = null
+console.log(empty) // -> 空值，表示一片虚无
+```
+
+## 运算符
+
+### 赋值运算符（=）
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 等号就是赋值运算符，用来给变量赋值。
+
+```js
+let firstName = 'Asabeneh'
+let country = 'Finland'
+```
+
+赋值运算符列表
+
+![Assignment operators](/images/assignment_operators.png)
+
+### 算术运算符
+
+算术运算符用于数学计算
+
+- 加(+): a + b
+- 减(-): a - b
+- 乘(*): a * b
+- 除(/): a / b
+- 求余(%): a % b
+- 指数(**): a ** b
+
+```js
+let numOne = 4
+let numTwo = 3
+let sum = numOne + numTwo
+let diff = numOne - numTwo
+let mult = numOne * numTwo
+let div = numOne / numTwo
+let remainder = numOne % numTwo
+let powerOf = numOne ** numTwo
+
+console.log(sum, diff, mult, div, remainder, powerOf) // 7,1,12,1.33,1, 64
+
+```
+
+```js
+const PI = 3.14
+let radius = 100          // 半径
+
+//计算圆的周长
+const areaOfCircle = PI * radius * radius
+console.log(areaOfCircle)  //  314 m
+
+
+const gravity = 9.81      // in m/s2
+let mass = 72             // in Kilogram
+
+// 计算物体质量
+const weight = mass * gravity
+console.log(weight)        // 706.32 N(Newton)
+
+const boilingPoint = 100  // 常温下水的沸点（摄氏度）
+const bodyTemp = 37       // 常温下体温（摄氏度）
+
+
+// 用字符串模版编辑字符串
+/*
+ The boiling point of water is 100 oC.
+ Human body temperature is 37 oC.
+ The gravity of earth is 9.81 m/s2.
+ */
+console.log(
+  `The boiling point of water is ${boilingPoint} oC.\nHuman body temperature is ${bodyTemp} oC.\nThe gravity of earth is ${gravity} m / s2.`
+)
+```
+
+### 比较操作符
+
+在程序中我们经常需要比较两个值的大小，这需要用到比较操作符。
+
+![Comparison Operators](/images/comparison_operators.png)
+**例：比较操作符**
+
+```js
+console.log(3 > 2)              // true, 因为3大于2
+console.log(3 >= 2)             // true, 因为3大于2
+console.log(3 < 2)              // false,  因为3大于2
+console.log(2 < 3)              // true, 因为2小于3
+console.log(2 <= 3)             // true, 因为2小于3
+console.log(3 == 2)             // false, 因为3大于2
+console.log(3 != 2)             // true, 因为3大于2
+console.log(3 == '3')           // true, 仅比较值
+console.log(3 === '3')          // false, 比较值和数据类型
+console.log(3 !== '3')          // true, 比较值和数据类型
+console.log(3 != 3)             // false, 仅比较值
+console.log(3 !== 3)            // false, 比较值和数据类型
+console.log(0 == false)         // true, 相等
+console.log(0 === false)        // false, 数据类型不同
+console.log(0 == '')            // true, 相同
+console.log(0 == ' ')           // true, 相同
+console.log(0 === '')           // false, 数据类型不同
+console.log(1 == true)          // true, 相同
+console.log(1 === true)         // false, 数据类型不同
+console.log(undefined == null)  // true
+console.log(undefined === null) // false
+console.log(NaN == NaN)         // false, 定义上不等
+console.log(NaN === NaN)        // false
+console.log(typeof NaN)         // number
+
+console.log('mango'.length == 'avocado'.length)  // false
+console.log('mango'.length != 'avocado'.length)  // true
+console.log('mango'.length < 'avocado'.length)   // true
+console.log('milk'.length == 'meat'.length)      // true
+console.log('milk'.length != 'meat'.length)      // false
+console.log('tomato'.length == 'potato'.length)  // true
+console.log('python'.length > 'dragon'.length)   // false
+```
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 理解上面的语句需要一些理解，单纯靠背而不理解背后逻辑的话很难应用。<br>
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; JavaScript 其实是一个有些怪的程序语言，偶尔会给你和你预想不一致的结果。<br>
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 总而言之，如果 == 返回了 false，那么 === 一定会返回 false。用 === 相对来说更加安全（避免一些奇怪的意想不到的错误）。这个[链接](https://dorey.github.io/JavaScript-Equality-Table/) 列出了所有JavaScript的数据类型比较。
+
+### 逻辑运算符
+
+常用逻辑运算符：&&(与) , ||(或) and !(非).
+- &&：仅当两个比较值均是true值时，返回true；
+- ||：当两个比较值有至少一个是true值时，返回true；
+- !：取相反值，即！true = false。
+
+```js
+// && 例子
+
+const check = 4 > 3 && 10 > 5         // true && true -> true
+const check = 4 > 3 && 10 < 5         // true && false -> false
+const check = 4 < 3 && 10 < 5         // false && false -> false
+
+// || 例子
+
+const check = 4 > 3 || 10 > 5         // true  || true -> true
+const check = 4 > 3 || 10 < 5         // true  || false -> true
+const check = 4 < 3 || 10 < 5         // false || false -> false
+
+//! 例子
+
+let check = 4 > 3                     // true
+let check = !(4 > 3)                  //  false
+let isLightOn = true
+let isLightOff = !isLightOn           // false
+let isMarried = !false                // true
+```
+
+### 增值运算符
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;用增值运算符来增加一个变量储存的值，可以理解为运算和赋值的结合。增值运算符分为前增值（Pre-increment）和后增值（Post-increment），具体区别：
+
+1. 前增值
+
+```js
+let count = 0
+console.log(++count)        // 1
+console.log(count)          // 1
+```
+
+2. 后增值
+
+```js
+let count = 0
+console.log(count++)        // 0
+console.log(count)          // 1
+```
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;一般最常用的是后增值，所以至少需要学会使用后增值即可。
+
+### 减值运算符
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;和增值类似，是用来减少变量的存储值，分为前减值（Pre-decrement）和后减值（Post-decrement）。
+
+1. 前减值
+
+```js
+let count = 0
+console.log(--count) // -1
+console.log(count)  // -1
+```
+
+2. 后减值
+
+```js
+let count = 0
+console.log(count--) // 0
+console.log(count)   // -1
+```
+
+### 条件运算符
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 条件运算符用来写一个简易的条件结构，请看下例：
+
+```js
+let isRaining = true
+isRaining
+  ? console.log('You need a rain coat.')
+  : console.log('No need for a rain coat.')
+isRaining = false
+
+isRaining
+  ? console.log('You need a rain coat.')
+  : console.log('No need for a rain coat.')
+```
+
+```sh
+You need a rain coat.
+No need for a rain coat.
+```
+
+```js
+let number = 5
+number > 0
+  ? console.log(`${number} is a positive number`)
+  : console.log(`${number} is a negative number`)
+number = -5
+
+number > 0
+  ? console.log(`${number} is a positive number`)
+  : console.log(`${number} is a negative number`)
+```
+
+```sh
+5 is a positive number
+-5 is a negative number
+```
+
+### 运算符优先次序
+
+我建议在这个[官方文档链接](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence)查看运算符优先次序。
+
+## 视窗函数（Window Method）
+
+### 视窗 alert() 函数
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;在之前的章节中，我们用 alert() 函数制造了一个弹窗，里面包含了一些文字和一个 OK 按钮。这是一个内建函数，作用是在弹窗内显示输入的参数。
+
+```js
+alert(message)
+```
+
+```js
+alert('Welcome to 30DaysOfJavaScript')
+```
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;但建议不要太多使用这个函数，因为弹窗很烦人，建议只在测试缓环节用这个函数。
+
+### 视窗 prompt() 函数
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; prompt 函数会显示一个弹窗包含一个输入框，输入的内容可以保存在变量中。prompt() 函数接受两个变量，其中第二个变量可选择不填。
+
+```js
+prompt('required text', 'optional text')
+```
+
+```js
+let number = prompt('Enter number', 'number goes here')
+console.log(number)
+```
+
+### 视窗 confirm() 函数
+
+confirm() 函数展示一个对话框、一些文字、一个 OK 按钮和一个 Cancel 按钮。确认对话框通常用来向用户获取许可来执行某些操作。confirm() 函数可以接收字符串作为参数。
+点击 OK 按钮将返回 true，点击 cancel 按钮将返回 false。
+
+```js
+const agree = confirm('Are you sure you like to delete? ')
+console.log(agree) // 结果是true或是false取决于你在对话框里的选择
+```
+
+这些只是视窗函数的一部分，我们会在之后的章节更深入学习视窗函数。
+
+## 日期对象
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;时间是很重要的，我们经常需要知道一个行为或事件发生的具体时间。JavaScript通过 Date 对象建立日期和时间变量。Date对象提供了许多函数供我们处理日期和时间。
+用来获取日期或时间信息的函数通常以 _get_ 开头，例如：_getFullYear(), getMonth(), getDate(),
+getDay(), getHours(), getMinutes, getSeconds(), getMilliseconds(), getTime(), getDay()_ 等等。
+
+![Date time Object](/images/date_time_object.png)
+
+### 建立 time 对象
+
+time 对象提供了关于时间的信息。
+
+```js
+const now = new Date()
+console.log(now) // Sat Jan 04 2020 00:56:41 GMT+0200 (Eastern European Standard Time)
+```
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 当我们创建了 time 对象后，我们可以用前面提到的 get 函数获取日期/时间信息。
+
+### 获取完整的年份
+
+获取完整的年份
+
+```js
+const now = new Date()
+console.log(now.getFullYear()) // 2020
+```
+
+### 获取月份
+
+获取月份
+
+```js
+const now = new Date()
+console.log(now.getMonth()) // 0, because the month is January,  month(0-11)
+```
+
+### 获取日期
+
+获取日期
+
+```js
+const now = new Date()
+console.log(now.getDate()) // 4, because the day of the month is 4th,  day(1-31)
+```
+
+### 获取星期日期
+
+获取星期日期
+
+```js
+const now = new Date()
+console.log(now.getDay()) // 6, because the day is Saturday which is the 7th day
+//  Sunday is 0, Monday is 1 and Saturday is 6
+// Getting the weekday as a number (0-6)
+```
+
+### 获取小时数
+
+获取小时数
+
+```js
+const now = new Date()
+console.log(now.getHours()) // 0, because the time is 00:56:41
+```
+
+### 获取分钟数
+
+获取分钟数
+
+```js
+const now = new Date()
+console.log(now.getMinutes()) // 56, because the time is 00:56:41
+```
+
+### 获取秒数
+
+获取秒数
+
+```js
+const now = new Date()
+console.log(now.getSeconds()) // 41, because the time is 00:56:41
+```
+
+### 获取时间
+
+以下两种方法可获取自1970年1月1日（Unix time）到目前时刻的毫秒数。
+
+1. Using _getTime()_
+
+```js
+const now = new Date() //
+console.log(now.getTime()) // 1578092201341, 自1970年1月1日到目前时刻（2020年1月4日 00:56:41）的毫秒数。
+```
+
+2. Using _Date.now()_
+
+```js
+const allSeconds = Date.now() //
+console.log(allSeconds) // 1578092201341, 自1970年1月1日到目前时刻（2020年1月4日 00:56:41）的毫秒数
+
+const timeInSeconds = new Date().getTime()
+console.log(allSeconds == timeInSeconds) // true
+```
+
+让我们来将这些值转换为方便识别的格式。
+**Example:**
+
+```js
+const now = new Date()
+const year = now.getFullYear() // return year
+const month = now.getMonth() + 1 // return month(0 - 11)
+const date = now.getDate() // return date (1 - 31)
+const hours = now.getHours() // return number (0 - 23)
+const minutes = now.getMinutes() // return number (0 -59)
+
+console.log(`${date}/${month}/${year} ${hours}:${minutes}`) // 4/1/2020 0:56
+```
+
+🌕  你有无尽的能量！你刚刚完成了第三天的挑战，距离牛逼侠已经迈出了三大步。现在又到了熟悉的快乐作业时间。
+
+## 💻 第三天：作业
+
+### 作业：难度水平 1
+
+1. 声明变量，命名为 firstName, lastName, country, city, age, isMarried, year 并赋值，用 typeof 运算符检视每一个变量的数据类型；
+2. 检查 '10' 的数据类型是否等于 10；
+3. 检查 parseInt('9.8') 是否等于 10；
+4. 布尔值只有true和false两个取值：
+   1. 写出三个返回true的JavaScript语句；
+   2. 写出三个返回false的JavaScript语句；
+
+5. 在大脑中计算以下表达式的返回值，再用 console.log() 验证：
+   1. 4 > 3
+   2. 4 >= 3
+   3. 4 < 3
+   4. 4 <= 3
+   5. 4 == 4
+   6. 4 === 4
+   7. 4 != 4
+   8. 4 !== 4
+   9. 4 != '4'
+   10. 4 == '4'
+   11. 4 === '4'
+   12. 返回“python”和“jargon”的字符串长度，并编写一个返回false的语句。
+
+6. 在大脑中计算以下表达式的返回值，再用 console.log() 验证：
+   1. 4 > 3 && 10 < 12
+   2. 4 > 3 && 10 > 12
+   3. 4 > 3 || 10 < 12
+   4. 4 > 3 || 10 > 12
+   5. !(4 > 3)
+   6. !(4 < 3)
+   7. !(false)
+   8. !(4 > 3 && 10 < 12)
+   9. !(4 > 3 && 10 > 12)
+   10. !(4 === '4')
+   11. “on” 既不存在于 “dragon” 也不存在于 “python”；
+
+7. 使用Date对象回答以下问题：
+   1. 今天的年份是？
+   2. 今天的月份用数字表示是？
+   3. 今天的日期是？
+   4. 今天的日期用数字表示是？
+   5. 现在是几点？
+   6. 现在是几分？
+   7. 现在距离1970年1月1日过去了多少秒？
+
+### 作业：难度水平 2
+
+1. 编写一段代码：弹出对话框让用户输入三角形的底和高，计算面积并返回。 (面积 = 0.5 x 底 x 高).
+
+   ```sh
+   输入 底: 20
+   输入 高: 10
+   这个三角形的面积是： 100
+   ```
+
+2. 编写一段代码：弹出对话框让用户输入三角形的三条边，计算周长并返回。 (周长 = 边1 + 边2 + 边3)
+
+   ```sh
+   输入 边1: 5
+   输入 边2: 4
+   输入 边3: 3
+   这个三角形的周长是： 12
+   ```
+
+3. 用对话框输入长和宽，计算长方形面积和周长。
+4. 用对话框输入半径，计算圆的面积和周长。（面积 = pi x 半径 x 半径， 周长 = 2 x pi x 半径，pi = 3.14）。
+5. 计算线段 y = 2x -2 的斜率、与x轴的交点，和与y轴的交点。
+6. 斜率计算公式是 m = (y<sub>2</sub>-y<sub>1</sub>)/(x<sub>2</sub>-x<sub>1</sub>). 计算两个点 (2, 2)，(6,10) 之间线段的斜率。
+7. 对比5和6的两个斜率。
+8. 根据方程 (y = x<sup>2</sup> + 6x + 9). 用不同的x计算y的值，并找到使 y = 0 的x值。
+9. 编写一段代码：弹出对话框让用户输入小时和时薪，计算收入：
+
+    ```sh
+    输入 小时数: 40
+    输入 时薪: 28
+    你的每周收入为： 1120
+    ```
+
+10. 如果你的名字的长度大于7个字符，返回“你的名字好长啊～”，否则返回“你的名字好短啊～”。
+11. 对比你的名和姓的长度（拼音），并输出以下：
+
+    ```js
+    let firstName = 'Asabeneh'
+    let lastName = 'Yetayeh'
+    ```
+
+    ```sh
+    你的名儿 Asabeneh 比你的姓儿 Yetayeh 长。
+    ```
+
+12. 声明两个变量 _myAge_ 和 _yourAge_ 按以下赋值，并输出结果：
+
+   ```js
+   let myAge = 250
+   let yourAge = 25
+   ```
+
+   ```sh
+   老子比你大225岁！
+   ```
+
+13. 用对话框获取用户的出身年份，如果用户超过17岁，则允许用户开车，否则提示用户需要等几年。
+
+    ```sh
+
+    输入 出身年份：1995
+    你今年25岁，可以开车了！
+
+    输入 出身年份：2005
+    你才15岁. 还需要再过3年才能开车！
+    ```
+
+14. 编写一段代码：弹出对话框让用户输入年数，转换成秒数。比如，假设某人活了100岁，输出以下：
+
+   ```sh
+   输入 你活了多少岁：100
+   你已经度过了 3153600000 秒
+   ```
+
+15. 用以下格式显示当前日期：
+   1. YYYY-MM-DD HH:mm
+   2. DD-MM-YYYY HH:mm
+   3. DD/MM/YYYY HH:mm
+
+### 作业：难度水平 3
+
+1. 用 Date time对象创建一个可读的时间格式，其中小时数和分钟数必须占两位（例如7小时5分钟显示07:05）
+   1. YYY-MM-DD HH:mm eg. 20120-01-02 07:05
+
+[<< Day 2](../第二天_数据类型/第二天_数据类型.md) | [Day 4 >>](../04_Day_Conditionals/04_day_conditionals.md)