一、前言经过三个月的等待，最近终于是约了两场线上面试。一个是直接技术面，一个是过了笔试然后进行的技术面。
在这里非常感谢下面这篇文章，让我提前复习了一些知识点，不然面试效果只会更差。前端面试题汇总大全（含答案）– 持续更新
二、问答 1. 箭头函数和普通函数区别 箭头函数不能用于构造函数 this指向不同，箭头函数不创建this，也可以说箭头函数本身没有this，但是它在声明时可以捕获其所在上下文的this供自己使用。this一旦被捕获，就不再发生变化。 箭头函数不绑定arguments，取而代之用rest参数…解决 其他区别 总结： 2. NodeList和Array的区别 ChatGPT回答：
类型：DOM元素节点组成的集合。它通常是通过使用像querySelectorAll这样的DOM方法返回的结果。 方法和属性：特定的方法和属性，例如item(index)方法用于通过索引获取节点、length属性表示节点数量等。然而，它没有像Array那样丰富的内置方法，例如push、pop、forEach等。 可迭代性：不是可迭代的（iterable），不能直接使用for…of循环来遍历其中的元素。如果要遍历NodeList，需要使用传统的for循环或将其转换为一个数组后再进行遍历。 功能差异：NodeList会自动更新，以反映最新的DOM状态。这意味着如果使用querySelectorAll获取了某个元素的NodeList，并且之后文档中添加或移除了相应的元素，NodeList会自动更新，而不需要重新查询。相比之下，Array是静态的，不具备自动更新的能力。 综上所述，NodeList适用于处理DOM节点集合，而Array则适用于通用的数据存储和操作。如果需要使用数组的大部分方法和功能，可以将NodeList转换为Array，例如通过Array.from(nodeList)或使用扩展运算符[…nodeList]。
3. 类型判断的几种方法 typeof1 2 3 4 5 6 7 8 9 10 11 12 typeof 1 typeof 'a' typeof true typeof undefined typeof null typeof {} typeof [1 ,2 ,3 ] function Fn (typeof new Fn () typeof new Array ()
instanceof适合进行引用类型的判断。1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 function A (name,age ){ this .name = name; this .age = age; } a = new A ('张三' ,18 ); console .log (a instanceof A) obj = new Object () obj = {} console .log (obj instanceof Object ); arr = new Array () console .log (arr instanceof Array ); date = new Date () console .log (date instanceof Date );
constructor1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 let num = 23 ;let date = new Date ();let str = "biu~" ;let reg = new RegExp ();let bool = true ;let fn = function ( console .log (886 ); }; let array = [1 , 2 , 3 ];console .log (num.constructor ); console .log (date.constructor ); console .log (str.constructor ); console .log (bool.constructor ); console .log (fn.constructor ); console .log (reg.constructor ); console .log (array.constructor ); array.constructor == Array ;
通过Object下的toString.call()⽅法来判断1 2 3 4 5 6 7 8 9 10 Object .prototype toString .call ();console .log (toString.call (123 )); console .log (toString.call ('123' )); console .log (toString.call (undefined )); console .log (toString.call (true )); console .log (toString.call ({})); console .log (toString.call ([])); console .log (toString.call (function (console .log (toString.call (null )); console .log (toString.call (undefined ));
其他Array.isArray() 静态方法用于确定传递的值是否是一个 Array。 4. CSS权重 !important > 行内样式（比重1000）> ID 选择器（比重100） > 类选择器（比重10） > 标签（比重1） > 通配符 > 继承 > 浏览器默认属性
通常可以将css的优先级由高到低分为6组：
第一优先级：属性后面使用！important。它会覆盖页面内其他位置定义的元素样式。 第二优先级：在html中给元素标签加style，即内联样式/行内样式。（style=”…”） 第三优先级：由一个或多个id选择器来定义。 (#box{…}) 第四优先级：由一个或多个类选择器、属性选择器、伪类选择器定义。 (.classname{…}) 第五优先级：由一个或多个类型选择器定义。 （div{…}） 第六优先级：通配选择器。 (*{…}) 5. CSS选择器有哪些 1、元素选择器 标签名{ }#id属性值{ }·class属性值{ }.a, .b{}.a.b{}*{}ul li{}ul>li{}a:hover{}
1 2 3 4 5 6 7 8 9 10 [属性名] [属性名=“属性值”] [属性名^="属性值" ] [属性名$="属性值" ] [属性名*="属性值" ]
11、兄弟元素选择器+选择器~选择器
6. Vue父传子有几种方法 1、Props
7. 转字符串方法 String()
1 2 3 4 5 6 console .log (String (123 )); console .log (String ([1 , 2 , 3 ])); console .log (String ({ a : 1 })); console .log (String (null )); console .log (String (undefined )); console .log (String (function (
toString()
拼接字符串
1 2 3 4 5 console .log (123 + '' ); console .log ([1 , 2 , 3 ] + '' ); console .log ({ a : 1 } + '' ); console .log (null + '' ); console .log (undefined + '' );
JSON.stringify()
1 2 3 4 5 console .log (JSON .stringify (123 )); console .log (JSON .stringify ([1 , 2 , 3 ])); console .log (JSON .stringify ({ a : 1 })); console .log (JSON .stringify (null )); console .log (JSON .stringify (undefined ));
字符串格式化：
1 2 3 4 console .log (typeof JSON .parse ('123' )); console .log (typeof JSON .parse ('[1, 2, 3]' )); console .log (typeof JSON .parse ('{"a":1}' )); console .log (typeof JSON .parse ('null' ));
8. 简述一下你对 HTML 语义化的理解？ 用正确的标签做正确的事情。内容结构化，结构更清晰，便于对浏览器、搜索引擎解析；即使在没有样式 CSS 情况下也以一种文档格式显示，并且是容易阅读的;利于 SEO;便于阅读维护理解。
9. new的过程 创建一个新的空对象。 将这个新对象的原型指向构造函数的原型。 将构造函数的this指向这个新对象。 执行构造函数中的代码，初始化这个新对象。 返回这个新对象。 10. HTML5新特性 语义化标签 表单增强 视频和音频支持 Canvas绘图 Web存储 地理定位 Web Workers Web Socket CSS3支持 11. 常见的HTML块级元素、行内元素、行内块元素分别有哪些？ 块级1 2 3 4 5 6 7 <p > ：用于表示段落。<h1 > - <h6 > ：用于表示标题，h1 是最高级别的标题。<ul > 、<ol > 、<li > ：用于创建无序列表和有序列表。<div > ：用于分组和布局页面元素。<table > 、<tr > 、<td > 等：用于创建表格。<hr > ：用于创建水平线。<pre > ：用于展示预格式化的文本，其中的空格、回车等会保留在输出结果中。
行内1 2 3 4 5 6 <a > ：用于创建超链接。<span > ：用于包含文本和其他行内元素，可以用于实现文本的样式和布局效果。<b > 、<i > 、<u > 、<strong > 、<em > 、<small > 、<sup > 、<sub > 等：用于对文本进行修饰和强调。<br > ：用于强制换行。<code > 、<var > 、<kbd > 等：用于表示计算机代码和用户输入。<q > 、<cite > 、<blockquote > 等：用于表示引用和短文本块。
行内块1 2 3 4 5 6 <img > ：用于插入图片，可以通过设置其宽度和高度来控制图片的大小，但是在默认情况下，它是一个行内块级元素。<button > ：用于创建按钮。<input > ：用于创建输入框和表单元素。<select > ：用于创建下拉菜单。<textarea > ：用于创建多行文本输入框。<label > ：用于创建表单标签。
12. 块级元素、行内元素、行内块元素区别是什么？ 一、块级元素：
二、行内元素：
三、行内块级元素：
13. localStorage和sessionStorage和cookie的区别 一、存储的时间有效期不同
1、cookie的有效期是可以设置的，默认的情况下是关闭浏览器后失效sessionStorage的有效期是仅保持在当前页面，关闭当前会话页或者浏览器后就会失效
二、存储的大小不同
三、与服务端的通信
14. CSS3新特性 1、选择器：CSS3引入了新的选择器，如伪类选择器、伪元素选择器等，使得选择元素更加灵活和精确。
15. ES6新特性 块级作用域：ES6引入了let和const关键字，可以在块级作用域中声明变量。使用let声明的变量只在当前作用域内有效，避免了变量提升和全局命名冲突的问题。而使用const声明的常量是一个只读变量，一旦被赋值，就不能再改变。 箭头函数：箭头函数是ES6中的一种新的函数声明方式，使用箭头（=>）取代了传统的function关键字。箭头函数具有更简洁的语法，并且自动绑定了上下文，解决了回调函数中this指向问题。 解构赋值：解构赋值是一种从数组或对象中提取值并赋值给变量的语法。在ES6中，可以使用解构赋值语法快速获取数组或对象中的元素，简化了代码编写和数据交换。 默认参数：ES6引入了函数的默认参数，允许在函数定义时为参数提供默认值。如果调用时未传递参数，将使用默认值。这样可以简化函数的使用，并且可以传递部分参数，而不是全部参数。 扩展运算符：扩展运算符可以将数组或对象展开，提取出其中的元素。在函数调用或数组和对象字面量中，使用…语法可以将数组或对象展开成独立的元素，或将多个元素合并成数组或对象。 模板字符串：模板字符串是一种更方便的字符串拼接方式，使用反引号（`）定义字符串，并可以在其中插入变量和表达式，提高了代码的可读性和可维护性。 类和模块：ES6引入了类（class）的语法糖，使得面向对象编程更加简洁和易用。类可以通过extends关键字实现继承，使用super关键字调用父类的方法。此外，ES6还引入了模块化的概念，通过import和export关键字可以方便地导入和导出模块。 迭代器和生成器：ES6中引入了迭代器和生成器的概念，可以简化处理集合和异步编程的复杂度。迭代器是一个包含next()方法的对象，可以按照定义的顺序逐个返回值。而生成器是一种特殊的函数，可以通过yield关键字将状态保存下来，并在需要的时候恢复执行。 Promise对象：Promise是异步编程的一种解决方案，可以避免回调地狱和提供更好的错误处理。Promise对象可以表示一个异步操作的最终完成或失败，并能够链式调用和处理多个异步操作。 模块化导入和导出：ES6中的模块化语法可以更好地组织和管理代码，提供了import和export关键字，以及export default关键字来导入和导出模块。 16. 阻止a标签跳转有几种方法 <a href="javascript:;">aaaaa</a><a href="https://leonus.cn" onclick="return false">aaaaa</a><a href="https://leonus.cn" onclick="event.preventDefault()">aaaaa</a>17. 浏览器输入URL后发生了什么 1、DNS域名解析。
18. 清除浮动的几种方法 一、 额外标签法
二、 父级添加overflow方法
三、使用after伪元素清除浮动
四、使用before和after双伪元素清除浮动（较常用推荐）
三、参考文献 ]]>
.JPG)
.JPG)
。相信看过琉璃那篇文章的应该知道，对我来说耳机没有了右耳基本等于没用了。没办法，只能再买一个了。
。
