JavaScript 基础入门教程 2026 | 零基础小白学编程

JavaScript 基础入门教程

HTML 搭好了网页的骨架，CSS 穿上了漂亮的衣服，但网页还是「死的」——不会动、不会响应用户的操作。JavaScript 就是让网页「活起来」的语言。这篇教程用大白话带你从零开始学编程。

一、JavaScript 是什么？

1.1 通俗理解

想象一个木偶：

HTML = 木偶的身体骨架
CSS = 木偶的衣服和化妆
JavaScript = 操控木偶的线（让木偶动起来）

一句话总结：JavaScript 是让网页能「动起来」的编程语言。

1.2 JavaScript 能做什么？

能力	例子
修改网页内容	点击按钮后文字变成「已点赞」
响应用户操作	鼠标点击、键盘输入、滚动页面
动画效果	图片轮播、下拉菜单、弹窗
数据处理	计算价格、格式化日期、验证表单
网络请求	从服务器获取数据（AJAX/Fetch）
存储数据	记住用户的偏好（localStorage）

1.3 怎么写 JavaScript？

创建一个 HTML 文件，在 <script> 标签里写 JavaScript：

html

<!DOCTYPE html>
<html>
<head>
  <title>学 JavaScript</title>
</head>
<body>
  <h1 id="title">你好</h1>
  <button onclick="sayHi()">点我</button>

  <script>
    // 这就是 JavaScript 代码
    function sayHi() {
      document.getElementById('title').textContent = '你点击了按钮！'
    }
  </script>
</body>
</html>

用浏览器打开，点击按钮，标题就会变化。这就是 JavaScript 的魔力！

1.4 在浏览器里试写代码

最快的方式：打开浏览器 → 按 F12 → 点击 Console（控制台）标签，直接输入代码回车：

javascript

console.log('Hello, World!')  // 在控制台打印信息
alert('弹窗提示！')            // 弹出一个提示框

💡 新手建议：用浏览器的 Console 来练习本教程的代码，不需要额外安装任何东西。

二、变量（装数据的盒子）

2.1 什么是变量？

变量就像一个贴了标签的盒子，你可以在里面放东西（数据）：

javascript

let name = '小明'    // 盒子名叫 name，里面放了 "小明"
let age = 25         // 盒子名叫 age，里面放了 25

console.log(name)    // 打开 name 盒子看看 → 小明
console.log(age)     // 打开 age 盒子看看 → 25

2.2 let、const 和 var

声明变量有三种方式：

javascript

// 1. let：可以改变的变量（现代写法）
let score = 80
score = 90  // ✅ 可以重新赋值

// 2. const：不能改变的常量（现代写法）
const PI = 3.14159
// PI = 3  // ❌ 报错！const 不能重新赋值

// 3. var：老写法（不推荐）
var oldName = '老写法'

💡 新手记住：
能用 const 就用 const（不会变的值）
需要改变时才用 let
不要用 var（它是老版本的遗留物）

2.3 命名规则

javascript

// ✅ 合法的命名
let userName = '张三'       // 驼峰命名（推荐）
let age2 = 20               // 可以包含数字
let $price = 99.9           // 可以用 $ 开头
let _temp = '临时'          // 可以用 _ 开头

// ❌ 非法的命名
// let 2age = 20            // 不能数字开头
// let my-name = '张三'     // 不能用连字符
// let let = '关键字'       // 不能用保留字

💡 驼峰命名法：第一个单词小写，后面每个单词首字母大写。如 myFirstName、userAge。

三、数据类型

3.1 基本类型

JavaScript 有几种基本数据类型：

javascript

// 1. 字符串（文字）— 用引号包起来
let name = '小明'
let greeting = "你好"
let sentence = `我叫${name}`  // 模板字符串（用反引号）

// 2. 数字
let age = 25           // 整数
let price = 9.99       // 小数
let negative = -10     // 负数

