Js深拷贝写法（js深拷贝和浅拷贝的方法）

大家好，我是讯享网，很高兴认识大家。

相信大家也和我一样，2020年的春节过得非常特别。新型冠状病毒不仅对国家还是对社会以及对我们的个人都有很大影响！

很多小伙伴心里肯定想着由于种种原因，心里开始蠢蠢欲动了…😀

笔者通过平时面试总结以及面试别人常提的问题，结合自己认为非常重要的前端各技术栈的知识点，总结了这篇中高级前端面试。让需要的小伙伴所阅读，让不在大厂的小伙伴提前了解大厂前端面试官常问的各种常见前端问题。

文章有点长，请各位小伙伴耐心阅读完。相信认真阅读者必定或多或少有点感悟！

个人理解：

html - 表示人的光身体 ---结构
css - 表示给人穿的衣服 ---表现
js - 表示人的行为，走路等 ---行为

DTD（document type definition，文档类型定义）是一系列的语法规则，用来定义XML或（X）HTML的文件类型。浏览器会使用它来判断文档类型，决定使用何种协议来解析以及切换浏览器模式。（DTD告诉浏览器我是什么文档类型，浏览器会根据这个来判断用什么引擎来解析和渲染他们）

DOCTYPE是用来声明文档类型和DTD规范的，一个主要的用途便是文件的合法性验证。如果文件代码不合法，那么浏览器解析时会出一些错误。（DOCTYPE告诉浏览器当前是哪个文档类型）

1、什么是HTML语义化？

表示选择合适的标签（语义化标签）便于开发者阅读和写出更优雅的代码

2、为什么要使用语义化标签？

在没有CSS样式的情况下，页面整体也会呈现很好的结构效果
- 更有利于用户体验
- 更有利于搜索引擎优化
- 代码结构清晰，方便团队开发与维护

3、 HTML5新特性有哪些？

语义化标签
音视频处理
canvas / webGL
history API
requestAnimationFrame
地理位置
webSocket

1、行内元素的特点？

元素排在一行
只能包含文本或者其他内联元素
宽高就是内容宽高、设置宽高无效

2、块级元素的特点？

元素单独占一行
元素的宽高都可以设置
可以包含内联元素和其他块元素
为设置宽度时，默认宽度是它容器的100%

常见行内元素标签：

讯享网

常见块级元素标签：

渐进增强（Progressive Enhancement）：

一开始就针对低版本浏览器进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。

优雅降级（Graceful Degradation）：

一开始就构建站点的完整功能，然后针对浏览器测试和修复。比如一开始使用 CSS3 的特性构建了一个应用，然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览。

两者区别？

1、广义：

其实要定义一个基准线，在此之上的增强叫做渐进增强，在此之下的兼容叫优雅降级

2、狭义：

渐进增强一般说的是使用CSS3技术，在不影响老浏览器的正常显示与使用情形下来增强体验，而优雅降级则是体现html标签的语义，以便在js/css的加载失败/被禁用时，也不影响用户的相应功能。

例子：

讯享网

相同点：

存储在客户端

不同点：

cookie数据大小不能超过4k；sessionStorage和localStorage的存储比cookie大得多，可以达到5M+
cookie设置的过期时间之前一直有效；localStorage永久存储，浏览器关闭后数据不丢失除非主动删除数据；sessionStorage数据在当前浏览器窗口关闭后自动删除
cookie的数据会自动的传递到服务器；sessionStorage和localStorage数据保存在本地

盒子由margin（外边距）、border（边框）、padding（内边距）、content（内容）组成
盒子的宽度 = 内容宽度 + 左填充 + 右填充 + 左边框 + 右边框 + 左边距 + 右边距
- 盒子的高度 = 内容高度 + 上填充 + 下填充 + 上边框 + 下边框 + 上边距 + 下边距
box-sizing: content-box(默认)----指的是标准模型（本身内容宽高度+边框和内边距）
- box-sizing: border-sizing-----指的是IE模型（本身内容的宽高度）

将来的你一定会感谢自己拼命努力的自己

