JavaScript之变量与数据类型 (三)：认识JavaScript变量、变量的定义和规范、数据类型和typeof、常见的数据类型、数据类型的转换

跳转目录🚀

篇章	知识点
JavaScript之邂逅 (一)	认识编程语言及其历史、JS的历史、JS的分类、JS运行引擎、JS应用场景
JavaScript之基本语法 (二)	JS的编写方式、noscript元素的使用、JS的注意事项、JS交互方式、JS语句和分号、JS注释方式
JavaScript之变量与数据类型 (三)	认识JavaScript变量、变量的定义和规范、数据类型和typeof、常见的数据类型、数据类型的转换
JavaScript之常见的运算符 (四)	运算符和运算元、算数运算符、赋值运算符、自增和自减、比较运算符、运算符优先级
JavaScript之分支语句与逻辑运算符 (五)	if分支语句、if分支语句、if…else if…else…语句、三元运算符、逻辑运算符、switch语句
JavaScript之循环语句 (六)	认识循环语句、while 循环、do……while 循环、 for 循环、 break与continue关键字
JavaScript之函数 (七)	认识JavaScript函数、函数的声明和调用、函数的递归调用、局部和全局变量、函数表达式的写法、立即执行函数使用
JavaScript对象 (八)	对象类型的使用、值类型和引用类型、函数的this指向、工厂方法创建对象、构造函数和类、new创建对象
JavaScript之常见内置类 (九)	认识包装类型、数字类型Number、数学类型Math、字符串类型String、数组Array使用详解、Date类型的使用

1. 认识JavaScript变量

1.1 程序中变量的数据

在进行开发中，我们往往不是只使用固定的数据，而是会变换的数据。举几个比较贴近我们生活的例子：

1. 比如购物车商品的数量、价格的计算等等
2. 比如一首歌曲播放的时间、进度条、歌词的展示等等
3. 比如微信聊天中消息条数、时间、语音的长度、头像、名称等等
4. 比如游戏中技能的冷却时间、血量、蓝量、buff时间、金币的数量等等

1.2 变量 变化数据的记录

• 变量：即用于存放数值的容器，这个数值可以数字，字符串，或者其他任意的数据，并且它存放的数值是可以改变的

我们可以把变量想象成一个盒子，盒子里面装着我们的数据，我们需要给盒子进行一个特性的名称。

1. 声明一个变量message，视为一个叫message的空盒子
2. 赋值"Hello!"字符串，就是往里面装东西
3. 再次赋值"World!"字符串，会把原先盒子里的东西替换掉

2. 变量的定义和规范

2.1 变量的定义

• 如何在JavaScript中定义一个变量

  1. 变量的声明：在JavaScript中声明一个变量使用var关键字（variable单词的缩写）（后续学习ES6还有let、const声明方式）
  2. 变量的赋值： 使用= 给变量进行赋值；

• 写法一： 声明变量并赋值

    // 定义一个变量
    // 第一步： 变量的声明（高级js引擎接下来我要定义一个变量）
    // var关键字 variable
    // 第二步: 变量的赋值(使用=赋值即可)
    var currentTime = "16:00"

• 写法二：先声明，后赋值

 // 其他的写法一:
    var currentTime;
    currentTime = "16:02";
    currentTime = "17:00";

• 写法三：同时声明多个变量并赋值，或先声明多个再逐个赋值。

// 其他的写法二: 同时声明多个变量(不推荐, 阅读性比较差)
    // var name, age, height
    // name = "why"
    // age = 18
    // height = 1.88
    var name = "why", age = 18, height = 1.88;

    // 补充:
    // 1.当我们打印变量时, 实际上是在打印变量中保存的值
    // 2.console.log(参数1, 参数2, 参数3...........)
    console.log(name, age, height);

2.2 变量的命名规范

• 变量命名规则
  1. 第一个字符必须是一个字母、下划线（ _ ）或一个美元符号（ $ ）
  2. 其他字符可以是字母、下划线、美元符号或数字
  3. 不能使用关键字和保留字命名
  4. 变量严格区分大小写
