JavaScript 学习笔记

// var 声明（ES5）- 函数作用域
var name = '张三';

// let 声明（ES6）- 块级作用域
let age = 18;

// const 声明（ES6）- 块级作用域，常量
const PI = 3.14;

// var 的函数作用域
function test() {
    if (true) {
        var x = 10;
    }
    console.log(x); // 10
}

// let 的块级作用域
function test2() {
    if (true) {
        let y = 20;
    }
    // console.log(y); // 报错：y is not defined
}

// const 常量
const MAX_SIZE = 100;
// MAX_SIZE = 200; // 报错：Assignment to constant variable

let num1 = 10;           // 整数
let num2 = 3.14;         // 小数
let num3 = 0xff;         // 十六进制
let num4 = 0o77;         // 八进制
let num5 = 0b1010;       // 二进制
let num6 = 1.5e3;        // 科学计数法 1500
let num7 = Infinity;     // 无穷大
let num8 = -Infinity;    // 无穷小
let num9 = NaN;          // Not a Number

// 数值范围
console.log(Number.MAX_VALUE);  // 最大值
console.log(Number.MIN_VALUE);  // 最小值

// isNaN() 判断是否为非数字
console.log(isNaN(10));        // false
console.log(isNaN('hello'));   // true

let str1 = 'Hello';
let str2 = "World";
let str3 = `Hello ${str2}`;  // 模板字符串（ES6）

// 字符串的不可变性
let str = 'hello';
str[0] = 'H';
console.log(str);  // 还是 'hello'

// 常用属性和方法
console.log(str.length);              // 5
console.log(str.charAt(0));           // 'h'
console.log(str.indexOf('l'));        // 2
console.log(str.slice(1, 3));         // 'el'
console.log(str.substring(1, 3));     // 'el'
console.log(str.substr(1, 3));        // 'ell'（substr 已被废弃，建议改用 slice）
console.log(str.toUpperCase());       // 'HELLO'
console.log(str.toLowerCase());       // 'hello'
console.log(str.split(''));           // ['h','e','l','l','o']
console.log(str.replace('l', 'L'));   // 'heLlo'
console.log(str.trim());              // 去除两端空格

let flag1 = true;
let flag2 = false;

// 以下值会被转换为 false
console.log(Boolean(0));          // false
console.log(Boolean(''));         // false
console.log(Boolean(NaN));        // false
console.log(Boolean(null));       // false
console.log(Boolean(undefined));  // false

// 其他所有值都是 true
console.log(Boolean(1));          // true
console.log(Boolean('hello'));    // true
console.log(Boolean([]));         // true
console.log(Boolean({}));         // true

// Undefined：变量声明了但未赋值
let a;
console.log(a);        // undefined
console.log(typeof a); // "undefined"

// Null：空对象
let b = null;
console.log(b);        // null
console.log(typeof b); // "object"（这是一个历史遗留bug）

// 区别
console.log(undefined == null);   // true
console.log(undefined === null);  // false

// Symbol 表示独一无二的值
let s1 = Symbol('描述');

let s2 = Symbol('描述');
console.log(s1 === s2);  // false

// 应用：作为对象属性名，防止属性名冲突
let obj = {
    [Symbol('name')]: '张三',
    [Symbol('name')]: '李四'
};

// 用于表示大于 2^53 - 1 的整数
let bigNum1 = 9007199254740991n;
let bigNum2 = BigInt(9007199254740991);

console.log(bigNum1 + 1n);  // 9007199254740992n

// typeof 操作符
console.log(typeof 123);           // "number"
console.log(typeof 'hello');       // "string"
console.log(typeof true);          // "boolean"
console.log(typeof undefined);     // "undefined"
console.log(typeof null);          // "object"（bug）
console.log(typeof {});            // "object"
console.log(typeof []);            // "object"
console.log(typeof function(){}); // "function"

// instanceof 检测引用类型
console.log([] instanceof Array);   // true
console.log({} instanceof Object);  // true

// Object.prototype.toString.call()（最准确）
console.log(Object.prototype.toString.call([]));       // "[object Array]"
console.log(Object.prototype.toString.call({}));       // "[object Object]"
console.log(Object.prototype.toString.call(null));     // "[object Null]"

let num = 10;

// 方式1：toString()
console.log(num.toString());        // "10"

// 方式2：String()
console.log(String(num));           // "10"

// 方式3：隐式转换（+ 拼接字符串）
console.log(num + '');              // "10"

let str = '123';

// 方式1：Number()
console.log(Number(str));           // 123
console.log(Number('123abc'));      // NaN

// 方式2：parseInt()
console.log(parseInt('123.45'));    // 123
console.log(parseInt('123abc'));    // 123