// 3. 布尔值（真/假）
let isStudent = true   // 真
let isRich = false     // 假

// 4. undefined（未定义）
let empty             // 声明了但没赋值
console.log(empty)    // → undefined

// 5. null（空值）
let nothing = null    // 明确表示「什么都没有」

3.2 字符串操作

javascript

let firstName = '三'
let lastName = '张'

// 拼接字符串
let fullName = lastName + firstName  // → "张三"

// 模板字符串（推荐！更直观）
let greeting = `你好，我叫${lastName}${firstName}，今年${age}岁`

// 字符串长度
console.log(name.length)  // → 2（"小明"有两个字）

// 常用方法
console.log('Hello'.toUpperCase())    // → "HELLO"（转大写）
console.log('HELLO'.toLowerCase())    // → "hello"（转小写）
console.log('  hi  '.trim())          // → "hi"（去两端空格）
console.log('apple,banana'.split(','))  // → ["apple", "banana"]（分割）

💡 模板字符串是 ES6 的新特性，用反引号（键盘上 1 左边那个键）包裹，${} 里可以放变量，非常方便。

3.3 数字操作

javascript

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)   // → 1（取余数：10除以3余1）

// 自增自减
let count = 0
count++  // count 变成 1
count++  // count 变成 2
count--  // count 变成 1

// 常用数学方法
Math.round(3.7)    // → 4（四舍五入）
Math.floor(3.7)    // → 3（向下取整）
Math.ceil(3.2)     // → 4（向上取整）
Math.random()      // → 0~1 之间的随机数
Math.max(1, 5, 3)  // → 5（最大值）
Math.min(1, 5, 3)  // → 1（最小值）

四、条件判断

4.1 if 语句

让程序根据条件做不同的事：

javascript

let age = 18

if (age >= 18) {
  console.log('你已经成年了')
} else {
  console.log('你还未成年')
}

大白话：如果 age >= 18 成立，就执行第一个 { } 里的代码；否则执行 else 里的代码。

4.2 if...else if...else

多个条件判断：

javascript

let score = 85

if (score >= 90) {
  console.log('优秀！')
} else if (score >= 80) {
  console.log('良好！')
} else if (score >= 60) {
  console.log('及格')
} else {
  console.log('不及格')
}
// score=85 → 输出 "良好！"

4.3 比较运算符

javascript

// 等于（只比值，不比类型）
5 == '5'    // → true（不推荐，容易出 bug）

// 严格等于（值和类型都必须相同）
5 === '5'   // → false ✅（推荐用这个）
5 === 5     // → true

// 不等于
5 != '5'    // → true（不推荐）
5 !== '5'   // → true ✅（推荐）

// 大小比较
5 > 3       // → true（大于）
5 < 3       // → false（小于）
5 >= 5      // → true（大于等于）
5 <= 4      // → false（小于等于）

💡 新手铁律：永远用 === 和 !==，不用 == 和 !=。严格比较更安全，能避免很多莫名其妙的 bug。

4.4 逻辑运算符

javascript

// && 与（两个条件都要满足）
let age = 20
let hasTicket = true
if (age >= 18 && hasTicket) {
  console.log('可以入场')
}

// || 或（满足一个条件就行）
let isVIP = false
let isMember = true
if (isVIP || isMember) {
  console.log('可以享受优惠')
}

// ! 非（取反）
let isRaining = false
if (!isRaining) {
  console.log('可以出门')
}

💡 记忆技巧：
&& = "并且"（两个都要 true）
|| = "或者"（一个 true 就行）
! = "不是"（true 变 false，false 变 true）

4.5 三元运算符（简写 if）

javascript

let age = 20

// if...else 写法
let result
if (age >= 18) {
  result = '成年'
} else {
  result = '未成年'
}

// 三元运算符简写（效果完全一样）
let result2 = age >= 18 ? '成年' : '未成年'

