记一次网易前端面试

网易前端面试 。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。 ### 知识点总结 #### 一、JavaScript逻辑运算符的理解与应用 1. **逻辑与运算 (`&&`)** - 当左侧操作数为真（`true`），则返回右侧的操作数；反之，则返回左侧的操作数。 - `alert(1 && 2)` 的结果是 `2`。 - 规则解释： 1. 如果 `"&&"` 前面是 `false`，无论 `"&&"` 后面是 `true` 还是 `false`，结果都将返回 `"&&"` 前面的值； 2. 如果 `"&&"` 前面是 `true`，无论 `"&&"` 后面是 `true` 还是 `false`，结果都将返回 `"&&"` 后面的值。 2. **逻辑或运算 (`||`)** - 当左侧操作数为假（`false`），则返回右侧的操作数；反之，则返回左侧的操作数。 - `alert(0 || 1)` 的结果是 `1`。 - 规则解释： 1. 如果 `"||"` 前面为 `false`，不管 `"||"` 后面是 `true` 还是 `false`，都返回 `"||"` 后面的值。 2. 如果 `"||"` 前面为 `true`，不管 `"||"` 后面是 `true` 还是 `false`，都返回 `"||"` 前面的值。 #### 二、鼠标事件的区别：`mouseenter` 与 `mouseover` 1. **`mouseenter` 事件** - 只有当鼠标指针直接穿过被选元素时，才会触发 `mouseenter` 事件。 - 对应的离开事件为 `mouseleave`。 2. **`mouseover` 事件** - 当鼠标指针穿过被选元素或其子元素时，都会触发 `mouseover` 事件。 - 对应的离开事件为 `mouseout`。 #### 三、正则表达式的应用 1. **正则表达式** - 用于匹配以字母开头，后面跟随数字、字母或下划线，并且总长度为 9 至 20 个字符的字符串。 - 示例正则表达式：`/^[a-zA-Z][a-zA-Z0-9_]{9,20}$/` - `^` 表示字符串的开始。 - `[a-zA-Z]` 表示以任意字母开头。 - `[a-zA-Z0-9_]` 表示随后可以是任何字母、数字或下划线。 - `{9,20}` 表示该模式重复 9 至 20 次。 - `$` 表示字符串的结束。 #### 四、字符串 trim 方法的实现 1. **原始方法** - 使用循环移除字符串两侧的空白字符。 ```javascript String.prototype.trim = function () { var arr = this.split(""); while (arr[0] === "") arr.shift(); while (arr[arr.length - 1] === "") arr.pop(); return arr.join(""); }; ``` 2. **优化后的 trim 方法** - 使用正则表达式简化代码。 ```javascript String.prototype.trim = function () { return this.replace(/^\s*|\s*$/g, ''); }; ``` - `^\s*` 匹配开头的空白字符。 - `\s*$` 匹配结尾的空白字符。 - `/g` 表示全局匹配。 #### 五、JavaScript 输出判断题解析 1. **输出 3 的原因** - 全局变量 `a` 被函数内部赋值为 3，尽管后面有函数声明，但由于函数声明会被提升，因此输出为 3。 ```javascript var a = 4; function b() { a = 3; console.log(a); function a() { } } b(); ``` 2. **`this` 指向的问题** - 第一个输出为 2，表示 `this` 指向对象 `bazz`。 - 第二个输出为 3，表示 `this` 指向全局变量 `baz`。 ```javascript var baz = 3; var bazz = { baz: 2, getBaz: function () { return this.baz; } }; console.log(bazz.getBaz()); var g = bazz.getBaz; console.log(g()); ``` 3. **闭包概念** - `alert(i)` 在每次循环结束后始终输出 5，因为 `i` 是全局变量，最后的值为 5。 ```javascript var arr = [1, 2, 3, 4, 5]; for (var i = 0; i < arr.length; i++) { arr[i] = function () { alert(i); }; } arr[3](); ``` #### 六、CSS `position` 属性的不同值及含义 1. **`absolute` 定位** - 生成绝对定位的元素，相对于具有 `position` 不为 `static` 的第一个父元素进行定位。 - 元素的位置可以通过 `left`, `top`, `right`, `bottom` 属性来定义。 - 注意：`absolute` 定位的元素不会占据空间位置。 2. **`relative` 定位** - 生成相对定位的元素，相对于其正常位置进行定位。 - 元素的位置仍然保持在其正常的文档流中。 - 通常用于调整元素位置而不影响其他元素布局的情况。 通过这次面试经历，我们可以看出，前端开发不仅要求对基本语言特性的深刻理解，还需要掌握一定的面试技巧，如对于逻辑运算符的应用、DOM 事件的理解、正则表达式的熟练使用等。此外，对于 JavaScript 的一些高级特性如闭包、`this` 的指向规则也需要有清晰的认识。同时，CSS 的一些常用属性及其应用场景也是面试中经常被考察的内容之一。