2022年最新前端面试题（大前端时代来临卷起来吧小伙子们..持续维护走到哪记到哪）_javascript的代码块必须用()包括起来。a()b[]c""d{}

HTML和Css部分

1、对BFC规范（块级格式化上下文）的理解

BFC 块级格式化上下文 一块独立的区域，有自己的规则，bfc中的元素与外界的元素互不影响

BFC是一块用来独立的布局环境，保护其中内部元素不受外部影响，也不影响外部。

怎么触发BFC

1. float的值left或right

2. overflow的值不为visible（默认）

3. display的值为inline-block、table-cell、table-caption

4. position的值为absolute（绝对定位）或fixed固定定位

规则：

1、BFC的区域不会与float box重叠。

2、BFC是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。

3、计算BFC的高度时，浮动元素也会参与计算。

4、内部的Box会在垂直方向上一个接一个放置。

5、Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的margin会发生重叠。

BEC的应用

1、可以用来自适应布局

利用BFC的这个原理可以实现两栏布局，左边定宽，右边自适应。不会相互影响，哪怕高度不相等。

给左边盒子加浮动，右边盒子加overflow:hidden;变成BFC，就可以消除外部左边盒子因浮动对他的影响

2、可以清除浮动

一个父元素中的子元素，设置浮动时，父元素没有设置高度，这时子元素脱离文档流，父元素感知不到子元素的高度，造成父元素的塌陷。 这时候给父元素添加overflow:hidden / auto,变成BFC就可以解决这种问题。

**3、**解决垂直边距重叠

1.父子关系的边距重叠

父子关系，如果子元素设置了外边距，在没有把父元素变成BFC的情况下，父元素也会产生外边距。

解决办法: 是给父元素添加一个 overflow:hidden，这样父元素就变为BFC，不会随子元素产生外边距

2.同级兄弟关系的重叠

同级元素在垂直方向上外边距会出现重叠现象，最后外边距的大小取两者绝对值大的那个

可通过添加一个空元素或伪类元素，设置overflow:hidden;解决

2、什么是渐进增强优雅降级

渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后在针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

优雅降级：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

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

· 浏览器根据请求的 URL 交给 DNS 进行域名解析，找到真实 IP 地址，向服务器发起请求；

· 服务器交给后台处理完成后返回数据，浏览器接收文件（HTML、CSS、JS、images等）；

· 浏览器对加载到的资源（HTML、CSS、JS、images等）进行语法解析，建立相应的内部数据结构（如HTML的DOM）；

· 载入解析到的资源文件，渲染页面，完成。

4、CSS特性：继承性，层叠，优先级

1、继承性：子标签会继承父标签的某些样式，如文本颜色和字号。(text- font- color)

2、层叠性：样式冲突，遵循的原则是就近原则。

3、优先级：定义CSS样式时，经常出现两个或更多规则应用在同一元素上，此时，谁的权重高显示谁的样式。

（选择器相同，则执行层叠性；选择器不同，就会出现优先级的问题。）

!Important > 行内式 > id > 类/伪类/属性 > 标签选择器 > 全局
（对应权重：无穷大∞>1000>100>10>1>0）

5、定位有哪几种？分别举例？Z-index熟悉在使用的时候注意什么 ？

static: 默认值 没有定位，元素出现在正常的流中

relative(相对定位):生成相对定位的元素,相对于其正常（原先本身）位置进行定位

absolute（绝对定位):生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位

fixed（固定定位）:生成绝对定位的元素，相对于浏览器窗口进行定位

sticky 粘性定位 当前元素设置了粘性定位，滚动到顶部就会吸附顶部，往下滑还回到原来位置。

z-index规则

1、值可以是正整数、负整数或0，数值越大，盒子越靠上；

2、如果属性值相同，则按照书写顺序，后来居上；

3、数字后面不能加单位。

4、z-index 只能应用于相对定位、绝对定位和固定定位的元素，其他标准流、浮动和静态定位无效

6、页面导入时，使用link和@import有什么区别