💡 语法：条件 ? 为真时的值 : 为假时的值

4.6 switch 语句

当条件很多时，switch 比 if...else 更清晰：

javascript

let day = 'Monday'

switch (day) {
  case 'Monday':
    console.log('星期一，上班')
    break
  case 'Saturday':
  case 'Sunday':
    console.log('周末，休息')
    break
  default:
    console.log('其他工作日')
}

💡 注意：每个 case 后面要加 break，否则会继续执行下面的代码。default 是所有条件都不满足时执行的。

五、函数（可重复使用的代码块）

5.1 什么是函数？

函数就像一个食谱：

你给它食材（参数）
它按步骤处理（函数体）
它返回做好的菜（返回值）

javascript

// 定义函数
function greet(name) {
  return `你好，${name}！`
}

// 调用函数
console.log(greet('小明'))  // → "你好，小明！"
console.log(greet('小红'))  // → "你好，小红！"

5.2 参数和返回值

javascript

// 带多个参数和返回值
function add(a, b) {
  return a + b
}

let result = add(3, 5)
console.log(result)  // → 8

// 没有参数
function sayHello() {
  console.log('Hello!')
}

// 没有返回值
function logMessage(msg) {
  console.log(`[日志] ${msg}`)
  // 没有 return，默认返回 undefined
}

// 默认参数
function greet(name = '匿名用户') {
  return `你好，${name}`
}

console.log(greet())       // → "你好，匿名用户"
console.log(greet('小明'))  // → "你好，小明"

5.3 箭头函数（现代写法）

ES6 引入了更简洁的函数写法：

javascript

// 传统函数
function add(a, b) {
  return a + b
}

// 箭头函数（效果完全一样）
const add = (a, b) => {
  return a + b
}

// 简写（只有一行代码时可以省略 {} 和 return）
const add = (a, b) => a + b

// 只有一个参数时可以省略括号
const double = n => n * 2

// 没有参数时必须有空括号
const sayHi = () => console.log('Hi!')

💡 新手建议：先学会传统 function 写法，再学箭头函数。日常开发中箭头函数用得更多。

5.4 函数实战

javascript

// 计算 BMI
function calcBMI(weight, height) {
  // weight: 体重(kg)，height: 身高(m)
  const bmi = weight / (height * height)
  return Math.round(bmi * 10) / 10  // 保留一位小数
}

// 判断 BMI 等级
function bmiLevel(bmi) {
  if (bmi < 18.5) return '偏瘦'
  if (bmi < 24) return '正常'
  if (bmi < 28) return '偏胖'
  return '肥胖'
}

let myBMI = calcBMI(70, 1.75)
console.log(`你的BMI是 ${myBMI}，等级：${bmiLevel(myBMI)}`)
// → "你的BMI是 22.9，等级：正常"

六、数组（一排数据）

6.1 创建数组

数组用来存放一组数据：

javascript

// 创建数组
let fruits = ['苹果', '香蕉', '橘子']
let numbers = [10, 20, 30, 40, 50]
let mixed = [1, 'hello', true, null]  // 可以混合类型（但不推荐）

// 访问数组元素（从 0 开始数）
console.log(fruits[0])  // → "苹果"（第1个）
console.log(fruits[1])  // → "香蕉"（第2个）
console.log(fruits[2])  // → "橘子"（第3个）

// 数组长度
console.log(fruits.length)  // → 3

💡 重要：数组下标从 0 开始！第一个元素是 [0]，不是 [1]。

6.2 数组操作

javascript

let fruits = ['苹果', '香蕉']

// 末尾添加
fruits.push('橘子')   // → ['苹果', '香蕉', '橘子']

// 末尾删除
fruits.pop()          // → ['苹果', '香蕉']

// 开头添加
fruits.unshift('葡萄')  // → ['葡萄', '苹果', '香蕉']

// 开头删除
fruits.shift()        // → ['苹果', '香蕉']

