JavaScript 学习精讲：前三天知识点梳理与拓展

在JavaScript的学习征途中，我们已经迈出了坚实的前三步。

第一天，我们初识了JavaScript，了解其基本概念、引入方式以及核心的语法元素，掌握了在HTML中嵌入JavaScript的方法，为后续学习搭建了基础框架。

第二天，深入学习了JavaScript中的语句与流程控制，学会了运用条件语句、循环语句和跳转语句编写更具逻辑性和交互性的代码，这让我们能够驾驭更复杂的编程场景，使程序的执行流程更加灵活多变。

第三天，我们深入探索了JavaScript函数，从函数的基础知识到多种定义方式，再到作用域与闭包等重要概念，通过实际案例与练习，深刻理解了函数在代码复用、模块化编程中的核心作用。

这些知识为我们后续深入学习JavaScript的高级特性，如事件驱动编程、DOM操作以及异步编程等，奠定了坚实的基础，助力我们在JavaScript的编程世界中不断前行，构建更加复杂和高效的Web应用。

第一天：初识JavaScript及基础语法

1. JavaScript简介
JavaScript是一种直译式脚本语言，主要用来为HTML和网页添加交互效果，让静态的页面变得生动活泼，能够响应用户的各种操作。它具有跨平台特性，可以在不同的操作系统和浏览器上运行，这使得它成为了Web开发中不可或缺的一部分。
2. 引入JS文件的方式
使用script标签的src属性：这是最常用的方式，通过在HTML文件中使用script标签的src属性来指定JavaScript文件的路径。

<script src="js/script.js">script>

使用script标签的type属性：虽然在HTML5中已经不是必须，但在某些情况下，可以指定JavaScript文件的类型。

<script type="text/javascript" src="js/script.js">script>

使用script标签的async和defer属性：这两个属性用于控制JavaScript文件的加载和执行时机。
async属性：脚本文件的加载是异步的，不会阻塞页面的渲染，加载完成后立即执行。

<script async src="js/script.js">script>

defer属性：脚本文件的加载是异步的，但执行会被延迟到文档解析完成后进行。

<script defer src="js/script.js">script>

使用script标签的charset属性：用于指定JavaScript文件的字符编码，确保浏览器能够正确解析文件中的字符。

<script src="js/script.js" charset="UTF-8">script>

使用import语句（ES6模块）：适用于将代码分割成多个模块，然后在需要的地方进行引入。

<script type="module">
    import { functionName } from './js/module.js';
    functionName();
script>

使用document.createElement动态创建script标签：在JavaScript代码中动态地引入其他JavaScript文件。

function loadScript(url, callback) {
    let script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = url;
    script.onload = function () {
        callback();
    };
    document.head.appendChild(script);
}
loadScript('js/script.js', function () {
    console.log('JS文件加载完成！');
});

使用fetch和eval动态加载和执行JS代码：通过fetch获取JavaScript代码字符串，然后使用eval来执行它，但这种方式不推荐使用。

fetch('js/script.js')
    .then(response => response.text())
    .then(code => {
        eval(code);
    })
    .catch(error => {
        console.error('加载JS文件出错:', error);
    });

3. 基本语法
输出语句：console.log()是JavaScript中常用的输出语句，用于在控制台打印各种类型的信息，方便调试和查看结果。除了console.log()，还有console.warn()、console.error()、console.info()等。

console.log("这是一个普通信息输出");
console.warn("这是一个警告信息");
console.error("这是一个错误信息");
console.info("这是一个提示信息");

变量声明： 在JavaScript中，可以使用var、let和const来声明变量。
1.var声明的变量具有函数作用域，可以在函数内部或外部声明，但在函数内部声明时，变量在函数的任何位置都可以访问。
2.let声明的变量具有块作用域，仅在大括号{}内有效，更符合现代编程中对变量作用域的严格控制需求。
3.const用于声明常量，一旦赋值不可更改，同样具有块作用域，适用于定义一些固定不变的值。

var name = "张三"; // 函数作用域变量
let age = 18; // 块作用域变量
const PI = 3.14; // 常量，不可更改

function test() {
    if (true) {
        var localVar = "局部var变量"; // 在整个函数范围内有效
        let blockVar = "块级let变量"; // 仅在if块内有效
        const blockConst = "块级const常量"; // 仅在if块内有效
    }
    console.log(localVar); // 可以访问
    // console.log(blockVar); // 会报错，blockVar不在当前作用域
}
test();

