JavaScript内容回顾第二天

内容回顾

一. 数据类型

1.1. Number

• number 类型代表整数和浮点数。

  var age = 18
  var height = 1.88
  

• 数字****number可以有很多操作，比如，乘法 、除法 **/、加法* +****、减法 - 等等。

  var num = 1 * 2
  var num1 = 10 / 5
  

• 除了常规的数字，还包括所谓的“特殊数值（“special numeric values”）”也属于Number类型（了解）

  • Infinity：代表数学概念中的 无穷大 ∞，也可以表示-Infinity；

  • 比如 1/0 得到的就是无穷大；

  • NaN：NaN 代表一个计算错误，它是一个错误的操作所得到的结果；

  • 比如 字符串和一个数字相乘；

• 在之前我们学习过进制的概念，数字类型也有其他的进制表示方法：

  • 十进制（掌握）、十六进制、二进制、八进制（了解）

• ◼ 数字表示的范围：

  • 最小正数值：Number.MIN_VALUE，这个值为： 5e-324，小于这个的数字会被转化为0

  • 最大正数值：Number.MAX_VALUE，这个值为： 1.7976931348623157e+308

• isNaN

  • 用于判断是否不是一个数字。不是数字返回true，是数字返回false。

1.2. String

• 在开发中我们经常会有一些文本需要表示，这个时候我们会使用字符串String：
  • 比如人的姓名：coderwhy。地址：广州市。简介：认真是一种可怕的力量；
• JavaScript 中的字符串必须被括在引号里，有三种包含字符串的方式。
  • 双引号：“Hello”
  • 单引号：'Hello’
  • 反引号：Hello（ES6之后学习）

var name = "coderwhy"
var address = "广州市"
var descripttion = "了解真相你才能获得真正的自由"

• 前后的引号类型必须一致：
  • 如果在字符串里面本身包括单引号，可以使用双引号；
  • 如果在字符串里面本身包括单引号，可以使用双引号；

var message = "我是 'coderwhy'"

• 转义字符串开发中只有特殊场景才会用到，暂时****掌握 \’\” \t \n四个的用法即可
• ◼ 字符串还有很多细节和操作方法，在后续学习了面向对象后，我们再详细学习
• 这里我们先掌握几个基本的字符串使用操作：
• 操作一：字符串拼接，通过+运算符（后续还会详细讲解）*

var str1 = "孙悟空"
var str2 = "猪八戒"
var newStr = str1 + str2

• 操作二**：获取字符串长度**

conlose.log(newStr.length)

1.3. Boolean

• ◼ Boolean（布尔）类型用于表示真假：

  • 比如是否毕业. 是否有身份证. 是否购买车票. 是否成年人；
  • 比如开发中，我们会判断一个账号是否登录、是否是管理员、是否具备某个权限、是否拥有某个英雄、皮肤等；

• **布尔（英语：**Boolean）是计算机科学中的逻辑数据类型，以发明布尔代数的数学家乔治·布尔为名。

• Boolean 类型仅包含两个值：true 和 false。

1.4. Undefined

• Undefined 类型****只有一个值，就是特殊值 undefined**。**
  • 如果我们声明一个变量，但是没有对其进行初始化时，它默认就是undefined；

 	var message
    console.log(message)  // undefined
    console.log(message === undefined)  // true

• 下面的代码是一样的

• 这里有两个注意事项：

  • 注意一：最好在变量定义的时候进行初始化，而不只是声明一个变量；

  • 注意二：不要显示的将一个变量赋值为undefined

    • 如果变量刚开始什么都没有，我们可以初始化为0、空字符串、null等值；

1.6. Object类型

• Object 类型是一个特殊的类型，我们通常把它称为引用类型或者复杂类型；

  • 其他的数据类型我们通常称之为 “原始类型”，因为它们的值质保函一个单独的内容（字符串、数字或者其他）；

  • Object往往可以表示一组数据，是其他数据的一个集合；

  • 在JavaScript中我们可以使用 花括号{} 的方式来表示一个对象；

• Object是对象的意思，后续我们会专门讲解面向对象的概念等；

• Object相关的内容我们会在后续详细讲解。

var book = {
    name: "JavaScript高级程序设置",
    price: 98
}

1.7. Null类型

• Null 类型同样只有一个值，即特殊值 null。

• null类型通常用来表示一个对象为空，所以通常我们在给一个对象进行初始化时，会赋值为null；