• 变量命名规范：
  1. 多个单词使用驼峰标识(小驼峰/大驼峰)
  2. 赋值 = 等号两边都加上空格，建议所有操作符或运算符都这样
  3. 一条语句结束后可以加上分号
  4. 变量应该做到见名知意

   // 1.多个单词, 建议使用驼峰标识(小驼峰)
      // 小驼峰(currentTime)/大驼峰(CurrentTime)
      // 2.推荐=的左右两边加上空格
      var currentTime = "16:18"
      var currentPrice = "¥100"
  

补充：

• 什么是关键字和保留字：已经被JS占用并且拥有明确的含义即作用的单词

  • https://developer.mozilla.org/zh-CN/docs/web/javascript/reference/lexical_grammar#%E5%85%B3%E9%94%AE%E5%AD%97

2.3 变量的注意事项

1. 如果一个变量未声明（declaration）就直接使用，那么会报错

 // 注意事项：如果一个变量未声明就直接使用，那么会直接报错
    var currentAge = age

    // 其中 name在没有定义时是不会报错的
    // 原因： name默认存在与windows.name中是一个空字符串
    console.log(name)

2. 如果一个变量有声明，但是没有赋值，那么默认值是undefined

 // 注意事项2：如果一个变量有声明，但是没有赋值操作
    var info
    console.log(info)

3. 如果没有使用var声明变量也可以，但是不推荐（事实上会被添加到window对象上,用var也是）

// 注意事项3：在JavaScript中也可以不使用var 在全局声明一个变量(不推荐)
    address = "杭州市"
    console.log(address)

3. 数据类型和typeof

3.1 JavaScript的数据类型

• JavaScript被称为 “动态类型”（dynamically typed) 的编程语言：JS的值具有不同的类型，我们将值赋给一个变量后，这个变量的类型就是那个值的类型。
• JavaScript 中有 8 种基本的数据类型（7 种原始类型和 1 种复杂类型）：
  1. Number
  2. String
  3. Boolean
  4. Undefined
  5. Null
  6. Object
  • 以下后续了解
  7. BigInt
  8. Symbol

3.2 typeof 操作符

• typeof操作符的作用： 因为 ECMAScript 的类型系统是松散的，一个变量可能在不同流程下的类型是不一样的，所以需要一种手段来确定任意变量的数据类型。
• typeof操作符的返回字符串（重要）
  • “undefined”：表示值未定义
  • “boolean”：表示值为布尔值
  • “string”：表示值为字符串
  • “number”：表示值为数值
  • “object”：表示值为对象(而不是函数)或 null
  • “function”：表示值为函数
  • symbol”：表示值为符号
    typeof与typeof()的区分：typeof(x)与 typeof x 是相同的含义，typeof是一个操作符，并非是一个函数，()只是将后续的内容当做一个整体而已。

/ 1.typeof基本演练
    var info = "why"
    // info = 18
    // info = {}
    console.log( typeof info )

    // 2.typeof的其他类型
    var age
    console.log(typeof age)

    // 3.null的操作
    var address = null
    console.log(typeof address)


    // 4.()的作用
    // ()表示的是调用函数
    // alert()

    // ()将某一个表达式当做一个真题
    var result = (2 + 3) * 4

    console.log(typeof(info))

4. 常见的数据类型

4.1 Number类型

• Number类型：代表整数和浮点数，并且数字number可以进行加减乘除等操作

// 1.Number类型的基本使用
    var age = 18
    var height = 1.88

• Number类型的特殊数值(special numeric values)
  1. Infinity:代表数学概念中的 无穷大 ∞，也可以表示-Infinity(负无穷)；
  2. NaN(not a number): NaN 代表一个计算错误，它是一个错误的操作所得到的结果；

// 2.特殊的数值
    // Infinity
    var num1 = Infinity
    var num2 = 1 / 0
    console.log(num1, num2)

• 数字的进制写法：十进制除外，其他进制第一个都是0开头
  1. 二进制binary：即以 0b开头
  2. 八进制Octal：即以 0o开头
  3. 十六进制Hexadecimal：即以 0x开头

// 3.进制表示
    var num3 = 100 // 十进制
    // 了解
    var num4 = 0x100 // 十六进制
    var num5 = 0o100 // 八进制
    var num6 = 0b100 // 二进制
    console.log(num4, num5, num6)

