前端面试笔记（整理）

时间 2019-11-21

原文原文链接

1.CSS的盒子模型

包含元素内容content、内边距padding、边框border、外边距margin
box-sizing:border-box;content-box;inherit;
1) content-box:总宽度=margin+border+padding+width，即为标准模型；
2) border-box:总宽度=margin+width，即为IE模型；
3) inherit:继承父元素的border-sizing属性。javascript

2.常见的post提交数据方式对应的content-type取值

4种
1)application/x-www-form-urlencoded:数据被编码为名称/值对,这是标准的编码格式。
2)multipart/form-data:数据被编码为一条消息，页上的每一个控件对应消息中的一个部分。
3)application/json:告诉服务端消息主体是序列化后的 JSON 字符串.
4)text/xmlcss

3.清除浮动的几种方法

1)父级div定义伪类：after和zoom
`.clearfloat::after {display:block; clear:both; content:" "; visibility:hidden; height:0;}
.clearfloat {zoom:1}`
2)在结尾处添加空div标签clear：both
3)父级div定义height
4)父级div定义display:table
5)父级div也一块儿浮动
6)父级div定义overflow:auto/hidden（必须定义width或zoom:1，同时不能定义height，浏览器会自动检查浮动区域的高度）html

4.移动端上click事件在某些浏览器有没有遇到延迟的问题

1)静止缩放
<meta name="viewport" content="width=device-width user-scalable='no' "> 或
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
2)引入`fastclick.js
window.addEventListener(function(){前端

FastClick.attach(document.body);

1},false)`vue

5.HTTP的缓存机制

1)强制缓存：当所请求的数据在缓存数据库中还没有过时时，不与服务器进行交互，直接使用缓存数据库中的数据。
Expire / Cache-Control
2)协商缓存：从缓存数据库中取出缓存的标识，而后向浏览器发送请求验证请求的数据是否已经更新，若是已更新则返回新的数据，若未更新则使用缓存数据库中的缓存数据。
etag / last-modifindjava

6.实现三栏布局（左右两边固定宽度，中间自适应）

1)浮动布局
左右两边固定宽度，并分别设置float:left和float:right。（但这会带来高度塌陷的问题，因此要清除浮动。清除浮动的方式有：
a. 给父级盒子设置height；
b.给父级盒子设置overflow:hidden；
c.在父级盒子结束前的盒子添加clear:both；
d.父级盒子也设置浮动；
e.父级div定义伪类：after和zoom，node

.clear::after{display:block;clear:both;content:"";visibility:hidden;height:0;} .clear{zoom:1;}

2)绝对定位布局
左中右三个盒子都设置position:absolute;而后分别设置定位
3)flex布局
父盒子设置display:flex;位于中间的子盒子设置flex:1
4)表格布局
父盒子设置display:table;左中右三个盒子设置display:table-cell;左右两个盒子分别设置宽度；
5)网格布局
父盒子设置display:grid; grid-template-columns:300px auto 300px;react

7.== 和 === 的区别

===为恒等符：当等号两边的值为相同类型的时候，直接比较等号两边的值，值相同则返回true，若等号两边的值类型不一样时直接返回false。webpack

==为等值符：当等号两边的值为相同类型时比较值是否相同，类型不一样时会发生类型的自动转换，转换为相同的类型后再做比较。
a、若是一个是null、一个是undefined，那么相等。
b、若是一个是字符串，一个是数值，把字符串转换成数值再进行比较。
c、若是任一值是 true，把它转换成 1 再比较；若是任一值是 false，把它转换成 0 再比较。
d、若是一个是对象，另外一个是数值或字符串，把对象转换成基础类型的值再比较。对象转换成基础类型，利用它的toString或者valueOf方法。 js核心内置类，会尝试valueOf先于toString；例外的是Date，Date利用的是toString转换。那些不是JavaScript语言核心中的对象则经过各自的实现中定义的方法转换为原始值。
e、任何其余组合，都不相等。git

8.transition和animation

transition
1）语法
transition是一个复合属性，可设置四个过渡属性，简写方式以下：
transition{ transition-property transition-duration transition-timing-function transition-delay}
transition-property:是用来指定当元素其中一个属性改变时执行transition效果，值有none（没有属性改变）、all（默认值，全部属性改变），indent（某个属性名，一条transition规则，只能定义一个属性的变化，不能涉及多个属性，若是要设置多个属性时，需分别设置，中间以逗号隔开）【当其值为none时，transition立刻中止执行，当指定为all时，则元素产生任何属性值变化时都将执行transition效果】;
transition-duration:过分时间，是用来指定元素转换过程的持续时间，单位为s(秒)或ms(毫秒)；
transition-timing-function:时间函数，根据时间的推动去改变属性值的变换速率，值ease（逐渐变慢）、linear（匀速）、ease-in（加速）、ease-out（减速）、ease-in-out（加速而后减速）、cubic-bezier：（自定义一个时间曲线）；
transition-delay:延迟，指定一个动画开始执行的时间，也就是当改变元素属性值后多长时间开始执行transition效果，单位为s（秒）或ms（毫秒）；
2）触发方式
伪类触发：:hover,:focus,:checked,:active
js触发：toggleClass
3）如下状况下，属性值改变不能产生过渡效果
a.background-image，如url(a.jpg)到url(b.jpg)（与浏览器支持相关，有的浏览器不支持）等
b.float浮动元素
c.height或width使用auto值
d.display属性在none和其余值（block、inline-block、inline）之间变换
e.position在static和absolute之间变换
transition示例:

<style>     
   #box2{
            height: 100px; width: 100px; background: blue; } #box2:hover{ transform: rotate(180deg) scale(.5, .5); background: red; transition: background 2s ease, transform 2s ease-in 1s;} </style> </head> <body> <div id="box1">BOX1</div> <div id="box2">BOX2</div> </body>

animation
1）语法
animation{ animation-name animation-duration animatino-timing-function animation-delay animation-iteration-count animation-direction animtion-play-state animation-fill-mode}
animation-name：用来调用@keyframes定义好的动画，与@keyframes定义的动画名称一致；
animation-duration：指定元素播放动画所持续的时间；
animation-timing-function：和transition中的transition-timing-function 中的值同样。根据上面的@keyframes中分析的animation中可能存在多个小动画，所以这里的值设置是针对每个小动画所在所在时间范围内的属性变换速率；
animation-delay：定义在浏览器开始执行动画以前的等待的时间、这里是指整个animation执行以前的等待时间，而不是上面所说的多个小动画；
animation-iteration-count：定义动画的播放次数，一般是整数，默认是1,若为infinity，动画将无限屡次的播放；
animation-direction：主要用来设置动画播放次数，其主要有两个值：normal:默认值，动画每次训话都是按顺序播放；alternate:动画播放在第偶数次向前播放，第奇数次想反方向播放（animation-iteration-count取值大于1时设置有效）
animation-play-state：属性用来控制元素动画的播放状态。主要有两个值：running:能够经过该值将暂停的动画从新播放，这里的从新播放不是从元素动画的开始播放，而是从暂停的那个位置开始播放；paused:暂停播放。
animation-fill-mod：　默认状况下，动画结束后，元素的样式将回到起始状态，animation-fill-mode属性能够控制动画结束后元素的样式。主要具备四个属性值：none（默认，回到动画没开始时的状态。）,forwards（动画结束后动画停留在结束状态）,backwords（动画回到第一帧的状态）,both（根据animation-direction轮流应用forwards和backwards规则）。
animation示例:

