一、核心语法与数据类型（重点掌握）

1. 变量声明方式

var legacyVar = "ES5方式";   // 函数作用域（已过时）
let count = 0;              // 块级作用域（可重新赋值）
const MAX_SIZE = 100;       // 块级作用域（不可重新赋值）

2. 数据类型体系

3. 类型转换规则

// 显式转换 
Number("123")   // 123 
String(true)    // "true"
Boolean(0)      // false 
 
// 隐式转换 
"5" + 2         // "52"（字符串拼接）
"5" - 2         // 3（数值运算）

二、函数与作用域（关键机制）

1. 函数定义方式

// 函数声明（会提升）
function sum(a, b) { return a + b }
 
// 函数表达式 
const multiply = function(a, b) { return a * b }
 
// 箭头函数（无this绑定）
const divide = (a, b) => a / b 

2. 作用域链与闭包

function outer() {
  let x = 10;
  return function inner() {
    console.log(x); // 访问外部作用域变量 
  };
}
const closure = outer();
closure(); // 10 

三、流程控制结构（基础逻辑）

1. 条件分支

// if-else 
if (score > 90) {
  grade = 'A';
} else if (score > 60) {
  grade = 'B';
} else {
  grade = 'C';
}
 
// switch-case 
switch(new Date().getDay()) {
  case 0: day = "周日"; break;
  case 1: day = "周一"; break;
  // ...其他情况 
}

2. 循环迭代

// for循环 
for (let i = 0; i < 5; i++) {
  console.log(i);
}
 
// for...of遍历数组 
const arr = [10, 20, 30];
for (const num of arr) {
  console.log(num);
}
 
// while循环 
let n = 3;
while (n > 0) {
  console.log(n--);
}

四、DOM基础操作（浏览器交互核心）

1. 元素选择与操作

// 选择元素 
const btn = document.getElementById('submit');
const items = document.querySelectorAll('.list-item');
 
// 修改内容 
document.querySelector('.title').textContent = "新标题";
 
// 样式操作 
element.style.backgroundColor = "#f0f";
element.classList.add('active');

2. 事件监听机制

// 添加点击事件 
btn.addEventListener('click', function(e) {
  console.log('按钮被点击', e.target);
});
 
// 事件委托示例 
document.querySelector('ul').addEventListener('click', function(e) {
  if (e.target.tagName === 'LI') {
    e.target.classList.toggle('selected');
  }
});

五、注意事项与实用技巧

1. 变量提升陷阱：var声明的变量会提升到作用域顶部，但赋值不会提升
2. 严格相等判断：优先使用===代替==（避免隐式类型转换）
3. 数组基础操作：

   arr.push()/pop()      // 尾部增删 
   arr.unshift()/shift() // 头部增删 
   arr.slice(start, end) // 截取子数组 
   

4. JSON转换：

   JSON.stringify(obj)   // 对象转JSON字符串 
   JSON.parse(jsonStr)   // 解析JSON字符串 
   

学习建议

1. 实践工具：在或JSFiddle实时编写代码
2. 调试技巧：掌握Chrome DevTools的断点调试与Console测试
3. 文档查询：遇到问题优先查阅
4. 习题巩固：通过强化记忆

建议每天练习30分钟代码，从修改DOM元素颜色开始，逐步过渡到制作简单计算器项目。

下面是JavaScript知识体系设计的阶梯式训练题库，包含基础练习与进阶挑战，题目按照知识模块分类并标注难度星级（★基础 ★★进阶 ★★★挑战）：

（1）基础语法训练

1. 变量与类型转换

// 问题1：预测输出并解释原理（★）
console.log(1 + "2" * 3); 
 
// 问题2：修复代码使其正确判断类型（★★）
function checkType(val) {
  return typeof val === 'array' ? 'Array' : 'Not Array';
}
console.log(checkType([1,2,3])); // 预期输出'Array'

2. 作用域与闭包

// 问题3：解释下列代码输出差异（★★★）
function testClosure() {
  var funcs = [];
  for (var i = 0; i < 3; i++) {
    funcs.push(() => console.log(i));
  }
  return funcs;
}
testClosure().forEach(fn => fn()); // 输出什么？如何修正？

（2）、DOM编程实战

3. 动态表格生成

// 问题4：根据数据生成可排序表格（★★）
const data = [
  { name: "Alice", age: 28 },
  { name: "Bob", age: 32 }
];
// 要求：点击表头可排序，年龄列高亮>30的值 

4. 事件委托优化

// 问题5：优化下列事件监听器（★★★）
document.querySelectorAll('.item').forEach(item => {
  item.addEventListener('click', () => {
    item.classList.toggle('active');
  });
});
// 要求：改为事件委托模式，支持动态新增元素 

（3）、函数与算法

5. 高阶函数应用

// 问题6：实现函数记忆化（Memoization）（★★★）
function fibonacci(n) { /* 原始函数 */ }
// 要求：创建高阶函数memoize优化递归性能 

6. 数组操作链式编程

// 问题7：转换数据格式（★★）
const input = [
  { id: 1, tags: ['a','b'] },
  { id: 2, tags: ['c'] }
];
// 目标输出：['a','b','c']（去重且字母逆序）

（4）、异步编程挑战

7. Promise流程控制

// 问题8：实现并行请求与错误重试（★★★）
const apis = ['/api1', '/api2', '/api3'];
// 要求：并行请求，单次失败自动重试1次，全部完成后返回结果数组 

8. Async/Await重构

// 问题9：将下列回调代码改为Async/Await（★★）
function fetchData(callback) {
  fetch('/data')
    .then(res => res.json())
    .then(data => callback(null, data))
    .catch(callback);
}

（5）、综合项目题

9. 购物车模块开发（★★★★）

// 要求实现：
// 1. 商品添加/删除/数量修改 
// 2. 自动计算总价（满减优惠）
// 3. 本地存储持久化 
// 4. 批量勾选结算功能 

10. 可视化排序算法（★★★★★）

// 要求实现：
// 1. 柱状图动态展示冒泡/快排过程 
// 2. 速度控制与暂停/继续功能 
// 3. 不同算法性能对比面板 

训练建议与资源

1. 分阶段突破：

   • 新手：完成★～★★题目（预计8小时）
   • 进阶：攻克★★★题目（预计12小时）
   • 高手：尝试综合项目（预计20小时）

2. 调试工具：

   • 使用console.table()可视化数据结构
   • Chrome Performance面板分析函数耗时
   • Lodash库的_.cloneDeep处理深拷贝问题

建议每天选择2-3题进行深度练习，配合git commit记录解题过程，复杂问题可使用Mermaid流程图辅助设计算法逻辑。

————————————————

​最后我们放松一下眼睛