**数据类型：**JavaScript中有多种数据类型，分为基本数据类型和引用数据类型。
基本数据类型string（字符串）、number（数字）、boolean（布尔值）、null（空值）、undefined（未定义）和symbol（ES6新增的唯一值类型）。
引用数据类型object（对象）和array（数组），它们存储的是复杂的数据结构。

let str = "这是一个字符串";
let num = 123.45;
let flag = true;
let obj = { name: "张三", age: 18 };
let arr = [1, "two", true, { name: "张三" }, [4, 5]];

console.log(typeof str); // 输出 "string"
console.log(typeof num); // 输出 "number"
console.log(typeof flag); // 输出 "boolean"
console.log(typeof obj); // 输出 "object"
console.log(typeof arr); // 输出 "object"，因为数组也是对象的一种

运算符：JavaScript中的运算符包括算术运算符、比较运算符和逻辑运算符等。
算术运算符：+（加）、-（减）、*（乘）、/（除）、%（取余）、++（自增）、–（自减）。
比较运算符：== （等于）、!=（不等于）、（严格等于===）、!==（严格不等于）、>（大于）、<（小于）、>=（大于等于）、<=（小于等于）。
逻辑运算符：&&（与）、||（或）、!（非）。

let a = 10;
let b = 20;
console.log(a + b); // 30，加法运算
console.log(a > b); // false，比较运算
console.log(!(a > b)); // true，逻辑非运算

let c = 5;
c++; // c变为6，自增运算
console.log(c % 2); // 0，取余运算

let d = "10";
console.log(a == d); // true，因为进行了类型转换
console.log(a === d); // false，因为类型不同，严格等于比较

第二天：JavaScript语句与流程控制

1. 条件语句
if语句：用于判断一个条件是否成立，如果成立则执行相应的代码块。

let score = 85;
if (score >= 60) {
    console.log("考试及格");
}

if...else语句：当需要在条件成立和不成立时分别执行不同的代码块时使用。

let score = 55;
if (score >= 60) {
    console.log("考试及格");
} else {
    console.log("考试不及格");
}

if...else if...else语句：用于多个条件的判断，一旦某个条件满足，执行对应代码块后不再检查后续条件。

let score = 75;
if (score >= 90) {
    console.log("成绩优秀");
} else if (score >= 75) {
    console.log("成绩良好");
} else if (score >= 60) {
    console.log("成绩及格");
} else {
    console.log("成绩不及格");
}

switch语句：根据一个表达式的值从多个选项中选择一个执行，适用于多个具体值的判断。

let day = 3;
switch (day) {
    case 1:
        console.log("星期一");
        break;
    case 2:
        console.log("星期二");
        break;
    case 3:
        console.log("星期三");
        break;
    case 4:
        console.log("星期四");
        break;
    case 5:
        console.log("星期五");
        break;
    case 6:
        console.log("星期六");
        break;
    case 7:
        console.log("星期日");
        break;
    default:
        console.log("无效的天数");
}

2. 循环语句
for循环：适用于已知循环次数的情况，语法包括初始化表达式、条件表达式和更新表达式。

// 输出1到5
for (let i = 1; i <= 5; i++) {
    console.log(i);
}

while循环：在循环条件成立时重复执行循环体，适用于循环次数不确定的情况。

let count = 1;
while (count <= 7) {
    console.log(count);
    count++;
}

do...while循环：至少执行一次循环体，然后在条件成立时继续循环。

let count = 1;
do {
    console.log(count);
    count++;
} while (count <= 5);

for...in循环：用于遍历对象的可枚举属性。

let person = { name: "张三", age: 18, address: "北京市朝阳区" };
for (let key in person) {
    console.log(key + ": " + person[key]);
}

for...of循环：用于遍历可迭代对象（如数组、字符串等）。

let fruits = ["苹果", "香蕉", "橙子"];
for (let fruit of fruits) {
    console.log(fruit);
}

3. 跳转语句
break语句：终止循环或switch语句的执行，跳出整个结构。

for (let i = 1; i <= 10; i++) {
    if (i === 5) {
        break;
    }
    console.log(i);
}

continue语句：跳过当前循环的剩余代码，直接开始下一次循环。

for (let i = 1; i <= 10; i++) {
    if (i % 2 === 0) {
        continue;
    }
    console.log(i);
}