页面中使用CSS的方式主要有3种：行内添加定义style属性值，页面头部内嵌调用和外面链接调用，其中外面引用有两种：Link引入和@import导入，两者都是外部引用CSS的方式，但是存在一定的区别：

1、从属关系: link是标签，@import是css提供的.

2. 加载差异: link： 结构和样式同时加载；而@import 先加载结构，后加载样式

3. 兼容性:link没有兼容问题，@import不兼容ie5以下的浏览器.

4.可操作性: link可以通过js操作dom插入link标签改变样式，而@import不能

7、简述src和href的区别

src用于替换当前元素

href用于在当前文档和引用资源之间确立联系.

扩展： src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置 href是Hypertext Reference的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接

8、上下margin重合的问题

1、相邻块元素垂直外边距的合并

解决方案：尽量给只给一个盒子添加margin值

2、嵌套块元素垂直外边距的合并（塌陷）

解决方案：

可以为父元素定义上边框。

可以为父元素定义上内边距

可以为父元素添加overflow:hidden。

9、浏览器常见的兼容性问题？

1、不同浏览器margin和padding不同

2、ie6中，父级元素浮动以后，内部元素内容撑不开宽度

3、标签嵌套不规范，如p和h1-h6里面嵌套div

4、ie6小于19px，会当成19px处理，也就元素宽高小于19px的bug

5、图片3像素问题

6、IE8下给图片添加超链接时，图片会有蓝色边框

7、鼠标滑过时，不显示小手

10、li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？

1、浏览器的默认行为是把inline元素间的空白字符（空格换行tab）渲染成一个空格

解决方案：

为li设置左浮动

将li写在同一行 中间不要有空格

将ul内font-size:0，但是单独li设置文字大小

将ul的letter-spacing:-8px，但是单独li设置字符间距normal

11、Html5新增的语义化标签。

头部标签：

导航标签：

内容区块表签：

页脚标签：

侧边栏：

页面内独立的内容区域：

12、flex弹性盒布局与传统盒模型布局的区别和优点？以及Flex布局哪些属性失效？

区别：

1. 普通盒模型中的子元素分配其父元素的空间，而弹性盒模型中的子元素分配其父元素的可用空间。

2. 普通盒模型主要针对块级元素和行级元素的布局，而弹性盒是建立在弹性流上，也就是元素可以随着可视区域的变化而呈现流式布局。

弹性盒的优点：

能为盒模型提供最大的灵活性，即使是不定宽高的元素依然好用，可以简便、完整、响应式地实现各种页面布局。

传统布局的特点：兼容性好、布局繁琐、局限性，不能在移动端很好的布局

设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效

13、 什么是rem、px、em区别。

rem是一个相对单位，rem的是相对于html元素的字体大小，没有继承性

em是一个相对单位，是相对于父元素字体大小有继承性

px是一个“绝对单位”，就是css中定义的像素，利用px设置字体大小及元素的宽高等，比较稳定和精确。

14、什么是视口

在pc端中，视口指的是在pc端中浏览器的可视区域；

在移动端中，它涉及3个视口：1是布局视口，2是视觉视口，3是理想视口

移动端指的视口就是布局视口

15、什么是媒体查询。

媒体查询是CSS3新语法。

使用媒体查询，可以针对不同的媒体类型定义不同的样式

媒体查询可以针对不同的屏幕尺寸设置不同的样式

当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面

目前针对很多苹果手机、Android手机，平板等设备都用得到多媒体查询

16、响应式布局有哪些实现方式？什么是响应式设计？响应式设计的基本原理是什么？

1.百分比布局，但是无法对字体，边框等比例缩放

2.弹性盒子布局 display:flex

3.rem布局，1rem=html的font-size值的大小

4. css3媒体查询 @media screen and(max-width: 750px){}

5.vw+vh

6.使用一些框架（bootstrap，vant）

什么是响应式设计：响应式网站设计是一个网站能够兼容多个终端，智能地根据不同设备环境进行相对应的布局

响应式设计的基本原理：基本原理是通过媒体查询检测不同的设备屏幕尺寸设置不同的css样式 页面头部必须有meta声明的