// 查找元素位置
let index = fruits.indexOf('苹果')  // → 0

// 删除指定位置
fruits.splice(0, 1)   // 从位置0开始删1个 → ['香蕉']

// 数组长度
console.log(fruits.length)

6.3 遍历数组

javascript

let fruits = ['苹果', '香蕉', '橘子']

// 方法1：for 循环
for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i])
}

// 方法2：for...of（更简洁，推荐）
for (let fruit of fruits) {
  console.log(fruit)
}

// 方法3：forEach
fruits.forEach((fruit, index) => {
  console.log(`${index}: ${fruit}`)
})

6.4 数组常用方法

javascript

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

// map：对每个元素做处理，返回新数组
let doubled = numbers.map(n => n * 2)
console.log(doubled)  // → [2, 4, 6, 8, 10]

// filter：过滤，返回满足条件的元素
let evens = numbers.filter(n => n % 2 === 0)
console.log(evens)  // → [2, 4]

// find：找到第一个满足条件的元素
let found = numbers.find(n => n > 3)
console.log(found)  // → 4

// includes：判断是否包含某个值
console.log(numbers.includes(3))  // → true

// join：数组转字符串
let str = ['2026', '08', '01'].join('-')
console.log(str)  // → "2026-08-01"

// reduce：累加
let sum = numbers.reduce((total, n) => total + n, 0)
console.log(sum)  // → 15

💡 map 和 filter 是最常用的两个方法，务必记住！
map = 「每个都加工一下」
filter = 「挑出符合条件的」

七、对象（键值对集合）

7.1 什么是对象？

如果说数组是「一排编号的盒子」，那对象就是「一排贴了名字标签的盒子」：

javascript

let person = {
  name: '小明',
  age: 25,
  city: '北京',
  isStudent: true
}

// 读取属性（两种方式）
console.log(person.name)       // → "小明"
console.log(person['age'])     // → 25

// 修改属性
person.age = 26

// 添加新属性
person.email = 'xm@example.com'

// 删除属性
delete person.isStudent

💡 大白话：对象就是 { 名字: 值, 名字: 值, ... } 的结构。用 . 来读写属性。

7.2 对象嵌套

javascript

let student = {
  name: '小明',
  age: 20,
  address: {
    city: '北京',
    street: '中关村大街1号'
  },
  hobbies: ['编程', '音乐', '游戏'],
  sayHi: function() {
    return `你好，我是${this.name}`
  }
}

// 访问嵌套属性
console.log(student.address.city)    // → "北京"
console.log(student.hobbies[0])      // → "编程"

// 调用对象里的函数（方法）
console.log(student.sayHi())         // → "你好，我是小明"

7.3 对象常用操作

javascript

// 获取所有属性名
let keys = Object.keys(student)
console.log(keys)  // → ["name", "age", "address", "hobbies"]

// 获取所有值
let values = Object.values(student)
console.log(values)

// 遍历对象
for (let key in student) {
  console.log(`${key}: ${student[key]}`)
}

// 解构赋值（从对象中取值）
const { name, age } = student
console.log(name)  // → "小明"
console.log(age)   // → 20

八、循环

8.1 for 循环

重复执行一段代码：

javascript

// 打印 1 到 5
for (let i = 1; i <= 5; i++) {
  console.log(i)
}
// → 1, 2, 3, 4, 5

// 解读：
// let i = 1     → 从 1 开始
// i <= 5        → 只要 i 小于等于 5 就继续
// i++           → 每次循环后 i 加 1

大白话理解 for 循环：

初始值：i = 1
条件：i <= 5？
  → 是 → 执行代码 → i++ → i变成2
  → 是 → 执行代码 → i++ → i变成3
  → 是 → 执行代码 → i++ → i变成4
  → 是 → 执行代码 → i++ → i变成5
  → 是 → 执行代码 → i++ → i变成6
  → 否 → 结束循环