// 方式3：parseFloat()
console.log(parseFloat('123.45'));  // 123.45

// 方式4：隐式转换（算术运算）
console.log('123' - 0);             // 123
console.log('123' * 1);             // 123
console.log(+'123');                // 123

// 方式1：Boolean()
console.log(Boolean(1));            // true
console.log(Boolean(0));            // false

// 方式2：隐式转换
console.log(!!'hello');             // true

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 幂运算（ES2016）

// 自增自减
let x = 5;
console.log(x++);     // 5（先用后加）
console.log(++x);     // 7（先加后用）
console.log(x--);     // 7（先用后减）
console.log(--x);     // 5（先减后用）

let a = 10;
a += 5;   // a = a + 5;   15
a -= 3;   // a = a - 3;   12
a *= 2;   // a = a * 2;   24
a /= 4;   // a = a / 4;   6
a %= 5;   // a = a % 5;   1

console.log(5 > 3);    // true
console.log(5 < 3);    // false
console.log(5 >= 5);   // true
console.log(5 <= 3);   // false
console.log(5 == '5'); // true（只比较值）
console.log(5 === '5');// false（比较值和类型）
console.log(5 != '5'); // false
console.log(5 !== '5');// true

// && 逻辑与（全真为真）
console.log(true && true);    // true
console.log(true && false);   // false

// || 逻辑或（一真即真）
console.log(false || true);   // true
console.log(false || false);  // false

// ! 逻辑非（取反）
console.log(!true);           // false

// 短路运算
let a = 0;
console.log(a && a++);        // 0（a不会自增）
console.log(a || 100);        // 100

// 三元运算符：条件 ? 值1 : 值2
// 如果条件为true,返回值1;否则返回值2
let age = 18;

// 根据年龄判断是否成年
let result = age >= 18 ? '成年' : '未成年';
console.log(result);  // 输出: '成年'

// 三元运算符可以嵌套使用
let score = 85;
let grade = score >= 90 ? 'A' :
            score >= 80 ? 'B' :
            score >= 70 ? 'C' : 'D';
console.log(grade);  // 输出: 'B'

// if-else if-else 多分支结构
let score = 85;

// 根据分数判断等级
if (score >= 90) {
    console.log('优秀');          // 分数>=90时执行
} else if (score >= 80) {
    console.log('良好');          // 分数80-89时执行,输出此项
} else if (score >= 60) {
    console.log('及格');          // 分数60-79时执行
} else {
    console.log('不及格');        // 分数<60时执行
}
// 实际输出: '良好'

// 单个if语句
let age = 20;
if (age >= 18) {
    console.log('已成年');        // 输出: '已成年'
}

// if-else 双分支
let isRaining = true;
if (isRaining) {
    console.log('带伞');          // 输出: '带伞'
} else {
    console.log('不带伞');
}

// switch 语句用于基于不同值执行不同代码
let day = 3;

switch (day) {
    case 1:
        console.log('星期一');
        break;  // break防止继续执行下一个case
    case 2:
        console.log('星期二');
        break;
    case 3:
        console.log('星期三');  // 匹配此项,输出: '星期三'
        break;                 // break跳出switch
    case 4:
        console.log('星期四');
        break;
    case 5:
        console.log('星期五');
        break;
    case 6:
    case 7:                    // case可以合并,6或7都执行这里
        console.log('周末');
        break;
    default:                   // 所有case都不匹配时执行
        console.log('无效的日期');
}

// 利用穿透特性(不加break)
let grade = 'B';
switch (grade) {
    case 'A':
    case 'B':
    case 'C':
        console.log('及格');    // 输出: '及格'
        break;
    case 'D':
    case 'F':
        console.log('不及格');
        break;
}

// 1. 基本 for 循环
// for (初始化; 条件判断; 每次迭代后执行)
for (let i = 0; i < 5; i++) {
    console.log(i);
}
// 输出: 0 1 2 3 4 (每个数字单独一行)

// 2. for...in 遍历对象的键(可枚举属性)
let obj = { name: '张三', age: 18, city: '北京' };
for (let key in obj) {
    console.log(key, obj[key]);
}
// 输出:
// name 张三
// age 18
// city 北京

// 3. for...of 遍历可迭代对象的值（ES6）
// 适用于数组、字符串、Map、Set等
let arr = [10, 20, 30];
for (let value of arr) {
    console.log(value);
}
// 输出: 10 20 30

// 4. 遍历字符串
let str = 'Hello';
for (let char of str) {
    console.log(char);
}
// 输出: H e l l o (每个字符单独一行)

