// ES6推荐方式
let name = "张三"; // 可变变量
const age = 25; // 常量，不可重新赋值
// 老式写法（不推荐）
var city = "北京"; // 函数作用域，容易造成作用域混淆
基本数据类型：
javascript
// 字符串（String）
let name = "JavaScript";
let message = '你好世界';
// 数字（Number）
let count = 42;
let price = 19.99;
// 布尔值（Boolean）
let isActive = true;
let isCompleted = false;
// undefined
let empty; // 声明但未赋值，默认为undefined
// null
let data = null; // 空值，表示“无值”
// Symbol（ES6新增）
let id = Symbol('unique');
// BigInt（ES2020新增）
let bigNumber = 9007199254740991n;
引用数据类型：
javascript
// 数组（Array）
let colors = ['red', 'green', 'blue'];
let numbers = [1, 2, 3, 4, 5];
// 对象（Object）
let person = {
name: '李四',
age: 30,
city: '上海'
};
// 函数（Function）
function greet() {
console.log('你好！');
}
let x = true;
let y = false;
console.log(x && y); // false 逻辑与（两个都为true才返回true）
console.log(x || y); // true 逻辑或（有一个为true就返回true）
console.log(!x); // false 逻辑非（取反）
2.3 条件语句
if-else语句：
javascript
let score = 85;
if (score >= 90) {
console.log('优秀');
} else if (score >= 80) {
console.log('良好');
} else if (score >= 60) {
console.log('及格');
} else {
console.log('不及格');
}
三元运算符（简化版if-else）：
javascript
let age = 20;
let canVote = age >= 18 ? '可以投票' : '不能投票';
console.log(canVote); // 可以投票
switch语句（多分支选择）：
javascript
let day = '星期一';
switch (day) {
case '星期一':
console.log('新的开始');
break;
case '星期五':
console.log('快到周末了');
break;
default:
console.log('普通的一天');
}
2.4 循环语句
for循环（指定次数）：
javascript
// 基本for循环
for (let i = 0; i < 5; i++) {
console.log(i); // 输出 0, 1, 2, 3, 4
}
// 遍历数组
let fruits = ['苹果', '香蕉', '橙子'];
for (let i = 0; i < fruits.length; i++) {
console.log(fruits[i]);
}
while循环（满足条件时循环）：
javascript
let count = 0;
while (count < 3) {
console.log('计数：' + count);
count++;
}
for…of循环（遍历数组元素）：
javascript
let colors = ['红', '绿', '蓝'];
for (let color of colors) {
console.log(color);
}
for…in循环（遍历对象属性）：
javascript
let person = { name: '张三', age: 25 };
for (let key in person) {
console.log(key + ': ' + person[key]);
}
三、函数与作用域
3.1 函数定义与调用
函数声明：
javascript
function greet(name) {
return '你好，' + name + '！';
}
console.log(greet('世界')); // 你好，世界！
函数表达式：
javascript
let greet = function(name) {
return '你好，' + name + '！';
};
console.log(greet('JavaScript')); // 你好，JavaScript！
箭头函数（ES6，更简洁）：
javascript
let greet = (name) => '你好，' + name + '！';
// 单参数可省略括号
let greet2 = name => '你好，' + name + '！';
// 多行代码用花括号
let add = (a, b) => {
let sum = a + b;
return sum;
};
立即执行函数（IIFE）：
javascript
(function() {
let privateVar = '私有变量';
console.log(privateVar); // 只在函数内部可访问
})();
3.2 参数与返回值
默认参数：
javascript
function greet(name = '朋友') {
return '你好，' + name + '！';
}
console.log(greet()); // 你好，朋友！
console.log(greet('张三')); // 你好，张三！
剩余参数：
javascript
function sum(...numbers) {
let total = 0;
for (let num of numbers) {
total += num;
}
return total;
}
console.log(sum(1, 2, 3)); // 6
console.log(sum(1, 2, 3, 4, 5)); // 15
返回值：
javascript
function add(a, b) {
return a + b; // 返回计算结果
}
let result = add(5, 3);
console.log(result); // 8
多返回值（通过数组或对象）：
javascript
function getUserInfo() {
return {
name: '李四',
age: 30,
city: '深圳'
};
}
let user = getUserInfo();
console.log(user.name); // 李四
3.3 作用域与闭包
作用域类型：
javascript
// 全局作用域
let globalVar = '全局变量';
function testScope() {
// 函数作用域
let localVar = '局部变量';
console.log(globalVar); // 可以访问全局变量
console.log(localVar); // 可以访问局部变量
}
console.log(globalVar); // 可以访问
// console.log(localVar); // 错误：无法访问函数内部变量
let与var的作用域区别：
javascript
// var是函数作用域
function testVar() {
if (true) {
var x = 10;
}
console.log(x); // 可以访问
}
// let是块级作用域
function testLet() {
if (true) {
let y = 10;
}
// console.log(y); // 错误：无法访问块外变量
}
闭包（函数 + 词法环境）：
javascript
function makeCounter() {
let count = 0;
return function() {
count++;
return count;
};
}
let counter = makeCounter();
console.log(counter()); // 1
console.log(counter()); // 2
console.log(counter()); // 3
// 每次调用makeCounter都创建新的闭包
let counter2 = makeCounter();
console.log(counter2()); // 1
let person = {
name: '李四',
age: 30,
city: '上海'
};
// for...in遍历
for (let key in person) {
console.log(key + ': ' + person[key]);
}
// Object.keys获取所有键
let keys = Object.keys(person); // ['name', 'age', 'city']
// Object.values获取所有值
let values = Object.values(person); // ['李四', 30, '上海']
对象解构（ES6）：
javascript
let user = { name: '王五', age: 28, city: '广州' };
// 解构赋值
let { name, age } = user;
console.log(name); // 王五
console.log(age); // 28
// 重命名
let { name: userName, city: userCity } = user;
console.log(userName); // 王五
// 默认值
let { name, gender = '未知' } = user;
console.log(gender); // 未知
五、DOM操作与事件处理
5.1 选择和操作元素
选择元素：
javascript
// 通过ID选择
let element = document.getElementById('myId');
// 通过类名选择
let elements = document.getElementsByClassName('myClass');
// 通过标签名选择
let divs = document.getElementsByTagName('div');
// 通过CSS选择器选择（推荐）
let button = document.querySelector('.submit-btn');
let items = document.querySelectorAll('.item');
发表回复