外观
JavaScript 笔记
约 2772 字大约 9 分钟
2025-08-16
一、JavaScript 基础
1.1 什么是 JavaScript?
JavaScript 是世界上最流行的编程语言之一,是一种运行在客户端的脚本语言。JavaScript 基于原型编程、多范式的动态脚本语言,并且支持多种编程范式。JavaScript 主要用来给 HTML 增加动态功能,使网页具有交互性。
1.2 JavaScript 的特点
- 简单易用:可以使用任何文本编辑工具编写,只需要浏览器就可以执行程序
- 解释型语言:逐行执行、无需编译为机器码
- 基于对象:内置大量现成对象,编写少量程序可以完成目标
- 事件驱动:通过事件响应用户操作
- 跨平台:几乎所有的现代浏览器都支持 JavaScript
1.3 JavaScript 的组成部分
JavaScript 由三部分组成:
- ECMAScript:JavaScript 的语法标准(变量、表达式、运算符、函数、if 语句、for 语句等)
- DOM(文档对象模型):操作网页上的元素的 API(如让盒子移动、变色、轮播图等)
- BOM(浏览器对象模型):操作浏览器部分功能的 API(如弹出框、控制浏览器跳转、获取分辨率等)
1.4 JavaScript 引入方式
内嵌式
<script type="text/javascript">
alert('hello, world');
</script>外链式
<script src="script.js"></script>最佳实践:将 script 标签放在 </body> 前,避免阻塞页面渲染
注意:
- 外链式时,script 标签内的代码不会执行
- 一个 HTML 页面可以引入多个 JS 文件
- 引入外部文件时,src 属性是必须的
二、JavaScript 基础语法
2.1 变量与数据类型
变量声明
// 声明变量
var age;
// 声明变量并赋值
var age = 18;
// 同时声明多个变量
var age = 18, address = '火影村', salary = 15000;变量命名规范:
- 由字母、数字、下划线(_)和美元符号($)组成
- 严格区分大小写
- 不能以数字开头
- 不能是关键字、保留字
- 遵循驼峰命名法(首字母小写,后续单词首字母大写)
基本数据类型:
| 类型 | 说明 | 默认值 |
|---|---|---|
| Number | 数字型,包含整型值和浮点型值 | 0 |
| String | 字符串类型 | "" |
| Boolean | 布尔值类型(true/false) | false |
| Undefined | 未定义的值 | undefined |
| Null | 空值 | null |
类型判断:
var num = 18;
console.log(typeof num); // "number"
var str = "hello";
console.log(typeof str); // "string"
var flag = true;
console.log(typeof flag); // "boolean"
var un;
console.log(typeof un); // "undefined"
var n = null;
console.log(typeof n); // "object" (特殊)2.2 运算符
算术运算符
console.log(1 + 1); // 2
console.log(1 - 1); // 0
console.log(2 * 2); // 4
console.log(6 / 3); // 2
console.log(5 % 2); // 1 (取余)递增递减运算符
var num = 1;
console.log(num++); // 1 (先返回值,再+1)
console.log(++num); // 3 (先+1,再返回值)比较运算符
console.log(1 == '1'); // true (值相等)
console.log(1 === '1'); // false (值和类型都相等)
console.log(1 != '2'); // true
console.log(1 !== '1'); // true逻辑运算符
// 逻辑与 (&&)
console.log(123 && 456); // 456
console.log(0 && 456); // 0
// 逻辑或 (||)
console.log(123 || 456); // 123
console.log(0 || 456); // 456
// 逻辑非 (!)
console.log(!true); // false
console.log(!!'hello'); // true (转换为布尔值)赋值运算符
var num = 10;
num += 5; // 等同于 num = num + 5
num -= 3; // 等同于 num = num - 3
num *= 2; // 等同于 num = num * 22.3 流程控制语句
条件语句
// if 语句
var age = 18;
if (age >= 18) {
console.log('成年人');
} else {
console.log('未成年人');
}
// switch 语句
var day = 2;
switch (day) {
case 1:
console.log('星期一');
break;
case 2:
console.log('星期二');
break;
default:
console.log('其他');
}循环语句
// for 循环
for (var i = 0; i < 5; i++) {
console.log(i);
}
// while 循环
var i = 0;
while (i < 5) {
console.log(i);
i++;
}
// do-while 循环
var i = 0;
do {
console.log(i);
i++;
} while (i < 5);break 和 continue
// break 用于立即退出循环
for (var i = 0; i < 5; i++) {
if (i === 3) break;
console.log(i); // 0, 1, 2
}
// continue 用于跳过当前迭代
for (var i = 0; i < 5; i++) {
if (i === 3) continue;
console.log(i); // 0, 1, 2, 4
}三、JavaScript 核心概念
3.1 函数
函数声明
// 声明函数
function sayHello() {
console.log('Hello, world!');
}
// 调用函数
sayHello();带参数的函数
// 带参数的函数声明
function eat(fruit, vegetable) {
console.log('我爱吃' + fruit + '和' + vegetable);
}
// 带参数的函数调用
eat('苹果', '西红柿'); // 输出: 我爱吃苹果和西红柿函数返回值
function sum(a, b) {
return a + b;
}
var result = sum(10, 20);
console.log(result); // 30函数表达式
// 函数表达式
var sayHi = function() {
console.log('Hi!');
};
// 调用函数
sayHi();arguments 对象
function sumAll() {
var total = 0;
for (var i = 0; i < arguments.length; i++) {
total += arguments[i];
}
return total;
}
console.log(sumAll(1, 2, 3, 4)); // 103.2 作用域
全局作用域
- 在全局作用域下声明的变量叫做全局变量
- 全局变量在代码的任何位置都可以使用
- 浏览器关闭时才会被销毁
局部作用域
- 在局部作用域下声明的变量叫做局部变量
- 局部变量只能在该函数内部使用
- 函数执行结束后会被销毁
作用域链
- 内部函数可以访问外部函数的变量
- 采取就近原则查找变量的值
var num = 10; // 全局变量
function fn() {
var num = 20; // 局部变量
function fun() {
console.log(num); // 20 (就近原则)
}
fun();
}
fn();3.3 预解析
JavaScript 执行分为两步:预解析和代码执行。
变量预解析(变量提升)
- 变量的声明会被提升到当前作用域的最前面
- 变量的赋值不会提升
console.log(num); // undefined
var num = 10;
// 相当于执行了以下代码
var num; // 变量声明提升
console.log(num);
num = 10; // 变量赋值不提升函数预解析(函数提升)
- 函数的声明会被提升到当前作用域的最前面
- 但不会调用函数
fn(); // 可以调用
function fn() {
console.log('11');
}注意: 函数表达式不会被提升
fn(); // 报错,fn is not a function
var fn = function() {
console.log('11');
};四、JavaScript 对象与数据结构
4.1 对象
创建对象
// 字面量方式
var person = {
name: '张三',
age: 18,
sayHi: function() {
console.log('大家好!');
}
};
// 调用属性和方法
console.log(person.name); // '张三'
console.log(person['age']); // 18
person.sayHi(); // 大家好!构造函数创建对象
function Person(name, age) {
this.name = name;
this.age = age;
this.sayHi = function() {
console.log('大家好,我是' + this.name);
};
}
var p1 = new Person('李四', 20);
p1.sayHi(); // 大家好,我是李四遍历对象属性
for (var key in person) {
console.log(key + ': ' + person[key]);
}
// name: 张三
// age: 18
// sayHi: function() { ... }4.2 数组
创建数组
// 字面量方式
var colors = ['red', 'green', 'blue'];
// 构造函数方式
var numbers = new Array(1, 2, 3);数组常用方法
var arr = ['red', 'green', 'blue'];
// 获取数组长度
console.log(arr.length); // 3
// 通过索引访问元素
console.log(arr[0]); // 'red'
// 添加元素
arr.push('yellow'); // 末尾添加
arr.unshift('purple'); // 开头添加
// 删除元素
arr.pop(); // 删除末尾元素
arr.shift(); // 删除开头元素
// 截取数组
var newArr = arr.slice(1, 3); // 从索引1开始,到索引3(不包括)
// 遍历数组
for (var i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
// forEach 遍历
arr.forEach(function(item, index) {
console.log(index + ': ' + item);
});4.3 字符串
字符串基本操作
var str = 'hello, world';
// 获取字符串长度
console.log(str.length); // 12
// 大小写转换
console.log(str.toUpperCase()); // 'HELLO, WORLD'
console.log(str.toLowerCase()); // 'hello, world'
// 去除空白
var spaceStr = ' hello ';
console.log(spaceStr.trim()); // 'hello'
// 获取单个字符
console.log(str.charAt(1)); // 'e'
console.log(str[1]); // 'e'
// 截取字符串
console.log(str.slice(0, 5)); // 'hello'
console.log(str.substring(0, 5)); // 'hello'
console.log(str.substr(0, 5)); // 'hello'
// 查找字符串
console.log(str.indexOf('world')); // 7
console.log(str.includes('world')); // true
// 替换字符串
console.log(str.replace('world', 'JavaScript')); // 'hello, JavaScript'
// 字符串拼接
console.log('Hello' + ' ' + 'World'); // 'Hello World'
console.log('I am ' + 18 + ' years old'); // 'I am 18 years old'4.4 日期
创建日期对象
// 当前时间
var now = new Date();
// 指定时间
var date1 = new Date("2023/02/14 09:00:00");
var date2 = new Date(2023, 1, 14); // 注意:月份从0开始,1表示2月获取日期信息
var date = new Date();
console.log(date.getFullYear()); // 年份
console.log(date.getMonth() + 1); // 月份(注意+1)
console.log(date.getDate()); // 日期
console.log(date.getDay()); // 星期(0-6,0表示周日)
console.log(date.getHours()); // 小时
console.log(date.getMinutes()); // 分钟
console.log(date.getSeconds()); // 秒五、JavaScript 与浏览器交互
5.1 DOM 操作
获取元素
// 通过ID获取
var header = document.getElementById('header');
// 通过类名获取
var items = document.getElementsByClassName('item');
// 通过标签名获取
var divs = document.getElementsByTagName('div');
// 通过选择器获取(推荐)
var firstItem = document.querySelector('.item');
var allItems = document.querySelectorAll('.item');修改元素内容
var element = document.getElementById('content');
// 修改文本内容
element.textContent = '新的文本内容';
// 修改HTML内容
element.innerHTML = '<strong>新的HTML内容</strong>';修改元素样式
var box = document.getElementById('box');
// 修改单个样式
box.style.color = 'red';
box.style.fontSize = '16px';
// 修改多个样式(推荐使用类)
box.className = 'active highlight';事件处理
var button = document.getElementById('myButton');
// 添加点击事件
button.addEventListener('click', function() {
console.log('按钮被点击了');
});
// 阻止默认行为
var link = document.getElementById('myLink');
link.addEventListener('click', function(event) {
event.preventDefault(); // 阻止链接跳转
console.log('链接被点击,但没有跳转');
});5.2 BOM 操作
窗口操作
// 弹出警告框
alert('这是一个警告');
// 确认框
var isConfirmed = confirm('确定要删除吗?');
if (isConfirmed) {
console.log('用户点击了确定');
}
// 输入框
var name = prompt('请输入您的名字', '张三');
console.log('用户输入的名字:', name);
// 页面跳转
location.href = 'https://example.com';
// 刷新页面
location.reload();
// 延迟执行
setTimeout(function() {
console.log('2秒后执行');
}, 2000);
// 定时执行
var intervalId = setInterval(function() {
console.log('每1秒执行一次');
}, 1000);
// 停止定时器
clearInterval(intervalId);浏览器信息
// 获取浏览器信息
console.log(navigator.userAgent);
// 获取屏幕尺寸
console.log(screen.width);
console.log(screen.height);
// 获取当前URL
console.log(location.href);六、调试与最佳实践
6.1 调试技巧
控制台输出
console.log('普通日志');
console.info('信息日志');
console.warn('警告日志');
console.error('错误日志');
// 格式化输出
console.log('姓名:%s, 年龄:%d', '张三', 18);
// 分组输出
console.group('用户信息');
console.log('姓名:张三');
console.log('年龄:18');
console.groupEnd();断点调试
- 浏览器中按 F12 打开开发者工具
- 选择 Sources 标签
- 找到需要调试的文件
- 在程序的某一行点击设置断点
- 刷新页面,程序会在断点处暂停
- 使用 Watch 监视变量值
- 使用 F11 单步执行代码
6.2 常见错误与解决
类型转换问题
// 错误:字符串拼接
console.log('10' + 5); // '105' (不是15)
// 解决:转换为数字
console.log(Number('10') + 5); // 15
console.log(parseInt('10') + 5); // 15
console.log(parseFloat('10.5') + 5); // 15.5作用域问题
// 错误:变量提升导致的问题
for (var i = 0; i < 5; i++) {
setTimeout(function() {
console.log(i); // 输出5次5
}, 100);
}
// 解决:使用let
for (let i = 0; i < 5; i++) {
setTimeout(function() {
console.log(i); // 输出0,1,2,3,4
}, 100);
}6.3 代码规范
- 使用
let和const代替var(ES6+) - 函数命名使用驼峰式(首字母小写)
- 变量命名有意义
- 保持一致的缩进(推荐2或4个空格)
- 为代码添加必要的注释
- 避免全局变量污染
// 推荐
function calculateTotal(items) {
let total = 0;
for (let i = 0; i < items.length; i++) {
total += items[i].price * items[i].quantity;
}
return total;
}
// 不推荐
function calc(t) {
var s = 0;
for (var i = 0; i < t.length; i++) {
s += t[i].p * t[i].q;
}
return s;
}