17、什么叫CSS盒模型？有哪几种盒模型？有什么区别？box-sizing属性有什么用？

1、什么是CSS盒模型？

在我们的HTML页面中，每一个元素都可以被看成一个盒子，而这个盒子由:内容(content)、内边距(padding)、 边框(border)、外边距(margin) 四部分组成.

2、有哪几种盒模型？

对于盒模型，分为标准盒模型和怪异盒模型一下两种

标准(W3C)盒模型的范围包括margin、border、padding、content,并且宽高只包含content，不包含其他部分

怪异(IE)盒模型的范围包括margin、border、padding、content,和标准盒模型不同的是，怪异盒模型的宽高包含了padding和 border

box-sizing作用

用来控制元素的盒子模型的解析模式，默认为content-box context-box标准盒模型 border-box怪异盒模型

18、 Doctype作用 标准模式与兼容模式(兼容模式)如何区分？

文档声明；用于告知浏览器该以何种模式来渲染文档.

严格模式和混杂模式的区别：

严格模式：页面排版及 JS 解析是以该浏览器支持的最高标准来执行

混杂模式：不严格按照标准执行，主要用来兼容旧的浏览器，向后兼容

19、 为什么会出现浮动？浮动会带来哪些问题？清除浮动的方式有哪些？哪种最好？

1、为什么会出现浮动：

由于浮动元素脱离了文档流，所以文档流的块框表现得就像浮动框不存在一样。浮动元素会漂浮在文档流的块框上.

2、浮动带来的问题：

• 父元素的高度无法被撑开，影响与父元素同级的元素

• 若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构.

• 与浮动元素同级的非浮动元素（内联元素）会跟随其后

3、清除浮动的方式:

• 父级div定义height

• 结尾处加空div标签clear：both

• 父级div定义伪类：after、before

• 父级div定义overflow：hidden

• 父级div定义overflow：auto。

• 父级div也浮动，需要定义宽度。

• 父级div定义display：table。

• 结尾处加br标签clear:both

比较好的是第3种，无需多余标签，方便维护，通过伪类就可以解决

20、元素的alt和title有什么异同

不同点: 元素的alt是表示图片加载失败显示的文本内容，而title是表示鼠标悬停图片时显示的文本内容.

相同点: 在alt和title同时设置的时候，alt作为图片的替代文字出现，title是图片的解释文字

21、Div+CSS较table相比有什么样的优点？

正常场景一般都适用div+CSS布局，Div+CSS优点:

• 开发中结构与样式分离，便于后期项目的维护和迭代

• 代码语义性好

• 更符合HTML标准规范

• SEO友好

table缺点:

• 太深的嵌套，比如table>tr>td>h3，会导致搜索引擎读取困难，而且，最直接的损失就是大大增加了冗余代码量

• 灵活性差，比如要将tr设置border等属性，是不行的，得通过td

• 代码臃肿，当在table中套用table的时候，阅读代码会显得异常混乱

• 混乱的colspan与rowspan，用来布局时，频繁使用他们会造成整个文档顺序混乱，不够语义化。

22、 ::before和:before有何异同？

1. 单冒号(:)用于CSS3伪类，

2. 双冒号(::)用于CSS3伪元素。伪元素和伪类之所以这么容易混淆，是因为他们的效果类似而且

伪类: 用于已有元素处于某种状态时为其添加对应的样式，这个状态是根据用户行为而动态变化的。

例如: 当用户悬停在指定元素时，可以通过:hover来描述这个元素的状态，虽然它和一般css相似，可以为已有元素添加样式，但是它只有处于DOM树无法描述的状态下才能为元素添加样式，所以称为伪类。

伪元素: 用于创建一些不在DOM树中的元素，并为其添加样式。

例如: 我们可以通过:before来在一个元素之前添加一些文本，并为这些文本添加样式，虽然用户可以看见这些文本，但是它实际上并不在 DOM文档中。

23、什么是回流什么是重绘以及区别？

回流:

当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(reflow)。每个页面至少需要一次回流，就是在页面第一次加载的时候，这时候是一定会发生回流的，因为要构建render tree.

