JavaScript 相关知识点

发布于 2022-12-05 12:53:06 字数 7732 浏览 93 评论 0

Var 的变量提升的底层原理是什么？

JS 引擎的工作方式是:
1）先解析代码，获取所有被声明的变量；
2）然后在运行。也就是说分为预处理和执行两个阶段。
变量提升：所有变量的声明语句都会被提升到代码头部。但是变量提升只对var命令声明的变量有效，如果一个变量不是用 var 命令声明的，就不会发生变量提升；JS 里的function也可看做变量，也存在变量提升情况。

JS 如何计算浏览器的渲染时间？

1）解析HTML生成DOM树。
2）解析CSS生成CSSOM规则树。
3）将DOM树与CSSOM规则树合并在一起生成渲染树。
4）遍历渲染树开始布局，计算每个节点的位置大小信息。
5）将渲染树每个节点绘制到屏幕。

垂直水平居中的方式？

1）flex布局
display: flex; // flex 布局
justify-content: center; // 使子项目水平居中
align-items: center; // 使子项目垂直居中

2）定位流（子绝父相）
父元素设置为：position: relative;
子元素设置为：position: absolute;
距上 50%，据左 50%，然后减去元素自身宽度的距离就可以实现

width: 100px;
height: 100px;
position: absolute;
left: 50%;
top: 50%;
margin: -50px 0 0 -50px;

如何判断一个对象是否为数组？

a) isPrototypeOf() 方法，判定 Array 是不是在 obj 的原型链中，如果是，则返回 true，否则 false;
b) obj instanceof Array;
c) Object.prototype.toString.call(obj)；
d) Array.isArray(obj); // 不推荐

margin 坍塌？

当两个盒子在垂直方向上设置 margin 值时，会出现塌陷现象。

解决方案:
1).给父盒子添加border
2).给父盒子添加padding-top
3).给父盒子添加overflow:hidden
4).父盒子:position:fixed
5).父盒子:display:table
6).给子元素的前面添加一个兄弟元素，属性为：content:""; overflow:hidden;

伪类与伪元素的区别？

a) 定义区别
伪类
伪类用于选择DOM树之外的信息，或是不能用简单选择器进行表示的信息。前者包含那些匹配指定状态的元素，比如:visited，:active；后者包含那些满足一定逻辑条件的DOM树中的元素，比如:first-child，:first-of-type，：target。
伪元素
伪元素为DOM树没有定义的虚拟元素。不同于其他选择器，它不以元素为最小选择单元，它选择的是元素指定内容。比如::before表示选
择元素内容的之前内容，也就是""；::selection表示选择元素被选中的内容。

css 样式优先级，各自的权重？

优先级别：
通用选择器（*） < 元素(类型)选择器 < 类选择器 < 属性选择器 < 伪类 < ID 选择器 < 内联样式
权重：
1).第一等：代表内联样式，如: style=””，权值为1000。
2)第二等：代表ID选择器，如：#content，权值为100。
3)第三等：代表伪类和属性选择器，如.content，权值为10。
4)第四等：代表类型选择器和伪元素选择器，如div p，权值为1。

判断数据类型有哪些方法？

1)typeof
typeof 是一个操作符，其右侧跟一个一元表达式，并返回这个表达式的数据类型。返回的结果用该类型的字符串(全小写字母)形式表示，包括以下 7 种：number、boolean、symbol、string、object、undefined、function 等。
2)instanceof
instanceof 是用来判断 A 是否为 B 的实例，表达式为：A instanceof B，如果 A 是 B 的实例，则返回 true,否则返回 false。在这里需要特别注意的是：instanceof 检测的是原型
3)constructor
当一个函数 F被定义时，JS引擎会为F添加 prototype 原型，然后再在 prototype上添加一个 constructor 属性，并让其指向 F 的引用。
4)toString
toString() 是 Object 的原型方法，调用该方法，默认返回当前对象的 [[Class]]点击并拖拽以移动。这是一个内部属性，其格式为 [object Xxx] ，其中 Xxx 就是对象的类型。对于 Object 对象，直接调用 toString() 就能返回 [object Object] 。而对于其他对象，则需要通过 call / apply 来调用才能返回正确的类型信息。

介绍一下 JS 的基本数据类型？

Undefined、Null、Boolean、Number、String

介绍一下 JS 有哪些内置对象？

Object 是 JavaScript 中所有对象的父对象;
数据封装类对象：Object、Array、Boolean、Number、String
其他对象：Function、Argument、Math、Date、RegExp、Error

push()、pop()、shift()、unshift() 分别是什么功能？

// push 方法
// 将新元素添加到一个数组中，并返回数组的新长度值。
var a=[1,2,3,4];
a.push(5);

// pop 方法
// 移除数组中的最后一个元素并返回该元素。
var a=[1,2,3,4];
a.pop();

// shift 方法
// 移除数组中的第一个元素并返回该元素。
var a=[1,2];
a.shift();

// unshift 方法
// 将指定的元素插入数组开始位置并返回该数组。
var a=[1,2];
a.unshift(0);

null 和 undefined 有何区别？

1)null 表示一个对象被定义了，值为空值； undefined 表示不存在这个值。
2)undefined :是一个表示"无"的原始值或者说表示"缺少值"，就是此处应该有一个值，但是还没有定义。当尝试读取时会返回 undefined；例如变量被声明了，但没有赋值时，就等于undefined。
3)注意：在验证 null 时，一定要使用 === ，因为 == 无法分别 null 和 undefined

