JavaScript 基础语法

一、输入与输出语法

JS 中常用的输入输出方式有三种，分别适用于不同场景：

1. 文档输出

通过 document.write() 可以直接向 HTML 文档中输出内容，支持 HTML 标签：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>输入和输出语法</title>
</head>
<body>
  <script>
    // 输出普通文本
    document.write('我是普通文本')
    // 输出HTML标签（会被解析）
    document.write('<h1>我是h1标题</h1>')
  </script>
</body>
</html>

2. 控制台输出

console.log() 是开发中最常用的调试方式，内容会输出到浏览器的控制台：

javascript 复制代码

console.log('看看代码是否执行') // 控制台打印：看看代码是否执行

3. 输入语法

prompt() 会弹出输入框，获取用户输入的内容（返回值为字符串类型）：

javascript 复制代码

let userName = prompt('请输入你的姓名') // 弹出输入框，输入内容会赋值给userName

二、变量与常量

变量是存储数据的容器，常量则用于存储不可修改的数据，二者的声明方式和规则有明确区别。

1. 变量的声明与使用

推荐使用 let 声明变量（var 已过时，存在变量提升等问题），使用分为「声明」「赋值」「初始化」三步：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>变量的使用</title>
</head>
<body>
  <script>
    // 1. 仅声明
    let age
    // 2. 赋值
    age = 18
    // 3. 声明并赋值（初始化）
    let number = 100
    let uname = '张三'
    // 控制台输出变量值
    console.log(number); // 100
    console.log(uname); // 张三
  </script>
</body>
</html>

2. var 与 let 的区别

var 是 ES5 语法，存在「变量提升」「重复声明」等问题，ES6 推出的 let 解决了这些问题：

var 允许重复声明，let 不允许；

var 有函数级作用域，let 有块级作用域；

建议开发中统一使用 let，放弃 var。

3. 常量（const）

常量使用 const 声明，必须初始化 ，且声明后不能重新赋值：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>常量</title>
</head>
<body>
  <script>
    // 正确声明：初始化赋值
    const PI = 3.1415926
    console.log(PI); // 3.1415926
    
    // 错误1：重新赋值（报错）
    // PI = 3.14
    
    // 错误2：未初始化（报错）
    // const a
  </script>
</body>
</html>

三、数据类型与检测

JS 中有多种数据类型，核心分为「基本数据类型」和「引用数据类型」，本文重点讲解基础的基本数据类型。

1. 常见基本数据类型

类型	说明	示例
数字型（Number）	整数 / 小数 / NaN	`let num = 10`
字符串型（String）	文本内容，支持单 / 双 / 反引号	`let str = 'hello'`
布尔型（Boolean）	只有 true/false	`let isCool = true`
未定义型（Undefined）	声明变量未赋值	`let num;`
空类型（Null）	表示空值	`let empty = null`

字符串补充：模板字符串

普通字符串拼接繁琐，ES6 模板字符串（反引号 `````）支持变量嵌入（${变量}）：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>模板字符串</title>
</head>
<body>
  <script>
    let age = 118
    // 普通拼接：document.write('我今年' + age + '岁了')
    // 模板字符串（更简洁）
    document.write(`我今年${age}岁了`) // 输出：我今年118岁了
  </script>
</body>
</html>

2. 检测数据类型

使用 typeof 运算符可以检测变量的数据类型：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>检测数据类型</title>
</head>
<body>
  <script>
    let num = 10
    console.log(typeof num) // number
    
    let str = 'hello'
    console.log(typeof str) // string
    
    let bool = true
    console.log(typeof bool) // boolean
    
    let empty = null
    console.log(typeof empty) // object（JS 历史遗留问题）
    
    let unf
    console.log(typeof unf) // undefined
  </script>
</body>
</html>

四、数据类型转换

JS 中存在「显示转换」（手动转换）和「隐式转换」（自动转换）两种方式，开发中需重点掌握显示转换。

1. 显示转换（手动控制）

（1）转数字型

Number()：纯数字字符串转数字，非数字转 NaN；

parseInt()：提取整数（忽略单位，向下取整）；

parseFloat()：提取小数（忽略单位）。

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>显示转换</title>
</head>
<body>
  <script>
    let str = '123'
    console.log(Number(str)) // 123（数字型）
    
    console.log(parseInt('12px')) // 12（提取整数，忽略px）
    console.log(parseInt('12.34px')) // 12（只保留整数）
    console.log(parseFloat('12.34px')) // 12.34（保留小数）
  </script>
</body>
</html>

（2）转字符串型

String() 可将任意类型转为字符串：

javascript 复制代码

let num = 10
console.log(String(num)) // "10"（字符串型）

2. 隐式转换（自动触发）

运算符会触发自动类型转换，需注意规则：

+ 号：一侧为字符串，另一侧自动转字符串（拼接）；

-/*% 号：自动将字符串转数字（运算）；

+ 单目运算符：将值转数字型。

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>隐式转换</title>
</head>
<body>
  <script>
    let num = 10
    let str = 'hello'
    console.log(10 + str) // "10hello"（拼接）
    console.log(2 - '2') // 0（转数字运算）
    console.log(+'123') // 123（转数字）
  </script>
</body>
</html>

五、运算符

运算符是操作数据的核心，包括赋值、一元、比较、逻辑运算符等。

1. 赋值运算符

基础赋值：=；复合赋值：+= -= *= /=（简化运算）。

javascript 复制代码

let a = 10
a += 5 // 等价于 a = a + 5 → a=15
a -= 3 // 等价于 a = a - 3 → a=12

2. 一元运算符

最常用的是自增（++）、自减（--），分「前置」和「后置」：

前置：先运算，后取值；

后置：先取值，后运算。

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>一元运算符</title>
</head>
<body>
  <script>
    let num = 10
    let num2 = ++num // 前置：num先+1=11，再赋值给num2 → num2=11
    let num3 = num++ // 后置：先赋值num3=11，num再+1=12
    console.log(num) // 12
    console.log(num2) // 11
    console.log(num3) // 11
  </script>
</body>
</html>

3. 比较运算符

用于比较两个值，返回布尔值（true/false），重点注意「==」和「===」：

==：只比较值（自动隐式转换类型）；

===：严格相等（值 + 类型都相等）。

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>比较运算符</title>
</head>
<body>
  <script>
    let num = '20'
    let num2 = 20
    console.log(num == num2) // true（只比数值）
    console.log(num === num2) // false（类型不同：string vs number）
    console.log(NaN === NaN) // false（NaN与任何值都不相等）
  </script>
</body>
</html>

4. 逻辑运算符

用于多条件判断，核心有三个：

&&（与）：全为 true 才返回 true；

||（或）：有一个 true 就返回 true；

!（非）：取反。

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>逻辑运算符</title>
</head>
<body>
  <script>
    // 5>3为true，5<10为true → 结果true
    console.log(5 > 3 && 5 < 10) // true
  </script>
</body>
</html>