重绘:

当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为重绘.

区别:

回流必将引起重绘，而重绘不一定会引起回流。比如：只有颜色改变的时候就只会发生重绘而不会引起回流，当页面布局和几何属性改变时就需要回流

24、.简单说一下H5新增了哪些新特性

语义化标签：header、footer、section、nav、aside、article

增强型表单：input 的多个 type calendar、date、time、url、search、tel、file、number 新增表单属性：placehoder、required、min 和 max

音频视频：audio、video

canvas 画布

kan wa si 地理定位（Geolocation）

拖拽释放：拖拽是一种常见的特性，即抓取对象以后拖到另一个位置，在HTML5中，

本地存储： localStorage 没有时间限制的数据存储； sessionStorage， session 的数据存储，当用户关闭浏览器窗口后，

数据会被删除 新事件：onresize、ondrag、onscroll、onmousewheel、onerror、onplay、onpause

WebSocket：建立持久通信协议，新的技术：webworker、websocket、Geolocation

25、css3新增了那些特征？

1、颜色：新增RGBA、HSLA模式

2、文字阴影：（text-shadow）

3、边框：圆角（border-radius）边框阴影：box-shadow

4、盒子模型：box-sizing

5、背景：background-size,background-origin background-clip(削弱)

6、渐变：linear-gradient(线性渐变):

