JavaScript 基础语法入门

欢迎来到 JavaScript 基础系列的第一篇文章！在这篇文章中，我们将学习 JavaScript 的基础语法，为后续的深入学习打下坚实的基础。

🎯 学习目标

通过本文，你将学会：

• JavaScript 的基本语法规则
• 变量声明和命名规范
• 基本数据类型和类型转换
• 运算符的使用
• 基本的输入输出操作

📚 什么是 JavaScript？

JavaScript 是一种高级的、解释型的编程语言，主要用于：

• 网页交互：为网页添加动态效果
• 服务器开发：使用 Node.js 进行后端开发
• 移动应用：使用 React Native 等框架
• 桌面应用：使用 Electron 等工具

🔤 基本语法规则

1. 语句和分号

JavaScript 语句通常以分号结尾（可选但推荐）：

console.log('Hello, World!');
let name = 'JavaScript';

2. 注释

// 单行注释

/*
多行注释
可以跨越多行
*/

3. 大小写敏感

JavaScript 是大小写敏感的：

let name = 'John';
let Name = 'Jane';  // 这是不同的变量

📦 变量声明

var、let、const 的区别

// var - 函数作用域，可重复声明
var age = 25;
var age = 30;  // 允许重复声明

// let - 块级作用域，不可重复声明
let height = 180;
// let height = 175;  // 错误：不能重复声明

// const - 块级作用域，常量
const PI = 3.14159;
// PI = 3.14;  // 错误：不能重新赋值

变量命名规范

// 正确的命名
let userName = 'john';
let _private = 'secret';
let $element = document.getElementById('app');
let age2 = 25;

// 错误的命名
// let 2age = 25;     // 不能以数字开头
// let user-name = 'john';  // 不能包含连字符
// let class = 'student';   // 不能使用保留字

🏷️ 数据类型

基本数据类型

// 数字 (Number)
let integer = 42;
let decimal = 3.14;
let negative = -10;

// 字符串 (String)
let singleQuote = 'Hello';
let doubleQuote = "World";
let templateLiteral = `Hello, \${singleQuote}!`;

// 布尔值 (Boolean)
let isTrue = true;
let isFalse = false;

// 未定义 (Undefined)
let undefinedVar;
console.log(undefinedVar);  // undefined

// 空值 (Null)
let nullVar = null;

// 符号 (Symbol) - ES6新增
let symbol = Symbol('id');

复合数据类型

// 对象 (Object)
let person = {
  name: 'John',
  age: 30,
  isStudent: false
};

// 数组 (Array)
let numbers = [1, 2, 3, 4, 5];
let mixed = ['hello', 42, true, null];

// 函数 (Function)
function greet(name) {
  return `Hello, \${name}!`;
}

类型检查

console.log(typeof 42);          // "number"
console.log(typeof 'hello');     // "string"
console.log(typeof true);        // "boolean"
console.log(typeof undefined);   // "undefined"
console.log(typeof null);        // "object" (这是一个历史遗留问题)
console.log(typeof {});          // "object"
console.log(typeof []);          // "object"
console.log(typeof function(){}); // "function"

➕ 运算符

算术运算符

let a = 10;
let b = 3;

console.log(a + b);  // 13 (加法)
console.log(a - b);  // 7  (减法)
console.log(a * b);  // 30 (乘法)
console.log(a / b);  // 3.333... (除法)
console.log(a % b);  // 1  (取余)
console.log(a ** b); // 1000 (幂运算)

赋值运算符

let x = 10;

x += 5;   // x = x + 5;  结果: 15
x -= 3;   // x = x - 3;  结果: 12
x *= 2;   // x = x * 2;  结果: 24
x /= 4;   // x = x / 4;  结果: 6
x %= 4;   // x = x % 4;  结果: 2

比较运算符

let a = 5;
let b = '5';

console.log(a == b);   // true  (相等，会进行类型转换)
console.log(a === b);  // false (严格相等，不进行类型转换)
console.log(a != b);   // false (不等)
console.log(a !== b);  // true  (严格不等)
console.log(a > 3);    // true  (大于)
console.log(a < 10);   // true  (小于)
console.log(a >= 5);   // true  (大于等于)
console.log(a <= 5);   // true  (小于等于)

逻辑运算符

let x = true;
let y = false;

console.log(x && y);  // false (逻辑与)
console.log(x || y);  // true  (逻辑或)
console.log(!x);      // false (逻辑非)

🔄 类型转换

自动类型转换

console.log('5' + 3);    // '53' (字符串拼接)
console.log('5' - 3);    // 2    (数字运算)
console.log('5' * 3);    // 15   (数字运算)
console.log(true + 1);   // 2    (布尔值转数字)

手动类型转换

// 转换为字符串
let num = 123;
let str1 = String(num);        // '123'
let str2 = num.toString();     // '123'
let str3 = num + '';           // '123'

// 转换为数字
let str = '123';
let num1 = Number(str);        // 123
let num2 = parseInt(str);      // 123
let num3 = parseFloat('123.45'); // 123.45
let num4 = +str;               // 123

// 转换为布尔值
let bool1 = Boolean(1);        // true
let bool2 = Boolean(0);        // false
let bool3 = Boolean('hello');  // true
let bool4 = Boolean('');       // false

💬 输入输出

输出到控制台

console.log('普通输出');
console.warn('警告信息');
console.error('错误信息');
console.info('信息提示');

浏览器中的输入输出

// 弹出提示框
alert('这是一个提示框');

// 获取用户输入
let userInput = prompt('请输入您的姓名:');
console.log('用户输入:', userInput);

// 确认对话框
let isConfirmed = confirm('您确定要继续吗?');
console.log('用户确认:', isConfirmed);

🎯 实践练习

尝试完成以下练习：

1. 变量练习：

   • 声明不同类型的变量
   • 尝试类型转换

2. 运算符练习：

   • 编写简单的计算器
   • 比较不同的比较运算符结果

3. 类型检查：

   • 使用 typeof 检查不同值的类型
   • 理解 == 和 === 的区别

📝 小结

在这篇文章中，我们学习了：

• ✅ JavaScript 基本语法规则
• ✅ 变量声明和命名规范
• ✅ 基本数据类型和复合类型
• ✅ 各种运算符的使用
• ✅ 类型转换的方法
• ✅ 基本的输入输出操作

🚀 下一步

在下一篇文章中，我们将学习：

• 条件语句和循环结构
• 函数的定义和调用
• 数组和对象的深入使用
• 作用域和变量提升

继续关注 JavaScript 基础系列，让我们一起掌握现代前端开发的核心技能！

---

> 💡 学习建议：JavaScript 学习最重要的是多练习，建议在浏览器的开发者工具中实际运行这些代码示例，观察结果并尝试修改。