JavaScript 基础知识总结
·
一、JavaScript基础语法
1.1 变量与数据类型
JavaScript中使用let声明变量，const声明常量：
let age = 18; // 数值类型 const PI = 3.14; // 常量 let name = '小明'; // 字符串类型 let isStudent = true; // 布尔类型 let und = undefined; // undefined类型 let n = null; // null类型
常见数据类型：
-
数值类型(number)：整数、小数、正数、负数
-
字符串类型(string)：用单引号或双引号包裹
-
布尔类型(boolean)：true / false
-
undefined：未定义
-
null：空对象
类型检测：
console.log(typeof 123); // number console.log(typeof 'hello'); // string
1.2 运算符
算术运算符：
+ - * / % // 加减乘除取模
赋值运算符：
+= -= *= /= %=
比较运算符：
> < >= <= == === != !== // 注意：=== 要求类型和值都相等，推荐使用
逻辑运算符：
&& // 逻辑与，一假则假 || // 逻辑或，一真则真 ! // 逻辑非
1.3 类型转换
隐式转换： 系统自动转换
console.log(13 + '2'); // '132' 数值转字符串 console.log(13 - '2'); // 11 字符串转数值
显式转换： 手动转换
Number('123'); // 转换为数值
String(123); // 转换为字符串
Boolean(1); // 转换为布尔
parseInt('12px'); // 取整
二、流程控制与函数
2.1 分支语句
// if多分支
if (score >= 90) {
alert('优秀');
} else if (score >= 70) {
alert('良好');
} else {
alert('及格');
}
// 三元运算符
let result = num >= 10 ? num : '0' + num;
// switch语句
switch (day) {
case 1:
console.log('周一');
break;
default:
console.log('其他');
}
2.2 循环语句
while循环：
let i = 1;
while (i <= 3) {
console.log('月薪过万不是梦');
i++;
}
for循环（推荐）：
for (let i = 1; i <= 10; i++) {
console.log(i);
}
循环嵌套： 外层循环一次，内层循环全部
for (let i = 1; i <= 5; i++) {
for (let j = 1; j <= i; j++) {
document.write('★');
}
document.write('<br>');
}
2.3 函数
函数声明与调用：
function sayHi(name) {
console.log('嗨~' + name);
}
sayHi('小明');
参数与返回值：
function count(x, y) {
return x + y; // 返回结果
}
let total = count(10, 5); // 15
作用域：
-
全局作用域：整个script标签或独立js文件
-
局部作用域：函数内部
匿名函数：
// 函数表达式
let fn = function() {
console.log('函数表达式');
};
fn();
// 立即执行函数
(function() {
console.log('立即执行');
})();
三、数组与对象
3.1 数组
let arr = ['HTML', 'CSS', 'JavaScript'];
// 访问数组
arr[0]; // 'HTML'
arr.length; // 3
// 操作数组
arr.push('Vue'); // 末尾添加
arr.unshift('VS Code'); // 头部添加
arr.pop(); // 删除末尾
arr.shift(); // 删除头部
arr.splice(2, 1); // 删除任意元素
3.2 对象
let person = {
name: '小明',
age: 18,
singing: function() {
console.log('两只老虎');
}
};
// 访问属性和方法
person.name;
person.singing();
3.3 内置对象Math
Math.PI; // 圆周率 Math.random(); // 0~1随机数 Math.ceil(3.4); // 向上取整 4 Math.floor(4.8); // 向下取整 4 Math.round(4.5); // 四舍五入 5 Math.max(1, 5, 3); // 最大值 5 Math.pow(2, 3); // 幂 8 Math.sqrt(16); // 平方根 4
3.4 数据类型存储
-
基本类型：赋值传递的是值本身
-
引用类型：传递的是地址，影响原对象
四、Web APIs：DOM操作
4.1 获取DOM元素
document.querySelector('p'); // 满足条件的第一个元素
document.querySelectorAll('li'); // 所有li元素集合
document.getElementById('box'); // 通过id获取
4.2 操作元素内容
element.innerText; // 文本内容，标签不会被解析 element.innerHTML; // HTML内容，标签会被解析
4.3 操作元素属性
样式属性：
box.style.color = 'red'; box.style.backgroundColor = 'pink'; // 驼峰命名
类名操作：
box.classList.add('active'); // 添加类
box.classList.remove('one'); // 移除类
box.classList.toggle('active'); // 切换类
表单属性：
input.value = '新值'; input.disabled = false; // 启用按钮 checkbox.checked = true; // 勾选复选框
自定义属性：
<div data-id="1"></div>
div.dataset.id; // 获取自定义属性
五、Web APIs：事件处理
5.1 事件监听
btn.addEventListener('click', function() {
console.log('点击了');
});
事件类型：
-
鼠标事件：click、dblclick、mouseenter、mouseleave
-
键盘事件：keydown、keyup
-
焦点事件：focus、blur
-
输入事件：input
-
触摸事件：touchstart、touchend、touchmove
5.2 事件对象
element.addEventListener('click', function(e) {
e.type; // 事件类型
e.clientX; // 光标相对浏览器窗口X坐标
e.offsetX; // 光标相对元素X坐标
e.target; // 真正触发事件的元素
});
5.3 环境对象this
function sayHi() {
console.log(this); // this指向调用者
}
let obj = { name: '小明', sayHi };
obj.sayHi(); // this指向obj
5.4 回调函数
将函数作为参数传递，这个函数称为回调函数：
setInterval(function() {
console.log('定时执行');
}, 1000);
六、事件进阶
6.1 事件流
事件流包含两个阶段：捕获阶段（从父到子）和冒泡阶段（从子到父）。
// 捕获阶段执行
element.addEventListener('click', fn, true);
// 冒泡阶段执行（默认）
element.addEventListener('click', fn, false);
6.2 阻止冒泡
ev.stopPropagation();
6.3 事件委托
利用事件冒泡，在父元素上监听事件，提高性能：
ul.addEventListener('click', function(e) {
if (e.target.tagName === 'LI') {
console.log('点击了li');
}
});
6.4 阻止默认行为
a.addEventListener('click', function(e) {
e.preventDefault();
});
七、DOM节点操作
7.1 创建和插入节点
let p = document.createElement('p'); // 创建元素
p.innerText = '新段落';
box.appendChild(p); // 末尾插入
box.insertBefore(p, box.firstChild); // 指定位置插入
p.cloneNode(true); // 克隆节点（含子节点）
7.2 删除节点
box.removeChild(p); // 由父元素删除子节点
7.3 查找节点关系
element.parentNode; // 父节点 element.children; // 子元素节点 element.previousSibling; // 前一个兄弟节点 element.nextSibling; // 后一个兄弟节点
八、BOM浏览器对象模型
8.1 window对象
-
全局对象，顶级对象
-
所有全局变量和函数都是它的属性和方法
8.2 定时器
延迟函数（执行一次）：
let timerId = setTimeout(function() {
console.log('延迟执行');
}, 3000);
clearTimeout(timerId); // 清除
间歇函数（重复执行）：
let timerId = setInterval(function() {
console.log('重复执行');
}, 1000);
clearInterval(timerId); // 清除
8.3 location对象
location.href; // 获取/设置URL location.search; // 获取查询参数 location.hash; // 获取哈希值 location.reload(true); // 强制刷新
8.4 navigator对象
navigator.userAgent; // 获取浏览器信息
8.5 history对象
history.back(); // 后退 history.forward(); // 前进 history.go(1); // 前进/后退
九、本地存储
9.1 localStorage
数据持久化存储，关闭页面不丢失：
localStorage.setItem('name', '小明'); // 存储
localStorage.getItem('name'); // 获取
localStorage.removeItem('name'); // 删除
9.2 存储复杂数据
需要将对象转换为JSON字符串：
const user = { name: '小明', age: 18 };
// 存储
localStorage.setItem('user', JSON.stringify(user));
// 取出
const result = JSON.parse(localStorage.getItem('user'));
9.3 sessionStorage
关闭浏览器窗口后数据清除，用法与localStorage相同。
十、正则表达式
10.1 基本使用
const reg = /web/;
reg.test('web前端'); // true
10.2 边界符
/^web/; // 匹配开头 /web$/; // 匹配结尾 /^web$/; // 精确匹配
10.3 量词
* // >=0次
+ // >=1次
? // 0或1次
{3} // 3次
{3,} // >=3次
{3,6} // 3~6次
10.4 字符类
[abc] // a、b、c任选一个 [a-z] // 小写字母 [A-Z] // 大写字母 [0-9] // 数字 [^a-z] // 取反
10.5 常用简写
\w // 字母数字下划线 \W // 非字母数字下划线 \d // 数字 \D // 非数字 \s // 空白字符 \S // 非空白字符
10.6 替换与修饰符
str.replace(/前端/g, 'web'); // g表示全部替换 /i // 忽略大小写
十一、实战案例：商品详情页放大镜
放大镜效果实现思路：
-
鼠标经过小盒子：显示对应中等图片
-
鼠标经过中盒子：显示放大镜大盒子
-
黑色遮罩跟随鼠标：使用mousemove事件计算坐标
-
大盒子图片跟随：背景图片位置随遮罩移动
核心算法：
// 鼠标在中等盒子内的坐标 let x = e.pageX - middle.getBoundingClientRect().left; let y = e.pageY - middle.getBoundingClientRect().top - document.documentElement.scrollTop; // 遮罩移动范围限制 if (x <= 100) mx = 0; if (x > 100 && x < 300) mx = x - 100; if (x >= 300) mx = 200; // 大盒子图片移动（放大2倍） large.style.backgroundPositionX = -2 * mx + 'px'; large.style.backgroundPositionY = -2 * my + 'px';
更多推荐
8
0- 0
已为社区贡献3条内容
所有评论(0)