• null和undefined的关系：

  • undefined通常只有在一个变量声明但是未初始化时，它的默认值是undefined才会用到；

  • 并且我们不推荐直接给一个变量赋值为undefined，所以很少主动来使用；

  • null值非常常用，当一个变量准备保存一个对象，但是这个对象不确定时，我们可以先赋值为null；

 // 1.Object类型的基本使用
    // var name = "why"
    // var age = 18
    // var height = 1.88
    var person = {
      name: "why",
      age: 18,
      height: 1.88
    }
    console.log(person)

    // 2.对象类型中某一个属性
    console.log(person.name)

    // 3.Null类型
    // 3.1. 其他类型的初始化
    var age = 0
    var num = 0
    var message = "" // 空字符串
    var isAdmin = false

    // Null存在的意义就是对 对象进行初始化的, 并且在转成Boolean类型时, 会转成false
    var book = null
    console.log(typeof book) // object

• **JavaScript 中有八种基本的数据类型（前七种为基本数据类型，也称为原始类型，而 object 为****复杂数据类型，也称为引用类型）。

  • number 用于任何类型的数字：整数或浮点数。

  • string 用于字符串：一个字符串可以包含 0 个或多个字符，所以没有单独的单字符类型。

  • boolean 用于 true 和 false。

  • undefined 用于未定义的值 —— 只有一个 undefined 值的独立类型。

  • object 用于更复杂的数据结构。

  • null 用于未知的值 —— 只有一个 null 值的独立类型。

• 后续学习的类型：

  • symbol 用于唯一的标识符。

  • bigint 用于任意长度的整数

1.8. String类型转换

其他类型经常需要转换成字符串类型，比如和字符串拼接在一起或者使用字符串中的方法。

• 转换方式一：隐式转换

  • 一个字符串和另一个字符串进行+操作；

    • 如果+运算符左右两边有一个是字符串，那么另一边会自动转换成字符串类型进行拼接；

  • 某些函数的执行也会自动将参数转为字符串类型；

    • 比如console.log函数；

• 转换方式二：显式转换

  • 调用String()函数；

  • 调用toString()方法（后续面向对象再学习）；

  • 方法和函数的区别，我们后续在讲解面向对象时会讲到

1.9. Number类型转换

• 其他类型也可能会转成数字类型。

• 转换方式一：隐式转换

  • 在算数运算中，通常会将其他类型转换成数字类型来进行运算；

    • 比如 “6” / “2”；

    • 但是如果是+运算，并且其中一边有字符串，那么还是按照字符串来连接的；

• 转换方式二：显式转换

  • 我们也可以使用Number()函数来进行显式的转换；

• 其他类型转换数字的规则：

  • undefined转换为Na
  • null转换为0
  • true和false转换为 1 和 0
  • string转换为
    • 去掉首尾空格后的纯数字字符串中含有的数字。如果剩余字符串为空，则转换结果为 0。否则，将会从剩余字符串中“读取”数字。当类型转换出现 error 时返回 NaN。

1.10. Boolean类型转换

• 布尔（boolean）类型转换是最简单的。

• 它发生在逻辑运算中，但是也可以通过调用 Boolean(value) 显式地进行转换。

• 转换规则如下：

  • 直观上为“空”的值（如 0、空字符串、null、undefined 和 NaN）将变为 false。

  • 其他值变成 true。

• 注意：包含 0 的字符串 “0” 是 true

  • 一些编程语言（比如 PHP）视 “0” 为 false。但在 JavaScript 中，非空的字符串总是 true。

二. 常见运算符

2.1. 运算符/运算元

在小学的时候我们就学习了各种运算符，比如****加号 +、乘号 *、减号 - 、除号/

• 几乎所有的编程语言都有各种各样的运算符(也被称之为操作符，operators)

  • 初次接触这些运算符, 你会感觉种类繁多, 难以记忆.

  • 但是并不需要特别担心, 因为很多的运算符我们在以后的开发中, 每天都会使用；

  • 多练习, 不需要刻意去记忆；

  • 而且常见的高级语言运算符都是相似的，学了JavaScript运算符很容易掌握C/C++/OC/Python等语言的运算符；

• 计算机最基本的操作就是****执行运算，执行运算时就需要使用运算符来操作：

  • 比如 console.log(20 + 30); +号就是一个运算符.

  • 比如 console.log(20 * 30); *号也是一个运算符.

• JavaScript按照使用场景的不同将运算符分成了很多种类型：

  • 算术运算符/赋值运算符/关系(比较)运算符/逻辑运算符

• 在正式开始运算之前，我们先学习一下常见的术语：

  • 运算元 —— 运算符应用的对象。

  • 比如说乘法运算 5 * 2，有两个运算元；

  • 左运算元 5 和右运算元 2；

  • 有时候人们也称其为“参数”；

  • 如果一个运算符对应的只有一个运算元，那么它是 一元运算符。

  • 比如说一元负号运算符（unary negation）-，它的作用是对数字进行正负转换；

  • 如果一个运算符拥有两个运算元，那么它是 二元运算符。

    • 比如 2 + 3

◼ 一元运算符通常我们是使用 – 和 +，-号使用的会较多一些；

