JavaScript 从 0 基础到高级项目实战完整指南

一、JavaScript 是什么？

JavaScript（简称 JS）是一门运行在浏览器中的脚本语言，现在也能运行在服务端、移动端、桌面端。

它主要负责：

  • 页面交互
  • 数据处理
  • 动画效果
  • 网络请求
  • 前后端通信
  • 构建 Web 应用
  • 开发 Node.js 服务端

目前 JavaScript 已经是前端核心语言之一。

二、JavaScript 能做什么？

前端方向

  • 网站交互
  • 后台管理系统
  • H5 页面
  • 移动端页面
  • 数据可视化
  • 动画
  • 游戏

后端方向

通过 Node.js：

  • API 接口开发
  • SSR 服务端渲染
  • 文件处理
  • 数据库操作

桌面端

通过：

  • Electron
  • Tauri

开发桌面应用。

移动端

通过：

  • React Native
  • UniApp
  • Flutter（Dart）

开发 App。

三、JavaScript 学习路线（推荐）

第一阶段：基础入门

重点：

  • 变量
  • 数据类型
  • 运算符
  • 条件判断
  • 循环
  • 函数
  • 数组
  • 对象

目标：

能写基础交互逻辑。

第二阶段：DOM + BOM

重点：

  • 获取元素
  • 操作元素
  • 事件监听
  • 页面跳转
  • 本地存储

目标：

能开发动态网页。

第三阶段：ES6+

重点：

  • let / const
  • 箭头函数
  • 解构赋值
  • Promise
  • async/await
  • 模块化

目标：

进入现代前端开发。

第四阶段：高级 JavaScript

重点：

  • 原型
  • 原型链
  • this
  • 闭包
  • 作用域
  • 事件循环
  • 深拷贝
  • 防抖节流

目标：

能解决复杂业务问题。

第五阶段：项目实战

重点：

  • 封装
  • 模块化
  • 工程化
  • 网络请求
  • 状态管理
  • 性能优化

目标：

具备真实项目开发能力。

四、JavaScript 基础知识详解

1、变量

var（老版本）

// 使用 var 声明变量（老版本写法）
var name = "Tom";

问题：

  • 存在变量提升
  • 没有块级作用域

let（推荐）

// 使用 let 声明变量（推荐）
let age = 18;

特点：

  • 有块级作用域
  • 不允许重复声明

const（常量）

// const 用来声明常量
const PI = 3.14;

特点：

  • 不能重新赋值

2、数据类型

基本数据类型

String
Number
Boolean
Null
Undefined
Symbol
BigInt

引用数据类型

Object
Array
Function
Date

3、运算符

算术运算

+
-
*
/
%

比较运算

>
<
>=
<=
==
===

== 和 === 区别

// == 会自动转换数据类型
1 == "1"   // true

// === 不会转换数据类型，类型和值都必须相同
1 === "1"  // false

项目中推荐：

===

4、条件判断

if

// 定义年龄
let age = 20;

// 判断年龄是否大于等于18
if (age >= 18) {
  // 输出结果
  console.log("成年人");
}

switch

let day = 1;

switch(day){
  case 1:
    console.log("星期一");
    break;
}

5、循环

for

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

while

let i = 0;

while(i < 5){
  console.log(i);
  i++;
}

6、函数

普通函数

// 定义加法函数
function add(a, b){
  // 返回两个参数相加结果
  return a + b;
}

箭头函数

// 箭头函数写法
const add = (a, b) => a + b;

五、数组详细讲解

创建数组

// 创建数组
let arr = [1,2,3];

常用方法

push

// 往数组尾部添加元素
arr.push(4);

pop

arr.pop();

map

// 遍历数组并返回一个新数组
let newArr = arr.map(item => item * 2);

filter

let result = arr.filter(item => item > 2);

find

let item = arr.find(item => item.id === 1);

六、对象详细讲解

创建对象

// 创建对象
let user = {
  name: "Tom",
  age: 18
};

获取属性

console.log(user.name);
console.log(user["age"]);

修改属性

user.age = 20;

七、DOM 操作（重点）

DOM 是前端开发核心。

获取元素

// 通过 id 获取元素
document.getElementById("box");

document.querySelector(".box");

修改内容

// 修改元素内容
box.innerHTML = "Hello";

修改样式

box.style.color = "red";

八、事件监听

点击事件

// 给按钮添加点击事件
btn.addEventListener("click", function(){
  // 点击后执行
  console.log("点击了");
});

输入事件

input.addEventListener("input", function(e){
  console.log(e.target.value);
});

九、ES6 核心知识

模板字符串

let name = "Tom";
console.log(`你好 ${name}`);

解构赋值

let [a,b] = [1,2];

let {name, age} = user;

展开运算符

let arr = [...arr1, ...arr2];

Promise

// 创建 Promise 对象
const p = new Promise((resolve,reject)=>{
  // 异步成功时调用 resolve
  resolve("成功");
});

async/await

// async 函数用于处理异步
async function getData(){
  // await 等待异步请求结果
  const res = await fetch(url);
}

十、this 指向

普通函数

function test(){
  console.log(this);
}