8.2 while 循环

javascript

// while：先判断条件，再执行
let count = 0
while (count < 3) {
  console.log(`第 ${count} 次`)
  count++
}

// do...while：先执行一次，再判断条件
let i = 0
do {
  console.log(`执行了 ${i}`)
  i++
} while (i < 3)

8.3 break 和 continue

javascript

// break：直接跳出循环
for (let i = 1; i <= 10; i++) {
  if (i === 5) {
    break  // 到5就停了
  }
  console.log(i)
}
// → 1, 2, 3, 4

// continue：跳过本次，继续下一次
for (let i = 1; i <= 5; i++) {
  if (i === 3) {
    continue  // 跳过3
  }
  console.log(i)
}
// → 1, 2, 4, 5

💡 记忆技巧：
break = 「不干了，走人」（结束整个循环）
continue = 「这个跳过，继续下一个」（跳过本次循环）

九、操作网页（DOM）

9.1 什么是 DOM？

DOM（文档对象模型）就是 JavaScript 操作网页的接口。通过 DOM，你可以：

改变网页上的文字
改变样式
添加/删除元素
响应用户的点击、输入等操作

9.2 获取元素

javascript

// 通过 id 获取（最常用）
let title = document.getElementById('title')

// 通过 CSS 选择器获取（最灵活，推荐）
let button = document.querySelector('.btn')      // 第一个匹配的
let items = document.querySelectorAll('.item')   // 所有匹配的

// 通过 class 获取
let cards = document.getElementsByClassName('card')

// 通过标签名获取
let paragraphs = document.getElementsByTagName('p')

💡 推荐用 querySelector，它支持所有 CSS 选择器，和写 CSS 的方式一致。

9.3 修改内容

javascript

let title = document.getElementById('title')

// 修改文字内容
title.textContent = '新标题'

// 修改 HTML 内容
title.innerHTML = '<strong>加粗的标题</strong>'

// 修改属性
let img = document.querySelector('img')
img.src = 'new-image.jpg'
img.alt = '新图片'

9.4 修改样式

javascript

let box = document.querySelector('.box')

// 修改单个样式
box.style.color = 'red'
box.style.backgroundColor = '#f0f0f0'  // 注意：用驼峰命名
box.style.fontSize = '20px'

// 添加/删除/切换 class（推荐方式）
box.classList.add('active')
box.classList.remove('active')
box.classList.toggle('active')  // 有就删，没有就加
box.classList.contains('active')  // 判断是否有某个 class

💡 最佳实践：用 classList 操作 class 比直接改 style 更好，把样式写在 CSS 里，JS 只负责切换 class。

9.5 添加和删除元素

javascript

// 创建新元素
let newDiv = document.createElement('div')
newDiv.textContent = '我是新元素'
newDiv.classList.add('card')

// 添加到页面中
document.body.appendChild(newDiv)  // 添加到 body 末尾

let container = document.querySelector('.container')
container.appendChild(newDiv)  // 添加到指定容器

// 删除元素
let oldElement = document.querySelector('.old')
oldElement.remove()

十、事件（响应用户操作）

10.1 什么是事件？

事件就是用户的操作：点击、输入、滚动、鼠标移动等。JavaScript 可以「监听」这些事件，并在事件发生时执行代码。

10.2 添加事件监听

javascript

let button = document.querySelector('#myButton')

// 推荐方式：addEventListener
button.addEventListener('click', function() {
  alert('你点击了按钮！')
})

// 箭头函数写法
button.addEventListener('click', () => {
  console.log('按钮被点击了')
})

10.3 常用事件

javascript

// 点击
element.addEventListener('click', () => { ... })

// 鼠标移入/移出
element.addEventListener('mouseenter', () => { ... })
element.addEventListener('mouseleave', () => { ... })

// 输入框内容变化
input.addEventListener('input', (e) => {
  console.log('当前输入：', e.target.value)
})