• 数字可以表示的范围

  1. 最小正数值Number.MAX_VALUE：值为： 5e-324，小于这个的数字会被转化为0
  2. 最大正数值Number.MIN_VALUE：Number.MAX_VALUE，这个值为： 1.7976931348623157e+308

• 判读是否为number类型方法：

  1. isNaN():用于判断是否不是一个数字。不是数字返回true，是数字返回false

   // NaN: not a number(不是一个数字)
      var result = 3 * "abc"
      console.log(result)
      console.log(isNaN(result))
  

4.2 String类型

• String类型：在开发中我们经常会有一些文本需要表示，这个时候我们会使用字符串String

• String字符串类型的表示方法：

  1. 双引号 "Hello"(推荐)

   // 1.String基本使用
      var name = "coderwhy"
      var address = "广州市"
      var intro = "认真是一种可怕的力量!"
  

  2. 单引号 'Hello'

   // 单引号
      var message1 = 'Hello World'
  

  3. 反引号 `` (ES6)

   // 反引号(ES6新增语法)
      // ${变量/表达式}
      var message3 = `Hello World, ${name}, ${2 + 3}`
  

• 字符串本身的方法与属性：方法有很多，我们先了解有这个东西

var message = "Hello World"
    console.log(message.length)

4.2.1 字符串中的转义字符

• 双引号和单引号搭配使用：有时候我们的文本中也需要有引号，因为单双引号都可以表示字符串，所以我们可以混搭使用，或者选择转义字符

 // 3.转义字符: 字符串本身中包含引号
    var message4 = 'my name is "fsj"'
    var message6 = 'hello "fsj"'
    console.log(message4)

    var message5 = 'my name \\ \'\' is "fsj"'
    console.log(message5)

• 常用的转义字符

4.2.2 字符串的属性和方法

字符串有很多细节和操作方法，我们先掌握几个基本的字符串使用操作

1. 字符串拼接：

 var nickname = "coderwhy"
    var info = "my name is "
    var infoStr = `my name is ${nickname}` // 推荐(babel)
    var infoStr2 = info + nickname
    console.log(infoStr, infoStr2)

2. 获取字符串长度

 // 4.<字符串>本身有的方法和属性
    var message = "Hello World"
    console.log(message.length)

4.3 Boolean类型

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

• Boolean类型：用于表示真与假，进行判断；

  // 1.Boolean基本使用
      var isLogin = false
      var isAdmin = true
  

  • 比如开发中，我们会判断一个账号是否登录、是否是管理员、是否具备某个权限
  • 我们也可以自己制定一种规则来判断真和假

4.4 Undefined类型

• Undefined 类型：只有一个值，就是特殊值 undefined,如果我们声明一个变量，但是没有对其进行初始化时，它默认就是undefined；
• 注意事项：
  1. 最好在变量定义的时候进行初始化，而不只是声明一个变量
  2. 不要显示的将一个变量赋值为undefined,如果我们希望一个变量表示的一个空值，我们可以对应类型地初始化为0、空字符串、null等值；

	var message
	var info = undefined // 不推荐
    console.log(message, info)

4.5 Object类型

• 原始类型：上文列举的都是属于原始类型，它们的值只包含一个单独的内容，String只能保存字符串，Number只能保存数字类型等
• Object类型： 是一个特殊的类型，我们通常把它称为引用类型或者复杂类型。Object往往表示一组数据，是其他数据的一个集合。
• 如何定义一个Object对象 对象的数据的表示形式为 属性名:属性值

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

• 访问对象的属性：对象名.属性名

备注：现在只是了解一下Object的基本操作，后续我们会专门讲解面向对象的概念等

4.6 Null类型

• Null类型：同样只有一个值，即特殊值 null。
• 其他数据类型的初始化

 	var age = 0
    var num = 0
    var message = "" // 空字符串
    var isAdmin = false

    console.log(age)

• null值在给对象初始化的应用：

  • 我们不能直接用花括号{}来给object对象初始化，因为在后续进行if判断布尔boolean值时，会被判断成true。并且同时也会在内存中创建一个真正的对象，分配内存空间。

   var person = {}
      // 在if判断中，布尔值以外的值会被直接转换成布尔值进行判断
      if (person) {
        console.log('判断为true')
      }
  

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

   // Null存在的意义就是对 对象进行初始化的, 并且在转成Boolean类型时, 会转成false
      var person02 = null
      if (!person02) {
        console.log('判断为flase')
      }
  // typeof 不会返回Null类型 而是一个object类型
      var book = null
      console.log(typeof book) // object
  