eg: background-image: linear-gradient(100deg, #237b9f, #f2febd);

radial-gradient (径向渐变)

7、过渡：transition可实现动画

8、自定义动画：animate@keyfrom

9、媒体查询：多栏布局@media screen and (width:800px)

10、border-image

11、2D转换:transform:translate(x,y) rotate(x,y)旋转 skew(x,y)倾斜 scale(x,y)缩放

12、3D转换

13、字体图标：font-size

14、弹性布局：flex

26、浏览器是如何渲染页面的

浏览器将获取的HTML文档解析成DOM树。

处理CSS标记，构成层叠样式表模型CSSOM(CSS Object Model)。

将DOM和CSSOM合并为渲染树(rendering tree)，代表一系列将被渲染的对象。

渲染树的每个元素包含的内容都是计算过的，它被称之为布局layout。浏览器使用一种流式处理的方法，只需要一次绘制操作就可以布局所有的元素。

将渲染树的各个节点绘制到屏幕上，这一步被称为绘制painting。

• 构建对象模型（DOM，CSSOM）

• 构建渲染树（RenderTree）

• 布局

• 渲染

27、元素居中的方式、以及垂直上下居中

方法一：给父元素设置成弹性盒子，子元素横向居中，纵向居中

方法二：父相子绝后，子部分向上移动本身宽度和高度的一半，也可以用transfrom:translate(-50%,-50%)（最常用方法）

方法三：父相子绝，子元素所有定位为0，margin设置auto自适应

28、两/三栏布局（圣杯双飞翼）

• 两栏布局,左边定宽，右边自适应

• 三栏布局、圣杯布局、双飞翼布局

圣杯布局和双飞翼布局是前端工程师需要日常掌握的重要布局方式。两者的功能相同，都是为了实现一个两侧宽度固定，中间宽度自适应的三栏布局。（中间先加载渲染）

1. 首先要给两侧设置padding预留出相应的空间

2. 随后分别为三列设置宽度与浮动，同时对footer设置清除浮动

3. 根据浮动的特性，由于center的宽度为100%，即占据了第一行的所有空间，所以left和right被“挤”到了第二行。

4. 接下来的工作是将left放置到之前预留出的位置上，这里使用负外边距

5. 这里使用position: relative和right: 200px将left的位置在原有位置基础上左移200px，以完成left的放置

29、flex布局属性以及使用场景

Flex 布局，可以简便、完整、响应式地实现各种页面布局，任何一个容器都可以指定为 Flex 布局，行内元素也可以使用 Flex 布局。

我在项目中常用到的有九宫格布局，列表布局等，都会经常用到。

flex的属性：

flex-direction ：设置主轴的方向

justify-content ：设置主轴上的子元素排列方式

flex-wrap ：设置子元素是否换行

align-content ：设置侧轴上的子元素排列方式（多行）

align-items ：设置侧轴上的子元素排列方式（单行）

flex-flow ：复合属性，相当于同时设置了flex-direction和flex-wrap

flex：1；的原理

flex-grow:1;flex-shrink:1;flex-basis:auto; 这三个样式的和写   
 flex: 1 1 auto;  简写 flex:1;

flex-grow:0;     扩展比率
默认值为0，容器中项目没有占满时，不分配剩余空间。
flex-shrink:1;   收缩比率
默认值为1，容器中项目超出容器大小时，把项目平均压缩到容器内。
flex-basis:auto; 伸缩基准值
默认值为auto，定义容器中项目的占据空间，一般用百分数设值
1
2
3
4
5
6
7
8
9

30、常见的块级、行级、空元素

在CSS中规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值，比如div默认display属性值为“block”，成为“块级”元素；span默认display属性值为“inline”，是“行内”元素。

我们在平常的项目中经常使用到的有

· 行内元素有：span a b i img input select strong

· 块级元素有：div p h1-h6 ul table form ul ol li dl dt dd…

· 空元素(没有内容)：

---

31、css hack

概念：CSS hack是通过在CSS样式中加入一些特殊的符号，让不同的浏览器识别不同的符号（什么样的浏览器识别什么样的符号是有标准的，CSS hack 就是让你记住这个标准），以达到应用不同的 CSS 样式的目的

1、 条件hack

条件注释只有在IE浏览器下才能执行，这个代码在非IE浏览下被当做注释视而不见。可以通过IE条件注释载入不同的CSS、JS、HTML和服务器代码等。

2、 选择符Hack

比如IE6能识别 html .class{}，IE7能识别+html .class{}

3、属性Hack 比如IE6能识别下划线_和星号_，IE7能识别星号_，但不能识别下划线_，而firefox两个都不能认识。

1、写CSS hack需要遵循以下三条原则：

· 有效： 能够通过 Web 标准的验证

· 只针对太古老的/不再开发的/已被抛弃的浏览器， 而不是目前的主流浏览器

· 代码要丑陋。让人记住这是一个不得已而为之的 Hack, 时刻记住要想办法去掉它。现在很多hacks已经抛弃了最初的原则，而滥用hack会导致浏览器更新之后产生更多的兼容性问题。因此，并不推荐使用CSS hack来解决兼容性问题。

32、html和XML

html被称为超文本标记语言， 是一种描述性语言，用html 可以创建能在互联网上传输的信息页，是构成网页文档的主要语言,它是由很多的标签组成

xml 即可扩展标记语言，是Internet环境中跨平台的、依赖于内容的技术，是当前处理结构化文档信息的有力工具，满足了Web内容发布与交换的需要，适合作为各种存储与共享的通用平台。

都可以通过DOM 变成方式来访问。

都可以通过CSS来改变外观。

html和xml 都是标记语言，都是基于文本编辑和修改的。

xml不是要来取代html的，是对html的补充，用来与html协同工作的语言，基于上面这些优势，xml将来成为所有的数据处理和数据传输的常用工具非常可观。

34、毛玻璃效果

 ? ?background: rgba(244, 243, 244, 0.18);
 ? ?box-shadow: 0 0.3px 0.7px rgba(0, 0, 0, 0.126),
 ? ? ?0 0.9px 1.7px rgba(0, 0, 0, 0.179), 0 1.8px 3.5px rgba(0, 0, 0, 0.224),
 ? ? ?0 3.7px 7.3px rgba(0, 0, 0, 0.277), 0 10px 20px rgba(0, 0, 0, 0.4);
 ? ?backdrop-filter: blur(10px);
1
2
3
4
5

35、web worek

新开了一个子线程，而且子线程不受线程的影响

• 大数据处理，耗费时间较长的操作

36、canvas 常用api有哪些

常用API：
1. fillRect(x,y,width,height)  实心矩形；
2. strokeRect(x,y,width,height)  空心矩形；
3. fillText( "Hello world" , 200 , 200 )  实心文字；
4. strokeText( "Hello world" , 200 , 300 ) 空心文字；
1
2
3
4
5

37、语义化的好处

• 在我们开发中，语义化让，页面结构更加清晰，便于后期的维护，便于浏览器，搜索引擎解析

• 理由搜索引擎的爬取，利于seo

38、浏览器兼容性的问题

在不同的浏览器中，浏览器的内核都是不相同的，所以各个浏览器对网页的解析存在一定的差异。

简单来说就是写的代码在各个浏览器上显示不同的效果

解决：

1、css3新属性，加浏览器前缀兼容早期浏览

-moz- 火狐浏览器

-webkit- Safari, 谷歌浏览器等使用Webkit引擎的浏览器

-o- Opera浏览器(早期)

-ms- IE

2、css hack解决浏览器兼容性不同浏览器，识别不同的样式，css hack本身就是处理浏览器兼容的

3、图片默认有间距：

几个img标签放在一起的时候，有些浏览器会有默认的间距，通配符清除间距也不起作用。 可以通过使用float属性为img布局(所有图片左浮)

4、不同浏览器的标签默认的 margin 和 padding 不同

解决办法：可以通过设置全局样式来解决这个问题，这样所有的样式都会重置，初始值都会相同了。

js部分面试题

js的数据类型（关于数据类型相关的）

js有8种数据类型

基本数据类型

ES5的5种：Null，undefined，Boolean，Number，String， ES6新增：Symbol表示独一无二的值 ES10新增：BigInt 表示任意大的整数

一种引用数据类型：（本质上是由一组无序的键值对组成）

引用数据类型: Object。包含Object、Array、 function、Date、RegExp。 JavaScript不支持创建任何自定义类型的数据，也就是说JavaScript中所有值的类型都是上面8中之一。

---

null 和 undefined 的区别？

相同：

在 if 语句中 null 和 undefined 都会转为false两者用相等运算符比较也是相等

首先 Undefined 和 Null 都是基本数据类型，这两个基本数据类型分别都只有一个值，就是 undefined 和 null。

不同：

undefined 代表的含义是未定义，

定义了形参，没有传实参，显示undefined

一般变量声明了但还没有定义的时候会返回 undefined

对象属性名不存在时，显示undefined

函数没有写返回值，即没有写return，拿到的是undefined

null 代表的含义是空对象。也作为对象原型链的终点

null 主要用于赋值给一些可能会返回对象的变量，作为初始化。

ES10新增：BigInt 表示任意大的整数

BigInt数据类型的目的是比Number数据类型支持的范围更大的整数值。在对大整数执行数学运算时，以任意精度表示整数的能力尤为重要。使用BigInt，整数溢出将不再是问题。

此外，可以安全地使用更加准确时间戳，大整数ID等，而无需使用变通方法。 BigInt目前是第3阶段提案， 一旦添加到规范中，它就是JS 第二个数字数据类型，也将是 JS 第8种基本数据类型：

要创建BigInt，只需在整数的末尾追加n即可。比较:
console.log(9007199254740995n); ?  // → 9007199254740995n
console.log(9007199254740995); ? ? // → 9007199254740996
?
或者，可以调用BigInt()构造函数
BigInt("9007199254740995"); ?  // → 9007199254740995n
?
// 注意最后一位的数字
9007199254740992 === 9007199254740993; ?  // → true
console.log(9999999999999999); ?  // → 10000000000000000
1
2
3
4
5
6
7
8
9
10

存储方式以及堆栈内存是什么

基本数据类型：直接存储在栈内存中，占据空间小，大小固定，属于被频繁使用的数据。 引用数据类型：同时存储在栈内存与堆内存中，占据空间大，大小不固定。

引用数据：类型将指针存在栈中，将值存在堆中。 当我们把对象值赋值给另外一个变量时，复制的是对象的指针，指向同一块内存地址

基本数据类型和引用数据类型

基本类型值：指的是保存在栈内存中的简单数据段；number string 布尔

引用类型值：指的是那些保存在堆内存中的对象，意思是，变量中保存的实际上只是一个指针，这个指针指向内存堆中实际的值，数组 对象

引用类型存储把值存储在堆内存中，堆内存是从下往上存储。生成唯一内存地址。然后在栈内存中把地址赋值给变量。栈内存是从上往下存储的。之所以如此划分内存主要考虑到特别大的对象进行值传递时的效率问题

堆和栈有什么区别存储机制

1. 栈 是一种连续储存的数据结构，具有先进后出的性质。

通常的操作有入栈（压栈），出栈和栈顶元素。想要读取栈中的某个元素，就是将其之间的所有元素出栈才能完成。

1. 堆 是一种非连续的树形储存数据结构，每个节点有一个值，整棵树是经过排序的。特点是根结点的值最小（或最大），且根结点的两个子树也是一个堆。常用来实现优先队列，存取随意。

js数据类型判断，条件分支

if语句和逻辑运算

所有基本类型中Boolean值是false的只有6个，分别是 : 0 NaN ’ ’ null undefined false 引用类型Boolean值全是true.

if条件是单个值时，如果是truly值，条件成立， 如果是falsely值，条件不成立

逻辑运算符以及他们的运算规则

 ? ? ?  && 逻辑与 ?  两边都是true，才返回true，否则返回false
 ? ? ?  || 逻辑或 ?  两边只要有一个是true，就返回true，否则返回false
 ? ? ?  ！ 逻辑非 ? 用来取一个布尔值相反的值 ?
1
2
3

数据类型判断

typeof 对于基本数据类型判断是没有问题的，但是遇到引用数据类型（如：Array）是不起作用
console.log(typeof 2); ?  // number
console.log(typeof null); // object
`instanceof` 只能正确判断引用数据类型  而不能判断基本数据类型，其内部运行机制是判断在其原型链中能否找到该类型的原型
console.log([] instanceof Array); ? ? ? ? ? ? ? ? ?  // true
console.log(function(){} instanceof Function); ? ? ? // true
console.log({} instanceof Object); ? ? ? ? ? ? ? ? ? // true
constructor 似乎完全可以应对基本数据类型和引用数据类型 但如果声明了一个构造函数，并且把他的原型指向了 Array 的原型，所以这种情况下，constructor 也显得力不从心
console.log((true).constructor === Boolean); // true
console.log(('str').constructor === String); // true
console.log(([]).constructor === Array); // true
console.log((function() {}).constructor === Function); // true
console.log(({}).constructor === Object); // true
console.log((2).constructor === Number); // true
Object.prototype.toString.call() 完美的解决方案，可以通过toString() 来获取每个对象的类型，
?
`Object.prototype.toString.call()` 使用 Object 对象的原型方法 toString 来判断数据类型：
?
var a = Object.prototype.toString;
 
console.log(a.call(2));
console.log(a.call(true));
console.log(a.call('str'));
console.log(a.call([]));
console.log(a.call(function(){}));
console.log(a.call({}));
console.log(a.call(undefined));
console.log(a.call(null));
补充：基本数据类型赋值的时候  赋的是具体的值 ? 引用数据类型传的是地址，一个变另一个跟着变
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

js数据类型转换

在JavaScript中类型转换有三种情况：

转换为数字（调用Number(),parseInt(),parseFloat()方法） 转换为字符串（调用.toString()或String()方法） 转换为布尔值（调用Boolean()方法） 还有隐式转换 注意：null、undefined没有.toString方法

?
转换为数字
Number()：可以把任意值转换成数字，如果要转换的字符串中有不是数字的值，则会返回NaN
?
Number('1') ? // 1
Number(true) ?// 1
Number('123s') // NaN
Number({}) ?//NaN
?
?
parseInt(string,radix)：解析一个字符串并返回指定基数的十进制整数，radix是2-36之间的整数，表示被解析字符串的基数。
parseInt('2') //2
parseInt('2',10) // 2
parseInt('2',2) ?// NaN
parseInt('a123') ?// NaN  如果第一个字符不是数字或者符号就返回NaN
parseInt('123a') ?// 123
?
?
parseFloat(string)：解析一个参数并返回一个浮点数
?
parseFloat('123a')
//123
parseFloat('123a.01')
//123
parseFloat('123.01')
//123.01
parseFloat('123.01.1')
//123.01
?
隐式转换
let str = '123'
let res = str - 1 //122
str+1 // '1231'
+str+1 // 124
?
转换为字符串
.toString() ???注意：null,undefined不能调用
?
Number(123).toString()
//'123'
[].toString()
//''
true.toString()
//'true'
?
?
String() 都能转
String(123)
//'123'
String(true)
//'true'
String([])
//''
String(null)
//'null'
String(undefined)
//'undefined'
String({})
//'[object Object]'
?
?
隐式转换：当+两边有一个是字符串，另一个是其它类型时，会先把其它类型转换为字符串再进行字符串拼接，返回字符串
?
let a = 1
a+'' // '1'
转换为布尔值
0, ''(空字符串), null, undefined, NaN会转成false，其它都是true
Boolean()
Boolean('') //false
Boolean(0) //false
Boolean(1) //true
Boolean(null) //false
Boolean(undefined) //false
Boolean(NaN) //false
Boolean({}) //true
Boolean([]) //true
?
条件语句
?
let a
if(a) {
 ?//... ? //这里a为undefined，会转为false，所以该条件语句内部不会执行
}
?
隐式转换 !!
?
let str = '111'
console.log(!!str) // true


{}和[]的valueOf和toString的返回结果？
valueOf：返回指定对象的原始值
?
对象                  返回值 
Array               返回数组对象本身。
Boolean             布尔值。
Date                存储的时间是从 1970 年 1 月 1 日午夜开始计的毫秒数 UTC。
Function            函数本身。
Number              数字值。
Object              对象本身。这是默认情况。
String              字符串值。
                    Math 和 Error 对象没有 valueOf 方法。
?
toString：返回一个表示对象的字符串。默认情况下，toString() 方法被每个 Object 对象继承。如果此方法在自定义对象中未被覆盖，
toString() 返回 "[object type]"，其中 type 是对象的类型。
?
({}).valueOf() ? //{}
({}).toString() ?//'[object Object]'
[].valueOf() ? ?//[]
[].toString() ? //''
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111

数据类型相比较objected .is 和=

=== 属于严格判断，直接判断两者类型是否相同，如果两边的类型不一致时，不会做强制类型准换，不同则返回false如果相同再比较大小，不会进行任何隐式转换对于引用类型来说，比较的都是引用内存地址，所以===这种方式的比较，除非两者存储的内存地址相同才相等，反之false

== 二等表示值相等。判断操作符两边对象或值是否相等类型可以不同，如果两边的类型不一致，则会进行强制类型转化后再进行比较，使用Number()转换成Number类型在进行判断。例外规则，null==undefined，null/undefined进行运算时不进行隐式类型转换。通常把值转为Boolean值，进行条件判断。Boolean(null)=Boolean(undefined)>false=false 结果为true

Object.is()在===基础上特别处理了NaN,-0,+0,保证-0与+0不相等，但NaN与NaN相等

==操作符的强制类型转换规则
?
字符串和数字之间的相等比较，将字符串转换为数字之后再进行比较。
其他类型和布尔类型之间的相等比较，先将布尔值转换为数字后，再应用其他规则进行比较。
null 和 undefined 之间的相等比较，结果为真。其他值和它们进行比较都返回假值。
对象和非对象之间的相等比较，对象先调用 ToPrimitive 抽象操作后，再进行比较。
如果一个操作值为 NaN ，则相等比较返回 false（ NaN 本身也不等于 NaN ）。
如果两个操作值都是对象，则比较它们是不是指向同一个对象。如果两个操作数都指向同一个对象，则相等操作符返回true，否则，返回 false。
?
    '1' == 1 // true
    '1' === 1 // false
    NaN == NaN //false
    +0 == -0 //true
    +0 === -0 // true
    Object.is(+0,-0) //false
    Object.is(NaN,NaN) //true
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

typeof null 的结果是什么，为什么？