<style>
        .box{height:100px;width:100px;border:15px solid black; animation: changebox 10s ease-in-out 3 alternate paused; } .box:hover{ animation-play-state: running; } @keyframes changebox { 10% { background:red; } 50% { width:80px; } 70% { border:15px solid yellow; } 100% { width:180px; height:180px; } } </style> <body> <div class="box"></div> </body>

9.事件冒泡事件捕获

事件冒泡，事件会从最内层的元素开始发生，一直向上传播，直到document对象；
事件捕获则跟事件冒泡相反，事件会从document对象开始发生，直到最具体的元素；

10.GET和POST的区别

1.发送方式：GET请求数据放在url上，即HTTP的协议头中；而POST把数据放在HTTP的包体中。
2.大小的限制：GET传的参数有长度的限制，由于浏览器对url的长度有限制；而POST理论上是没有限制的。
3.安全性：GET请求可被缓存，请求保存在浏览器的历史记录中；POST则不能被缓存。与POSＴ相比，GET的安全性较差，由于发送的数据是URL的一部分。

11.var的变量提高的底层原理是什么？

JS引擎的工做方式是
1)先解析代码，获取全部被声明的变量；
2)而后再执行。
也就是分为预处理和执行这两个阶段。
变量提高：全部用var声明变量的语句都会被提高到代码头部。另外function也可看做变量声明，也存在变量提高的状况。

12.垂直水平居中的方式？

1)定位
父元素设置为：position: relative;
子元素设置为：position: absolute;
距上50%，据左50%，而后减去元素自身宽度的距离就能够实现

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

2)flex布局

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

3)tabel-cell

display: table-cell;
vertical-align: middle;//使子元素垂直居中 text-align: center;//使子元素水平居中

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

1) Array.prototype.isPrototypeOf(obj)方法，断定Array是否是在obj的原型链中，若是是，则返回true,不然false;
2) obj instanceof Array;
3) Object.prototype.toString.call(obj)；(==="[object Array]")
4) Array.isArray(obj);

14.margin塌陷？

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

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

解决方法的主要原理就是设置盒子为BFC
BFC为页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。

15.伪类与伪元素的区别

1）伪类
伪类用于选择DOM树以外的信息，或是不能用简单选择器进行表示的信息。前者包含那些匹配指定状态的元素，好比:link，:visited，:hover，:active；后者包含那些知足必定逻辑条件的DOM树中的元素，好比:first-child，:first-of-type，：target。
2）伪元素
伪元素为DOM树没有定义的虚拟元素。不一样于其余选择器，它不以元素元素为最小选择单元，它选择的是元素制定单元。好比::before表示选择元素内容的以前内容；::selection表示选择元素被选中的内容。
3）伪类/伪元素一览表
<伪类以下>

/* :active 选择正在被激活的元素 :hover 选择被鼠标悬浮着元素 :link 选择未被访问的元素 :visited 选择已被访问的元素 :first-child 选择知足是其父元素的第一个子元素的元素 :lang 选择带有指定 lang 属性的元素 :focus 选择拥有键盘输入焦点的元素 :enable 选择每一个已启动的元素 :disable 选择每一个已禁止的元素 :checked 选择每一个被选中的元素 :target 选择当前的锚点元素 */

<伪元素以下>

/* ::first-letter 选择指定元素的第一个单词 ::first-line 选择指定元素的第一行 ::after 在指定元素的内容后面插入内容 ::before 在指定元素的内容前面插入内容 ::selection 选择指定元素中被用户选中的内容 */

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

Undefined，Null，Boolean，Number，String

17.JavaScript的typeof返回那些数据类型

undefined，string，boolean，number，symbol(ES6)，object，function

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

数据封装类对象：Object、Array、Boolean、Number、String
其余对象：Function、Argument、Math、Date、RegExp、Error

19.null和undefined的区别

1）null表示一个对象被定义了，值为“空值”；undefined表示不存在这个值。
2）变量被定义了，可是没有赋值时，就等于undefined。
3）注意：在验证null时，要用===，由于==没法区分null和undefined。
typeof null // "object" 说明：null是一个没有任何属性和方法的对象

20.对JSON的了解

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

21.列举3种强制类型转换和2种隐式类型转换

强制：parseInt()，parseFloat()，Number()，（Boolean()，String()）
隐式：==，！

22.input的type属性有哪些？

text：文本框
password：密码
radio：单选按钮
checkbox：复选框
file：文件选择域
hidden：隐藏域
button：按钮
reset：重置按钮
submit：表单提交按钮
image：图片按钮

23.IE和标准下有哪些兼容性的写法

var ev = ev || window.event document.documentElement.clientWidth || document.body.clientWidth var target = ev.srcElement||ev.target

24.如何阻止事件冒泡

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

25.如何阻止默认事件

1)return false；2) ev.preventDefault();

26.说说前端中的事件流？

事件流描述的是从页面接收事件的顺序，DOM2级事件流包括下面几个阶段。
事件捕获阶段
处理事件阶段
事件冒泡阶段
（addEventListener：addEventListener是DOM2级事件新增的指定事件处理程序的操做，这个方法接收3个参数：要处理的事件名，做为事件处理程序的函数和一个布尔值。最后的布尔值若是为true，表示在捕获阶段调用事件处理程序；若是为false，表示在冒泡阶段调用事件处理程序，默认为false）

27.如何实现一个自适应的正方形

1）CSS 3vw单位
CSS3中新增了一组相对于可视区域百分比的长度单位vw、vh、vmin、vmax。其中vw是相对于视口宽度百分比的单位，1vw=1%viewport width，vh是相对于视口高度百分比的单位，1vh=1%viewport height；vmin是相对于当前视口宽高中较小的一个的百分比单位，同理vmax是相对当前视口宽高中较大的一个百分比单位。
代码实现：

.placeholder{
  width: 50vw; height: 50vw; }

优势：简洁方便
缺点：浏览器兼容很差
2)设置垂直方向的 padding 撑开容器
margin、padding的百分比数值是相对于父元素宽度计算的。由此能够发现只须要将元素垂直方向的padding值设定为与width相同的百分比就能够制做出自适应正方形了：
代码实现：

.placeholder{
  width: 100%; padding-bottom:100%; }

