JavaScript 基础知识

学习 JavaScript（简称 JS）是前端开发的重要组成部分，它是一种动态的、弱类型的脚本语言，用于实现网页的交互功能。以下是学习 JavaScript 过程中需要掌握的基本概念、符号和对应的意义。

1. JavaScript 基本语法

• 语句和分号

  • 语句是 JavaScript 程序的基本单位。每个语句通常以分号（;）结束，但在许多情况下，分号可以省略。
  • 示例：let x = 5;

• 注释

  • 单行注释：以 // 开头。

    // 这是一个单行注释
    

  • 多行注释：以 /* 开头，以 */ 结束。

    /*这是一个多行注释
    */
    

2. 变量和常量

• 变量声明
  • var：声明一个变量（不推荐使用，可能引发作用域问题）。
  • let：声明一个块级作用域的变量（推荐使用）。
  • const：声明一个块级作用域的常量，一旦赋值不能再改变。
  • 示例：

    var a = 10;
    let b = 20;
    const c = 30;
    

3. 数据类型

• 基本数据类型

  • Number：数字类型。

    let num = 42;
    

  • String：字符串类型。

    let str = "Hello, world!";
    

  • Boolean：布尔类型。

    let isTrue = true;
    

  • Undefined：未定义类型。

    let undef;
    

  • Null：空值类型。

    let empty = null;
    

• 复合数据类型

  • Object：对象类型。

    let obj = { name: "Alice", age: 25 };
    

  • Array：数组类型。

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

  • Function：函数类型。

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

4. 运算符

• 算术运算符

  • +：加法。
  • -：减法。
  • *：乘法。
  • /：除法。
  • %：取模。
  • ++：自增。
  • --：自减。
  • 示例：

    let x = 10;
    let y = x + 5; // 15
    

• 赋值运算符

  • =：赋值。
  • +=：加赋值。
  • -=：减赋值。
  • *=：乘赋值。
  • /=：除赋值。
  • %=：模赋值。
  • 示例：

    let x = 10;
    x += 5; // x 现在是 15
    

• 比较运算符

  • ==：相等。
  • !=：不等。
  • ===：严格相等（值和类型都相等）。
  • !==：严格不等（值和类型都不相等）。
  • >：大于。
  • <：小于。
  • >=：大于或等于。
  • <=：小于或等于。
  • 示例：

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

• 逻辑运算符

  • &&：与。
  • ||：或。
  • !：非。
  • 示例：

    let x = true;
    let y = false;
    console.log(x && y); // false
    

5. 控制结构

• 条件语句

  • if 语句

    if (condition) {// 执行代码块
    }
    

  • if...else 语句

    if (condition) {// 执行代码块
    } else {// 执行代码块
    }
    

  • if...else if...else 语句

    if (condition1) {// 执行代码块
    } else if (condition2) {// 执行代码块
    } else {// 执行代码块
    }
    

• 循环语句

  • for 循环

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

  • while 循环

    let i = 0;
    while (i < 10) {console.log(i);i++;
    }
    

  • do...while 循环

    let i = 0;
    do {console.log(i);i++;
    } while (i < 10);
    

• switch 语句

  let x = 2;
  switch (x) {case 1:console.log("One");break;case 2:console.log("Two");break;default:console.log("Other");break;
  }
  

6. 函数

• 函数声明

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

• 函数表达式

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

• 箭头函数

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

7. 对象

• 创建对象

  let person = {name: "John",age: 30,greet: function() {console.log("Hello, " + this.name);}
  };
  

• 访问对象属性

  console.log(person.name); // John
  console.log(person["age"]); // 30
  

• 修改对象属性

  person.name = "Jane";
  

8. 数组

• 创建数组

  let numbers = [1, 2, 3, 4, 5];
  

• 访问数组元素

  console.log(numbers[0]); // 1
  

• 数组方法

  • push：在数组末尾添加一个元素。

    numbers.push(6);
    

  • pop：移除数组末尾的元素。

    numbers.pop();
    

  • shift：移除数组第一个元素。

    numbers.shift();
    

  • unshift：在数组开头添加一个元素。

    numbers.unshift(0);
    

  • forEach：对数组的每个元素执行一次提供的函数。

    numbers.forEach(function(number) {console.log(number);
    });
    

9. 事件处理

• 添加事件监听

  document.getElementById("myButton").addEventListener("click", function() {alert("Button clicked!");
  });
  

• 移除事件监听

  function clickHandler() {alert("Button clicked!");
  }
  document.getElementById("myButton").addEventListener("click", clickHandler);
  document.getElementById("myButton").removeEventListener("click", clickHandler);
  

10. DOM 操作

• 选择元素

  • getElementById

    document.getElementById("myElement");
    

  • getElementsByClassName

    document.getElementsByClassName("myClass");
    

  • querySelector

    document.querySelector(".myClass");
    

• 修改元素内容

  document.getElementById("myElement").innerText = "New content";
  document.getElementById("myElement").innerHTML = "<b>New content</b>";
  

• 修改元素样式

  document.getElementById("myElement").style.color = "red";
  

• 创建和添加元素

  let newElement = document.createElement("div");
  newElement.innerText = "Hello, World!";
  document.body.appendChild(newElement);
  ``