第1章：JavaScript基础与交互

各位同学，欢迎来到《前端三剑客实战项目精讲》的第一章。今天咱们聊聊JavaScript的基础——变量、数据类型、运算符、条件语句、循环、函数，还有最关键的DOM操作。

说实话，JavaScript这门语言，刚接触时觉得挺简单。但真正用起来，坑也不少。我刚开始写前端那会儿，就因为在变量声明上偷懒，线上出了个诡异的bug，排查了一整个下午。嗯，从那以后，我对基础就格外上心。

1.1 变量与数据类型

变量，说白了就是存数据的容器。JavaScript里声明变量有三种方式：var、let、const。

核心要点：现在写项目，我基本只用 let 和 const。var 有作用域问题，容易出幺蛾子。

// 声明变量
let name = '张三';
const age = 25;
var oldWay = '别这么用了';

数据类型分两大类：基本类型和引用类型。

类型 示例 说明
Number 42、3.14 整数和浮点数，不分家
String 'hello'、"world" 文本数据，单引号双引号都行
Boolean true、false 逻辑判断，只有两个值
Undefined let x; 声明了但没赋值
Null let y = null; 空值，主动设置
Object { name: '李四' } 引用类型，存复杂数据

我的小技巧：判断类型用 typeof 操作符。但注意 typeof null 返回 'object'，这是JS的一个历史遗留bug。我在项目中遇到过，排查了好久才发现是这个问题。

console.log(typeof 42);        // 'number'
console.log(typeof 'hello');   // 'string'
console.log(typeof true);      // 'boolean'
console.log(typeof undefined); // 'undefined'
console.log(typeof null);      // 'object'  —— 注意这个坑！
console.log(typeof {});        // 'object'

1.2 运算符与表达式

运算符就是用来做运算的符号。算术运算符、比较运算符、逻辑运算符，这三类最常用。

// 算术运算符
let sum = 10 + 5;    // 15
let diff = 10 - 5;   // 5
let product = 10 * 5; // 50
let quotient = 10 / 5; // 2
let remainder = 10 % 3; // 1

// 比较运算符
console.log(5 > 3);   // true
console.log(5 === '5'); // false —— 严格相等，类型也得一样
console.log(5 == '5');  // true —— 宽松相等，会做类型转换

// 逻辑运算符
let a = true;
let b = false;
console.log(a && b); // false —— 且
console.log(a || b); // true  —— 或
console.log(!a);     // false —— 非

注意：我建议你尽量用 === 和 !==，别用 == 和 !=。为什么？因为 == 会做隐式类型转换，容易产生意想不到的结果。我曾经在条件判断里用了 ==，结果把 0 和 false 搞混了，线上出了个逻辑错误。

1.3 条件语句与循环

条件语句让代码能「思考」，循环让代码能「重复干活」。这两个是编程的基础能力。

// if-else 条件语句
let score = 85;
if (score >= 90) {
  console.log('优秀');
} else if (score >= 60) {
  console.log('及格');
} else {
  console.log('不及格');
}

// for 循环
for (let i = 0; i < 5; i++) {
  console.log('第' + (i + 1) + '次循环');
}

// while 循环
let count = 0;
while (count < 3) {
  console.log('count 是：' + count);
  count++;
}

你想想看，如果没有循环，你要重复做10次同样的事，就得写10遍代码。有了循环，一行搞定。这就是编程的魅力。

我的经验：写循环时，一定要小心死循环。我曾经在项目里写了个 while(true) 忘了加跳出条件，浏览器直接卡死了。嗯，从那以后我写循环都会先检查终止条件。

1.4 函数定义与调用

函数就是一段可重复使用的代码块。把逻辑封装起来，想用的时候调用就行。

// 函数声明
function greet(name) {
  return '你好，' + name + '！';
}

// 函数调用
let message = greet('小明');
console.log(message); // '你好，小明！'

// 箭头函数（ES6 新写法）
const add = (a, b) => a + b;
console.log(add(3, 4)); // 7

函数的好处是什么？说白了就是「一次定义，多次使用」。你写一个计算总价的函数，整个项目都能调用。改逻辑也只需要改一处，维护起来特别方便。

重要概念：函数可以有参数，也可以没有。可以有返回值，也可以没有（返回 undefined）。我个人习惯是，能返回值的函数尽量返回，这样调用方更灵活。

1.5 DOM操作入门

DOM（文档对象模型）是JavaScript操作网页的接口。说白了，就是JS能通过DOM来「看到」网页上的元素，然后「修改」它们。

获取元素是最基础的操作。常用的方法有这些：

// 通过ID获取元素
let title = document.getElementById('main-title');

// 通过类名获取元素（返回集合）
let items = document.getElementsByClassName('item');

// 通过标签名获取元素（返回集合）
let paragraphs = document.getElementsByTagName('p');

// 更灵活的方式：CSS选择器
let firstItem = document.querySelector('.item'); // 第一个匹配的元素
let allItems = document.querySelectorAll('.item'); // 所有匹配的元素

获取到元素之后，就可以修改它的内容了。

// 修改文本内容
let title = document.getElementById('main-title');
title.textContent = '新的标题';

// 修改HTML内容（可以包含标签）
let content = document.getElementById('content');
content.innerHTML = '<strong>加粗的文字</strong>';

// 修改样式
title.style.color = 'red';
title.style.fontSize = '24px';

注意：用 innerHTML 时要小心XSS攻击。如果内容是用户输入的，千万别直接用 innerHTML。我建议优先用 textContent，它更安全。如果一定要用 innerHTML，记得做转义处理。

举个例子，假设页面上有个按钮，点击后修改标题：

<button id="change-btn">点我修改标题</button>
<h1 id="page-title">原始标题</h1>

<script>
  let btn = document.getElementById('change-btn');
  let title = document.getElementById('page-title');

  btn.addEventListener('click', function() {
    title.textContent = '标题已被修改！';
    title.style.color = 'blue';
  });
</script>

你看，通过DOM操作，网页就不再是静态的了。用户点击按钮，页面内容就变了。这就是「交互」的本质。

我的建议：刚开始学DOM操作，别急着用框架。先用原生JS把 getElementById、querySelector、textContent、innerHTML 这几个方法练熟。基础打牢了，后面学React、Vue会轻松很多。

好了，第一章的内容就到这里。变量、数据类型、运算符、条件语句、循环、函数、DOM操作——这些是JavaScript的基石。别觉得简单就跳过，我见过太多人基础不牢，后面写项目时各种踩坑。

下一章咱们聊聊数组和对象，这两个在实际项目中用得特别多。到时候我会分享一些我在项目中积累的实用技巧。

公众号:蓝海资料掘金营，微信deep3321

← 上一章 📖 返回目录 下一章 →