第二章：JavaScript基础回顾

2.1 变量与数据类型

变量声明

// var - 函数作用域，可重复声明（不推荐）
var name = '张三';
var name = '李四';  // 可以重复声明
​
// let - 块级作用域，不可重复声明（推荐）
let age = 25;
// let age = 30;  // 错误：不能重复声明
age = 30;  // 可以重新赋值
​
// const - 常量，不可重新赋值
const PI = 3.14159;
// PI = 3.14;  // 错误：不能重新赋值
​
// const对象可以修改属性
const person = { name: '张三' };
person.name = '李四';  // 可以
// person = {};  // 错误：不能重新赋值

数据类型

// 基本类型
let str = 'Hello';           // 字符串
let num = 100;               // 数字
let float = 3.14;            // 浮点数
let bool = true;             // 布尔
let nothing = null;          // 空
let notDefined = undefined;  // 未定义
let sym = Symbol('id');      // 符号
​
// 引用类型
let obj = { name: '张三', age: 25 };  // 对象
let arr = [1, 2, 3, 4, 5];           // 数组
let fn = function() {};              // 函数
​
// 检查类型
console.log(typeof str);     // string
console.log(typeof num);     // number
console.log(typeof bool);    // boolean
console.log(typeof obj);     // object
console.log(typeof arr);     // object（数组也是对象）
console.log(typeof fn);      // function
console.log(Array.isArray(arr));  // true

2.2 运算符

// 算术运算符
let a = 10, 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（幂运算）
​
// 比较运算符
console.log(a == b);   // false（相等，会类型转换）
console.log(a === b);  // false（全等，推荐）
console.log(a != b);   // true（不等）
console.log(a !== b);  // true（不全等）
console.log(a > b);    // true
console.log(a >= b);   // true
​
// 逻辑运算符
let x = true, y = false;
console.log(x && y);   // false（与）
console.log(x || y);   // true（或）
console.log(!x);       // false（非）
​
// 空值合并运算符
let value = null ?? '默认值';
console.log(value);    // '默认值'
​
// 可选链运算符
let user = { profile: { name: '张三' } };
console.log(user?.profile?.name);     // '张三'
console.log(user?.settings?.theme);   // undefined（不会报错）

2.3 控制流程

条件语句

// if-else
let score = 85;
if (score >= 90) {
    console.log('优秀');
} else if (score >= 80) {
    console.log('良好');
} else if (score >= 60) {
    console.log('及格');
} else {
    console.log('不及格');
}
​
// 三元运算符
let result = score >= 60 ? '及格' : '不及格';
​
// switch
let day = 1;
switch (day) {
    case 1:
        console.log('星期一');
        break;
    case 2:
        console.log('星期二');
        break;
    case 3:
    case 4:
    case 5:
        console.log('工作日');
        break;
    default:
        console.log('周末');
}

循环

// for循环
for (let i = 0; i < 5; i++) {
    console.log(i);
}
​
// while循环
let n = 0;
while (n < 5) {
    console.log(n);
    n++;
}
​
// do-while循环
let m = 0;
do {
    console.log(m);
    m++;
} while (m < 5);
​
// for...of（遍历可迭代对象）
let arr = ['a', 'b', 'c'];
for (let item of arr) {
    console.log(item);
}
​
// for...in（遍历对象属性）
let obj = { name: '张三', age: 25 };
for (let key in obj) {
    console.log(key, obj[key]);
}
​
// 数组方法遍历
arr.forEach((item, index) => {
    console.log(index, item);
});
​
// map遍历
let newArr = arr.map(item => item.toUpperCase());
​
// filter过滤
let numbers = [1, 2, 3, 4, 5];
let evens = numbers.filter(n => n % 2 === 0);
​
// find查找
let found = numbers.find(n => n > 3);
​
// reduce归约
let sum = numbers.reduce((acc, n) => acc + n, 0);

2.4 函数

函数声明

// 函数声明
function greet(name) {
    return `Hello, ${name}!`;
}
​
// 函数表达式
const sayHi = function(name) {
    return `Hi, ${name}!`;
};
​
// 箭头函数（推荐）
const add = (a, b) => a + b;
const square = x => x * x;
const greet2 = name => `Hello, ${name}!`;
​
// 多行箭头函数
const calculate = (a, b) => {
    const sum = a + b;
    const product = a * b;
    return { sum, product };
};
​
// 默认参数
function greetUser(name = '访客') {
    console.log(`欢迎, ${name}!`);
}
​
// 剩余参数
function sumAll(...numbers) {
    return numbers.reduce((a, b) => a + b, 0);
}
console.log(sumAll(1, 2, 3, 4));  // 10
​
// 解构参数
function printUser({ name, age }) {
    console.log(`${name}, ${age}岁`);
}
printUser({ name: '张三', age: 25 });

