diff --git a/中文_Chinese/第三天_布尔值_运算符_日期/第三天_布尔值_运算符_日期.md b/中文_Chinese/第三天_布尔值_运算符_日期/第三天_布尔值_运算符_日期.md new file mode 100644 index 0000000..0432d11 --- /dev/null +++ b/中文_Chinese/第三天_布尔值_运算符_日期/第三天_布尔值_运算符_日期.md @@ -0,0 +1,631 @@ +
+

30天入门JavaScript：布尔值、运算符、日期

+ + + + + Twitter Follow + + + 作者: + Asabeneh Yetayeh
+ 1月, 2020 + +
+ +[<< 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) + +# 📔 第三天 + +## 布尔值 + +         布尔数据类型只有两个值：_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 +``` + +         再次强调，布尔数据类型只有两个值：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) // -> 空值，表示一片虚无 +``` + +## 运算符 + +### 赋值运算符（=） + +         等号就是赋值运算符，用来给变量赋值。 + +```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 +``` + +         理解上面的语句需要一些理解，单纯靠背而不理解背后逻辑的话很难应用。
+         JavaScript 其实是一个有些怪的程序语言，偶尔会给你和你预想不一致的结果。
+ +         总而言之，如果 == 返回了 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 +``` + +### 增值运算符 + +        用增值运算符来增加一个变量储存的值，可以理解为运算和赋值的结合。增值运算符分为前增值（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 +``` + +        一般最常用的是后增值，所以至少需要学会使用后增值即可。 + +### 减值运算符 + +        和增值类似，是用来减少变量的存储值，分为前减值（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 +``` + +### 条件运算符 + +         条件运算符用来写一个简易的条件结构，请看下例： + +```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() 函数 + +        在之前的章节中，我们用 alert() 函数制造了一个弹窗，里面包含了一些文字和一个 OK 按钮。这是一个内建函数，作用是在弹窗内显示输入的参数。 + +```js +alert(message) +``` + +```js +alert('Welcome to 30DaysOfJavaScript') +``` + +        但建议不要太多使用这个函数，因为弹窗很烦人，建议只在测试缓环节用这个函数。 + +### 视窗 prompt() 函数 + +         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取决于你在对话框里的选择 +``` + +这些只是视窗函数的一部分，我们会在之后的章节更深入学习视窗函数。 + +## 日期对象 + +        时间是很重要的，我们经常需要知道一个行为或事件发生的具体时间。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) +``` + +         当我们创建了 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 = (y2-y1)/(x2-x1). 计算两个点 (2, 2)，(6,10) 之间线段的斜率。 +7. 对比5和6的两个斜率。 +8. 根据方程 (y = x2 + 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)