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

一、媒体查询CSS3 响应式设计1. 基本语法cssmedia 媒体类型 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 事件处理程序不推荐htmlbutton οnclickalert(点击)按钮/button方式二DOM 0 级事件处理程序javascriptbtn.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使用 letES6 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、function2. 浅拷贝定义只拷贝对象的第一层属性对于引用类型属性只拷贝内存地址新旧对象共享该引用实现方式javascript// 方式一for...in 循环 for (let k in obj) { o[k] obj[k]; } // 方式二Object.assign() let o Object.assign({}, obj); // 方式三扩展运算符 let o { ...obj };特点javascriptlet obj { a: 1, b: { c: 2 } }; let o { ...obj }; o.b.c 3; console.log(obj.b.c); // 3被改变会联动3. 深拷贝定义递归拷贝所有层级新旧对象完全独立互不影响实现方式方式一递归函数你笔记中的方法javascriptfunction 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 方法简单场景javascriptlet 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 方括号动态属性名必须用方括号六、典型面试题1. 浅拷贝和深拷贝的区别浅拷贝只复制对象的第一层属性引用类型属性复制的是内存地址修改会影响原对象深拷贝递归复制所有层级新对象与原对象完全独立。2. for 循环中绑定事件为什么全部输出相同值如何解决因为var没有块级作用域循环结束后变量为最终值。解决方法使用let或闭包。3.obj.key和obj[key]有什么区别点语法后面必须跟固定的属性名字面量方括号内可以是变量、表达式支持特殊字符属性名更灵活。4. 如何判断数据类型以实现深拷贝使用instanceof判断Array和Object注意null和Array的typeof都返回object需特殊处理。