• null和undefined的关系：两个值的设计目的是不同的

  1. undefined的作用通常表示变量声明后未初始化的状态，也不会主动给一个变量赋值undefined
  2. null值的作用，我们常用于给一个不确定值的对象初始化为空

4.7 数据类型总结

• JavaScript 中有八种基本的数据类型（object 为复杂数据类型，也称为引用类型，其余七种为基本数据类型，也称为原始类型）
  1. Number: 用于任何类型的数字：整数或浮点数。
  2. String:用于字符串：一个字符串可以包含 0 个或多个字符，所以没有单独的单字符类型
  3. Boolean:用于逻辑判断，有true和false两个值
  4. Undefined：用于未定义的值 —— 只有一个 undefined 值的独立类型。
  5. Null：常用于对象的初始化
  6. Object：用于更复杂的数据结构。
  • 以下后续了解
  7. BigInt：用于任意长度的整数。
  8. Symbol ：用于唯一的标识符。

5. 数据类型的转换

什么是数据类型转换：在开发中，我们可能会在不同的数据类型之间进行某些操作，这时候可能会发生不同类型数据的操作，我们可以显示地转换或隐式地转换数据类型。

    // var numStr = "1234"
    // var result = numStr
    // console.log(typeof result)

    var isAdmin = true
    var result2 = 10 + isAdmin // isAdmin -> 1
    console.log(result2)

5.1 隐式数据转换

大多数情况下，运算符和函数会自动将赋予它们的值转换为正确的类型，这是一种隐式转换

1. String类型的数字加 + Number类型的数字

   var num1Str = "10" + num1
       console.log(num1Str) //12310
   

2. Strig类型的文字 加 + Number类型的数字

   var ageStr = age + 132
       console.log(ageStr) //十八岁132
   

3. String类型或者Number类型的数字作为布尔值进行逻辑判断

    var isAdmin = 1
    if(is){	//1 ==> true
    console.log('true')
    }
   

5.2 显示类型转换

我们也可以，通过显示的方式来对数据类型进行转换；

5.3 字符串String的转换

其他类型转换成Sring类型

• 隐式转换

  1. 一个字符串和其它类型进行相加+操作：如果+运算符左右两边有一个是字符串，那么另一边会自动转换成字符串类型进行拼接

   var num1 = 123
      var age = 18
      var isAdmin = true
  
      // 1.转换方式一: 隐式转换(用的非常多)
      var num1Str = num1 + ""
      var ageStr = age + ""
      var isAdminStr = isAdmin + ""
      console.log(typeof num1Str, typeof ageStr, typeof isAdminStr)
  

  2. 某些函数的执行也会自动将参数转为字符串类型：比如console.log函数；

  	var num = 123
  	console.log(num)
  

• 显示转换

  1. 调用String()函数

  // 2.转换方式一: 显示转换
      var num1 = 123
      var num1Str2 = String(num1)
      console.log(typeof num1Str2)
  

  2. 调用toString()方法

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

5.4 数字类型Number的转换

• 隐式转换

  1. 字符串类型的数字进行除加法外的，乘除运算

  	var numStr1 = `20`
      var numStr2 = `5`
  
      var total = numStr1 * numStr2 //100
      var total02 = numStr1 / numStr2 //4
      console.log(total, total02)
  

• 显示转换

  1. 使用Number()函数来进行显式的转换

   	var numStr = '666'
      console.log(typeof Number(numStr), numStr) // number 666
  

5.5 布尔类型Boolean的转换

布尔（boolean）类型转换是最简单的，它常发生在逻辑运算中

• 隐式转换

  1. 直观上为空的值，转成Boolean类型都是false， 其他值都为true。
     例如： 1. 0 2. 空字符串"" 3.null 4.NaN -> false
     

• 显示转换

  1. 调用 Boolean()函数

  //显示转换 Boolean()
      var isAdmin = true
      var num = 0
      console.log(Boolean(isAdmin), Boolean(num)) //true false
      
  

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

var flag = "0"
    console.log(Boolean(flag)) //true