// 表单提交
form.addEventListener('submit', (e) => {
  e.preventDefault()  // 阻止默认提交行为
  console.log('表单提交了')
})

// 键盘按键
document.addEventListener('keydown', (e) => {
  console.log('按下了：', e.key)
})

// 页面加载完成
window.addEventListener('load', () => {
  console.log('页面加载完成！')
})

10.4 事件对象

事件处理函数可以接收一个「事件对象」，包含事件的详细信息：

javascript

document.addEventListener('click', (event) => {
  console.log('点击了：', event.target)      // 被点击的元素
  console.log('坐标：', event.clientX, event.clientY)  // 鼠标坐标
})

input.addEventListener('input', (event) => {
  console.log('输入的内容：', event.target.value)  // 输入框的当前值
})

form.addEventListener('submit', (event) => {
  event.preventDefault()  // 阻止表单默认提交
  // 然后用 JS 处理表单数据
})

💡 e.preventDefault() 非常常用：阻止元素的默认行为（如表单提交刷新页面、链接跳转）。

十一、实战练习

11.1 练习一：点击计数器

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>计数器</title>
</head>
<body>
  <h1>点击计数器</h1>
  <p>你点击了 <span id="count">0</span> 次</p>
  <button id="btn">点我</button>
  <button id="reset">重置</button>

  <script>
    // 获取元素
    const countEl = document.getElementById('count')
    const btn = document.getElementById('btn')
    const resetBtn = document.getElementById('reset')

    // 计数变量
    let count = 0

    // 点击按钮时 +1
    btn.addEventListener('click', () => {
      count++
      countEl.textContent = count
    })

    // 重置
    resetBtn.addEventListener('click', () => {
      count = 0
      countEl.textContent = count
    })
  </script>
</body>
</html>

11.2 练习二：待办事项

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>待办事项</title>
</head>
<body>
  <h1>我的待办</h1>
  <input id="input" placeholder="输入任务..." />
  <button id="add">添加</button>
  <ul id="list"></ul>

  <script>
    const input = document.getElementById('input')
    const addBtn = document.getElementById('add')
    const list = document.getElementById('list')

    // 添加任务
    function addTodo() {
      const text = input.value.trim()  // 获取输入值并去空格
      if (!text) return  // 空内容不添加

      // 创建列表项
      const li = document.createElement('li')
      li.textContent = text

      // 添加删除按钮
      const delBtn = document.createElement('button')
      delBtn.textContent = '删除'
      delBtn.addEventListener('click', () => li.remove())
      li.appendChild(delBtn)

      // 点击任务切换完成状态
      li.addEventListener('click', () => {
        li.style.textDecoration = li.style.textDecoration ? '' : 'line-through'
      })

      list.appendChild(li)
      input.value = ''  // 清空输入框
    }

    // 点击添加按钮
    addBtn.addEventListener('click', addTodo)

    // 按回车也能添加
    input.addEventListener('keydown', (e) => {
      if (e.key === 'Enter') addTodo()
    })
  </script>
</body>
</html>

11.3 练习三：温度转换器

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>温度转换</title>
</head>
<body>
  <h1>温度转换器</h1>

  <label>摄氏度：<input type="number" id="celsius" value="0"></label>
  <button id="convert">转换</button>
  <p>华氏度：<span id="fahrenheit">32</span>°F</p>

  <script>
    const celsiusInput = document.getElementById('celsius')
    const convertBtn = document.getElementById('convert')
    const fahrenheitEl = document.getElementById('fahrenheit')

    // 转换函数
    function celsiusToFahrenheit(c) {
      return Math.round(c * 9 / 5 + 32)
    }

    convertBtn.addEventListener('click', () => {
      const c = Number(celsiusInput.value)
      const f = celsiusToFahrenheit(c)
      fahrenheitEl.textContent = f
    })

    // 输入时实时转换
    celsiusInput.addEventListener('input', () => {
      const c = Number(celsiusInput.value)
      const f = celsiusToFahrenheit(c)
      fahrenheitEl.textContent = f
    })
  </script>