高阶函数

// 函数作为参数
function operate(a, b, operation) {
    return operation(a, b);
}
​
const result = operate(5, 3, (x, y) => x + y);
console.log(result);  // 8
​
// 函数作为返回值
function createMultiplier(factor) {
    return function(number) {
        return number * factor;
    };
}
​
const double = createMultiplier(2);
const triple = createMultiplier(3);
console.log(double(5));  // 10
console.log(triple(5));  // 15
​
// 闭包
function counter() {
    let count = 0;
    return {
        increment: () => ++count,
        decrement: () => --count,
        getCount: () => count
    };
}
​
const myCounter = counter();
console.log(myCounter.increment());  // 1
console.log(myCounter.increment());  // 2
console.log(myCounter.getCount());   // 2

2.5 对象与类

对象

// 对象字面量
const person = {
    name: '张三',
    age: 25,
    greet() {
        console.log(`我是${this.name}`);
    }
};
​
// 访问属性
console.log(person.name);      // 张三
console.log(person['age']);    // 25
person.greet();                // 我是张三
​
// 解构
const { name, age } = person;
​
// 展开运算符
const person2 = { ...person, city: '北京' };
​
// Object方法
console.log(Object.keys(person));    // ['name', 'age', 'greet']
console.log(Object.values(person));  // ['张三', 25, ƒ]
console.log(Object.entries(person)); // [['name', '张三'], ...]

类

// 类定义
class Animal {
    constructor(name) {
        this.name = name;
    }
    
    speak() {
        console.log(`${this.name}发出声音`);
    }
    
    // 静态方法
    static isAnimal(obj) {
        return obj instanceof Animal;
    }
}

// 继承
class Dog extends Animal {
    constructor(name, breed) {
        super(name);
        this.breed = breed;
    }
    
    speak() {
        console.log(`${this.name}: 汪汪!`);
    }
    
    fetch() {
        console.log(`${this.name}去捡球`);
    }
}

const dog = new Dog('旺财', '金毛');
dog.speak();   // 旺财: 汪汪!
dog.fetch();   // 旺财去捡球

2.6 数组操作

const arr = [1, 2, 3, 4, 5];

// 添加删除
arr.push(6);        // 末尾添加
arr.pop();          // 末尾删除
arr.unshift(0);     // 开头添加
arr.shift();        // 开头删除
arr.splice(2, 1);   // 从索引2删除1个
arr.splice(2, 0, 'a', 'b');  // 从索引2插入

// 查找
arr.indexOf(3);     // 索引
arr.includes(3);    // 是否包含
arr.find(x => x > 3);       // 第一个满足条件的
arr.findIndex(x => x > 3);  // 第一个满足条件的索引

// 切片
arr.slice(1, 3);    // [2, 3]（不改变原数组）

// 排序
arr.sort((a, b) => a - b);  // 升序
arr.reverse();      // 反转

// 连接
const arr2 = [6, 7, 8];
const combined = arr.concat(arr2);
const spread = [...arr, ...arr2];

// 其他方法
arr.join('-');      // '1-2-3-4-5'
arr.every(x => x > 0);  // 是否都满足
arr.some(x => x > 4);   // 是否有满足的

2.7 字符串操作

let str = 'Hello, World!';

// 长度
str.length;  // 13

// 查找
str.indexOf('World');   // 7
str.includes('World');  // true
str.startsWith('Hello'); // true
str.endsWith('!');       // true

// 截取
str.slice(0, 5);     // 'Hello'
str.substring(0, 5); // 'Hello'
str.substr(7, 5);    // 'World'

// 替换
str.replace('World', 'Node.js');  // 'Hello, Node.js!'
str.replace(/o/g, '0');           // 正则替换所有

// 分割
str.split(', ');     // ['Hello', 'World!']

// 大小写
str.toUpperCase();   // 'HELLO, WORLD!'
str.toLowerCase();   // 'hello, world!'

// 去除空白
'  hello  '.trim();      // 'hello'
'  hello  '.trimStart();  // 'hello  '
'  hello  '.trimEnd();    // '  hello'

// 模板字符串
const name = '张三';
const message = `你好, ${name}!
今天是${new Date().toLocaleDateString()}`;