Hi，这是一篇关于JS基础知识的笔记

摘要

JavaScript（简称JS） 是一种广泛应用于Web开发的脚本语言，用于给网页添加动态功能和交互性。本篇笔记介绍了JavaScript的基础知识，包括语法、数据类型、运算符、条件语句、循环语句和函数等方面的内容。它涵盖了JavaScript开发中必须掌握的核心概念和技巧。通过学习JavaScript的语法和基本数据类型，您可以开始编写简单的脚本并理解变量的使用。

本篇笔记还介绍了函数的定义和调用，以及如何利用函数实现复杂的计算和任务。在条件语句和循环语句部分，我们探讨了如何根据不同的条件执行不同的操作以及如何使用循环重复执行特定的代码块。除此之外，我们还提到了运算符、DOM操作和其他重要概念，如作用域、闭包、异步编程、面向对象编程和错误处理等。通过掌握这些基础知识和概念，您将能够更加熟练地使用JavaScript开发动态和交互性的Web应用程序。

语法（Syntax）

1.变量（Variables）：使用var、let或const关键字声明变量，如：

var age = 25;
let name = "John";
const PI = 3.14;

2.数据类型（Data Types）：包括数字（Number）、字符串（String）、布尔值（Boolean）、数组（Array）、对象（Object）等，如：

let num = 10;
let str = "Hello";
let bool = true;
let arr = [1, 2, 3];
let obj = { name: "John", age: 25 };

3.函数（Functions）：使用function关键字定义函数，如：

function sayHello() {
  console.log("Hello!");
}

4.条件语句（Conditional Statements）：使用if、else if和else关键字进行条件判断，如

if (age < 18) {
  console.log("未成年");
} else if (age >= 18 && age < 60) {
  console.log("成年人");
} else {
  console.log("老年人");
}

5. 循环语句（Loop Statements）：使用for、while或do-while关键字进行循环操作，如：

for (let i = 0; i < 5; i++) {
  console.log(i);
}

运算符（Operators）

1. 算术运算符：包括加法（+）、减法（-）、乘法（*）、除法（/）和取余（%），如：

let a = 10;
let b = 5;
let sum = a + b; // 15
let product = a * b; // 50

2.比较运算符：用于比较两个值的大小关系，返回布尔值（true或false），如：

let x = 5;
let y = 10;
console.log(x < y); // true
console.log(x === y); // false

2.比较运算符：用于比较两个值的大小关系，返回布尔值（true或false），如：

let x = 5;
let y = 10;
console.log(x < y); // true
console.log(x === y); // false

3. 逻辑运算符：用于组合多个条件，包括与（&&）、或（||）和非（!），如：

let age = 20;
let hasLicense = true;
if (age >= 18 && hasLicense) {
  console.log("可以驾驶车辆");
}

4. 赋值运算符：用于给变量赋值，包括简单赋值（=）、加等于（+=）、减等于（-=）等，如：

let num = 5;
num += 10; // num的值变为15

函数（Functions）

1. 函数定义和调用：使用function关键字定义函数，使用函数名调用函数，如：

function sayHello() {
  console.log("Hello!");
}

sayHello(); // 调用函数，输出 "Hello!"

2. 函数参数和返回值：函数可以接受参数并返回值，如：

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

let sum = addNumbers(5, 10); // 调用函数并将返回值赋给变量sum
console.log(sum); // 输出15

3. 匿名函数（Anonymous Functions）：可以将函数赋值给变量，如：

let multiply = function(a, b) {
  return a * b;
};

let product = multiply(3, 4);
console.log(product); // 输出12

4. 回调函数（Callback Functions）：将函数作为参数传递给另一个函数，如：

function calculate(num1, num2, operation) {
  return operation(num1, num2);
}

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

let result = calculate(5, 3, add);
console.log(result); // 输出8

DOM操作（DOM Manipulation）

JavaScript可以通过操作DOM（文档对象模型）来实现对网页元素的动态控制和修改。

1. 获取元素：使用document对象的方法获取元素，如：

let element = document.getElementById("myElement");

2. 修改元素内容：使用innerHTML属性修改元素的HTML内容，如：

element.innerHTML = "新的内容";

3. 添加和移除CSS类：使用classList属性添加或移除元素的CSS类，如：

element.classList.add("newClass");
element.classList.remove("oldClass");

4. 监听事件：使用addEventListener方法监听事件，并定义事件处理函数，如：

element.addEventListener("click", function() {
  console.log("点击事件触发");
});

作用域和闭包（Scope and Closure）

1. 作用域定义了变量的可访问范围。JavaScript中有全局作用域和函数作用域。在函数内部声明的变量只在函数内部可见。

2. 闭包是指函数可以访问其词法作用域之外的变量。通过闭包，函数可以保留对外部变量的引用，即使外部函数已经执行完毕。

异步编程（Asynchronous Programming）

1.JavaScript使用事件循环机制处理异步任务。通过回调函数、Promise和async/await等方式实现异步编程。

2.回调函数是一种常见的处理异步操作的方式。在异步任务完成后，调用回调函数进行处理。

面向对象编程（Object-Oriented Programming）

1.JavaScript支持面向对象编程的特性，包括封装、继承和多态。

2.使用构造函数和原型来创建和定义对象，并通过原型链实现继承关系。

错误处理（Error Handling）

1.JavaScript提供了try-catch语句来捕获和处理异常。在try块中执行可能出现错误的代码，并在catch块中处理异常情况。

2. 可以使用throw语句手动抛出异常，以便在代码中明确指定错误情况。

模块化（Modularity）

1.模块化是一种将代码分割成可重用部分的方法。使用模块可以提高代码的可维护性和可扩展性。

2.ES6引入了模块化的概念，使用import和export关键字来导入和导出模块。

浏览器对象模型（Browser Object Model）

1. 浏览器对象模型（BOM）提供了与浏览器窗口进行交互的能力。例如，操作浏览器历史记录、修改URL等。

2.BOM还提供了访问和操作浏览器窗口中文档的能力，如修改元素样式、监听事件等。

写在最后

JavaScript是一门功能强大且广泛应用于Web开发的脚本语言。通过掌握基础知识和理解其他重要概念，您将能够构建交互性强、功能丰富的Web应用程序。继续学习和实践，探索JavaScript的更多高级概念和技巧，将使您成为一名更加熟练的JavaScript开发者。

JS基础知识|青训营笔记