浏览器中默认：

window

对象方法

const user = {
  name: "Tom",
  say(){
    console.log(this.name);
  }
}

十一、闭包（高级重点）

// 外层函数
function outer(){
  // 私有变量
  let count = 0;

  // 返回内部函数
  return function(){
    // 每次调用 count +1
    count++;

    // 输出 count
    console.log(count);
  }
}

// 接收返回函数
const fn = outer();

// 调用函数
fn();
fn();

应用：

  • 防抖
  • 节流
  • 缓存
  • 私有变量

十二、原型与原型链

function Person(name){
  this.name = name;
}

Person.prototype.say = function(){
  console.log("hello");
}

十三、事件循环 Event Loop

JavaScript 是单线程。

依靠：

  • 同步任务
  • 异步任务
  • 宏任务
  • 微任务

完成异步执行。

十四、防抖与节流

防抖 debounce

// 防抖函数
function debounce(fn, delay){
  // 定义定时器
  let timer = null;

  return function(){
    // 清除上一次定时器
    clearTimeout(timer);

    // 重新开启定时器
    timer = setTimeout(()=>{
      // 执行函数
      fn();
    }, delay);
  }
}

节流 throttle

// 节流函数
function throttle(fn, delay){
  // 开关变量
  let flag = true;

  return function(){
    // 如果开关关闭则直接返回
    if(!flag) return;

    // 关闭开关
    flag = false;

    setTimeout(()=>{
      // 执行函数
      fn();

      // 重新打开开关
      flag = true;
    }, delay);
  }
}

十五、深拷贝与浅拷贝

浅拷贝

Object.assign()

...

深拷贝

structuredClone(obj)

JSON.parse(JSON.stringify(obj))

十六、模块化开发

CommonJS

require
module.exports

ES Module

export
import

十七、JavaScript 常用方法大全（表格版）

字符串 String 常用方法

方法 参数 用途
charAt(index) index：索引 获取指定位置字符
includes(str) str：查找内容 判断是否包含某字符串
indexOf(str) str：查找内容 返回字符串首次出现位置
lastIndexOf(str) str：查找内容 返回最后一次出现位置
slice(start,end) start 开始位置；end 结束位置 截取字符串
substring(start,end) 起始索引、结束索引 截取字符串
replace(old,new) 被替换内容、新内容 替换字符串
replaceAll(old,new) 被替换内容、新内容 替换所有匹配内容
split(separator) 分隔符 字符串转数组
toUpperCase() 无 转大写
toLowerCase() 无 转小写
trim() 无 去除两端空格
startsWith(str) 判断字符串 是否以某字符串开头
endsWith(str) 判断字符串 是否以某字符串结尾

数组 Array 常用方法

方法 参数 用途
push(item) 添加元素 尾部添加元素
pop() 无 删除最后一个元素
shift() 无 删除第一个元素
unshift(item) 添加元素 头部添加元素
splice(index,num,item) 开始位置、删除数量、新元素 删除/插入/替换
slice(start,end) 开始、结束位置 截取数组
concat(arr) 数组 合并数组
join(str) 分隔符 数组转字符串
reverse() 无 数组反转
sort(fn) 排序函数 数组排序
includes(item) 查找元素 是否包含元素
indexOf(item) 查找元素 返回索引
find(fn) 回调函数 查找符合条件元素
findIndex(fn) 回调函数 查找索引
filter(fn) 回调函数 过滤数组
map(fn) 回调函数 返回新数组
forEach(fn) 回调函数 遍历数组
some(fn) 回调函数 是否有一个满足条件
every(fn) 回调函数 是否全部满足条件
reduce(fn,init) 回调函数、初始值 数组累计计算
flat(depth) 展开层级 数组扁平化

对象 Object 常用方法

方法 参数 用途
Object.keys(obj) 对象 获取所有 key
Object.values(obj) 对象 获取所有 value
Object.entries(obj) 对象 返回键值对数组
Object.assign(target,obj) 目标对象、源对象 合并对象
Object.freeze(obj) 对象 冻结对象
Object.seal(obj) 对象 密封对象
Object.hasOwn(obj,key) 对象、key 判断自身属性

Number 常用方法

方法 参数 用途
Number() 值 转数字
parseInt(str) 字符串 转整数
parseFloat(str) 字符串 转浮点数
isNaN(value) 值 判断是否 NaN
Number.isInteger(num) 数字 判断是否整数
toFixed(num) 保留位数 保留小数

Math 常用方法

方法 参数 用途
Math.random() 无 随机数
Math.floor(num) 数字 向下取整
Math.ceil(num) 数字 向上取整
Math.round(num) 数字 四舍五入
Math.max(a,b) 多个数字 最大值
Math.min(a,b) 多个数字 最小值
Math.abs(num) 数字 绝对值
Math.pow(a,b) 底数、指数 幂运算
Math.sqrt(num) 数字 开平方

Date 常用方法

方法 参数 用途
new Date() 无 创建日期对象
getFullYear() 无 获取年份
getMonth() 无 获取月份
getDate() 无 获取日期
getDay() 无 获取星期
getHours() 无 获取小时
getMinutes() 无 获取分钟
getSeconds() 无 获取秒
getTime() 无 获取时间戳

