3、JavaScript 基础知识

JavaScript 基础知识

1. 变量声明

• var: 具有函数作用域或全局作用域。
• let: 具有块级作用域。
• const: 具有块级作用域且值不可改变。

Javascript
深色版本
// 使用 var 声明变量
var message = "Hello, world!";
console.log(message); // 输出: Hello, world!

// 使用 let 声明变量
let number = 42;
number = 84; // 可以重新赋值
console.log(number); // 输出: 84

// 使用 const 声明常量
const pi = 3.14;
// pi = 3.14159; // 尝试重新赋值会抛出错误
console.log(pi); // 输出: 3.14

2. 数据类型

JavaScript 支持多种数据类型，包括原始类型和引用类型。

• 原始类型：

  • String
  • Number
  • Boolean
  • Null
  • Undefined
  • Symbol (ES6 新增)
  • BigInt (ES10 新增)

• 引用类型：

  • Object
  • Array
  • Function
  • Date
  • RegExp

Javascript
深色版本
// 原始类型示例
let greeting = "Hello"; // String
let age = 25;           // Number
let isTrue = true;      // Boolean
let symbol = Symbol();  // Symbol
let bigInt = 1234567890123456789012345n; // BigInt

// 引用类型示例
let person = {
  name: "Alice",
  age: 30
};
console.log(person.name); // 输出: Alice

// 数组
let numbers = [1, 2, 3, 4, 5];
console.log(numbers[2]); // 输出: 3

3. 函数声明和调用

• 普通函数
• 箭头函数

Javascript
深色版本
// 普通函数
function greet(name) {
  console.log(`Hello, ${name}!`);
}

greet("Bob"); // 输出: Hello, Bob!

// 箭头函数
const add = (a, b) => a + b;
console.log(add(10, 5)); // 输出: 15

4. 控制流

• 条件语句 (if, else if, else)
• 循环 (for, while, do...while)
• 开关语句 (switch)

Javascript
深色版本
// 条件语句
let temperature = 22;
if (temperature > 30) {
  console.log("It's hot outside.");
} else if (temperature > 20) {
  console.log("The weather is nice.");
} else {
  console.log("It's cold today.");
}

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

// 开关语句
let day = "Monday";
switch (day) {
  case "Monday":
    console.log("Today is Monday.");
    break;
  case "Tuesday":
    console.log("Today is Tuesday.");
    break;
  default:
    console.log("Not sure what day it is.");
}

5. 作用域和闭包

• 作用域链
• 闭包的应用与实现

Javascript
深色版本
// 作用域链示例
function outer() {
  let outerVar = "I'm outside!";
  function inner() {
    let innerVar = "I'm inside!";
    console.log(outerVar); // 可以访问外部变量
    console.log(innerVar); // 输出: I'm inside!
  }
  inner();
}
outer(); // 输出: I'm outside!

// 闭包示例
function createCounter() {
  let count = 0;
  return function() {
    count++;
    return count;
  };
}

const counter = createCounter();
console.log(counter()); // 输出: 1
console.log(counter()); // 输出: 2

6. 原型与原型链

• __proto__ 和 prototype
• 继承机制

Javascript
深色版本
// 原型链示例
function Person(name) {
  this.name = name;
}

Person.prototype.sayHello = function() {
  console.log(`Hello, my name is ${this.name}`);
};

const alice = new Person("Alice");
alice.sayHello(); // 输出: Hello, my name is Alice

// 继承示例
function Student(name, grade) {
  Person.call(this, name);
  this.grade = grade;
}

// 设置继承关系
Student.prototype = Object.create(Person.prototype);
Student.prototype.constructor = Student;

Student.prototype.study = function(subject) {
  console.log(`${this.name} is studying ${subject}`);
};

const bob = new Student("Bob", 10);
bob.sayHello(); // 继承了 sayHello 方法
bob.study("Math"); // 输出: Bob is studying Math

7. DOM 操作

• 选择元素 (document.querySelector, document.querySelectorAll)
• 修改元素 (element.textContent, element.style, element.classList)
• 事件处理 (addEventListener, removeEventListener)

Html
深色版本
<!-- HTML 示例 -->
<button id="myButton">Click me!</button>

Javascript
深色版本
// DOM 操作示例
document.addEventListener('DOMContentLoaded', function() {
  const button = document.getElementById('myButton');
  button.addEventListener('click', function() {
    alert('Button clicked!');
  });
});