若是正方形中没有内容（至关于只是一个几何里面的正方形，并无展现其余任何内容），一切看起来都很正常；可是，若是正方形中有其余内容（这种状况会更常见一些，好比说有一些文本和图片），此时容器的高度就会被拉伸，由于盒子模型中的padding 是不包含在 content 中的，因此咱们能够经过 height:0 解决这个问题；这种方案简洁明了，且兼容性好；可是除了填充内容后会出现问题之外，还有可能碰上max-height不收缩，因而第三种方案来了：
3）利用伪元素的margin(padding)-top撑开容器
在方案二中，咱们利用百分比数值的 padding-bottom 属性撑开容器内部空间，可是这样作会致使在元素上设置的 max-height 属性失效；而失效的缘由是 max-height 属性只限制于 height，也就是只会对元素的 content height 起做用。那么咱们是否是能用一个子元素撑开 content 部分的高度，从而使 max-height 属性生效呢？咱们来试试：

.placeholder {
            width: 20%; background-color: #000; /* overflow: hidden; */ /* display: inline-block; */ float: left; /*设置成BFC才能使margin-top撑起高度*/ } .placeholder:after { content: ''; display: block; margin-top: 100%; /* margin 百分比相对父元素宽度计算 */ }

28.js中的位置关系

offsetParent：该属性返回一个对象的引用，这个对象是距离调用offsetParent的元素最近的（在包含层次中最靠近的），已进行过CSS定位的容器元素。若是这个容器元素未进行CSS定位, 则offsetParent属性的取值为body元素的引用。当容器元素的style.display 被设置为 "none"时（译注：IE和Opera除外），offsetParent属性返回 null。
top：该属性通常对用过css定位的元素有效（position为“static”时为auto，不产生效果），定义了一个top属性有效的元素（即定位元素）的上外边距边界与其包含块上边界之间的偏移。
clientTop：元素上边框的厚度，当没有指定边框厚底时，通常为0。
scrollTop：位于对象最顶端和窗口中可见内容的最顶端之间的距离，简单地说就是滚动后被隐藏的高度。
offsetTop：获取对象相对于由offsetParent属性指定的父坐标(css定位的元素或body元素)距离顶端的高度。
clientHeight：内容可视区域的高度，也就是说页面浏览器中能够看到内容的这个区域的高度，通常是最后一个工具条如下到状态栏以上的这个区域，与页面内容无关。
scrollHeight：IE、Opera 认为 scrollHeight 是网页内容实际高度，能够小于clientHeight。FF 认为scrollHeight 是网页内容高度，不过最小值是 clientHeight。
offsetHeight：获取对象相对于由offsetParent属性指定的父坐标(css定位的元素或body元素)的高度。IE、Opera 认为 offsetHeight = clientHeight + 滚动条 + 边框。FF 认为 offsetHeight 是网页内容实际高度，能够小于clientHeight。offsetHeight在新版本的FF和IE中是同样的，表示网页的高度，与滚动条无关，chrome中不包括滚动条。

*诸如left、clientLeft、offsetLeft、clientWidth、scrollWidth等，和top、height相似，再也不赘述。

clientX、clientY：相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性。
pageX、pageY：相似于event.clientX、event.clientY，但它们使用的是文档坐标而非窗口坐标。这2个属性不是标准属性，但获得了普遍支持。IE事件中没有这2个属性。
offsetX、offsetY：相对于事件源元素（target或srcElement）的X,Y坐标，只有IE事件有这2个属性，标准事件没有对应的属性。
screenX、screenY：相对于用户显示器屏幕左上角的X,Y坐标。标准事件和IE事件都定义了这2个属性

29.`Doctype`做用? 严格模式与混杂模式如何区分？它们有何意义?

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

30.`link`标签和`import`标签的区别?

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

31.元素的文本省略号?

单行：

overflow:hidden;
 text-overflow:ellipsis;
 white-space:nowrap

多行：
1）直接用css属性设置(只有-webkit内核才有做用)

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

移动端浏览器绝大部分是WebKit内核的，因此该方法适用于移动端；
-webkit-line-clamp 用来限制在一个块元素显示的文本的行数,这是一个不规范的属性（unsupported WebKit property），它没有出如今 CSS 规范草案中。
display: -webkit-box 将对象做为弹性伸缩盒子模型显示。
-webkit-box-orient 设置或检索伸缩盒对象的子元素的排列方式。
text-overflow: ellipsis 以用来多行文本的状况下，用省略号“…”隐藏超出范围的文本。

32.XML和JSON的区别？

1）数据体积方面
JSON相对于XML来说，数据的体积小，传递的速度更快些
2）数据描述方面
JSON和JavaScript交互更加方便，更容易解析处理，更容易交互
3）数据描述方面
JSON对数据的描述性比XML差
4）传输速度方面
JSON的速度要远远快于XML

33.前端须要注意哪些SEO？

合理的title、description、keywords：搜索对着三项的权重逐个减小，title值强调重点便可，重要关键词不要超过两次，并且要靠前，不一样页面的title要有所不一样；
description把页面的内容高度归纳，长度合适，不可过度分堆砌关键词，不一样页面的description有所不一样；
keywords列举重要关键词便可；

// title标题 <title>标题</title> // keywords 关键词 <meta name="description" content="关键词1,关键词2,关键词3"> // description 内容摘要 <meta name="description" content="网页的简述">

语义化的HTML代码，符合W3C规范：语义化代码让搜索引擎容易理解网页；
重要内容的HTML代码放在最前：搜索引擎抓取HTML顺序是从上到下，有的搜索引擎对抓取长度有限制，因此要保证重要内容必定会被抓取；
重要内容不要用JS输出：爬虫不会执行JS获取内容；
少用iframe：搜索引擎不会抓取iframe中的内容；
非装饰性图片必须加alt；
提升网站速度：网站速度是搜素引擎排序的一个重要指标；

34.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通道

35.如何进行网页性能优化？

1）content方面
减小HTTP请求：合并文件、CSS精灵图
减小DNS查询：DNS缓存、将资源分布到恰当数量的主机名
减小DOM元素数量
２）Server方面
使用CDN
配置ETag
对组件使用Gzip压缩
３）Cookie方面
减小cookie大小
４）CSS方面
将样式表放到页面顶部
不使用CSS表达式
使用<link>不使用@import
５）JavaScript方面
将脚本放到页面底部
将JavaScript和CSS从外部引入
压缩JavaScript和CSS
删除不须要的脚本
减小DOM访问
6）图片方面
优化CSS精灵
不要再HTML中拉伸图片

36.语义化的理解

HTML语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；
在没有CSS样式状况下也以一种文档格式显示，而且是容易阅读的；
搜索引擎的爬虫依赖于标记来肯定上下文的各个关键字的权重，利于SEO；
使阅读源代码的人更容易将网站分块，便于阅读维护理解；

37.WEB标准以及W3C标准是什么

标签闭合、标签小写、不乱嵌套、使用外链CSS和JS、结构行为表现的分离

38.说说对做用域链的理解

做用域链的做用是保证执行环境里有权访问的变量和函数是有序的，做用域链的变量只能向上访问，变量访问到window对象即被终止，做用域链向下访问变量是不被容许的；
即做用域就是变量与函数的可访问范围，即做用域控制这变量与函数的可见性和生命周期；

39.原生ＪＳ都有哪些方式能够实现两个页面间的通讯？

１）经过url地址栏传递参数；
例如：点击列表中的每一条数据，跳转到一个详情页面，在URL中传递不一样的参数区分不一样的页面；
２）经过本地存储cookie、localStorage、sessionStorage；
例如京东的登录，把登录后得到的页面信息存储到本地，其余页面须要用户信息的话就从本地的存储数据中获取；
３）使用iframe
例如在Ａ页面中嵌入Ｂ页面，在Ａ中能够经过一些属性和实现方法和Ｂ页面的通讯；
４）利用postMessage实现页面间的通讯
例如父窗口往子窗口传递信息，子窗口往父窗口传递信息

40.ES6中的let，const，var的区别是什么？

var：声明全局常量；
let：声明块级常量，即局部常量，定之后能够修改；
const：用于声明常量，定义后不能再修改值或者引用值的常量，也具备块级做用域；

41.对数组进行去重，es5或者es6方法

//es5四种方式: //方式一: Array.prototype.unique1 = function() { // 1. 定义数组 var temp = []; // 2. 遍历当前数组 for(var i = 0; i < this.length; i++) { // 3.若是当前数组的第i已经保存进了临时数组， // 那么跳过,不然把当前项push到临时数组里面 if (-1 === temp.indexOf(this[i])) { temp.push(this[i]); } } return temp; }; //方式二: Array.prototype.unique2 = function() { //1. hash为hash表，r为临时数组 var hash = {}, temp=[]; // 2.遍历当前数组 for(var i = 0; i < this.length; i++) { // 3. 若是hash表中没有当前项 if (!hash[this[i]]) { // 4.存入hash表 hash[this[i]] = true; // 5.把当前数组的当前项 // push到临时数组里面 temp.push(this[i]); } } return temp; }; //方式三: Array.prototype.unique3 = function() { var n = [this[0]]; for(var i = 1; i < this.length; i++){ if (this.indexOf(this[i]) === i) { n.push(this[i]); } } return n; }; //方式四: Array.prototype.unique4 = function() { this.sort(); var re=[this[0]]; for(var i = 1; i < this.length; i++) { if( this[i] !== re[re.length-1]) { re.push(this[i]); } } return re; }; //es6实现方式: Array.prototype.unique = Array.prototype.unique || function () { return [...new Set(this)]; };

42.页面加载过程当中可能触发哪些事件？它们的顺序是？

页面加载时，大体能够分为如下几个步骤：
1）开始解析HTML文档结构
2）加载外部样式表及JavaScript脚本
3）解析执行JavaScript脚本
4）DOM树渲染完成
5）加载未完成的外部资源（如图片）
6）页面加载成功
执行顺序：
1）document readystatechange事件
2）document DOMContentLoaded事件
3）window load事件

43.什么是CDN，CDN对于网络有什么意义，它有什么的缺点？

CDN又称为内容分发网络；本意在于尽量避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定。
主要目的：解决因分布、带宽、服务器性能带来的访问延迟问题，适用于站点的加速、点播、直播等场景。使用户就近取得所需内容，解决Internet网络拥挤的情况，提升用户访问网站的响应速度和成功率。
缺点：1）实施复杂，投资大
2）目前大部分的CDN还只是对静态的内容加速，对动态加速效果很差；而双线对动态加速的效果跟静态是同样的。

44.vue-router中$route和$router的区别？

1）$route为当前router跳转对象里面能够获取name、path、query、params等
2）$router为VueRouter实例，想要导航到不一样URL，则使用$router.push方法
返回上一个history也是使用$router.go方法

45.vue路由传参query与params两种方式的区别

query要用path来引入,例如ths.$router.push({ path:"detail",query:{id:"00"}})，接收参数为this.$route.query.id，params要用name来引入，例如ths.$router.push({ name:"detail",params:{id:"00"}})，接收参数为this.$route.params.id。以query传输的参数会在相似于get传参，在浏览器地址栏中显示参数。

46.描述一下渐进加强和优雅降级

优雅降级(graceful degradation)：一开始就构建站点的完整功能，而后针对浏览器测试和修复。
渐进加强(progressive enhancement)：一开始只构建站点的最少特性，而后不断针对各浏览器追加功能。

47.为何利用多个域名来请求网络资源会更有效？

动静分离请求，使用不一样的服务器处理请求，提升效率；
突破浏览器的并发限制，同一时间针对同一域名下的请求有必定的数量限制。
节约主域名的链接数，从而提升客户端网络带宽的利用率，优化页面响应。

48.HTML5有哪些新特性、移除了哪些元素？

1）绘画标签canvas；
2）用于媒介回放的video和audio元素；
3）本地离线存储localStorage长期存储数据，浏览器关闭后数据不丢失；
4）sessionStorage的数据在浏览器关闭后自动删除；
5）语义化更好的内容元素，好比article、footer、header、nav、section；
6）表单控件，calendar、data、time、email、url、search；
7）webworker、websocket、Geolocation；
移除的元素：
1）纯表现的元素：basefont、big、center、font、s、strike、tt
2）对可用性产生负面影响的元素：frame、frameset、noframes

49.display:none;与visibility:hidden;的区别？

相同点：它们都能让元素不可见‘
不一样点：
display:none;会让元素彻底从渲染树中消失，渲染的时候不占据任何空间；
visibility:hidden;不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见；
display:none;是非继承属性，子孙节点的消失因为元素从渲染树消失形成，经过修改子孙节点属性没法显示；
visibility:hodden;是继承属性，子孙节点的消失因为继承了hidden，经过设置visibility:visible;可让子孙节点显示；
修改常规流中元素的display一般会形成文档重排。修改visibility属性只会形成本元素的重绘；
读屏器不会读取display:none;元素内容;会读取visibility:hidden;元素内容；

50.CSS去掉inline-block元素间隙的几种方法？

间隙是怎么来的：间隙是由换行或者回车致使的；只要把标签写成一行或者标签没有空格，就不会出现间隙；
去除方法：
方法一：
元素间的间隙出现的缘由，是元素标签之间的空格，把空格去掉间隙就会消失

<div class="itlike"> <span>lhh</span><span>lhh</span> </div>

方法二：
利用HTML注释标签

<div class="demo"> <span>lhh</span><!-- --><span>lhh</span> </div>

方法三：
取消标签闭合

<div class="demo"> <span>lhh <span>lhh <span>lhh <span>lhh </div>

方法四：
在父容器上使用font-size:0;能够消除间隙

<div class="demo"> <span>lhh</span> <span>lhh</span> <span>lhh</span> <span>lhh</span> </div> .demo {font-size: 0;}

51.apply,call,bind有什么区别？

三者均可以把一个函数应用到其余对象上，apply,call是直接执行函数调用，bind是绑定，执行须要再次调用。
apply和call的区别是apply接受数组做为参数，而call是接受逗号分隔的无限多个参数列表。
代码以下：

function Person() { } Person.prototype.sayName() { alert(this.name); } var obj = {name: 'michaelqin'}; // 注意这是一个普通对象，它不是Person的实例 // 1) apply Person.prototype.sayName.apply(obj, [param1, param2, param3]); // 2) call Person.prototype.sayName.call(obj, param1, param2, param3); // 3) bind var liaoke = Person.prototype.sayName.bind(obj); liaoke ([param1, param2, param3]); // bind须要先绑定，再执行 liaoke (param1, param2, param3); // bind须要先绑定，再执行

52.介绍一下defineProperty，hasOwnProperty， propertyIsEnumerable

Object.defineProperty(obj，prop，descriptor)用来给对象定义属性，有value,writeable,enumerable,set/get,configurable，
hasOwnProperty用于检查某一属性是否是存在于对象自己，
propertyIsEnumerable用来检测某一属性是否可遍历，也就是能不能用for...in循环来取到。

53.JS经常使用设计模式的实现思路（单例、工厂、代理、装饰、观察者模式等）

// 1) 单例：　任意对象都是单例，无须特别处理 var obj = {name: 'michaelqin', age: 30}; // 2) 工厂: 就是一样形式参数返回不一样的实例 function Person() { this.name = 'Person1'; } function Animal() { this.name = 'Animal1'; } function Factory() {} Factory.prototype.getInstance = function(className) { return eval('new ' + className + '()'); } var factory = new Factory(); var obj1 = factory.getInstance('Person'); var obj2 = factory.getInstance('Animal'); console.log(obj1.name); // Person1 console.log(obj2.name); // Animal1 // 3) 代理: 就是新建个类调用老类的接口,包一下 function Person() { } Person.prototype.sayName = function() { console.log('michaelqin'); } Person.prototype.sayAge = function() { console.log(30); } function PersonProxy() { this.person = new Person(); var that = this; this.callMethod = function(functionName) { console.log('before proxy:', functionName); that.person[functionName](); // 代理 console.log('after proxy:', functionName); } } var pp = new PersonProxy(); pp.callMethod('sayName'); // 代理调用Person的方法sayName() pp.callMethod('sayAge'); // 代理调用Person的方法sayAge() // 4) 观察者: 就是事件模式，好比按钮的onclick这样的应用. function Publisher() { this.listeners = []; } Publisher.prototype = { 'addListener': function(listener) { this.listeners.push(listener); }, 'removeListener': function(listener) { delete this.listeners[listener]; }, 'notify': function(obj) { for(var i = 0; i < this.listeners.length; i++) { var listener = this.listeners[i]; if (typeof listener !== 'undefined') { listener.process(obj); } } } }; // 发布者 function Subscriber() { } Subscriber.prototype = { 'process': function(obj) { console.log(obj); } };　// 订阅者 var publisher = new Publisher(); publisher.addListener(new Subscriber()); publisher.addListener(new Subscriber()); publisher.notify({name: 'michaelqin', ageo: 30}); // 发布一个对象到全部订阅者 publisher.notify('2 subscribers will both perform process'); // 发布一个字符串到全部订阅者

54.处理字符串经常使用的十个函数

charAt()   // 返回在指定位置的字符。 concat() // 链接字符串。 fromCharCode() // 从字符编码建立一个字符串。 indexOf() // 检索字符串。 match() // 找到一个或多个正则表达式的匹配。 replace() // 替换与正则表达式匹配的子串。 search() // 检索与正则表达式相匹配的值。 slice() // 提取字符串的片段，并在新的字符串中返回被提取的部分。 split() // 把字符串分割为字符串数组。 substr() // 从起始索引号提取字符串中指定数目的字符。 substring() // 提取字符串中两个指定的索引号之间的字符。 toLocaleLowerCase() // 把字符串转换为小写。 toLocaleUpperCase() // 把字符串转换为大写。 toLowerCase() // 把字符串转换为小写。 toUpperCase() // 把字符串转换为大写。 toString() // 返回字符串。 valueOf() // 返回某个字符串对象的原始值。

55.如何判断一个变量是对象仍是数组

function isObjArr(variable){ if (Object.prototype.toString.call(value) === "[object Array]") { console.log('value是数组'); }else if(Object.prototype.toString.call(value)==='[object Object]'){//这个方法兼容性好一点 console.log('value是对象'); }else{ console.log('value不是数组也不是对象') } } // 注意:千万不能使用typeof来判断对象和数组，由于这两种类型都会返回"object"。

56.ES5的继承和ES6的继承有什么区别？

ES5的继承是经过prototype或构造函数机制来实现。
ES5的继承实质上是先建立子类的实例对象，而后再将父类的方法添加到this上(Parent.apply(this))。
ES6的继承机制实质上是先建立父类的实例对象this(因此必须先调用父类的super()方法)，而后再用子类的构造函数修改this。具体为ES6经过class关键字定义类，里面有构造方法，类之间经过extends关键字实现继承。子类必须在constructor方法中调用super方法，不然新建实例报错。由于子类没有本身的this对象，而是继承了父类的this对象，而后对其调用。若是不调用super方法，子类得不到this对象。

注意：super关键字指代父类的实例，即父类的this对象。在子类构造函数中，调用super后，才可以使用this关键字，不然报错。

57.下面的ul，如何点击每一列的时候alert其index？(闭包)

<ul id="test"> <li>这是第一条</li> <li>这是第二条</li>
 <li>这是第三条</li>

 </ul> // 方法一： var lis=document.getElementById('test').getElementsByTagName('li'); for(var i=0;i<3;i++) { lis[i].index=i; lis[i].onclick=function(){ alert(this.index); }; } //方法二： var lis=document.getElementById('test').getElementsByTagName('li'); for(var i=0;i<3;i++) { lis[i].index=i; lis[i].onclick=(function(a){ return function() { alert(a); } })(i); }

58.对于MVVM的理解

MVVM 是 Model-View-ViewModel 的缩写。
Model表明数据模型，也能够在Model中定义数据修改和操做的业务逻辑。
View 表明UI 组件，它负责将数据模型转化成UI 展示出来。
ViewModel 监听模型数据的改变和控制视图行为、处理用户交互，
简单理解就是一个同步View 和 Model的对象，链接Model和View。
在MVVM架构下，View 和 Model 之间并无直接的联系，
而是经过ViewModel进行交互，Model 和 ViewModel 之间的交互是双向的，
所以View 数据的变化会同步到Model中，而Model 数据的变化也会当即反应到View 上。
ViewModel 经过双向数据绑定把 View 层和 Model 层链接了起来，
而View 和 Model 之间的同步工做彻底是自动的，无需人为干涉，
所以开发者只需关注业务逻辑，不须要手动操做DOM,
不须要关注数据状态的同步问题，
复杂的数据状态维护彻底由 MVVM 来统一管理。

59.解释Vue的生命周期

Vue实例从建立到销毁的过程，就是生命周期。从开始建立、初始化数据、编译模板、挂载Dom->渲染、更新->渲染、销毁等一系列过程，称之为 Vue的生命周期。

Vue的生命周期包括：
beforeCreate（建立前）在数据观测和初始化事件还未开始，
created（建立后）完成数据观测，属性和方法的运算，初始化事件，$el属性尚未显示出来；
beforeMount（载入前）在挂载开始以前被调用，相关的render函数首次被调用，实例已完成如下的配置：编译模板，把data里面的数据和模板生成html，注意此时尚未挂载html到页面上；
mounted（载入后）在el被新建立的vm.$el替换，并挂载到实例上去以后调用，实例已完成如下配置：用上面编译好的html内容替换el属性指向的DOM对象，完成模板中的html渲染到html页面中，此过程当中进行ajax交互。
beforeUpdate（更新前）在数据更新以前调用，发生在虚拟DOM从新渲染和打补丁以前，能够在该钩子中进一步地更改状态，不会触发附加的重渲染过程。
updated（更新后）在因为数据更改致使的虚拟DOM从新渲染和打补丁以后调用。调用时，组件DOM已经更新，因此能够执行依赖于DOM的操做。然而在大多数状况下，应该避免在此期间更改状态，由于这可能会致使更新无限循环，该钩子在服务器渲染期间不被调用。
beforeDestroy（销毁前）在实例销毁以前调用，实例仍然彻底可用。
destroyed（销毁后）在实例销毁以后调用。调用后，全部的事件监听器会被移除，全部的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。

60.为何使用Node.js，它有哪些优缺点？

优势：
事件驱动，经过闭包很容易实现客户端的生命活期。
不用担忧多线程，锁，并行计算的问题
V8引擎速度很是快
对于游戏来讲，写一遍游戏逻辑代码，前端后端通用
缺点：
node.js更新很快，可能会出现版本兼容
node.js还不算成熟，尚未大制做
node.js不像其余的服务器，对于不一样的连接，不支持进程和线程操做

61.什么是错误优先的回调函数？

错误优先(Error-first)的回调函数（Error-First Callback）用于同时返回错误和数据。
第一个参数返回错误，而且验证它是否出错；其余参数返回数据。

fs.readFile(filePath, function(err, data) { if (err) { // 处理错误 return console.log(err); } console.log(data); });

62.使用npm有哪些好处？

经过npm，你能够安装和管理项目的依赖，
而且可以指明依赖项的具体版本号。
对于Node应用开发而言，
能够经过package.json文件来管理项目信息，
配置脚本，以及指明依赖的具体版本。

63.在JavaScript源文件的开头包含 use strict 有什么意义和好处？

use strict 是一种在JavaScript代码运行时自动实行更严格解析和错误处理的方法。（严格模式）
将值分配给一个未声明的变量会自动建立该名称的全局变量。这是JavaScript中最多见的错误之一。在严格模式下，这样作的话会抛出错误。消除 this 强制。
当检测到对象（例如，var object = {foo: "bar", foo: "baz"};）中重复命名的属性，或检测到函数中（例如，function foo(val1, val2, val1){}）重复命名的参数时，严格模式会抛出错误，所以捕捉几乎能够确定是代码中的bug能够避免浪费大量的跟踪时间。比eval() 更安全。

64.vuejs与angularjs以及react的区别？

与AngularJS的区别
相同点：
都支持指令：内置指令和自定义指令。
都支持过滤器：内置过滤器和自定义过滤器。
都支持双向数据绑定。
都不支持低端浏览器。
不一样点：
1.AngularJS的学习成本高，好比增长了Dependency Injection特性，而Vue.js自己提供的API都比较简单、直观。
2.在性能上，AngularJS依赖对数据作脏检查，因此Watcher越多越慢。
Vue.js使用基于依赖追踪的观察而且使用异步队列更新。全部的数据都是独立触发的。
对于庞大的应用来讲，这个优化差别仍是比较明显的。

与React的区别
相同点：
React采用特殊的JSX语法，Vue.js在组件开发中也推崇编写.vue特殊文件格式，对文件内容都有一些约定，二者都须要编译后使用。
中心思想相同：一切都是组件，组件实例之间能够嵌套。
都提供合理的钩子函数，可让开发者定制化地去处理需求。
都不内置列数AJAX，Route等功能到核心包，而是以插件的方式加载。
在组件开发中都支持mixins的特性。
不一样点：
React依赖Virtual DOM,而Vue.js使用的是DOM模板。React采用的Virtual DOM会对渲染出来的结果作脏检查。
Vue.js在模板中提供了指令，过滤器等，能够很是方便，快捷地操做Virtual DOM。

65.标签keep-alive的做用是什么?

<keep-alive></keep-alive> 包裹动态组件时，会缓存不活动的组件实例,主要用于保留组件状态或避免从新渲染。

66.WeakMap 和 Map 的区别?

WeakMap 结构与 Map 结构基本相似，惟一的区别是它只接受对象做为键名（ null 除外），不接受其余类型的值做为键名，并且键名所指向的对象，不计入垃圾回收机制。
WeakMap 最大的好处是能够避免内存泄漏。一个仅被 WeakMap 做为 key 而引用的对象，会被垃圾回收器回收掉。
WeakMap 拥有和 Map 相似的 set(key, value) 、get(key)、has(key)、delete(key) 和 clear() 方法, 没有任何与迭代有关的属性和方法。

67.http和https的基本概念?

http: 超文本传输协议，是互联网上应用最为普遍的一种网络协议，是一个客户端和服务器端请求和应答的标准（TCP），用于从WWW服务器传输超文本到本地浏览器的传输协议，它可使浏览器更加高效，使网络传输减小。
https: 是以安全为目标的HTTP通道，简单讲是HTTP的安全版，即HTTP下加入SSL层，HTTPS的安全基础是SSL，所以加密的详细内容就须要SSL。
https协议的主要做用是：创建一个信息安全通道，来确保数组的传输，确保网站的真实性。

68.git fetch和git pull的区别?

git pull：至关因而从远程获取最新版本并merge到本地
git fetch：至关因而从远程获取最新版本到本地，不会自动merge

69.介绍一下对浏览器内核的理解？

主要分红两部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。
渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、
整理讯息（例如加入CSS等），以及计算网页的显示方式，而后会输出至显示器或打印机。
浏览器的内核的不一样对于网页的语法解释会有不一样，因此渲染的效果也不相同。
全部网页浏览器、电子邮件客户端以及其它须要编辑、显示网络内容的应用程序都须要内核。
JS引擎：解析和执行javascript来实现网页的动态效果。
最开始渲染引擎和JS引擎并无区分的很明确，后来JS引擎愈来愈独立，内核就倾向于只指渲染引擎。

70.什么是微格式

微格式（Microformats）是一种让机器可读的语义化XHTML词汇的集合，是结构化数据的开放标准。
是为特殊应用而制定的特殊格式
优势：将智能数据添加到网页上，让网站内容在搜索引擎结果界面能够显示额外的提示。

71.数据绑定基本的实现

// 实现一个方法，能够给 obj 全部的属性添加动态绑定事件，当属性值发生变化时会触发事件 let obj = { key_1: 1, key_2: 2 } function func(key) { console.log(key + ' 的值发生改变：' + this[key]); } bindData(obj, func); obj.key_1 = 2; // 此时自动输出 "key_1 的值发生改变：2" obj.key_2 = 1; // 此时自动输出 "key_2 的值发生改变：1"

答案：

function bindData(obj, fn) { for (let key in obj) { Object.defineProperty(obj, key, { set(newVal) { if (this.value !== newVal) { this.value = newVal; fn.call(obj, key); } }, get() { return this.value; } }) } }

72.介绍一下对webpack的认识？

WebPack 是一个模块打包工具，可使用WebPack管理模块依赖，并编绎输出模块们所需的静态文件。
它可以很好地管理、打包Web开发中所用到的HTML、javaScript、CSS 以及各类静态文件（图片、字体等），让开发过程更加高效。
对于不一样类型的资源，webpack 有对应的模块加载器。webpack 模块打包器会分析模块间的依赖关系，最后生成了优化且合并后的静态资源。
webpack的两大特点：
1）code splitting（能够自动完成）
2）loader 能够处理各类类型的静态文件，而且支持串联操做
webpack 是以commonJS的形式来书写脚本，但对 AMD/CMD 的支持也很全面，方便旧项目进行代码迁移。
webpack具备requireJs和browserify的功能，但仍有不少本身的新特性：
1）对 CommonJS 、 AMD 、ES6的语法作了兼容
2）对js、css、图片等资源文件都支持打包
3）串联式模块加载器以及插件机制，让其具备更好的灵活性和扩展性，例如提供对CoffeeScript、ES6的支持
4）有独立的配置文件webpack.config.js
5）能够将代码切割成不一样的chunk，实现按需加载，下降了初始化时间
6）支持 SourceUrls 和 SourceMaps，易于调试
7）具备强大的Plugin接口，大可能是内部插件，使用起来比较灵活
8）webpack 使用异步 IO 并具备多级缓存。这使得 webpack 很快且在增量编译上更加快

73.关于HTTP2.0的认识

HTTP/2引入了“服务端推（server push）”的概念，它容许服务端在客户端须要数据以前就主动地将数据发送到客户端缓存中，从而提升性能。
HTTP/2提供更多的加密支持，HTTP/2使用多路技术，容许多个消息在一个链接上同时交差。
它增长了头压缩（header compression），所以即便很是小的请求，其请求和响应的header都只会占用很小比例的带宽。

74.对AMD和Commonjs的理解?

CommonJS是服务器端模块的规范，nodejs采用了这个规范。
CommonJS规范加载模块是同步的，也就是说，只有加载完成，才能执行后面的操做。
AMD规范则是非同步加载模块，容许指定回调函数。
AMD推荐的风格经过返回一个对象作为模块对象，CommonJS的风格经过对module.exports或exports的
属性赋值来达到暴露模块对象的目的。

75.mongoDB和MySQL的区别?

MySQL是传统的关系型数据库，MongoDB则是非关系型数据库
mongodb以JSON结构（二进制）进行存储，对海量数据存储有着很明显的优点。
对比传统关系型数据库,NoSQL有着很是显著的性能和扩展性优点，与关系型数据库相比，MongoDB的优势有：
①弱一致性（最终一致），更能保证用户的访问速度：
②文档结构的存储方式，可以更便捷的获取数据。

76.讲讲304缓存的原理?

服务器首先产生ETag，服务器可在稍后使用它来判断页面是否已经被修改。
本质上，客户端经过将该记号传回服务器，要求服务器验证其（客户端）缓存。
304是HTTP状态码，服务器用来标识这个文件没修改，不返回内容，浏览器在接收到个状态码后，会使用浏览器已缓存的文件。
客户端请求一个页面A。
服务器返回页面A，并在给A加上一个ETag。
客户端展示该页面，并将页面连同ETag一块儿缓存。
客户再次请求页面A，并将上次请求时服务器返回的ETag一块儿传递给服务器。
服务器检查该ETag，并判断出该页面自上次客户端请求以后还未被修改，直接返回响应304（未修改——Not Modified）和一个空的响应体。

77.数组方法

1）join()把数组上午全部元素放入一个字符串。元素经过指定的分隔符进行分隔。
该方法只接收一个参数，用做分隔符的字符串，而后返回包含全部数组项的字符串，若是不给join()方法传入任何值，则使用逗号做为分隔符。

var a = [1,2,3]; console.log(a.join());//'1,2,3' console.log(a.join(' '));//'1 2 3' console.log(a.join(''));//'123' var b = new Array(10); b.join('-');//'---------'，9个连字符组成的字符串

注意：若是join()方法的参数是undefined，标准浏览器以逗号为分隔符返回字符串，而IE7-浏览器以"undefined"为分隔符返回字符串；
若是数组中某一项的值是null或者undefined，则该值在join()方法返回的结果中以空字符串表示。
2）push()方法能够接收任意数量的参数，把它们逐个添加到数组末尾，而且返回修改后数组的长度。

var a = []; console.log(a,a.push(1));//[1] 1 console.log(a,a.push('a'));//[1,'a'] 2 console.log(a,a.push(true, {}));//[1,'a',true,{}] 4 console.log(a,a.push([5,6]));//[1,'a',true,{},[5,6]] 5

3）pop()方法从数组末尾移除最后一项，减小数组的length，而后返回移除的项。

var a = ['a', 'b', 'c']; console.log(a,a.pop()); // ['a', 'b'] 'c'

注意：给pop参数传其余数字不起做用，也不报错。仍是只删除最后一项；
对空数组使用pop()方法，不会报错，而是返回undefined
4）shift()方法移除数组中的第一个项并返回该项，同时数组的长度减1

var a = ['a', 'b', 'c']; console.log(a,a.shift());//['b', 'c'] 'a' var arr6 = [1]; console.log(arr6,arr6.shift()); //[] 1

注意：对空数组使用shift()方法，不会报错，而是返回undefined
5）unshift()方法在数组前面添加任意个项并返回新数组长度。

var a = ['a', 'b', 'c']; console.log(a,a.unshift('x')); //['x', 'a', 'b', 'c'] 4

注意：当传入多个参数时，是一次性插入。最终的数组中插入的元素的顺序和它们在参数列表中的顺序一致；
在IE-7浏览器中，unshift()方法的返回值老是undefined
6）reserve()方法用于反转数组的顺序，返回通过排序以后的数组；而原来数组的顺序也发生改变。

var array = [1,2,4,3,5]; console.log(array,array.reverse());//[5,3,4,2,1] [5,3,4,2,1] var array = ['str',true,3]; console.log(array,array.reverse());//[3,true,'str'] [3,true,'str']

7）sort()按照字符编码的顺序进行排序。sort()方法会调用每一个数组项的toString()方法，而后比较获得的字符串排序，返回通过排序以后的数组，而原数组顺序也发生改变。

var array = [2,1,4,3,5]; console.log(array,array.sort());//[1,2,3,4,5] [1,2,3,4,5] var array = ['3str',3,2,'2']; console.log(array,array.sort());//[2, "2", 3, "3str"] [2, "2", 3, "3str"]

注意：若是数组包含undefined元素，它们会被排到数组的尾部；

arrayObject.sort(sortby) 参数可选。规定排序顺序。必须是函数。比较函数接收两个参数，若是第一个参数应该位于第二个以前则返回一个负数，若是两个参数相等则返回 0，若是第一个参数应该位于第二个以后则返回一个正数。
8）concat()方法基于当前数组中的全部项建立一个新的数组，先建立当前数组一个副本，而后将接收到的参数添加到这个副本的末尾，最后返回新构建的数组。因此concat()不影响原数组。

// 若是不给concat()方法传递参数时，它只是复制当前的数组； var arr = [1,2,3]; console.log(arr,arr.concat()); //[1,2,3] [1,2,3] // 若是参数是一个或多个数组，则该方法会将这些数组中的每一项都添加到结果数组中； console.log(arr,arr.concat([6,7,8],[77,33,44])); //[1, 2, 3] [1, 2, 3, 6, 7, 8, 77, 33, 44] var arr1 = [4,5,6]; console.log(arr,arr.concat(arr1)); //[1,2,3] [1,2,3,4,5,6] // 若是传递的值不是数组，这些值就会被简单地添加到结果数组的末尾。console.log(arr,arr.concat(4,5));//[1,2,3] [1,2,3,4,5] console.log(arr,arr.concat(4,[5,[6,7]])); //[1,2,3] [1, 2, 3, 4, 5, [6,7]]

浅拷贝
若是不提供参数，concat()方法返回当前数组的一个浅拷贝。

// 该方法实际只复制了数组的第一维。 // 数组第一维存放的是第二维的引用，而第二维才是实际存放他们的内容 var numbers = [1,2]; var newNumbers = numbers.concat(); console.log(numbers,newNumbers);//[1,2] [1,2] numbers[0] = 0; console.log(numbers,newNumbers);//[0,2] [1,2] var numbers = [[1,2]]; var newNumbers = numbers.concat(); console.log(numbers,newNumbers);//[[1,2]] [[1,2]] numbers[0][0] = 0; console.log(numbers,newNumbers);//[[0,2]] [[0,2]]

9）slice()方法基于当前数组中的一个或多个项建立一个新数组，接受一个或两个参数，最后返回新数组，因此slice()不影响原数组。
slice(start,end)方法须要两个参数start和end，返回这个数组从start位置到end位置(不包含)的一个子数组，左闭右开。
注意：a.若是end为undefined或不存在，则返回从start位置到数组结尾的全部项；
b.若是没有参数，则返回原数组，即返回当前数组的一个浅拷贝；
10）splice()方法用于删除原数组的一部分红员，并能够在被删除的位置添加入新的数组成员，该方法会改变原数组。
splice()返回一个由删除元素组成的数组，或者若是没有删除元素就返回一个空数组
splice(start,number...)的第一个参数start指定了插入或删除的起始位置，第二个参数number指定了应该从数组中删除的元素的个数，若是后面还有更多的参数，则表示这些就是要被插入数组的新元素。
11）indexOf(search,start)方法接收search和start两个参数，返回search首次出现的位置，若是没有找到则返回-1，start表明从start位置开始寻找。
12）lastIndexOf(search,start)方法从右向左查找。
接收search和start两个参数，返回search第一次出现的位置，若是没有找到则返回-1
13）reduce()方法须要两个参数，第一个是执行化简操做的函数，化简函数的任务就是用某种方法把两个值组合或化简为一个值，并返回化简后的值。

var total = [0, 1, 2, 3].reduce(function(sum, value) { return sum + value; }, 0); // total is 6

reduceRight()则从右到左执行对应的化简函数
14）map()方法对数组中的每一项运行给定的函数，返回每次函数调用的结果组成的数组，
map方法还能够接受第二个参数，表示回调函数执行时this所指向的对象。
15）forEach()方法对数组中的每一项运行给定的函数，这个方法没有返回值。本质上和for循环迭代数组同样。若是须要有返回值，通常使用map方法。
forEach()方法除了接受一个必须的回调函数参数，第二个参数还能够接受一个可选的上下文参数（改变回调函数里面的this指向）

array.forEach(callback(currentValue, index, array){
    //do something }, this)

16）filter()方法对数组中的每一项运行给定的函数，返回该函数会返回true的项组成的数组。该方法经常使用于查询符合条件的全部数组项。
filter()方法还能够接受第二个可选的上下文参数（改变回调函数里面的this指向）

var arr= [1,10,20,30] var brr = arr.filter((item)=>{ return item>10; }) //[20,30]

17）some()方法对数组中的每一项运行给定函数，若是该函数对任一项返回true，则返回true。而且当且仅当数值中的全部元素调用断定函数都返回false，它才返回false
注意：在空数组上调用some()方法会返回false

const isBiggerThan10 = (element, index, array) => { return element > 10; } [2, 5, 8, 1, 4].some(isBiggerThan10); // false [12, 5, 8, 1, 4].some(isBiggerThan10); // true

18）every()方法对数组中的每一项运行给定函数，若是函数对每一项都返回true，则返回true；只要有一项返回false，则返回false
19）fill()方法，用一个固定值填充一个数组中起始索引到终止索引内的所有元素

arr.fill(value, start, end)
var numbers = [1, 2, 3] numbers.fill(1); // results in [1, 1, 1]

20）find()方法返回数组中知足提供的测试函数的第一个元素的值

function isBigEnough(element) { return element >= 15; } [12, 5, 8, 130, 44].find(isBigEnough); // 130

21）findIndex()方法返回数组中知足提供的测试函数的一个元素的索引

function isBigEnough(element) { return element >= 15; } [12, 5, 8, 130, 44].findIndex(isBigEnough); //'3'

22）includes()方法用来判断一个数组是否包含一个指定的值，若是是，则返回true，若是没有则返回false

let a = [1, 2, 3]; a.includes(2); // true a.includes(4); // false

23）toLocaleString()方法返回一个字符串表示数组中的元素。数组中的元素将使用各自的toLocaleString方法转成字符串，这些字符串将使用一个特定语言环境的字符串（例如一个逗号"，"）隔开

var number = 1337; var date = new Date(); var myArr = [number, date, "foo"]; var str = myArr.toLocaleString(); console.log(str); // 输出 "1,337,2019/2/15 下午8:32:24,foo"

24）copyWithin(target,start,end)方法浅复制数组的一部分到同一数组的另外一个位置
25）Array.isArray()方法用于肯定传递的值是不是一个Array

Array.isArray([]) => true; Array.isArray({}) => false;

26）Array.of()

Array.of(7); // [7] Array.of(1, 2, 3); // [1, 2, 3] Array(7); // [ , , , , , , ] Array(1, 2, 3); // [1, 2, 3]

27）Array.from()
对伪数组或可迭代对象(包括arguments Array,Map,Set,String…)转换成数组对象
语法 Array.from(arrayLike, mapFn, thisArg)

arrayLike
想要转换成数组的伪数组对象或可迭代对象。

mapFn (可选参数)
若是指定了该参数，新数组中的每一个元素会执行该回调函数。

thisArg (可选参数)
可选参数，执行回调函数 mapFn 时 this 对象。

返回值一个新的数组实例