这种方式只能取到dom元素内联样式所设置的宽高，也就是说如果该节点的样式是在style标签中或外联的CSS文件中设置的话，通过这种方法是获取不到dom的宽高的

讯享网

获取渲染后的宽高。但是仅IE支持

与2原理相似，但是兼容性，通用性更好一些

讯享网

计算元素绝对位置，获取到四个元素left,top,width,height

扩展：

获取浏览器高度和宽度的兼容性写法：

想详细了解Flex布局知识点的小伙伴，请查看 Flex布局详解

-webkit-font-smoothing在window系统下没有起作用，

但是在IOS设备上起作用-webkit-font-smoothing：antialiased是**的，灰度平滑

1、CSS选择器：

id选择器(#myid)
类选择器(.myclass)
标签选择器(div, h1,p)
相邻选择器（h1 + p）
子选择器(ul > li)
后代选择器(li a)
通配符选择器(*)
属性选择器(a[rel="external"])
伪类选择器(a:hover, li:nth-child)

2、CSS3属性选择器：

a[href$='.pdf']：选择href属性中以.pdf结尾的元素
a[href^='www']：选择href属性中以www开头的元素
a[href*='tmc']：选择href属性中包含tmc的元素

3、CSS3常见伪类选择器：

:nth-of-type()：

可以通过参数来选择表格中的奇数行和偶数行，odd表示奇数行，even表示偶数行

:nth-child()：

参数n时选中所有行
参数为n+i时表示从第i行开始下面的都被选中，如n+3，从第3行开始下面全部选中
2n表示2的倍数行被选中，选中偶数行
2n+1表示选中奇数行
3n表示每个3行选中一次

可继承的属性：font-size, font-family, color

不可继承的样式：border, padding, margin, width, height

优先级（就近原则）：!important > [id > class > tag]

!important比内联优先级高

inline（默认）–内联

none–隐藏
- block–块显示
- table–表格显示
- list-item–项目列表
- inline-block-内联块

一、BFC的概念？

BFC（块级格式上下文）：它是页面中的一块渲染区域，有自己的渲染规则，决定了其子元素如何布局，以及和其他元素之间的关系和作用

二、BFC的原理？

内部的Box会在垂直方向，一个接一个地放置
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反

BFC的区域不会与float box重叠
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素
计算BFC的高度时，浮动元素也参与计算

三、如何创建BFC？

根元素，即HTML元素
float的值不为none
overflow的值不为visible
display的值为inline-block、table-cell、table-caption
position的值为absolute或fixed

四、BFC的使用场景？

去除边距重叠现象
清除浮动（让父元素的高度包含子浮动元素）
避免某元素被浮动元素覆盖
避免多列布局由于宽度计算四舍五入而自动换行

一、清除浮动的方法

方式一、使用overflow 属性来清除浮动

讯享网

缺点：离开这个元素所在区域的会被隐藏（overflow: hidden将超出的分布隐藏起来）

方式二、使用额外标签法

缺点：会增加页面的标签，造成结构的紊乱

方式三、使用伪元素来清除浮动【推荐使用】

讯享网

static（默认）：按照正常文档流进行排列；
relative（相对定位）：不脱离文档流，参考自身静态位置通过 top, bottom, left, right 定位；
absolute(绝对定位)：参考距其最近一个不为static的父级元素通过top, bottom, left, right 定位；
fixed(固定定位)：所固定的参照对像是可视窗口。

水平居中布局
左侧固定右侧自适应
流式布局
弹性布局
圣杯布局
双飞翼布局

过渡
动画
- 选择器

形状转换

阴影
边框
背景
文字
渐变
弹性布局、栅格布局、多列布局
媒体查询

讯享网

一、行内元素水平垂直居中方法:

方式1：

方式2:

讯享网

二、块级元素水平居中方法:

margin:0 auto;只能设置水平居中，
而margin:auto 0 不能设置垂直居中
，因为margin垂直塌陷问题

方法1：定位+margin

讯享网

讯享网

什么事CSS预处理器?
CSS预处理器是一种语言用来为CSS增加一些变成的特性，无需考虑浏览器兼容问题，例如你可以在CSS中使用变量，简单的程序逻辑、函数等在编程语言中的一些基本技巧，可以让CSS更加简洁，适应性更强，代码更直观等诸多好处
基本语法区别
Sass是以.sass为扩展名，Less是以.less为扩展名，Stylus是以.styl为扩展名
变量的区别
Sass 变量必须是以$开头的，然后变量和值之间使用冒号（：）隔开，和css属性是一样的。

Less 变量是以@开头的，其余sass都是一样的。

Stylus 对变量是没有任何设定的，可以是以$开头或者任意字符，而且变量之间可以冒号，空格隔开，但是在stylus中不能用@开头
三种预处理器都有：嵌套、运算符、颜色函数、导入、继承、混入。Stylus还有一些高级特性。例如循环、判断等

使用@media查询可以针对不同的媒体类型定义不同的样式
@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果需要设置设计响应式的页面。
重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。
```
讯享网
```

display: none与visibility: hidden的区别

display：none 不显示对应的元素，在文档布局中不再分配空间（回流+重绘）

visibility：hidden 隐藏对应元素，在文档布局中仍保留原来的空间（重绘）

两者的作用不同，CSS选择器找到元素后为设置该元素的样式，jQuery选择器找到元素后添加行为
jQuery选择器拥有更好的跨浏览器的兼容性
两者选择器的效率不同
CSS选择器的效率：id选择器（#myid）、类选择器（.myclassname）、标签选择器（div,h1,p）、相邻选择器（h1+p）、子选择器（ul > li）、后代选择器（li a）、通配符选择器（*）、属性选择器（a[rel="external"]）、伪类选择器（a:hover,li:nth-child）从高到低依次排列
jQuery选择器的效率：id选择器$('#id')和元素标签选择器$('form')、类选择器$('.className')、属性选择器$('[attribute=value]')和伪类选择器$(':hidden')

讯享网

dom对象转换为jquery对象：一般情况下，dom对象直接用$()就可以转换成jquery对象，如：

jquery对象转换成dom对象，有两种方法，一种是用jquery的内置函数get，来获取dom对象，如：

讯享网

还有一种方法更简单，因为jquery对象的属性是一个集合，所以我们可以像数组那样，取出其中一项就行：

可以在页面中使用多个document.ready()函数，但只能用一次window.onload
document.ready()函数在页面DOM元素加载完就会执行，而window.onload()函数则是要所有都加载

5个简单数据类型（基本数据类型）+ 1个复杂数据类型

讯享网

获取所有的DOM节点

讯享网

NodeList集合转化为数组

获取数组每个元素的标签名
```
讯享网
```
去重

一、typeof

讯享网

二、instanceof

讯享网

三、Object.prototype.toString.call()

讯享网

讯享网

undefined是访问一个未初始化的变量时返回的值，而null是访问一个尚未存在的对象时所返回的值。

undefined看作是空的变量，而null看作是空的对象

实现 (5).add(3).minus(2)，使其输出结果为6
有题目分析可得，该表达式属于链式调用方法。以数组为例：

arr.push() 为什么arr有push方法？

因为arr是Array的实例，push是Array原型上的方法，所有实例arr可以调用原型上的方法；故，我们只需要在数字Number的原型上添加add和minus方法即可。
注意：this的指向始终指向最后谁调用了this所在的函数，this就指向谁！

基本概念：DOM事件的级别（事件的本质在于信息的传递）

讯享网

一、深拷贝

讯享网

讯享网

想详细了解，请点击查看对象深浅拷贝

想详细了解，请点击查看一步步教你实现Promise/A+ 规范完整版

this表示当前对象，this的指向是根据调用的上下文来决定的，默认指向window对象，指向window对象时可以省略不写

全局环境： this始终指向的是window对象

局部环境：在全局作用域下直接调用函数，this指向window 对象函数调用，哪个对象调用就指向哪个对象使用new实例化对象，在构造函数中的this指向实例化对象使用call或apply改变this的指向

总结：this始终指向最后一个调用它的函数的对象

讯享网

当你的简写箭头函数返回值为一个对象时，你需要用小括号括起你想返回的对象。否则，浏览器会把对象的{}解析为箭头函数函数体的开始和结束标记。

讯享网

讯享网

一、具体实现步骤：

二、 new操作符的特点

讯享网

三、new操作符的几个作用：

讯享网

相同点：

不同点：

讯享网

扩展：手写三个函数的源码

手写apply源码
```
讯享网
```
手写call源码

Function.prototype.call = function(content = window) {

讯享网

}

讯享网

// 第一种：字面量
var o1 = {name: "o1"}
var o2 = new Object({name: "o2"})
// 第二种：通过构造函数
var M = function(name){this.name = name}
var o3 = new M("o3")
// 第三种：Object.create()
var p = {name: "p"}
var o4 = Object.create(p)

讯享网

核心函数：

讯享网

一、Vue异步组件技术：

二、es6提案的import()

讯享网

三、webpack提供的require.ensure()

讯享网

vue.js的生命周期一共有10个：

讯享网

const router = new VueRouter({....})
// 全局前置守卫
router.beforeEach((to, from, next) => {

})
// 全局解析守卫
router.beforeResolve((to, from, next) => {

讯享网

})
// 全局后置守卫
router.afterEach((to, from) => {

讯享网

const router = new VueRouter({

讯享网

beforeRouteEnter(to, from, next) {}
beforeRouteUpdate(to, from, next) {}
beforeRouteLeave(to,from, next){}

讯享网

Observer（数据监听器）

Watcher（订阅者）

讯享网

Compile（指令解析器）

讯享网

一、HTTP/0.9

只有一个命令GET
没有HEADER等描述数据的信息
服务器发送完毕，就关闭TCP连接

二、HTTP/1.0

增加了很多命令
增加status code和header
多字符集支持、多部分发送、权限、缓存等

三、HTTP/1.1

持久连接
pipeline
增加host和其他命令

四、HTTP2

所有数据以二进制传输（以前是以字符串）
同一个连接里面发送多个请求不再需要按照顺序来
头信息压缩以及推送等提高效率的功能

讯享网

客户端连接到Web服务器
发送HTTP请求
服务器接受请求并返回HTTP响应
释放连接TCP连接
客户端（浏览器）解析HTML内容

简单快速
灵活
无连接
无状态
支持B/S、C/S模式

请求报文{

讯享网

}
请求行：{http方法、页面地址、http协议、http版本}
响应报文{

}

讯享网

讯享网

5xx：指示服务器错误，服务器未能实现合法的请求

讯享网

管线化技术：客户端可以发送多次请求到服务器，而不需要等待上一次请求得到响应的时候才能进行下一次请求。实现并行发送请求
管线化机制通过持久连接完成，仅HTTP/1.1支持此技术
只有GET和HEAD请求可以进行管线化，而POST则有所限制

从输入URL到页面加载的主干流程如下：

浏览器渲染流程图

其中，步骤2的具体过程是：

讯享网

DOM结构中的各个元素都有自己的盒子（模型），这些都需要浏览器根据格式的样式来计算并根据计算结果将元素放到它该出现的位置，这个过程称为reflow
当各个盒子的位置、大小以及其他属性，如颜色、字体大小等都确定下来后，浏览器于是便把这些元素都按照各自的特性绘制了一遍，于是页面的内容出现了，这个过程称之为repaint

讯享网

资源压缩合并、减少HTTP请求
非核心代码异步加载---------》异步加载的方式---------》异步加载的区别
利用浏览器缓存---------》缓存的分类-----------》缓存的原理【重点】
利用CDN
预解析DNS
```
讯享网
```

讯享网

同源策略限制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的关键的安全机制

源======协议+域名+端口（默认为80）源不一样就是跨域了

不同源之间不能执行以下情况，以下情况都是同源时执行：

讯享网

非常喜欢的一段话：在我们20岁的时候用30岁的心态来做事，那么当我们30岁的时候就可以享受别人40岁的成功！~💪💪💪

如果本文对你有帮助得话，给本文点个赞❤️❤️❤️

欢迎大家加入，一起学习前端，共同进步！
cmd-markdown-logo

Js深拷贝写法（js深拷贝和浅拷贝的方法）

相关推荐