DOM 常用方法

方法 参数 用途
getElementById(id) id 获取元素
querySelector(selector) 选择器 获取第一个元素
querySelectorAll(selector) 选择器 获取多个元素
createElement(tag) 标签名 创建元素
appendChild(node) 节点 添加节点
removeChild(node) 节点 删除节点
setAttribute(key,val) 属性名、值 设置属性
getAttribute(key) 属性名 获取属性
addEventListener(type,fn) 事件类型、回调 添加事件
removeEventListener(type,fn) 事件类型、回调 移除事件

Promise 常用方法

方法 参数 用途
then(fn) 成功回调 Promise 成功执行
catch(fn) 失败回调 Promise 错误处理
finally(fn) 最终执行函数 无论成功失败都执行
Promise.all(arr) Promise 数组 全部成功才成功
Promise.race(arr) Promise 数组 返回最快结果
Promise.allSettled(arr) Promise 数组 获取所有结果

十八、JavaScript 项目实战核心

项目必须掌握

1、数据请求

fetch
axios

推荐：

  • Axios 官方网站：https://axios-http.com/zh/

2、本地存储

localStorage
sessionStorage

3、表单验证

手机号
邮箱
密码

4、权限控制

例如：

  • 登录状态
  • token
  • 路由权限

5、性能优化

重点：

  • 懒加载
  • 防抖节流
  • 虚拟列表
  • 图片压缩
  • 代码分割

十九、JavaScript 面试高频问题

1、var、let、const 区别？

核心：

  • 作用域
  • 变量提升
  • 是否可重复声明

2、箭头函数和普通函数区别？

重点：

  • this
  • arguments
  • new

3、闭包是什么？

函数能够访问外部变量。

4、什么是原型链？

对象通过原型进行属性查找。

5、Promise 有哪些状态？

pending
fulfilled
rejected

6、什么是 Event Loop？

JS 异步执行机制。

二十、JavaScript 学习资源推荐

官方文档

学习网站

工具推荐

编辑器

二十一、JavaScript 后续进阶方向

前端框架

工程化

学习：

  • Vite
  • Webpack
  • Babel
  • ESLint

TypeScript

Node.js

二十二、推荐项目练习路线

初级项目

  • 计算器
  • 轮播图
  • 待办事项

中级项目

  • 音乐播放器
  • 博客系统
  • 电商网站

高级项目

  • 后台管理系统
  • 低代码平台
  • 数据可视化平台

二十三、JavaScript 当前发展趋势（2026）

AI + 前端

越来越多：

  • AI UI 生成
  • AI 表单生成
  • AI 代码生成

全栈化

前端越来越偏：

  • Node.js
  • 服务端渲染
  • BFF

TypeScript 化

大型项目基本全面 TS。

二十四、真正提升 JavaScript 能力的方法

1、多写项目

推荐：

  • TodoList
  • 后台管理系统
  • 电商项目
  • 音乐播放器
  • 聊天室

2、多看源码

推荐：

  • Vue 源码
  • React 源码

3、多刷面试题

重点：

  • 异步
  • this
  • 闭包
  • 原型链

4、多调试

学会：

  • breakpoint
  • network
  • performance

二十五、总结

JavaScript 的核心成长路线：

基础语法
→ DOM
→ ES6+
→ 异步
→ 高级原理
→ 工程化
→ 框架
→ 项目实战

真正能拉开差距的：

  • 项目经验
  • 代码质量
  • 架构能力
  • 性能优化
  • 工程化能力

而不是只会写基础语法。

# javascript # 开发语言 # ecmascript # 前端
Logo
亚马逊云科技技术品牌专区

更多推荐

cover

面向长程任务的安全具身智能：机器人操作的跨层分析（下）

avatar 亚马逊云科技技术品牌专区

NLP的注意力机制与Transformer

计算上，它通过比对解码器当前状态与编码器各状态，经过一个可学习的小型网络或简单的点积运算，产生一组归一化的注意力权重，再以此权重对编码器状态进行加权求和，得到一个与当前解码步骤最相关的“上下文向量”。Transformer的核心是自注意力。从模仿人类选择性聚焦的认知直觉，到成为驱动当代人工智能发展的核心引擎，注意力机制与Transformer的故事，是基础研究引发连锁技术革命的典范。如今，基于注意

avatar 亚马逊云科技技术品牌专区

聊一聊人工智能中的常用搜索策略

人工智能中的搜索策略大体分为两种：无信息搜索和有信息搜索。无信息搜索是指我们不知道接下来要搜索的状态哪一个更加接近目标的搜索策略，因此也常被成为盲目搜索；而有信息搜索则是用启发函数f（n）来衡量哪一个状态更加接近目标状态，并优先对该状态进行搜索，因此与无信息搜索相比往往能够更加高效得解决问题。要衡量一个搜索策略的好坏，我们需要从四个方面对其进行判断：完备性、时间复杂度、空间复杂度和最优性。因此以下

avatar 亚马逊云科技技术品牌专区