2.2. 算术运算符

• 算术运算符

• 算术运算符用在数学表达式中, 它的使用方式和数学中也是一直的；

• 算术运算符是对数据进行计算的符号；

• +加法 2 + 3 = 5

• +连接字符串 ‘中’ + ‘国’ = 中国

• -减法 2 - 3 = -1

• *乘法 2 * 3 = 6

• /除法 5 / 2 = 2.5

• %取余数 5 / 2 % 1

  • 取余运算符是 %，尽管它看起来很像百分数，但实际并无关联

  • a % b 的结果是 a 整除 b 的 余数

  • console.log(10 % 3)  // 1
    

  • **幂(es7) 2 * * 3 = 8

  • 求幂运算 a * b 将 a 提升至 a 的 b 次幂。（ES7中的语法，也叫做ES2016）*

    • 在数学中我们将其表示为 a的b次方。

  • console.log(2 ** 3)  // 8
    console.log(2 ** 4)  // 16
    

2.3. 赋值运算符

• 前面我们使用的 = 其实也是一个运算符**，被称之为** 赋值（ assignments ）运算符**。**
• = 是一个运算符，而不是一个有着“魔法”作用的语言结构。

• 语句 x = value 将值 value 写入 x 然后返回 x。

• 链式赋值（Chaining assignments）

	let a, b, c
    a = b = c = 2 + 2
    console.log(a, b, c )  // 4

• 链式赋值从右到左进行计算；

• 首先，对最右边的表达式 2 + 2 求值，然后将其赋给左边的变量：c、b 和 a。

• 最后，所有的变量共享一个值。

• **但是从代码的可读性的角度来说，**不推荐这种写法

• 什么是原地修改呢？

  • 我们经常需要对一个变量做运算，并将新的结果存储在同一个变量中。

• 可以使用运算符 += 和 *= 来缩写这种表示。

运算符 运算规则 范例 结果
= 赋值 a = 5 5
+= 加后赋值 a = 5, a += 2 7
-= 减后赋值 a = 5, a -= 2 3
*= 乘后赋值 a = 5; a *= 2 10
/= 除后赋值 a = 5; a /= 2 2.5
%= 取模 (余数)后赋值 a = 5; a %= 2 1
**= 幂后赋值 a = 5; a **= 2 25

• 所有算术和位运算符都有简短的“修改并赋值”运算符：/= 和 -= 等。

2.4. 自增/自减

• 对一个数进行加一、减一是最常见的数学运算符之一。

• 所以，对此有一些专门的运算符：

  • 自增 ++ 将变量加1；

  • 自减 – 将变量减1；

• 自增/自减只能应用于变量。

  • 将其应用于数值（比如 5++）则会报错。

++和–的位置

• 运算符 ++ 和 – 可以置于变量前，也可以置于变量后。

  • 当运算符置于变量后，被称为“后置形式”（postfix form）：counter++。

  • 当运算符置于变量前，被称为“前置形式”（prefix form）：++counter。

  • 两者都做同一件事：将变量 counter 与 1 相加。

• 他们有什么区别吗？

• 有，但只有当我们使用 ++/-- 的返回值时才能看到区别；

• 如果自增/自减的值不会被使用，那么两者形式没有区别；

• 如果我们想要对变量进行自增操作，并且 需要立刻使用自增后的值，那么我们需要使用前置形式；

• 前置形式返回一个新的值，但后置返回原来的值；

• 优先级

• 运算符放到一起使用时会有一定的优先级：

• 在MDN上给出了所有运算符的优先级（不用去记）

  • https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Operator_Precedence

2.5. 比较运算符

• 我们知道，在数学中有很多用于比较大小的运算符，在JavaScript中也有相似的比较：

• 大于 / 小于：a > b，a < b。

• 大于等于 / 小于等于：a >= b，a <= b。

• 检查两个值的相等：a == b，请注意双等号 == 表示相等性检查，而单等号 a = b 表示赋值。

• 检查两个值不相等：不相等在数学中的符号是 ≠，但在 JavaScript 中写成 a != b。

◼ 比较运算符的结果都是Boolean类型的

运算符 运算规则 范例 结果
== 相等 4 == 3 false
!= 不等于 4 != 3 true
> 小于 4 > 3 true
< 大于 4 < 3 false
>= 小于等于 4 <=3 false
<= 大于等于 4 >= 3 true

和=的区别

• ==: 在类型不相同的情况, 会对运算元进行隐式的转换

  • 大部分情况下, 都是转成数字类型 toNumber()
  • 对象类型相对比较特殊, 一般返回false
  • https://262.ecma-international.org/5.1/#sec-11.9.3

