方法三、利用sort方法
先用sort方法对数组进行排序。对排序后的数组逐个遍历，比较其相邻元素是否有相同的，有则删除。
function method(arr){
arr = arr.sort();
var array_ = [arr[0]]; // 把第一个放进去
for(var i = 1; i < arr.length; i++){
if(arr[i] !== arr[i-1]){
array_.push(arr[i]);
}
}
return array_;
}
方法四、ES6的set方法
function metho 《大厂前端面试题解析+Web核心总结学习笔记+企业项目实战源码+最新高清讲解视频》无偿开源 徽信搜索公众号【编程进阶路】 d(arr){
return Array.from(new Set(arr));
}
方法五、includes方法
和indexOf方法有点像
function method(arr){
var array_ = [];
for(var i = 0; i < arr.length; i++){
if(!array_.includes(arr[i])){
array_.push(arr[i]);
}
}
return array_;
}
方法六、filter方法 + indexOf方法
function method(arr){
return arr.filter((item,index)=>{
return arr.indexOf(item) === index;
})
}
[](()③ 什么是渐进增强，什么是优雅降级
-
渐进增强：一开始针对低版本浏览器进行构建，以完成基本功能为首要任务。后续再针对高版本浏览器追加效果、功能，以达更好的体验。（向上兼容）
-
优雅降级：一开始就构建完整的内容、效果和功能，后续再对低版本浏览器作兼容。（向下兼容）
代码：
/渐进增强写法/
.transition {
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
/优雅降级写法/
.transition {
transition: all .5s;
-o-transition: all .5s;
-moz-transition: all .5s;
-webkit-transition: all .5s;
}
[](()④ JavaScript的垃圾回收机制
回答如：
[JavaScript的垃圾回收机制](()
[](()2021.6.23
========================================================================
[](()① TCP与UDP的区别说一下
[TCP与UDP的区别](()
[](()② 说一下http、https的区别，https的原理
[关于http和https（基本概念、区别、优点及缺点、加密、数字签名、数字证书、工作原理）](()
[](()③ session和cookie
[session与cookie](()
[](()④ 什么是缓存，强缓存，协商缓存
[http缓存机制原理](()
[](()2021.6.25
========================================================================
[](()① 聊聊HTML5的新特性
回答如：
一、语义化标签
九个语义化标签，让页面内容结构化，增强语义性 ，如：
-
< header>
-
< footer>
-
< nav>
-
< section>
-
< article>
-
< aside>
-
< details>
-
< summary>
-
< dialog>
二、增强型表单type
input表单新增若干个type类型以供选择，能够更好地控制输入内容的类型。
-
color 用于选取颜色
-
date 选择日期
-
datetime 选择日期（UTC）
-
datetime-local 选择日期，无时区差异
-
email 输入email
-
month 输入月份
-
number 输入数值
-
range 一定范围内的数值取值
-
search 搜索域
-
tel 输入电话
-
time 输入时间
-
url 输入url
-
week 选择周
三、新增的表单
-
< datalist> —— 与 input 元素配合使用该元素，来定义 input 可能的值。
-
< keygen> —— 用于表单的密钥对生成器字段。当提交表单时，私钥存储在本地，公钥发送到服务器。
-
< output> —— 定义不同类型的输出，比如脚本的输出。
四、新增的表单属性
-
placeholder
-
required
-
pattern 正则表达式验证Input表单输入的值
-
min，max
-
height，width 用于image类型 input表单图像的高度和宽度
-
step 输入域合法数字间隔
-
autofocus
-
multiple
五、新增的媒体：视频和音频
-
< audio > 播放音频
-
< video > 播放视频
六、拖放api
拖放的过程有两个对象：源对象和目标对象。源对象就是即将被拖的元素（任何元素都可以被拖放），目标对象就是拖动之后要放置的目标位置。
-
源对象，可以触发的事件：dragstart（开始拖动）、drag（拖动中）、dragend（拖动结束）。整个拖动的过程：dragstart_1 + drag_n +dragend*1 ；
-
目标对象，可以触发的事件：dragenter（拖动着进入）、dragover（拖动着悬停）、dragleave（拖动着离开）、drop（放置）。过程有：dragenter_1 + dragover_n + dragleave_1 或 dragenter_1 + dragover_n + drop_1
七、web worker
参考我这篇blog
[关于web worker](()
[](()② 聊聊CSS3新特性
一、新增过渡transition
transition: property duration timing-function delay
-
transition-property：设置过渡效果CSS属性名称
-
transition-duration：设置完成过渡效果需要多久
-
transition-timing-function：指定速度曲线
-
transition-delay：指定过渡开始的延迟时间
二、新增动画Animation
animation: name duration timing-function delay iteration-count direction;
-
animation-name：规定绑定到选择器的Keyframe名称
-
animation-duration：设置动画完成的时间
-
animation-timing-function：指定速度曲线
-
animation-delay：指定动画开始的延迟时间
-
animation-iteration-count：规定动画播放次数
-
animation-direction：规定是否应该轮流反向播放动画
[transition与Animation的区别](()
三、新增transform
transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
四、新增选择器
五、阴影和倒影
-
box-shadow：阴影
-
box-reflect：倒影
-
text-shadow：文字阴影
六、边框
- border-radius
七、颜色
-
RGBA （ Red Green Blue Alpha ）
-
HLSA （ 色度 饱和度 亮度 Alpha）
[](()③ Web Worker的使用
[关于web worker](()
[](()④ 聊聊CSS的样式、伪类、伪元素
[CSS 基础选择器、组合选择器、属性选择器、伪类选择器、伪元素、CSS3属性选择器、优先级](()
[](()⑤ 说说TCP三次握手、四次挥手
[TCP三次握手、四次挥手](()
[](()2021.6.26
========================================================================
[](()① 常见请求头、响应头
常见请求头，列举几个：
-
Accept 可接受响应类型 ： Accept:text/plain
-
Accept-Charest 可接受的字符集 ：Accept-Charest:utf-8
-
Accept-Encoding 可接受响应内容编码方式
-
Accept-Language
-
Accept-Datetime
-
Cache-Control 是否使用缓存机制 ：Cache-Control:no-cache
-
Cookie
-
If-None-Match
-
If-Modified-Since
常见响应头，列举几个：
-
Access-Control-Allow-Origin 指定哪些网站可以跨域资源共享
-
Etag
-
Last-Modified
-
Expires
-
Cache-Control，如Cache-Control:max-age=3600
-
Set-Cookie
[](()② 常见状态码
答：常见状态码分五大类
-
1** —— 服务器收到请求。需要请求者继续执行操作
-
2** —— 成功。操作成功并被处理
-
3** —— 重定向。需要进一步操作以完成请求
-
4** —— 客户端错误。请求包含语法错误或无法完成请求
-
5** —— 服务器错误。服务器在处理请求的过程中发生了错误
具体如下：
一、1 ** 服务器收到请求。需要请求者继续执行操作
-
100 —— Continue：客户端继续其请求
-
101 —— Switching Protocols：切换协议，服务器根据客户端请求而切换协议。
二、2 ** 成功。操作成功并被处理
-
200 —— OK：已成功。请求成功。
-
201 —— Created：已创建。成功请求并创建了新的资源。
-
202 —— Accepted：已接收。请求被接收，但未完成处理。
-
203 —— Non-Authoritative Information：未授权信息。即请求成功，但返回的meta信息不在原始服务器，是一个副本。
-
204 —— No Content：无内容。请求成功，处理成功后并无内容返回。
-
205 —— Reset Content：重置内容。服务器处理成功，用户终端应重置文档视图（可根据205清除表单域）。
-
206 —— Partial Content：部分内容。服务器成功处理了部分Get请求
三、3 ** 重定向。需要进一步操作才能完成请求。
-
300 —— Multiple Choices：多种选择。请求的资源有多个位置供用户终端选择。
-
301 —— Moved Permanently：永久移动。请求的资源已被移到新的URL，返回信息包含新URL。浏览器会自动定向到新URL。之后的请求应用新URL代替。
-
302 —— Found：临时移动。用户终端继续使用原本的URL。
-
303 —— See Other：查看其它地址
-
304 —— Not Modified：未修改。不返回新的内容，可通过缓存访问。
四、4 ** 客户端错误。
-
400 —— Bad Request：客户端请求语法错误。
-
401 —— Unauthorized：请求需要用户的身份认证。
-
403 —— Forbidden：服务器理解客户端的请求，但拒绝执行。
-
404 —— Not Found：根据请求服务器找不到相关资源。
-
405 —— Method Not Allowed：客户端请求中的方法被禁止。
-
408 —— Request Time-Out：服务端等待时间过长，请求超时。
五、5 ** 服务器错误
-
500 —— Internal Server Error：服务器内部错误。
-
501 —— Not Implemented：服务器不支持请求的功能。
-
502 —— Bad Gateway：作为网关或代理工作的服务器执行请求时，从远端服务器接收到无效响应。
-
503 —— Service Unavailable：由于超载或系统维护，暂时不能处理客户端请求
-
504 —— Gateway Time-out：充当网关或代理服务器，未能及时从远端请求。
[](()③ HTTP请求/响应报文的结构是如何
一、HTTP请求报文
组成：
-
请求行 （ 请求方法字段 URL字段 HTTP协议版本字段 ）如“ GET data/index.html HTTP/1.1”
-
请求头部 （ 常见有Accept，Host，If-Modified-Since ）
-
空行 （ 表示请求头部到此为止 ）
-
请求数据 （若是GET则为空；若是POST，则如user=admin&psw=177777）
一图概况：
二、HTTP响应报文
组成：
-
响应行 （http协议版本 状态码 描述）如HTTP/1.1 200 OK
-
响应头
-
响应体
[](()④ JavaScript 创建对象
回答参考我这篇笔记
[JavaScript 创建对象 （工厂模式、构造函数模式、原型模式、组合使用构造函数模式与原型模式）](()
[](()⑤ *** JavaScript 继承
[](()⑥ JavaScript 闭包
[闭包](()
[](()⑦ 深拷贝与浅拷贝
[深拷贝与浅拷贝的内涵，实现深拷贝的几种方法，深拷贝解决项目异常bug](()
[](()2021.6.27
========================================================================
[](()① JavaScript的变量提升，函数提升是怎么样
今日新鲜出炉：
[变量提升、函数提升](()
[](()② Jquery或zepto源码写得好的地方
回答：
-
Jquery的源码封装在一个匿名函数的自执行环境中，有利于防止变量的全局污染
-
传入window对象当作局部变量用，jquery访问window对象则不需要将作用域链退到最顶层作用域，可以更快访问window对象。
-
传入undefined，也可缩短查询undefined的作用域链
-
jQuery把常用原型属性和方法封装在jQuery.prototype，为缩短名称又赋给jQuery.fn
(function( window, undefined ) {
//用一个函数域包起来，就是所谓的沙箱
//在这里边var定义的变量，属于这个函数域内的局部变量，避免污染全局
//把当前沙箱需要的外部变量通过函数参数引入进来
//只要保证参数对内提供的接口的一致性，你还可以随意替换传进来的这个参数
window.jQuery = window.$ = jQuery;
})( window );
[](()③ opacity:0、Display:none 、visibility:hidden 有什么区别
答如：
[opacity:0、Display:none 、visibility:hidden](()
[](()④ HTTP2.0
答如：
[HTTP2.0](()
[](()⑤ 浏览器的渲染和解析
[浏览器解析、渲染的原理及不良问题](()
[](()⑥ 跨站点请求伪造CSRF
答如：
[CSRF原理和防范](()
[](()2021.6.30
========================================================================
[](()① 为什么会有回流、重绘，如何减少
[回流（重排）与重绘 —— 什么是回流和重绘，造成的原因是什么，如何去减少？](()
[](()② *** 项目性能优化
[](()2021.7.1
=======================================================================
[](()① 一个URL输入到浏览器后发生的事情
答如：
-
输入URL到浏览器地址栏
-
先查看是否存在缓存（强缓存 / 协商缓存）
-
若无缓存，DNS解析URL对应的IP
-
根据解析出的IP，通过三次握手建立TCP连接
-
客户端浏览器发出HTTP请求
-
服务器处理请求，响应浏览器
-
浏览器解析、渲染页面
-
四次挥手关闭TCP连接
[](()② 常见HTML块级元素、行内元素和空元素
一、块级元素
div、段落、标题、列表、表格、表单，即：
-
div
-
p
-
h1 ~ h6
-
dl 带有项目和描述的描述列表 dt项目/名字,dd相关描述
-
ol 有序列表
-
ul 无序列表
-
table
-
form
二、行内元素
-
span
-
a 链接
-
br 换行
-
b 加粗
-
strong 逻辑加粗
-
i 斜体
-
em 逻辑斜体
-
label
三、空元素
-
area
-
base
-
br
-
col
-
colgroup
-
command
-
embed
-
hr
-
img
-
input
-
keygen
-
link
-
meta
-
param
-
source
-
track
-
wbr
[](()③ href 和 src 的区别
二者区别，答如：
-
href是超文本引用，用于a和link元素；src是资源引用，即source，用于img，script和iframe上。
-
href使得元素与引用超文本建立联系；src将资源引入，并替换当前元素。
[](()④ link和@import的区别
二者相同点：二者都是引入外部CSS样式的方法：link是链接法，@import是导入法。
二者不同点，答如：
-
link是html元素，无兼容性上的问题；@import由CSS提供，IE5上才能被识别。
-
使用link，是一边载入页面一边载入样式效果，使用体验良好；使用@import，则是加载完页面才载入样式。
-
link的优先级高于@import。
-
link除了引入CSS文件，还可以引入图标icon等其它信息；而@import只能引入CSS文件。
-
link支持JS去控制DOM改变样式；@import不支持。
[](()⑤ CSS三种引入的方式
参考：
[外部样式、内部样式和行内样式](()
[](()2021.7.6
=======================================================================
[](()① 说一说BFC，怎么创建，有什么特点，有什么用
[BFC 块级格式上下文的定义、创建、特点和常见用途](()
[](()② 层叠上下文和层叠级别是什么
[CSS中的两个重要概念：层叠上下文和层叠级别](()
[](()③ 关于 margin外边距叠加
margin外边距叠加，实际上其原理是和BFC息息相关的。
margin外边距叠加的由来：
- margin外边距叠加，实际上是为了方便文章段落的排版。
margin外边距叠加的原因（ BFC 块级格式化上下文 ）：
- 在同一个BFC中，相邻块级盒子的margin-bottom和margin-top会发生叠加，即外边距叠加（相邻盒子的垂直方向上的外边距会叠加）。
margin外边距叠加的三种情况：
-
兄弟盒子
-
父子盒子 （无padding或border分隔开二者的margin）
-
空元素（无padding或border）
margin外边距叠加的计算规则是：
-
若margin-bottom和margin-top都是正值，取最大值
-
若不全是正值，则对负值取绝对值，用正值减去最大值
-
若都是负值，都取绝对值，用 0 减去最大值
margin外边距叠加的解决：
-
通过触发BFC —— 同一个BFC下才会发生垂直外边距叠加的问题，让相邻盒子不在同一个BFC，即触发新BFC即可。
-
适当添加padding或border —— 父子或空元素，是因为没有padding或border分隔开margin才导致其外边距叠加。那么可以适当添加相同颜色的padding或border，隔开margin。
[](()④ 你知道多少种实现 水平居中 / 垂直居中的方法？
答如：
一、水平居中
-
① 若待处理元素为行内元素，且其父元素为块级元素，则父元素设置 text-align:center
-
② 若待处理元素为行内元素，但其父元素非块级元素，将父元素设置为块级元素 display:block，再设置text-align:center
—————————————————————————
-
③ 若待处理元素是块级元素，且其是定宽度，给待处理元素设置 margin:0 auto；
-
④ 若待处理元素是块级元素，但其不定宽度，将子元素设置为display:inline-block或display:inline，父元素设置text-align:center （回到第一种情况）
-
⑤ 使用position （子绝父相）。若处理元素（子元素）是定宽度，设置子元素为left:50%，再设置margin-left: - 子元素宽度的一半 或 transform:translateX(-50%)
-
⑥ 使用position（子绝父相）。若处理元素（子元素）不定宽度，设置子元素为left:50%，设置子元素 transform:translateX(-50%)
-
⑦ 使用flex布局。给待处理元素的父级元素设置display:flex和justify-content:center;
二、垂直居中
-
① 若待处理元素是单行行内元素，则设置该元素行高等于父级盒子高度即可。#father { height:300px }，#son { line-height:300px }
-
② 若待处理元素是多行行内元素，父元素设置vertical-align:middle或display:table-cell
————————————————
-
③ 使用position（子绝父相）。若处理元素（子元素）是定高度，设置子元素为top:50%，再设置margin-top: - 子元素高度的一半 或 transform:translateY(-50%)
-
④ 使用position（子绝父相）。若处理元素（子元素）不定高度，设置子元素为top:50%，再设置transform:translateY(-50%)
-
⑤ 使用flex布局。给待处理元素的父级元素设置display:flex和align-items:center
[](()2021.7.7
=======================================================================
[](()① 块级盒子，行内元素，行内块盒子区别是什么
[block、inline、inline-block的区别](()
区别如下，答如：
block
-
独占一行
-
可定义width,height，默认宽度为100%
-
可定义四个方向上的margin和padding
-
内部可容纳其它block元素或inline元素
inline
-
不独占一行
-
不可定义width,height，默认宽度为自身内容宽度
-
只能定义margin-left,margin-right和padding-left,padding-right
-
内部只能容纳其它inline元素或文本
inline-block
-
不独占一行
-
可定义width,height，但默认宽度为自身内容宽度
-
可定义四个方向上的margin和padding
[](()② 说一说flex布局
入门概念：
-
flex布局就是弹性布局。
-
设置成display:flex的元素，则变成flex容器。
-
flex容器有有两根轴：水平的主轴和垂直的交叉轴。主轴开始的地方叫main start，结束的地方叫main end；交叉轴开始的地方cross start，结束的地方叫cross end。
相关属性：
-
flex-direction ：控制项目排列方向和顺序，取值有row,row-reverse,column,column-reverse。如，row就是横向正序排列，row-reverse就是横向反序排列。
-
flex-wrap ：控制项目是否换行，取值有nowrap,wrap,wrap-reverse。如，nowrap是不换行，wrap换行且第一行在上方，wrap-reverse换行且第一行在下方。
-
flex-flow ：该属性是flex-direction和flex-wrap的简写集合。
-
justify-content ：控制项目在横轴的对齐方式，取值有flex-start（左对齐）,flex-end（右对齐）,center（水平居中）,space-between（两端对齐，项目之间间隔相等）,space-around（每个项目两侧间隔相等）
-
align-items ：控制项目在纵轴的对齐方式，取值有flex-start（交叉轴的起点对齐）,flex-end（交叉轴的终点对齐）,center（垂直居中）,basline（基线对齐）,stretch（默认值，若项目为设置高度或为auto，则拉长占满整个容器）
[](()③ *** 两列布局
[](()2021.7.8
=======================================================================
[](()① 关于浏览器内核
答如：
对浏览器的理解
- 用户通过URL（统一资源定位符）去访问指定的资源，浏览器则负责将用户请求访问的内容呈现、展示出来。
浏览器分作两部分
-
Shell —— 浏览器的外壳，为用户提供界面操作（菜单或工具栏等）
-
内核 —— 内核是浏览器的核心，Shell依靠内核才可实现浏览器的各种交互功能。
关于浏览器的内核
-
渲染引擎 —— 取得网页的内容、处理讯息、计算网页的显示方式、将内容输出到显示器上
-
JS引擎 —— 解析、执行JavaScript
常见浏览器内核
-
Trident : IE浏览器
-
Webkit : Safari、Chrome
参考：
[浏览器组成、浏览器内核、常见浏览器内核](()
[](()② CSS盒模型、box-sizing属性
扫一扫
372
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