</body>
</html>

十二、常见问题

12.1 `=`、`==`、`===` 有什么区别？

javascript

// = 是赋值（给变量存值）
let name = '小明'

// == 是比较（只比值，会自动转换类型）
5 == '5'   // → true（字符串'5'被转成了数字5）

// === 是严格比较（值和类型都必须一样）
5 === '5'  // → false（数字和字符串类型不同）

💡 记住：= 存值，=== 比值。不要用 ==。

12.2 `null` 和 `undefined` 有什么区别？

javascript

// undefined：变量声明了但没赋值
let a
console.log(a)  // → undefined

// null：明确表示「什么都没有」
let b = null
console.log(b)  // → null

💡 大白话：undefined 是「还没给值」，null 是「主动清空了」。

12.3 let 和 const 怎么选？

javascript

// 不会变的值用 const
const PI = 3.14159
const appName = '我的应用'
const config = { theme: 'dark' }

// 需要变化的值用 let
let count = 0
let isLoggedIn = false
let currentTab = 'home'

💡 原则：默认用 const，需要重新赋值时才改成 let。

12.4 函数和箭头函数有什么区别？

javascript

// 传统函数
function greet(name) {
  return `你好，${name}`
}

// 箭头函数
const greet = (name) => `你好，${name}`

// 两者功能基本一样
// 箭头函数更简洁
// 但 this 指向不同（进阶内容，初学不用纠结）

十三、JavaScript 速查表

13.1 常用语法速查

功能	代码
声明变量	`let x = 1` / `const y = 'hi'`
打印输出	`console.log('hello')`
条件判断	`if (a > b) { ... } else { ... }`
函数	`function fn(a) { return a }`
箭头函数	`const fn = (a) => a * 2`
数组	`let arr = [1, 2, 3]`
对象	`let obj = { name: '小明' }`
模板字符串	`你好${name}`

13.2 数组方法速查

方法	作用	返回
`push()`	末尾添加	新长度
`pop()`	末尾删除	删除的元素
`map()`	每个加工	新数组
`filter()`	过滤	新数组
`find()`	找第一个	元素
`includes()`	是否包含	true/false
`join()`	转字符串	字符串
`forEach()`	遍历	undefined

13.3 DOM 方法速查

方法	作用
`querySelector(sel)`	获取第一个匹配元素
`querySelectorAll(sel)`	获取所有匹配元素
`getElementById(id)`	通过 id 获取
`createElement(tag)`	创建元素
`appendChild(el)`	添加子元素
`addEventListener(event, fn)`	添加事件监听

十四、总结

回顾本教程的要点：

变量：用 const 和 let 声明，默认用 const
数据类型：字符串、数字、布尔值、undefined、null
条件判断：if...else、switch、三元运算符
比较：永远用 === 和 !==
函数：可复用的代码块，用 return 返回结果
箭头函数：const fn = (a) => a * 2 更简洁
数组：有序数据集合，下标从 0 开始
对象：键值对集合，用 . 访问属性
循环：for、while、for...of 重复执行代码
DOM：用 querySelector 获取元素，修改 textContent、style、classList
事件：用 addEventListener 监听用户操作

JavaScript 是前端开发的核心语言，入门后继续学习 ES6+ 特性、异步编程、框架（Vue/React），你的前端之路会越走越宽。

相关阅读：

JavaScript 基础入门教程 2026 | 零基础小白学编程 ​

一、JavaScript 是什么？ ​

1.1 通俗理解 ​

1.2 JavaScript 能做什么？ ​

1.3 怎么写 JavaScript？ ​

1.4 在浏览器里试写代码 ​

二、变量（装数据的盒子） ​

2.1 什么是变量？ ​