• ===: 先比较类型, 类型不一致, 直接返回false

  • 严格相等

  • 普通的相等性检查 == 存在一个问题，它不能区分出 0 和 false，或者空字符串和 false这类运算：

    • 这是因为在比较不同类型的值时，处于判断符号 == 两侧的值会先被转化为数字；

    • 空字符串和 false 也是如此，转化后它们都为数字 0；

  • 如果我们需要区分 0 和 false，该怎么办？

    • 严格相等运算符 === 在进行比较时不会做任何的类型转换；

    • 换句话说，如果 a 和 b 属于不同的数据类型，那么 a === b 不会做任何的类型转换而立刻返回 false；

  • 同样的，“不相等”符号 != 类似，“严格不相等”表示为 !==。

  • **严格相等的运算符虽然写起来稍微长一些，但是它能够很清楚地显示代码意图，降低你犯错的可能性

三. 分支语句

3.1. 程序的执行顺序和代码块

• 在程序开发中，程序有三种不同的执行方式：

  • 顺序 —— 从上向下，顺序执行代码

  • 分支 —— 根据条件判断，决定执行代码的 分支

  • 循环 —— 让 特定代码 重复 执行

• **代码块是多行执行代码的集合，通过一个花括号{}**放到了一起。

  • 在开发中，一行代码很难完成某一个特定的功能，我们就会将这些代码放到一个代码块中

• 在JavaScript中，我们可以通过流程控制语句来决定如何执行一个代码块：

  • 通常会通过一些关键字来告知js引擎代码要如何被执行；

  • 比如分支语句、循环语句对应的关键字等；

// 一个代码块
    {
      var num1 = 10
      var num2 = 20
      var result = num1 + num2
    }

    // 一个对象
    var info = {
      name: "why",
      age: 18
    }

3.2. 分支语句理解和if语句

• 程序是生活的一种抽象, 只是我们用代码表示了出来

  • 在开发中, 我们经常需要根据一定的条件, 来决定代码的执行方向

  • 如果 条件满足，才能做某件事情

  • 如果 条件不满足，就做另外一件事情

• 分支结构

  • 分支结构的代码就是让我们根据条件来决定代码的执行

  • 分支结构的语句被称为判断结构或者选择结构.

  • 几乎所有的编程语言都有分支结构（C、C++、OC、JavaScript等等）

• JavaScript中常见的分支结构有：

  • if分支结构

  • switch分支结构

• if语句的使用

•   // 案例一: 如果小明考试超过90分, 就可以去游乐场
      // 1.定义一个变量来保存小明的分数
      var score = 99
  
      // 2.如果分数超过90分, 去游乐场
      if (score > 90) {
        console.log("去游乐场玩~")
      }
  
  
      // 案例二: 苹果单价5元/斤, 如果购买的数量超过5斤, 那么立减8元
      // 1.定义一些变量保存数据
      var price = 5
      var weight = 7
      var totalPrice = price * weight
  
      // 2.根据购买的重量, 决定是否 -8
      if (weight > 5) {
        totalPrice -= 8
      }
  
      console.log("总价格:", totalPrice)
  
  
      // 案例三: 播放列表中 currentIndex
      // ["鼓楼", "理想", "阿刁"]
      var currentIndex = 2
  
      // 对currentIndex++完操作之后
      currentIndex++
      if (currentIndex === 3) {
        currentIndex = 0
      }
  

• 补充:

  • 如果只有一行代码, {}可以省略

  • if (条件判断)的隐式转换;

  • // 补充一: 如果if语句对应的代码块, 只有一行代码, 那么{}可以省略
        // 案例二: 苹果单价5元/斤, 如果购买的数量超过5斤, 那么立减8元
        // 定义一些变量保存数据
        var price = 5
        var weight = 7
        var totalPrice = price * weight
    
        // 2.根据购买的重量, 决定是否 -8
        if (weight > 5) totalPrice -= 8
        
        console.log("总价格:", totalPrice)
    
        // 补充二: if (条件判断)
        var num = 123 // true
        if (num) {
          console.log("num判断的代码执行")
        }
    

currentIndex++
if (currentIndex === 3) {
currentIndex = 0
}

* 补充:
* 如果只有一行代码, {}可以省略

* if (条件判断)的隐式转换;

* ```js
  // 补充一: 如果if语句对应的代码块, 只有一行代码, 那么{}可以省略
      // 案例二: 苹果单价5元/斤, 如果购买的数量超过5斤, 那么立减8元
      // 定义一些变量保存数据
      var price = 5
      var weight = 7
      var totalPrice = price * weight
  
      // 2.根据购买的重量, 决定是否 -8
      if (weight > 5) totalPrice -= 8
      
      console.log("总价格:", totalPrice)
  
      // 补充二: if (条件判断)
      var num = 123 // true
      if (num) {
        console.log("num判断的代码执行")
      }
  ```