// 5. 数组的forEach方法(推荐用于数组遍历)
let fruits = ['苹果', '香蕉', '橙子'];
fruits.forEach((item, index) => {
    console.log(`${index}: ${item}`);
});
// 输出:
// 0: 苹果
// 1: 香蕉
// 2: 橙子

let i = 0;
while (i < 5) {
    console.log(i);
    i++;
}
// 输出: 0 1 2 3 4

let j = 0;
do {
    console.log(j);
    j++;
} while (j < 5);
// 输出: 0 1 2 3 4

// break：跳出整个循环
for (let i = 0; i < 10; i++) {
    if (i === 5) break;
    console.log(i);  // 0 1 2 3 4
}

// continue：跳过本次循环
for (let i = 0; i < 5; i++) {
    if (i === 2) continue;
    console.log(i);  // 0 1 3 4
}

function sayHello(name) {
    console.log('Hello, ' + name);
}
// 函数声明会被提升(hoisting),可以在声明前调用

let sayHi = function(name) {
    console.log('Hi, ' + name);
};
// 函数表达式不会提升,只能在声明后调用

let add = (a, b) => a + b;

// 等价于
let add2 = function(a, b) {
    return a + b;
};

let multiply = new Function('a', 'b', 'return a * b');

function greet(name) {
    return 'Hello, ' + name;
}

let message = greet('张三');
console.log(message);  // "Hello, 张三"

function add(a, b) {  // a, b 是形参
    return a + b;
}

let result = add(3, 5);  // 3, 5 是实参

function greet(name = '游客') {
    console.log('Hello, ' + name);
}

greet();         // "Hello, 游客"
greet('张三');   // "Hello, 张三"

function sum(...numbers) {
    return numbers.reduce((total, num) => total + num, 0);
}

console.log(sum(1, 2, 3, 4));  // 10

function showArgs() {
    console.log(arguments);  // 伪数组
    console.log(arguments.length);
}

showArgs(1, 2, 3);  // [1, 2, 3]

function add(a, b) {
    return a + b;  // return 后面的代码不会执行
    console.log('不会执行');
}

// 没有 return 或 return 后面没有值，返回 undefined
function test() {
    return;
}
console.log(test());  // undefined

let globalVar = '全局变量';

function test() {
    console.log(globalVar);  // 可以访问
}

function test() {
    let localVar = '局部变量';
    console.log(localVar);  // 可以访问
}

// console.log(localVar);  // 报错：localVar is not defined

{
    let blockVar = '块级变量';
    console.log(blockVar);  // 可以访问
}

// console.log(blockVar);  // 报错

let a = 10;

function outer() {
    let b = 20;

    function inner() {
        let c = 30;
        console.log(a, b, c);  // 10 20 30
    }

    inner();
}

outer();

// 变量提升
console.log(a);  // undefined（声明提升，赋值不提升）
var a = 10;

// 等价于
var a;
console.log(a);
a = 10;

// 函数提升
sayHello();  // "Hello"（函数声明会整体提升）

function sayHello() {
    console.log('Hello');
}

// 函数表达式不会提升
// sayHi();  // 报错
var sayHi = function() {
    console.log('Hi');
};

function outer() {
    // 1. 在outer函数内部声明一个局部变量count
    let count = 0;

    // 2. 返回一个内部函数inner（这就是闭包）
    // 关键：inner函数可以访问outer函数的变量count
    return function inner() {
        // 3. 每次调用inner时，都会访问并修改outer中的count
        // count变量不会被垃圾回收，因为inner函数一直引用着它
        count++;
        console.log(count);
    };
}

// 4. 调用outer()，返回inner函数并赋值给counter
// 此时outer()已经执行完毕，但count变量仍然存在于内存中
let counter = outer();

// 5. 每次调用counter()，实际上是调用inner函数
// inner函数会访问并修改同一个count变量（闭包保存的变量）
counter();  // 1  (count从0变成1)
counter();  // 2  (count从1变成2)
counter();  // 3  (count从2变成3)

// 闭包应用：数据私有化
function createPerson(name) {
    // name是外部函数的局部变量，形成闭包 
    // 外部无法直接访问name，只能通过返回的方法访问
    return {
        // getName通过闭包访问name变量
        getName: function() {
            return name;  // 返回闭包中保存的name
        },
        // setName通过闭包修改name变量
        setName: function(newName) {
            name = newName;  // 修改闭包中的name
        }
    };
}

let person = createPerson('张三');
console.log(person.getName());  // "张三" - 通过方法读取私有变量
person.setName('李四');         // 通过方法修改私有变量
console.log(person.getName());  // "李四" - 闭包中的name已被修改
// console.log(person.name);    // undefined - 无法直接访问name