2.2 let、const 和 var ​

2.3 命名规则 ​

三、数据类型 ​

3.1 基本类型 ​

3.2 字符串操作 ​

3.3 数字操作 ​

四、条件判断 ​

4.1 if 语句 ​

4.2 if...else if...else ​

4.3 比较运算符 ​

4.4 逻辑运算符 ​

4.5 三元运算符（简写 if） ​

4.6 switch 语句 ​

五、函数（可重复使用的代码块） ​

5.1 什么是函数？ ​

5.2 参数和返回值 ​

5.3 箭头函数（现代写法） ​

5.4 函数实战 ​

六、数组（一排数据） ​

6.1 创建数组 ​

6.2 数组操作 ​

6.3 遍历数组 ​

6.4 数组常用方法 ​

七、对象（键值对集合） ​

7.1 什么是对象？ ​

7.2 对象嵌套 ​

7.3 对象常用操作 ​

八、循环 ​

8.1 for 循环 ​

8.2 while 循环 ​

8.3 break 和 continue ​

九、操作网页（DOM） ​

9.1 什么是 DOM？ ​

9.2 获取元素 ​

9.3 修改内容 ​

9.4 修改样式 ​

9.5 添加和删除元素 ​

十、事件（响应用户操作） ​

10.1 什么是事件？ ​

10.2 添加事件监听 ​

10.3 常用事件 ​

10.4 事件对象 ​

十一、实战练习 ​

11.1 练习一：点击计数器 ​

11.2 练习二：待办事项 ​

11.3 练习三：温度转换器 ​

十二、常见问题 ​

12.1 =、==、=== 有什么区别？ ​

12.2 null 和 undefined 有什么区别？ ​

12.3 let 和 const 怎么选？ ​

12.4 函数和箭头函数有什么区别？ ​

十三、JavaScript 速查表 ​

13.1 常用语法速查 ​

13.2 数组方法速查 ​

13.3 DOM 方法速查 ​

十四、总结 ​

JavaScript 基础入门教程 2026 | 零基础小白学编程

一、JavaScript 是什么？

1.1 通俗理解

1.2 JavaScript 能做什么？

1.3 怎么写 JavaScript？

1.4 在浏览器里试写代码

二、变量（装数据的盒子）

2.1 什么是变量？

2.2 let、const 和 var

2.3 命名规则

三、数据类型

3.1 基本类型

3.2 字符串操作

3.3 数字操作

四、条件判断

4.1 if 语句

4.2 if...else if...else

4.3 比较运算符

4.4 逻辑运算符

4.5 三元运算符（简写 if）

4.6 switch 语句

五、函数（可重复使用的代码块）

5.1 什么是函数？

5.2 参数和返回值

5.3 箭头函数（现代写法）

5.4 函数实战

六、数组（一排数据）

6.1 创建数组

6.2 数组操作

6.3 遍历数组

6.4 数组常用方法

七、对象（键值对集合）

7.1 什么是对象？

7.2 对象嵌套

7.3 对象常用操作

八、循环

8.1 for 循环

8.2 while 循环

8.3 break 和 continue

九、操作网页（DOM）

9.1 什么是 DOM？

9.2 获取元素

9.3 修改内容

9.4 修改样式

9.5 添加和删除元素

十、事件（响应用户操作）

10.1 什么是事件？

10.2 添加事件监听

10.3 常用事件

10.4 事件对象

十一、实战练习

11.1 练习一：点击计数器

11.2 练习二：待办事项

11.3 练习三：温度转换器

十二、常见问题

12.1 `=`、`==`、`===` 有什么区别？

12.2 `null` 和 `undefined` 有什么区别？

12.3 let 和 const 怎么选？

12.4 函数和箭头函数有什么区别？

十三、JavaScript 速查表

13.1 常用语法速查

13.2 数组方法速查

13.3 DOM 方法速查

十四、总结