new 操作符具体干了什么？

1)创建一个空对象，并且 this 变量引用该对象。
2)属性和方法被加入到 this 引用的对象中。
3)新创建的对象由 this 所引用。

你对 JSON 了解吗？

JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，它是基于 JavaScript 的一个子集。数据格式简单，易于读写，占用带宽小。如：{"age":"12", "name":"back"}

JavaScript 的 typeof 返回哪些数据类型？

undefined、string、boolean、number、symbol(ES6)、Object、Function

split() join() 的区别？

前者是将字符串切割成数组的形式，后者是将数组转换成字符串

事件委托是什么？

利用事件冒泡的原理，让自己的所触发的事件，让他的父元素代替执行！

闭包是什么，有什么特性，对页面有什么影响？

闭包的特性：
①.封闭性：外界无法访问闭包内部的数据，如果在闭包内声明变量，外界是无法访问的，除非闭包主动向外界提供访问接口；
②.持久性：一般的函数，调用完毕之后，系统自动注销函数，而对于闭包来说，在外部函数被调用之后，闭包结构依然保存在系统中，闭包中的数据依然存在，从而实现对数据的持久使用。

优点：
① 减少全局变量。
② 减少传递函数的参数量
③ 封装；

缺点：
使用闭包会占有内存资源，过多的使用闭包会导致内存溢出等.

如何阻止事件冒泡？

ie：阻止冒泡 ev.cancelBubble = true
非 IE：ev.stopPropagation()

如何阻止默认事件？

return false
ev.preventDefault()

如何让事件先冒泡后捕获？

在 DOM 标准事件模型中，是先捕获后冒泡。但是如果要实现先冒泡后捕获的效果，对于同一个事件，监听捕获和冒泡，分别对应相应的处理函数，监听到捕获事件，先暂缓执行，直到冒泡事件被捕获后再执行捕获之间。

mouseover 和 mouseenter 的区别？

mouseover：当鼠标移入元素或其子元素都会触发事件，所以有一个重复触发，冒泡的过程。对应的移除事件是mouseout
mouseenter：当鼠标移除元素本身（不包含元素的子元素）会触发事件，也就是不会冒泡，对应的移除事件是mouseleave

js 的 new 操作符做了哪些事情？

new 操作符新建了一个空对象，这个对象原型指向构造函数的 prototype，执行构造函数后返回这个对象。

js 的各种位置，比如 clientHeight、scrollHeight、offsetHeight 以及 scrollTop、offsetTop、clientTop 的区别？

clientHeight：表示的是可视区域的高度，不包含border和滚动条
offsetHeight：表示可视区域的高度，包含了border和滚动条
scrollHeight：表示了所有区域的高度，包含了因为滚动被隐藏的部分。
clientTop：表示边框border的厚度，在未指定的情况下一般为0
scrollTop：滚动后被隐藏的高度，获取对象相对于由offsetParent属性指定的父坐标(css定位的元素或body元素)距离顶端的高度。

Doctype 作用？严格模式与混杂模式如何区分？它们有何意义？

Doctype声明于文档最前面，告诉浏览器以何种方式来渲染页面，这里有两种模式，严格模式和混杂模式。
严格模式的排版和 JS 运作模式是以该浏览器支持的最高标准运行。
混杂模式，向后兼容，模拟老式浏览器，防止浏览器无法兼容页面。

link 标签和 import 标签的区别？

link属于html标签，而@import是css提供的
页面被加载时，link会同时被加载，而@import引用的css会等到页面加载结束后加载。
link是html标签，因此没有兼容性，而@import只有IE5以上才能识别。
link方式样式的权重高于@import的。

多行元素的文本省略号？

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;

简述一下 src 与 href 的区别？

href 是指向网络资源所在位置，建立和当前元素（锚点）或当前文档(链接）之间的链接，用于超链接。
src 是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求 src 资源时会将其指向的资源下载并应用到文档内，例如 js 脚本，img 图片和 frame 等元素。
当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。

HTTP 的几种请求方法用途？

1、GET方法
发送一个请求来取得服务器上的某一资源
2、POST方法
向URL指定的资源提交数据或附加新的数据
3、PUT方法
跟POST方法很像，也是想服务器提交数据。但是，它们之间有不同。PUT指定了资源在服务器上的位置，而POST没有
4、HEAD方法
只请求页面的首部
5、DELETE方法
删除服务器上的某资源
6、OPTIONS方法
它用于获取当前URL所支持的方法。如果请求成功，会有一个Allow的头包含类似“GET,POST”这样的信息
7、TRACE方法
TRACE方法被用于激发一个远程的，应用层的请求消息回路
8、CONNECT方法
把请求连接转换到透明的TCP/IP通道

从浏览器地址栏输入 url 到显示页面的步骤？

浏览器根据请求的 URL 交给 DNS 域名解析，找到真实 IP，向服务器发起请求；
服务器交给后台处理完成后返回数据，浏览器接收文件（HTML、JS、CSS、图象等）；
浏览器对加载到的资源（HTML、JS、CSS 等）进行语法解析，建立相应的内部数据结构（如 HTML 的 DOM）；
载入解析到的资源文件，渲染页面，完成。