当前位置：首页 > news >正文

媒体查询、事件绑定、对象拷贝等知识点总结

news 2026/7/23 23:06:21

一、媒体查询（CSS3 响应式设计）

1. 基本语法

css

@media 媒体类型 and (媒体特性) { /* CSS 规则 */ }

2. 常用媒体类型

值	说明
`screen`	电脑屏幕、平板、手机等
`print`	打印机
`all`	所有设备（默认）

3. 常用媒体特性

特性	说明
`max-width`	最大宽度（≤ 该值）
`min-width`	最小宽度（≥ 该值）
`orientation: portrait`	竖屏
`orientation: landscape`	横屏

4. 正确使用方式

css

/* 方式一：从小到大（移动优先） */ body { background: white; } @media (min-width: 768px) { body { background: pink; } } @media (min-width: 1024px) { body { background: purple; } } /* 方式二：从大到小（桌面优先） */ body { background: purple; } @media (max-width: 1023px) { body { background: pink; } } @media (max-width: 767px) { body { background: white; } }

5. 关键原则

max-width表示“≤ 该宽度时生效”，多个媒体查询同时满足时，后定义的会覆盖前定义的。

二、事件绑定（DOM 事件处理）

1. 事件三要素

要素	说明	示例
事件源	触发事件的元素	`btn`
事件类型	触发条件	`click`、`mouseenter`
事件处理程序	执行的操作	`function() {...}`

2. 事件绑定的三种方式

方式一：HTML 事件处理程序（不推荐）

html

<button οnclick="alert('点击')">按钮</button>

方式二：DOM 0 级事件处理程序

javascript

btn.onclick = function() { ... }; // 解绑 btn.onclick = null;

特点：简单，但同一事件只能绑定一个处理程序

方式三：DOM 2 级事件处理程序（标准推荐）

javascript

// 绑定 btn.addEventListener('click', function() { ... }); // 解绑（需传入相同函数） btn.removeEventListener('click', handler);

特点：可绑定多个处理程序，更灵活

3. 批量绑定与作用域问题

javascript

// ❌ 错误示例：使用 var for (var i = 0; i < imgs.length; i++) { imgs[i].onclick = function() { console.log(i); // 始终输出 imgs.length } } // ✅ 正确示例 1：使用 let（ES6） for (let i = 0; i < imgs.length; i++) { imgs[i].onclick = function() { console.log(i); // 正确输出 0,1,2... } } // ✅ 正确示例 2：使用闭包（ES5 兼容写法） for (var i = 0; i < imgs.length; i++) { imgs[i].onclick = (function(index) { return function() { console.log(index); } })(i); }

4. 原理说明

var：函数作用域，循环结束后变量值统一为最终值
let：块级作用域，每次循环创建独立变量
闭包：通过立即执行函数创建独立作用域保存当前值

三、对象的拷贝与访问

1. 数据类型分类

类型	存储方式	示例
基本类型	栈内存，存值	`number`、`string`、`boolean`、`null`、`undefined`、`symbol`
引用类型	栈内存存地址，堆内存存值	`object`、`array`、`function`

2. 浅拷贝

定义

只拷贝对象的第一层属性，对于引用类型属性，只拷贝内存地址（新旧对象共享该引用）

实现方式

javascript

// 方式一：for...in 循环 for (let k in obj) { o[k] = obj[k]; } // 方式二：Object.assign() let o = Object.assign({}, obj); // 方式三：扩展运算符 let o = { ...obj };

特点

javascript

let obj = { a: 1, b: { c: 2 } }; let o = { ...obj }; o.b.c = 3; console.log(obj.b.c); // 3（被改变，会联动）

3. 深拷贝

定义

递归拷贝所有层级，新旧对象完全独立，互不影响

实现方式

方式一：递归函数（你笔记中的方法）

javascript

function deepCopy(newObj, oldObj) { for (let k in oldObj) { let item = oldObj[k]; if (item instanceof Array) { newObj[k] = []; deepCopy(newObj[k], item); } else if (item instanceof Object) { newObj[k] = {}; deepCopy(newObj[k], item); } else { newObj[k] = item; } } }

方式二：JSON 方法（简单场景）

javascript

let o = JSON.parse(JSON.stringify(obj));

⚠️限制：会忽略undefined、function、symbol，不能处理循环引用

4. 浅拷贝 vs 深拷贝对比表

对比维度	浅拷贝	深拷贝
拷贝层级	仅第一层	所有层级
引用类型处理	复制地址	递归创建新对象
与原数据关系	嵌套数据会联动	完全独立
性能	高	较低
适用场景	对象结构简单	对象结构复杂且需完全独立

四、对象属性访问

1. 两种访问方式

方式	语法	特点
点语法	`obj.property`	简洁，但属性名必须为合法标识符且固定
方括号语法	`obj["property"]`或`obj[variable]`	灵活，支持变量、表达式、特殊字符

2. 必须使用方括号的场景

javascript

// 1. 属性名包含特殊字符 obj["first-name"]; obj["user age"]; // 2. 属性名是变量 let key = "name"; obj[key]; // 3. 动态遍历属性 for (let k in obj) { obj[k]; // 必须用方括号 } // 4. 属性名是表达式 obj["a" + "b"];

3. Object.keys() 和 Object.values()

方法	返回值	示例
`Object.keys(obj)`	属性名组成的数组	`['name', 'age']`
`Object.values(obj)`	属性值组成的数组	`['张三', 18]`
`Object.entries(obj)`	键值对数组	`[['name','张三'], ['age',18]]`

javascript

// 常用遍历模式 Object.keys(obj).forEach(key => { console.log(key, obj[key]); });

4. 点语法 vs 方括号记忆要点

点语法：属性名已知且符合命名规范时使用
方括号：属性名动态、含特殊字符或为变量时使用

五、综合对比速查表

知识点	关键概念	注意事项
媒体查询	`max-width`、`min-width`	注意样式覆盖顺序
事件绑定	三要素、批量绑定	循环中使用`let`或闭包解决作用域问题
浅拷贝	只拷贝第一层	引用类型属性会联动
深拷贝	递归拷贝所有层	JSON 方法有局限性
属性访问	点语法 vs 方括号	动态属性名必须用方括号