// 写法1
(function() {
    console.log('立即执行');
})();

// 写法2
(function() {
    console.log('立即执行');
}());

// 带参数
(function(a, b) {
    console.log(a + b);  // 30
})(10, 20);

// 计算阶乘
function factorial(n) {
    if (n === 1) return 1;
    return n * factorial(n - 1);
}

console.log(factorial(5));  // 120

// 斐波那契数列
function fibonacci(n) {
    if (n <= 2) return 1;
    return fibonacci(n - 1) + fibonacci(n - 2);
}

console.log(fibonacci(6));  // 8

function processData(data, callback) {
    let result = data * 2;
    callback(result);
}

processData(10, function(result) {
    console.log(result);  // 20
});

// 常见的回调函数场景
setTimeout(function() {
    console.log('1秒后执行');
}, 1000);

let arr = [1, 2, 3];
arr.forEach(function(item) {
    console.log(item);
});

let person = {
    name: '张三',
    age: 18,
    sayHello: function() {
        console.log('Hello');
    }
};

let person = new Object();
person.name = '张三';
person.age = 18;

function Person(name, age) {
    this.name = name;
    this.age = age;
    this.sayHello = function() {
        console.log('Hello, ' + this.name);
    };
}

let p1 = new Person('张三', 18);
let p2 = new Person('李四', 20);

let proto = {
    sayHello: function() {
        console.log('Hello');
    }
};

let person = Object.create(proto);
person.name = '张三';

let person = { name: '张三', age: 18 };

// 点语法
console.log(person.name);

// 方括号语法
console.log(person['age']);

person.gender = '男';
person['height'] = 180;

person.age = 20;

delete person.gender;

for (let key in person) {
    console.log(key, person[key]);
}

// 1. 全局作用域中，this 指向 window
console.log(this);  // window

// 2. 普通函数中，this 指向 window
function test() {
    console.log(this);  // window
}

// 3. 对象方法中，this 指向该对象
let obj = {
    name: '张三',
    sayName: function() {
        console.log(this.name);  // this 指向 obj
    }
};

// 4. 构造函数中，this 指向实例对象
function Person(name) {
    this.name = name;  // this 指向新创建的对象
}

// 5. 事件处理函数中，this 指向事件源
// button.onclick = function() {
//     console.log(this);  // this 指向 button
// };

// 6. 箭头函数没有自己的 this，继承外层作用域的 this
let obj2 = {
    name: '李四',
    sayName: () => {
        console.log(this);  // this 指向外层作用域
    } 
};

let person1 = { name: '张三' };
let person2 = { name: '李四' };

function greet(greeting) {
    console.log(greeting + ', ' + this.name);
}

greet.call(person1, 'Hello');  // "Hello, 张三"
greet.call(person2, 'Hi');     // "Hi, 李四"

function sum(a, b) {
    return a + b;
}

// apply 的参数是数组
let result = sum.apply(null, [3, 5]);
console.log(result);  // 8

let person = { name: '张三' };

function greet() {
    console.log('Hello, ' + this.name);
}

// bind 返回一个新函数，不会立即执行
let boundGreet = greet.bind(person);
boundGreet();  // "Hello, 张三"

console.log(Math.PI);              // 3.141592653589793
console.log(Math.abs(-5));         // 5
console.log(Math.ceil(3.1));       // 4（向上取整）
console.log(Math.floor(3.9));      // 3（向下取整）
console.log(Math.round(3.5));      // 4（四舍五入）
console.log(Math.max(1, 2, 3));    // 3
console.log(Math.min(1, 2, 3));    // 1
console.log(Math.pow(2, 3));       // 8（2的3次方）
console.log(Math.sqrt(16));        // 4（平方根）
console.log(Math.random());        // 0-1之间的随机数

// 获取 [min, max] 之间的随机整数
function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

// 创建日期对象
let now = new Date();
let date1 = new Date('2025-01-01');
let date2 = new Date(2025, 0, 1);  // 月份从0开始

// 获取日期
console.log(now.getFullYear());    // 年
console.log(now.getMonth());       // 月（0-11）
console.log(now.getDate());        // 日
console.log(now.getDay());         // 星期（0-6）
console.log(now.getHours());       // 时
console.log(now.getMinutes());     // 分
console.log(now.getSeconds());     // 秒
console.log(now.getTime());        // 时间戳

// 设置日期
now.setFullYear(2025);
now.setMonth(11);
now.setDate(25);

// 日期格式化
console.log(now.toLocaleDateString());    // 2025/12/25
console.log(now.toLocaleTimeString());    // 上午11:30:45
console.log(now.toLocaleString());        // 2025/12/25 上午11:30:45