前端开发必备：JavaScript 基础知识（一）

在 HTML 标签中直接引入，针对一些特别简短的 JavaScript 代码。
使用 <script> 标签可以将 JavaScript 代码嵌入到 HTML 文档的 <head> 和 <body> 里。
使用外部 JavaScript 文件。将 JavaScript 脚本代码写入一个后缀为 .js 的文件中，通过给 <script> 标签设置 src 属性的方式，引入这个文件。

二、变量与数据类型

let 关键字

在 JavaScript 中，通常使用 let 关键字声明变量，其语法格式为：

let 变量名 = 值

在 JavaScript 中给变量命名应该遵循以下原则：

变量名由字母、下划线、$ 或数字组成，并且必须由字母、下划线、$ 开头。
变量名不能命名为系统关键字和保留字。

例如：新建一个 index.html 文件，写入以下内容：

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>文档</title>
  </head>
  <body>
    <script>
      let str = 'Hello JS!'
      let num = 1
      console.log(str) /* 在控制台输出变量 str 的值 */
      console.log(num) /* 在控制台输出变量 num 的值 */
    </script>
  </body>
</html>

启动 Web 服务，访问预览页面，按下 F12 键打开浏览器开发者工具的控制台，观察结果：

可以看到，两个变量的值输出到了控制台中，在 JavaScript 中，我们可以使用 console.log() 在浏览器开发者工具的控制台中进行输出。

const 关键字

在 JavaScript 中，为我们提供了另一个关键字 const 用于声明一个只读的常量。常量一旦声明，它的值就不能改变。如果我们尝试再次赋值的话，则会引发错误。

示例：

const maxAge = 100
maxAge = 10
console.log(maxAge)

控制台的输出结果如下：

既然常量的值不能改变，那么我们在声明时，必须对它进行初始化，不然也会报错。

参考以下示例：

const num

对于 const 关键字声明的不可改变的变量值，根据变量是基本类型还是引用类型分为两种情况。

基本类型的变量直接存储数据，例如：

const num = 20

这里 num 变量就是基本类型，我们使用的是 const 关键字来声明 num，故赋予变量 num 的值 20 是不可改变的。

引用类型的变量存储数据的引用，而数据是放在数据堆中。比如，用 const 声明一个数组，如果我们尝试去修改数组，那么会报错：

const arr = ["一", "二", "三"]
arr = ["五", "六", "七"]

但是，使用 const 关键字声明的引用类型还是可以通过数组下标去修改值的：

const arr = ['一', '二', '三']
arr[0] = '四'
arr[1] = '五'
arr[2] = '六'

console.log(arr)

控制台的输出结果如下：

这是因为变量 arr 保存的是数组的引用，并不是数组中的值，只要引用的地址不发生改变就不会报错。这就相当于一个房子，它拥有固定的位置，但住在房子里的人不一定固定。

变量的作用域

作用域是变量与函数的可访问范围，在 JavaScript 中，变量的作用域有全局作用域和局部作用域两种。

在函数外部声明的变量，即为全局变量。全局变量的作用域针对整个全局，简单来说，就是网页中的所有脚本和函数都能够访问它。

参考以下示例1：

 let str = 'https://www.baidu.com/'
      console.log('函数外部：', str)

      function test() {
        console.log('函数内部：', str)
      }
      test()

控制台的输出结果如下：

可以看到，在函数内部能够访问函数外部声明的变量 str。

在函数内声明的变量为局部变量，作用域只在函数内部有效，也只能被函数内部访问。因为局部变量只作用于函数内部，所以不同函数在内部可以使用相同名称的变量；函数开始执行时创建局部变量，函数执行完成后局部变量会自动销毁。

示例2：

let str = 'https://www.baidu.com/'
      console.log('函数外部：', str)

      function test() {
        let str = 'https://www.taobao.com/'
        console.log('函数内部：', str)
      }
      test()

控制台的输出结果如下：

三、 JavaScript 数据类型

在 JavaScript 中数据类型分为两大类：

基本数据类型：String（字符串）、Number（数字）、Boolean（布尔）、null（空）、undefined（未定义）、BigInt、Symbol
引用数据类型：Object（对象）

❓为什么需要这么多种数据类型呢？

不同的数据类型占有的存储空间不同。如果不标识数据类型的话，计算机会给不同的数据类型分配相同的储存空间，这就造成了资源浪费。
不同的数据类型在进行运算的时候，需要进行转换，同类型的数据才能进行计算。比如，两个整型相加（+）是算数运算（1+1=2），两个字符串相加（+）是字符串拼接（'1'+''='12'）。

❓那么为什么又要分为基本数据类型和引用数据类型呢？

传参方式不同，基本数据类型是值传递，而引用数据类型是地址传递。
储存方式不同，基本数据类型是栈存储，而引用数据类型是堆存储。

基本数据类型

新建一个 index.html 文件，在 <script> 标签内写入以下内容：

let a = 5
let b = a
a = a + 1
console.log('a 的值为：', a)
console.log('b 的值为：', b)

控制台的输出结果如下：

可以看到，输出 a 的值为 6，因为执行了 a = a + 1 的操作；而 b 的值为 5，是因为 a = 5 时，把 5 这个值赋给了 b。

引用数据类型

新建一个 index.html 文件，在 <script> 标签内写入以下内容：

let a = {} // 创建一个对象
a.name = '小花'
let b = a
a.name = '小蓝'
console.log('对象 a 的 name 属性值为：', a.name)
console.log('对象 b 的 name 属性值为：', b.name)

控制台的输出结果如下：

从上图我们可以看到 a.name 和 b.name 的输出都是“小蓝”，因为引用类型传递的是地址，所以 a 对象的数据改变，b 对象的数据也会改变。

我们可以使用 typeof 关键字来判断数据类型，但是它存在以下问题：

无法判断 null。
无法判断除了 function 之外的引用类型。

示例：

// 可以判断除了 null 之外的基础类型
console.log(typeof true) // boolean
console.log(typeof 100) // number
console.log(typeof 'abc') // string
console.log(typeof 100n) // bigint
console.log(typeof undefined) // undefined
console.log(typeof Symbol('a')) // symbol

// 无法判断 null
console.log(typeof null) // object

// 无法判断除了 function 之外的引用类型
console.log(typeof function () {}) // function
console.log(typeof []) // object
console.log(typeof {}) // object

控制台的输出结果如下：

为了克服 typeof 关键字的缺陷，我们可以使用内置对象 Object 的 toString() 方法实现数据类型的判断，其使用格式为：

Object.prototype.toString.call(变量或值)

参考以下示例：

console.log(Object.prototype.toString.call(null)) // [object Null]
console.log(Object.prototype.toString.call(function () {})) // [object Function]
console.log(Object.prototype.toString.call([])) // [object Array]
console.log(Object.prototype.toString.call({})) // [object Object]

控制台的输出结果如下：