JavaScript全阶语法学习手册

入门级

从零搭建JavaScript基础

这部分是所有JavaScript语法的底层积木，必须先完全掌握才能往下推进。

第一个JavaScript程序

在HTML中直接嵌入JavaScript代码，实现最基础的页面输出效果。

<!DOCTYPE html>

<html>

<body>

  <h1>我的第一个JavaScript页面</h1>

  <script>

    // 在控制台输出内容

    console.log("Hello, JavaScript!");

    // 直接在页面输出内容

    document.write("欢迎来到JavaScript的世界！");

  </script>

</body>

</html>

变量声明与基础数据类型

掌握var、let、const三种变量声明方式，以及数字、字符串、布尔值等基础数据类型。

<script>

  // 声明变量

  let name = "张三";

  const age = 20;

  let isStudent = true;

  // 输出变量类型

  console.log(typeof name); // 输出string

  console.log(typeof age); // 输出number

  console.log(typeof isStudent); // 输出boolean

</script>

基础运算符

掌握算术运算符、比较运算符、赋值运算符等最基础的运算规则。

<script>

  let a = 10;

  let 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); // true 大于比较

  console.log(a === b); // false 全等比较

</script>

基础级

系统掌握核心语法规则

这部分是JavaScript的核心骨架，覆盖日常开发90%的基础语法场景。

流程控制语句

掌握if条件判断、for循环、while循环等流程控制语法。

<script>

  // 条件判断

  let score = 85;

  if (score >= 60) {

    console.log("及格了");

  } else {

    console.log("不及格");

  }

  // for循环输出1到10

  for(let i = 1; i <= 10; i++) {

    console.log(i);

  }

</script>

函数基础

掌握函数的定义、调用、参数传递和返回值用法。

<script>

  // 定义求和函数

  function add(a, b) {

    return a + b;

  }

  // 调用函数

  let result = add(5, 3);

  console.log(result); // 输出8

</script>

数组与对象基础

掌握数组的基础操作和对象的属性访问语法。

<script>

  // 数组操作

  let fruits = ["苹果", "香蕉", "橙子"];

  console.log(fruits[0]); // 输出苹果

  fruits.push("葡萄"); // 向数组末尾添加元素

  // 对象定义

  let person = {

    name: "李四",

    age: 25,

    sayHello: function() {

      console.log("你好，我是" + this.name);

    }

  };

  person.sayHello(); // 调用对象方法

</script>

进阶级

突破核心高级语法难点

这部分是区分"基础使用者"和"熟练开发者"的关键，覆盖DOM操作、事件处理等核心开发技能。

DOM基础操作

通过JavaScript获取页面元素，修改元素内容和样式。

<!DOCTYPE html>

<html>

<body>

  <p id="demo">这是一段原始文本</p>

  <button onclick="changeText()">点击修改文本</button>

  <script>

    function changeText() {

      // 获取页面元素

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

      // 修改元素内容

      element.innerHTML = "文本已经被JavaScript修改了！";

      // 修改元素样式

      element.style.color = "red";

    }

  </script>

</body>

</html>

事件处理

掌握点击事件、表单事件等常见页面交互的处理方式。

<!DOCTYPE html>

<html>

<body>

  <input type="text" id="username" placeholder="请输入用户名">

  <button id="submitBtn">提交</button>

  <script>

    let btn = document.getElementById("submitBtn");

    // 绑定点击事件

    btn.addEventListener("click", function() {

      let username = document.getElementById("username").value;

      alert("你输入的用户名是：" + username);

    });

  </script>

</body>

</html>

数组高级方法

掌握map、filter、forEach等常用的数组高阶方法。

<script>

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

  // map方法：对每个元素进行转换

  let doubled = numbers.map(item => item * 2);

  console.log(doubled); // [2,4,6,8,10]

  // filter方法：过滤符合条件的元素

  let evenNumbers = numbers.filter(item => item % 2 === 0);

  console.log(evenNumbers); // [2,4]

</script>

高级级

精通ES6+新特性

这部分是现代前端开发的核心，覆盖ES6及之后的所有主流新语法特性。

箭头函数与模板字符串

掌握ES6新增的箭头函数简写和模板字符串语法。

<script>

  // 箭头函数

  const sayHello = name => `你好，${name}！`;

  console.log(sayHello("王五")); // 输出"你好，王五！"

  // 模板字符串支持多行文本

  const multiLine = `

    这是第一行

    这是第二行

    这是第三行

  `;

  console.log(multiLine);

</script>

解构赋值

从Hello World到前端高手的完整JavaScript体系

从零搭建JavaScript基础

系统掌握核心语法规则

突破核心高级语法难点

精通ES6+新特性