前端面试宝典V3.0.docx

1、 JavaScript 的基本类型有哪些？引用类型有哪些？null 和 undefined 的区别？（必 会） 76 2、如何判断 JavaScript 的数据类型？（必会） JavaScript 数据类型一共有 7 种： 77 2、 创建对象有几种方法（必会） 79 4、简述创建函数的几种方式？ （必会） 79 5、Javascript 创建对象的几种方式？ （必会） 79 6、请指出 JavaScript 宿主对象和原生对象的区别？（必会） 81 7、 JavaScript 内置的常用对象有哪些？并列举该对象常用的方法？（必会） 82 8、 === 和 ==的区别？（必会） 87 9、 null，undefined 的区别（必会） 88 10、JavaScript 中什么情况下会返回 undefined 值？（必会） 88 11、如何区分数组和对象？（必会） 89 12、怎么判断两个对象相等？（必会） 89 13、列举三种强制类型转换和两种隐式类型转换？（必会） 91 14、 JavaScript 中怎么获取当前日期的月份？（必会） 91 15、 什么是类数组（伪数组），如何将其转化为真实的数组？（必会） 92 16、如何遍历对象的属性？（必会） 92 17、src 和 href 的区别是？（必会） 94 18、如何使用原生 JavaScript 给一个按钮绑定两个 onclick 事件？（必会） 95 19、 如何在 JavaScript 中比较两个对象？（必会） 95 20、JavaScript 中的作用域、预解析与变量声明提升？ （必会） 97 21、变量提升与函数提升的区别？（必会） 99 22、 什么是作用域链？（必会） 99 23、如何延长作用域链？（必会） 99 23、 判断一个值是什么类型有哪些方法？（必会） 100 25、JavaScript 变量按照存储方式区分为哪些类型，并描述其特点？（必会） 100 26、如何实现数组的随机排序？（必会） 100 27、 Function foo() {}和 var foo = function() {}之间 foo 的用法上的区别？（必会） 101 28、索引有哪几种类型，有什么区别？（了解） 102 29、简述 Array.form 和 Array.of 的使用及区别？（了解） 103 30、根据你的理解,请简述 JavaScript 脚本的执行原理（了解） 104 WebAPI 105 1、 什么是 dom？（必会） 105 2、dom 是哪种基本的数据结构？（必会） 105 3、 dom 操作的常用 api 有哪些？（必会） 105 4、 dom 节点的 Attribute 和 Property 有何区别？（必会） 106 5、dom 结构操作怎样添加、移除、移动、复制、创建和查找节点？（必会） 106 6、dom 事件的级别？（必会） 107 7、dom 事件模型？（必会） 107 8、dom 事件流？（必会） 107 9、什么是事件冒泡，它是如何工作的？如何阻止事件冒泡?（必会） 108 10、JavaScript 动画和 CSS3 动画有什么区别？（必会） 108 11、event 对象的常见应用？（必会） 109 12、自定义事件/ 模拟事件？（必会） 109 13、通用事件绑定/ 编写一个通用的事件监听函数？（必会） 110 14、dom 和 bom 的区别（必会） 111 15、事件三要素（必会） 111 16、事件执行过程（必会） 111 17、获取元素位置（必会） 112 18、封装运动函数（必会） 112 19、绑定事件和解除事件的区别（必会） 113 20、谈谈事件委托的理解？（必会） 114 21、 JavaScript 中的定时器有哪些？他们的区别及用法是什么？（必会） 114 22、比较 attachEvent 和 addEventListener?（必会） 115 23、document.write 和 innerHTML 的区别？（必会） 115 24、 什么是 window 对象？什么是 document 对象？（必会） 116 25、Js 拖动的原理？（必会） 118 26、描述浏览器的渲染过程，DOM 树和渲染树的区别（必会） 119 27、dom 树和 render 树之间的关系？（高薪常问） 119 28、获取到页面中所有的 CheckBox 怎么做（不适用第三方框架）？（高薪常问） 119 29、 简单说一下页面重绘和回流？（高薪常问） 119 30、如何最小化重绘(repaint)和回流(reflow)（高薪常问） 120 31、Js 延迟加载的方式有哪些？（了解） 120 32、IE 与 ### 前端面试宝典知识点总结 #### JavaScript 基础类型与引用类型 - **基本类型**：包括 `Number`、`String`、`Boolean`、`Undefined`、`Null` 和 `Symbol`（ES6 引入）。基本类型的值存储在变量中，直接保存在内存中。 - **引用类型**：包括 `Object`、`Array`、`Function`、`Date` 等。这些类型的值是通过引用存储的，实际数据存储在一个不同的位置，而变量只保存指向实际数据的指针。 #### 数据类型判断 - 使用 `typeof` 运算符可以判断大部分的基本类型。 - 使用 `instanceof` 运算符可以判断引用类型。 - 特殊情况下，对于 `null` 类型，`typeof null` 返回 `"object"`，因此还需要结合其他方法，例如使用 `Object.prototype.toString.call(value)` 来更准确地判断。 #### 创建对象的方法 - **字面量方式**：`let obj = { key: 'value' };` - **构造函数方式**：`function Person(name) { this.name = name; } let person = new Person('John');` - **工厂函数方式**：`function createPerson(name) { return { name: name }; }` - **类的方式**：ES6 引入了 `class` 关键字来定义类。 - **对象.create() 方法**：继承指定对象创建新对象。 #### 创建函数的几种方式 - **函数声明**：`function myFunction() {}` - **函数表达式**：`const myFunction = function () {};` - **箭头函数**：ES6 新特性，`const myFunction = () => {};` - **构造函数**：`function MyFunction() {}` - **立即执行函数表达式 (IIFE)**：`(function () {})();` #### JavaScript 内置常用对象及其方法 - **Array**：数组对象提供了多种方法如 `.push()`, `.pop()`, `.shift()`, `.unshift()`, `.slice()`, `.splice()`, `.concat()`, `.sort()` 等。 - **String**：字符串对象的方法包括 `.length`, `.charAt()`, `.indexOf()`, `.substring()`, `.replace()` 等。 - **Date**：日期对象的方法包括 `.getFullYear()`, `.getMonth()`, `.getDate()`, `.getHours()`, `.getMinutes()` 等。 - **Math**：数学对象提供了 `.random()`, `.round()`, `.ceil()`, `.floor()` 等方法。 #### `===` 和 `==` 的区别 - `==`（相等运算符）进行值的比较时会自动进行类型转换。 - `===`（恒等运算符）不仅比较值还比较类型，如果类型不同则直接返回 `false`。 #### `null` 与 `undefined` 的区别 - `undefined` 表示未定义，通常用于变量未被赋值的情况。 - `null` 表示没有值或者空值，常用来表示对象的缺失。 #### JavaScript 中返回 `undefined` 的情况 - 当变量被声明但未赋值时。 - 函数未返回任何值时，默认返回 `undefined`。 - 访问不存在的对象属性时。 - 数组中的空位也会被视为 `undefined`。 #### 区分数组和对象 - **数组**：具有 `length` 属性，索引从 0 开始的数字。 - **对象**：由键值对组成，键通常是字符串。 #### 判断两个对象是否相等 - 直接使用 `==` 或 `===` 比较引用地址，无法比较内部属性。 - 使用递归算法或第三方库如 `lodash` 的 `_isEqual` 方法来进行深度比较。 #### 强制类型转换与隐式类型转换 - **强制类型转换**： - `Number()` 函数或 `parseInt()`, `parseFloat()` - `String()` 函数 - `Boolean()` 函数 - **隐式类型转换**： - 在算术运算中自动将字符串转换为数字。 - 在条件判断中自动将某些值（如 `0`, `null`, `undefined`）转换为布尔值。 #### 获取当前日期的月份 - 使用 `new Date().getMonth()`，注意月份是从 0 开始计数的，即 0 代表 1 月。 #### 类数组（伪数组）转为真实数组 - 使用 `Array.from()` 方法。 - 使用扩展运算符 `...`。 #### 遍历对象的属性 - 使用 `for...in` 循环。 - 使用 `Object.keys()` 方法结合 `forEach()` 或 `map()`。 - 使用 `Object.entries()` 方法结合 `forEach()` 或 `map()`。 #### `src` 与 `href` 的区别 - `src` 用于指示脚本文件、图片、视频等资源的位置。 - `href` 用于指定超链接的目标地址。 #### 给按钮绑定多个 `onclick` 事件 - 使用事件监听器 `addEventListener` 方法，可以多次调用来绑定多个事件处理函数。 - 也可以使用 `onclick` 属性，但是这种方式不利于事件管理。 #### 比较两个对象 - 可以使用递归比较每个属性。 - 使用 lodash 库中的 `_isEqual` 方法。 #### JavaScript 作用域、预解析与变量声明提升 - **作用域**：决定了变量的可访问性范围。 - **预解析**（Hoisting）：在代码执行之前，JavaScript 解释器会先将函数声明和变量声明提升到当前作用域的顶部。 - **变量声明提升**：仅提升变量声明，初始化不提升。 #### 变量提升与函数提升的区别 - **变量提升**：只提升声明，不提升初始化。 - **函数提升**：提升整个函数定义。 #### 作用域链 - 描述了 JavaScript 中变量查找的过程，当一个函数被调用时，它会创建一个新的执行上下文，其中包含了一个作用域链。 #### 延长作用域链 - 通过闭包可以延长作用域链，使外部函数访问内部函数的变量。 #### 判断一个值的类型 - 使用 `typeof` 检测基本类型。 - 使用 `instanceof` 检测引用类型。 - 使用 `Object.prototype.toString.call()` 获取准确的类型描述。 #### JavaScript 变量存储方式区分 - **局部变量**：在函数内部声明的变量，只能在该函数内访问。 - **全局变量**：在函数外部声明的变量，可以在任何地方访问。 - **块级作用域变量**：使用 `let` 和 `const` 声明的变量，只在其所在的代码块内有效。 #### 实现数组的随机排序 - 使用 Fisher-Yates 算法（也称为 Knuth shuffle）。 - 伪代码：`for (let i = array.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [array[i], array[j]] = [array[j], array[i]]; }` #### Function 构造函数与匿名函数赋值的区别 - `Function foo() {}`：定义了一个名为 `foo` 的函数。 - `var foo = function() {}`：定义了一个匿名函数并赋值给变量 `foo`。 #### 索引的几种类型及其区别 - **简单索引**：数组的索引。 - **复合索引**：使用多字段作为索引。 - **唯一索引**：确保索引字段的值是唯一的。 #### `Array.from` 与 `Array.of` 的使用及区别 - `Array.from()`：用于从类数组对象或可迭代对象创建新的数组实例。 - `Array.of()`：用于将一组值转换为数组。 #### JavaScript 脚本的执行原理 - JavaScript 是一种解释型语言，代码在运行时逐行解释执行。 - 执行过程中涉及到词法分析、语法分析、编译、执行等多个阶段。 #### DOM 相关知识点 - **DOM**（Document Object Model）：文档对象模型，用于表示和操作 HTML 或 XML 文档。 - **DOM** 数据结构：基于树形结构。 - **DOM API**：提供了多种操作 DOM 的方法，如 `getElementById()`, `getElementsByClassName()`, `querySelector()`, `querySelectorAll()` 等。 - **Attribute** 与 **Property**：属性用于描述 HTML 元素的信息，属性值在元素的开始标签中定义；而属性值可以通过 JavaScript 改变，成为属性。 - **DOM 结构操作**：添加、移除、移动、复制、创建和查找节点的操作。 - **DOM 事件级别**：包括捕获阶段、目标阶段和冒泡阶段。 - **DOM 事件模型**：描述了事件是如何在 DOM 结构中传播的。 - **DOM 事件流**：事件传播的顺序，包括冒泡阶段和捕获阶段。 - **事件冒泡**：事件从最深层的节点开始向上冒泡至顶层节点。 - **阻止事件冒泡**：使用 `event.stopPropagation()` 方法。 - **JavaScript 动画与 CSS3 动画的区别**：JavaScript 动画通常使用定时器实现，而 CSS3 动画使用 CSS 属性变化。 #### Event Loop 事件循环 - **事件循环**：描述了 JavaScript 引擎处理事件队列的方式。 - **任务队列**：存放待处理的任务。 #### 垃圾回收机制 - **垃圾回收**：自动检测并释放不再使用的内存空间。 - **标记-清除算法**：标记所有被引用的对象，然后清除未被标记的对象。 - **引用计数算法**：每个对象都有一个引用计数，当引用计数为 0 时，对象会被回收。 #### 进程与线程的关系 - **进程**：是操作系统分配资源的基本单位。 - **线程**：是进程内的执行单元，一个进程可以有多个线程。 - **关系**：一个进程可以拥有多个线程，而线程共享进程的资源。 #### 栈与队列的区别 - **栈**：后进先出（LIFO）的数据结构。 - **队列**：先进先出（FIFO）的数据结构。 #### 栈与堆的区别 - **栈**：用于存储函数调用和局部变量，大小固定。 - **堆**：用于存储动态分配的内存，大小不固定。 #### jQuery 相关知识点 - **$(document).ready()** 与 `window.onload`：前者在 DOM 加载完成后立即执行，后者等待整个页面（包括图像、样式表、脚本等）加载完成后再执行。 - **jQuery 与 Zepto**：两者都是轻量级的 JavaScript 库，但 jQuery 更强大且支持更多的功能。 - **jQuery 的 AJAX 方法**：提供了 `$.ajax()` 方法来发起 AJAX 请求。 - **jQuery 的增删改查方法**：如 `.append()`, `.prepend()`, `.remove()`, `.html()`, `.text()` 等。 - **jQuery 中的 $.get() 与 $.post() 区别**：`$.get()` 用于发送 GET 请求，`.post()` 用于发送 POST 请求。 - **jQuery 处理事件**：使用 `on()` 方法来绑定事件。 - **jQuery 中的动画**：提供 `.animate()` 方法来实现动画效果。 - **jQuery 中引入 CSS**：使用 `.css()` 方法。 - **jQuery 中的插入节点方法**：如 `.append()`, `.prepend()`, `.before()`, `.after()` 等。 - **jQuery 的优势**：简化了 HTML 文档遍历、事件处理、Ajax 交互以及动画等操作。 以上是前端面试宝典中的关键知识点总结，涵盖了 JavaScript 的基础知识、DOM 操作、jQuery 使用等方面的内容。