return语句：从函数中返回一个值，并终止函数的执行。

function multiply(a, b) {
    if (typeof a !== "number" || typeof b !== "number") {
        return "参数类型错误";
    }
    return a * b;
}
console.log(multiply(3, 4)); // 输出 12
console.log(multiply("3", 4)); // 输出 "参数类型错误"

第三天：深入探索JavaScript函数

1. 函数的基础知识
函数的定义与调用：函数是一段可以重复使用的代码块，用于执行特定的任务。定义函数可以使用function关键字，语法如下：

function 函数名(参数1, 参数2, ..., 参数n) {
    // 函数体
    // 执行的代码块
    // 可选的return语句
}

定义函数后，通过调用函数来执行其中的代码，调用函数的语法很简单，只需写上函数名并传入相应的参数即可：

函数名(实参1, 实参2, ..., 实参n);

函数的参数：函数的参数是函数定义中括号内的变量，用于接收调用函数时传入的值。参数可以有多个，多个参数之间用逗号分隔。在函数内部，我们可以通过参数名来访问传入的值。

function add(a, b) {
    return a + b;
}
console.log(add(3, 5)); // 输出 8

函数的返回值：函数可以通过return语句返回一个值，这个值可以是数字、字符串、布尔值、对象等任意类型的数据。return语句的作用是将函数的执行结果返回给调用者，并且一旦执行return语句，函数就会立即终止执行，不再继续后面的代码。

function multiply(a, b) {
    return a * b;
}
let result = multiply(4, 6);
console.log(result); // 输出 24

2. 函数的多种定义方式
函数声明：使用function关键字后跟函数名、参数和函数体来定义函数。函数声明在代码执行前会被解析，因此可以在函数定义之前调用它，这被称为“函数提升”。

sayHello(); // 正常输出 "Hello!"
function sayHello() {
    console.log("Hello!");
}

函数表达式：将函数作为表达式的一部分来定义，通常将函数赋值给一个变量。与函数声明不同，函数表达式不会被提升，因此必须在定义之后才能调用。

let greet = function() {
    console.log("Hi there!");
};
greet(); // 正常输出 "Hi there!"

箭头函数：ES6（ECMAScript 2015）引入的一种新的函数定义方式，它提供了更简洁的语法，并且在某些情况下具有不同的this绑定行为。

let square = (x) => {
    return x * x;
};
console.log(square(5)); // 输出 25

当函数只有一个参数时，可以省略括号；如果函数体只有一条语句且返回该语句的结果，还可以省略大括号和return关键字：

let double = x => x * 2;
console.log(double(7)); // 输出 14

3. 函数的作用域与闭包
全局作用域与局部作用域：在函数外部定义的变量具有全局作用域，可以在任何地方访问；在函数内部定义的变量具有局部作用域，只在该函数内部有效。

let globalVar = "I'm global";
function testScope() {
    let localVar = "I'm local";
    console.log(globalVar); // 可以访问全局变量
    console.log(localVar);  // 可以访问局部变量
}
testScope();
console.log(globalVar); // 可以访问全局变量
console.log(localVar);  // 报错：localVar未定义

闭包：闭包是JavaScript中一个强大的特性，它允许一个函数访问其所在词法作用域中的变量，即使该函数在不同的作用域中被调用。

function outer() {
    let count = 0;
    return function() {
        count++;
        console.log(count);
    };
}
let innerFunc = outer();
innerFunc(); // 输出 1
innerFunc(); // 输出 2
innerFunc(); // 输出 3

总结

前三天的学习，我们从初识JavaScript到掌握其基础语法，再到深入学习语句与流程控制以及函数的多种用法，逐步构建了JavaScript编程的基础知识体系。通过实际的代码示例和案例练习，我们不仅理解了各个知识点的理论概念，还学会了如何将它们应用到实际的编程场景中，编写出更具逻辑性和交互性的代码。

在接下来的学习中，我们将继续探索JavaScript的更多高级特性，如事件驱动编程、DOM操作以及异步编程等。这些知识点将帮助我们构建更加复杂和高效的Web应用。希望这篇详细的总结能够为正在学习JavaScript的朋友们提供清晰的指引和实用的参考，让大家在JS的学习之路上稳步前行。如果在学习过程中遇到任何问题或有进一步的探讨想法，欢迎随时交流，共同成长。