头条笔试

[cttin]

笔试部分

HTML

1. 针对移动浏览器端开发页面，不期望用户放大屏幕，且要求“视口（viewport）”宽度等于屏幕宽度，视口高度等于设备高度，如何设置？
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximun-scale=1, user-scale=no">

• meta

定义：
meta标签是HTML中头部的一个辅助性标签，它位于HTML文档头部的 和 <title>标记之间，它提供用户不可见的信息。
W3school给出的解释：

The tag provides metadata about the HTML document. Metadata will not be displayed on the page, but will be machine parsable.
meta标签用于提供有关HTML文档的元数据。元数据不会显示在页面上，但是机器可解析。（元数据就是用来概括描述数据的一些基本数据，比如你填写一些基本信息的时候，年龄、性别等就是元数据，它们用来描述具体的信息/数据）

作用：

Meta elements are typically used to specify page description, keywords, author of the document, last modified, and other metadata.
meta常用于定义页面的说明，关键字，最后修改日期，和其它的元数据。这些元数据将服务于浏览器（如何布局或重载页面），搜索引擎和其它网络服务。
meta虽对用户不可见，但是它的用处非常大，设置合适的meta标签可以很大程度上提高网站页面的可用性。

PC端，meta标签通常用作搜索引擎优化（SEO）或者定义用户浏览器上的cookie，可以用于鉴别作者、设定页面样式等等。
移动端，meta标签除了PC端的功能作用之外，还包括viewport设置、添加到主屏幕图标、标签页颜色设置等等设置。
其中，meta标签的一个很重要的功能就是设置关键字，来帮助你的主页被各大搜索引擎登录，提高网站的访问量。在这个功能中，最重要的就是对Keywords和description的设置。因为按照搜索引擎的工作原理,搜索引擎首先派出机器人自动检索页面中的keywords和decription，并将其加入到自己的数据库，然后再根据关键词的密度将网站排序。

分类：
根据meta标签属性不同，可以分为两大类：http-equiv和name。

htttp-equiv：顾名思义，equivalent，相当于，就是相当于http协议中文件头的作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。
meta标签中http-equiv属性语法格式是：<meta http-equiv="参数" content="具体的描述">。
其中，http-equiv属性主要有以下参数：

content-Type(显示字符集的设定)：说明，设定页面使用的字符集，推荐使用HTML5的方式；用法，＜meta http-equiv="content-Type" content="text/html; charset=utf-8"＞。

X-UA-Compatible(浏览器采用何种版本渲染当前页面)：说明，用于告知浏览器用何种版本渲染页面，一般设置为最新模式；用法，<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> //指定IE和Chrome使用最新版本渲染当前页面。

cache-control(指定请求和响应遵循的缓存机制)：
用法1
说明，指导浏览器如何缓存某个响应以及缓存多长时间；用法，<meta http-equiv="cache-control" content="no-cache">。
一共有以下几种用法：1.no-cache，先发送请求，与服务器确认该资源是否被更改，如果未被更改，则使用缓存。2.no-store，不允许缓存，每次都要去服务器下载完整的缓存，这也是基于安全考虑。3.public，缓存所有响应，但并非必须。因为max-age也可以做到相同效果。4.private，只为单个用户缓存，因此不允许任何中继进行缓存。（CDN）5.maxage，表示当前请求开始，该响应在多久内能被缓存和重用，而不去服务器重新请求。例如：max-age=60表示响应可以再缓存和重用 60 秒。
用法2(禁止百度自动转码)
说明，用于禁止当前页面在移动端浏览时，被百度自动转码。所以可以在head中加入例子中的那句话，就可以避免百度自动转码了。<meta http-equiv="Cache-Control" content="no-siteapp">。

expires(网页到期时间)：说明，用于设定网页的到期时间，过期后网页必须重新到服务器上传输；用法，<meta http-equiv="expires" content="Sunday 26 October 2016 01:00 GMT" />。

refresh(自动刷新并指向某页面)：说明，自动刷新并指向新页面；用法，<meta http-equiv="Refresh content="2; URL=http://www.root.net">。

Set-Cookie(cookie设定)：说明，设置cookie，如果网页过期，那么存在网页的cookie也将会被删除；用法，＜meta http-equiv="Set-Cookie" content="cookievalue=xxx; expires=Friday, 12-Jan-2001 18:18:18 GMT； path=/"＞// 必须使用GMT的时间格式 。

Pragma(cache模式)：说明，禁止从浏览器从本地计算机的缓存中访问页面内容；用法，＜meta http-equiv="Pragma" content="no-cache"＞。

name：主要用于描述网页，比如网页的关键词，叙述等。与之对应的属性值为content，content中的内容是对name填入类型的具体描述，便于搜索引擎抓取。
meta标签中name属性语法格式是<meta name="参数" content="具体的描述">。
其中，name主要有以下参数：

keyword(关键字)：说明，用于告诉搜索引擎，网页的关键字；用法，<meta name="keywords" content="博客，前端">。

description(网站内容的描述)：说明，用于告诉搜索引擎，网站的主要内容；用法，<meta name="description" content="热爱前端与编程">。

viewport(移动端的窗口)：说明，就是题目中用到的属性，这个属性常用于设计移动端网页；用法，<meta name="viewport" content="width=device-width, initial-scale=1">。

robots(定义搜索引擎爬虫的索引方式)：说明，robots用于告诉爬虫哪些页面需要索引，哪些页面不需要索引。content的参数有all（搜索引擎将索引此网页与继续通过此网页的链接索引，等价于index，follow）、none（ 搜索引擎将忽略此网页，等价于noindex，nofollow）、index（搜索引擎索引此网页）、noindex（搜索引擎不索引此网页）、follow（搜索引擎继续通过此网页的链接索引搜索其它的网页）、nofollow（ 搜索引擎不继续通过此网页的链接索引搜索其它的网页）。默认是all；用法，<meta name="robots" content="none">。

author(作者)：说明，标注网页的作者；用法，＜meta name="author" content = "root,[email protected]"＞。

• viewport

viewport是移动端的一个专属的meta属性，用于定义视口的各种行为。

layout viewport
viewport又不局限于浏览器可视区域的大小，它可能比浏览器的可视区域要大，也可能比浏览器的可视区域要小。在默认情况下，一般来讲，移动设备上的viewport都是要大于浏览器可视区域的，这是因为考虑到移动设备的分辨率相对于桌面电脑来说都比较小，所以为了能在移动设备上正常显示那些传统的为桌面浏览器设计的网站，移动设备上的浏览器都会把自己默认的viewport设为980px或1024px（也可能是其它值，这个是由设备自己决定的）。该特性最早由苹果引入，用于解决移动端页面展示问题。在iOS Safari中定义了一个viewport meta标签，用来创建一个虚拟的布局视口（layout viewport），而这个视口的分辨率接近于PC显示器，Apple将其定义为980px。由于两者之间的宽度趋近，CSS只需要像在PC上那样渲染页面就行，原有的页面结构不会被破坏。

visual viewport
有了layout viewport，我们还需要一个视口用来承载它，这个视口可以简单的认为是手持设备物理屏幕的可视区域，我们称之为（视觉视口）visual viewport。
对于visual viewport，开发者一般只需要知道它的存在和概念就行，因为无法对它进行任何设置或者修改。很明显，visual viewport的尺寸不会是一个固定的值，甚至每款设备都可能不同。
大致列几种常见设备的visual viewport尺寸：
iPhone4~iPhone5S: 320*480px
iPhone6~iPhone6S: 375*627px
iPhone6 Plus~iPhone6S Plus: 414*736px
以iPhone4S为例，会在其320px的visual viewport上，创建一个宽980px的layout viewport，于是用户可以在visual viewport中拖动或者缩放网页，来获得良好的浏览效果；布局视口用来配合CSS渲染布局，当我们定义一个容器的宽度为100%时，这个容器的实际宽度是980px而不是320px，通过这种方式大部分网页就能以缩放的形式正常显示在手机屏幕上了。

ideal viewport
我们还需要一个视口，它类似于布局视口，但宽度和视觉视口相同，这就是完美视口（ideal viewport）。
有了完美视口，用户不用缩放和拖动网页就能够很好的进行网页浏览。而完美视口也是通过viewport meta的某种设置来达到的。

viewport特性
通常情况下，viewport有以下6种设置，当然厂商可能会增加一些特定的设置。

属性	value	说明
width	正整数或者device-width	width被用来定义layout viewport的宽度，单位为像素。如果不指定该属性（或者移除viewport meta标签），则layout viewport宽度为厂商默认值。如：iPhone为980px。
height	正整数或者device-height	与width类似
initial-scale	[0.0-10.0]	initial-scale用于指定页面的初始缩放比例，可以通过定义initial-scale来使页面默认以某个比例放大或者缩小然后呈现给用户。
maximum-scale	[0.0-10.0]	maximum-scale用于指定用户能够放大的比例。在移动端，可能会考虑用户浏览不便，然后给予用户放大页面的权利，但同时又希望是在一定范围内的放大，这时就可以使用maximum-scale来进行约束。定义放大最大比例，它必须大于或等于minimum-scale设置。
minimum-scale	[0.0-10.0]	类似maximum-scale，定义缩小最小比例，它必须小于或等于maximum-scale设置。为了有更好地体验，不会定义该属性的值比1更小。
user-scalable	yes/no	如果不想页面被放大或者缩小，通过定义user-scalable来约束用户是否可以通过手势对页面进行缩放即可。默认为yes。

2.data-xxx 属性的作用是什么？
定义：
HTML5规范里增加了一个自定义data属性，可以往HTML里面添加任意以 “data-”开头的属性, 这些属性页面上是不显示的，它不会影响到你的页面布局和风格，但它却是可读可写的。存储的（自定义）数据能够被页面的 JavaScript 中利用，以创建更好的用户体验（不进行 Ajax 调用或服务器端数据库查询）。
组成：
属性名不应该包含任何大写字母，并且在前缀 “data-”之后必须有至少一个字符。
属性值可以是任意字符串。

3.请描述一下cookies，sessionStorage和localStorage的区别？

特性	Cookie	localStorage	sessionStorage
定义	Cookie是存储在客户端的小型文本文件，可以包含若干键值对，每个键值对可以设置过期时间（默认过期时间为关闭浏览器时）。	HTML5 提供的在客户端存储数据的新方法，没有时间限制的数据存储。	HTML5 提供的在客户端存储数据的新方法，针对一个 session 的数据存储。
数据的生命周期	一般由服务器生成，可设置失效时间。如果在浏览器端生成Cookie，默认是关闭浏览器后失效。	除非被清除，否则永久保存。	仅在当前会话下有效，关闭页面或浏览器后被清除。
存放数据大小	4K左右	一般为5MB	同localStorage
与服务器通信	每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题。	仅在客户端（即浏览器）中保存，不参与和服务器的通信	同localStorage
作用域	js是无法读取和修改 httponly cookies，当然也不能设置 cookie 为 httponly，这只能通过服务器端去设置。主要是为了提供一个安全措施来帮助阻止通过 JavaScript 发起的跨站脚本攻击 (XSS) 窃取 cookie 的行为。	只要在相同的协议、相同的主机名、相同的端口下，就能读取/修改到同一份localStorage数据。	sessionStorage比localStorage更严苛一点，除了协议、主机名、端口外，还要求同一窗口。
使用场景	http请求，用户登录。	离线存储（历史记录）	用户登录授权的验证

4.什么是浏览器的标准模式（standards mode）和怪异模式（quirks mode）?

来源：
由于历史的原因，各个浏览器在对页面的渲染上存在差异，甚至同一浏览器在不同版本中，对页面的渲染也不同。在W3C标准出台以前，浏览器在对页面的渲染上没有统一规范，产生了差异(Quirks mode或者称为Compatibility Mode)；由于W3C标准的推出，浏览器渲染页面有了统一的标准(CSScompat或称为Strict mode也有叫做Standars mode)，这就是二者最简单的区别。
W3C标准推出以后，浏览器都开始采纳新标准，但存在一个问题就是如何保证旧的网页还能继续浏览，在标准出来以前，很多页面都是根据旧的渲染方法编写的，如果用的标准来渲染，将导致页面显示异常。为保持浏览器渲染的兼容性，使以前的页面能够正常浏览，浏览器都保留了旧的渲染方法（如：微软的IE）。这样浏览器渲染上就产生了Quircks mode和Standars mode，两种渲染方法共存在一个浏览器上。

现状：
目前浏览器的排版引擎有三种模式：怪异模式（Quirks mode）、接近标准模式（Almost standards mode）、以及标准模式（Standards mode）。在怪异模式下，排版会模拟 Navigator 4 与 Internet Explorer 5 的非标准行为。为了支持在网络标准被广泛采用前，就已经建好的网站，这么做是必要的。在标准模式下，行为即（但愿如此）由 HTML 与 CSS 的规范描述的行为。在接近标准模式下，只有少数的怪异行为被实现。浏览器会通过识别DTD而采用相对应的渲染模式。

使用：

• 设置为怪异模式

1. 在页面项部加 <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>。
2. 什么都不加。

• 设置为标准模式

1. HTML4（4种DOCTYPE可选择）
   <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN” “http://www.w3.org/TR/html4/frameset.d
2. HTML1（3种DOCTYPE可选择）
   (1)过渡型（Transitional ）
   <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
   (2)严格型（Strict ）
   <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
   (3)框架型（Frameset ）
   <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”>

如何判定是标准还是怪异：

1. 执行以下代码
   alert(window.top.document.compatMode) ;
   //BackCompat 表示怪异模式
   //CSS1Compat 表示标准模式
2. jquery为我们提供的方法，如下：
   alert($.boxModel)
   alert($.support.boxModel)

CSS

1. 解释一下盒模型宽高值的计算方式，边界塌陷，负值作用，box-sizing概念。

• 盒模型
  盒模型宽高计算方式

• 边界塌陷

定义：
挨着的、且没有任何东西分割的两个普通元素会在垂直方向上合并margin。

1. 父子毗邻元素
   毗邻元素的外边距会合并（当靠后的元素 清除浮动 时除外)。
2. 上下毗邻元素
   如果块元素的 margin-top 与它的第一个子元素之间没有border, padding, inline content, 或 clearance 分隔，或者块元素的 margin-bottom 与它的最后一个子元素之间没有padding, inline content, height, min-height, or max-height 分隔，那么外边距会合并。
3. 空块元素
   如果块元素 margin-top 与 margin-bottom 之间没有border, padding, inline content, height, 与min-height来分隔， 那么它的上下外边距合并。

具体情况：

1. 浮动元素和其他任何元素之间不发生外边距叠加 (包括和它的子元素)。
2. 创建了 BFC 的元素不会和它的子元素发生外边距叠加。
3. 绝对定位元素和其他任何元素之间不发生外边距叠加(包括和它的子元素)。
4. inline-block 元素和其他任何元素之间不发生外边距叠加 (包括和它的子元素)。
5. 普通流中的块级元素的 margin-bottom 永远和它相邻的下一个块级元素的 margin-top 叠加（除非相邻的兄弟元素clear）。
6. 普通流中的块级元素（没有 border-top、没有 padding-top ）的 margin-top 和它的第一个普通流中的子元素（没有 clear ）发生 margin-top 叠加。
7. 普通流中的块级元素（ height 为 auto、min-height 为 0、没有 border-bottom、没有 padding-bottom ）和它的最后一个普通流中的子元素（没有自身发生 margin 叠加或 clear ）发生 margin-bottom 叠加。
8. 如果一个元素的 min-height 为 0、没有 border、没有 padding、高度为 0 或者 auto、不包含子元素，那么它自身的外边距会发生叠加。
   总结一句：产生折叠的前提是margin必须是邻接的。

解决方法：
为父元素设置 BFC(包括overflow:auto) 或 padding 或 border (解决父子重叠)，兄弟元素间设置 float 或 inline-block 或 absolute(创建BFC不一定可以，设置overflow就不可以)。

具体还可以查看之前的博客总结：inline-block、BFC、边距合并

• 负值作用

margin：
margin中的top、right、bottom、left并不是一类，它们相对的参考线不一致。top 和 left 为一类，right和botom为一类。
margin数值为正的时候，移位的情况：
top 以 containing block 的 content 上边或者垂直上方相连元素 margin 的下边为参考线垂直向下位移；left 以 containing block 的 content 左边或者水平左方相连元素 margin 的右边为参考线水平向右位移。right 以元素本身的 border 右边为参考线水平向右位移；bottom 以元素本身的border 下边为参考线垂直向下位移。
margin数值为负的时候，移位的情况：
与上面相反。
可以理解为 left 和 top 是紧靠着已经布局好了的元素，它们的位置是不会改变的，所以 left 和 top 是相对于其他元素，而 right 和 bottom 是相对于自身。
box 最后的显示大小等于 box 的 border 及 border 内的大小加上正的 margin 值。而负的 margin 值不会影响 box 的实际大小，如果是负的 top 或 left 值会引起 box 的向上或向左位置移动，如果是 bottom 或 right 只会影响下面 box 的显示的参考线。
另外一个作用：
当元素不存在width属性或者（width：auto）的时候，负margin会增加元素的宽度，margin-left和margin-right都是可以增加宽度。margin-top为负值不会增加高度，只会产生向上位移。margin-bottom为负值不会产生位移，会减少自身的供css读取的高度。

应用：

1. 左右固定，中间自适应（双飞翼）
   负边距、三栏布局
2. 负边距+定位：水平垂直居中。

• box-sizing

1. content-box（默认）
   W3c标准盒模型，布局所占宽度：width = width + padding-left + padding-right + border-left + border-right。
   2.border-box
   IE盒模型，width = width(包含padding-left + padding-right + border-left + border-right)。
   3.padding-box
   width = width(包含padding-left + padding-right) + border-left + border-right。

2. BFC(Block Formatting Context)是什么？有哪些应用？

W3c定义：
浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）。
BFC就是一种布局方式，在这种布局方式下，盒子们自所在的containing block顶部一个接一个垂直排列，水平方向上撑满整个宽度（除非内部盒子自己建立了新的BFC）。两个相邻的BFC之间的距离由margin决定。在同一个BFC内部，两个垂直方向相邻的块级元素的margin会发生“塌陷”。

触发BFC：

1. float属性不为none
2. overflow不为visible(可以是hidden、scroll、auto)
3. position为absolute或fixed
4. display为inline-block、table-cell、table-caption

应用：
1.解决margin叠加问题。
2. 清除内部浮动。
3. 创建自适应两栏布局。

3.如何要求容器在宽度自由很缩的情况下，A/B/C的宽度始终是1:1:1，如何实现，写出两种方法。

A	B	C

• table-cell
  将每个元素设置的尽可能大，由于自适应特性，将会等大小排列。

* {
  margin: 0;
  padding: 0;
}
.left, .middle, .right{
  display: table-cell;
  width: 3000px;
}

• flex布局

.div1 {
  width: 100%;
  height: 400px;
  border: 1px solid #888;
  flex-direction: row;
  display: flex;
}
.div {
  flex-grow: 1;
  border: 1px solid #888;
}

• 百分数布局

<div class="div1">
  <div class="div2 div">
    div2
  </div><div class="div3 div">
    div3
  </div><div class="div4 div">
    div4
  </div>
</div>

.div1 {
  width: 100%;
  height: 400px;
  background-color: red;
}
.div2{
  margin-left: 5%;
}
.div {
  width:30%;
  display:inline-block;
  background-color:#888;
}

4. 如图，A若宽高已知，如何实现水平、垂直均相对于父元素居中？若A高度未知呢？

• 行内元素水平居中
  把行内元素包裹在父元素（<div>、<li>、<p>等）中，并且在父元素设置

#container{
    text-align:center;
}

适用于文字，链接，及其inline或者inline-block、inline-table和inline-flex。

• 块状元素的水平居中
  设置左右margin为auto，元素设置：

#center{
    margin:0 auto;
}

• 多个块状元素水平居中
  方法1: 将元素设置为display: inline-block，在父元素设置text-align: center。
  方法2: 使用flexbox。
  flex布局默认为块级元素，要设置元素为flex布局，只需在父元素上设置

display: flex;
justify-content: center;

若要设置行内元素，同理设置父元素：display: inline-flex。

• 已知高度宽度元素的水平垂直居中
  方法1: 利用绝对定位+负margin。

#container{
  display: relative;
}
#item{
  width: 100px;
  height: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -50px -50px;
}

方法2: 绝对定位+margin

#container{
  position: relative;
}
#center{
  position:absolute;
  margin:auto;
  top:0;
  bottom:0;
  left:0;
  right:0;
}

• 未知宽高元素水平垂直居中
  方法1: 当元素为inline或者inline-block时，可以将父元素设置为display: table-cell，结合text-align: center; vertical-algin: middle;。

#container {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

方法2: 利用表格元素，将父元素设置为display: table，子元素设置为table-cell

#wrapper {
  display: table;
  text-align: center;
}
#cell {
  display: table-cell;
  text-align: middle;
}

方法3: css3的transform

#container{
   position:relative;
} 
#center{
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

方法4: flex布局

#container{
  display:flex;
  justify-content:center;
  align-items: center;
}

方法5: 用js控制
HTML代码

 <div class="parent" id="parent">
    <div class="current" id='current'>
      hhh
    </div>
</div>

CSS代码

.parent {
   position: relative;
  border: 1px solid red;
  width: 100px;
  height: 100px;
}
.current {
    position: absolute;
}

JS代码

var parent = document.getElementById("parent");
var current = document.getElementById("current");
current.style.top = (parent.offsetHeight - current.offsetHeight) / 2 + "px";
current.style.left = (parent.offsetWidth - current.offsetWidth) / 2 + "px";

JS

1. 函数中的arguments是什么？是数组吗？若不是，如何将它转化为真正的数组？

• arguments是一个内置对象，所有函数都具有属于自己的arguments对象，它包含了函数的所有参数，可以通过使用arguments对象让函数能够调用数量不定的参数。
• arguments不是数组，但是它具有length属性，不从prototype继承，实际上是一个对象，可以通过var args = Array.prototype.slice.call(arguments); 把它转为数组。
  2. 列举JavaScript中typeof操作符的可能结果，如何区分：{}和[]类型？
• typeof 运算符把数据类型信息当作字符串返回。

类型	结果
Undefined	"undefined"
Null	“object”
Boolean	"boolean"
Number	"number"
String	“string”
Symbol	"symbol"
函数	"function"
NAN	"undefined"
任何其他对象	"object"

• 区分{ }和[ ]

方法1: isArray

Array.isArray(obj); // true为数组

方法2: 通过instanceof运算符来判断，凡事用new构造函数构造出来的对象，都是构造函数的实例。

arrayStr instanceof Array; // 若是数组，返回true

但是数组也是对象，所以应该先判断数组。

arrayStr instanceof Object; //  数组和对象都返回true

方法3: 使用typeof加length

if (typeof o === 'object') {
  if (typeof o.length === 'number') {
    return 'Array';
  } else {
    return 'object';
  }
} else {
  return 'param is not object';
}

方法4: toString

Object.prototype.toString.call([ ]); // [object Array]
Object.prorotype.toString.call([ ]).slice(8, -1); // Array

方法5: isPrototypeOf()

Array.prototype.isPrototypeOf(arr) //true表示是数组，false不是数组

方法6: 利用构造函数constructor

arrayStr.constructor === Array;  // 数组为true，对象为false

3. Function中的call、apply、bind的区别是什么？请针对每一个写出一个代码示例。
它们都是用来改变函数的this对象的指向，不同的是bind返回对应函数，便于后面调用，call、bind是立即调用。

方法	定义	说明
call	调用一个对象的一个方法，以另一个对象替换当前对象。	call方法可以用来代替另一个对象调用一个方法，可将一个函数的对象上下文从初始的上下文改变为指定的新对象。第一个参数为要绑定的上下文，后面的参数为调用函数的参数，是逐个列出的。
apply	应用某一对象的一个方法，用另一个对象替换当前对象。	第一个参数为要绑定的上下文，后面的参数为调用函数的参数，要写在数组中。
bind	改变上下文this，返回对应函数，便于后面调用。	bind和call很相似，第一个参数都是作为执行时函数的上下文this对象，但是后面的参数在使用时有区别。bind传入的实参则是在bind中传入参数的基础上往后排的。

例子：

const numbers = [5, 48, 120, -215];
const maxNumber = Math.max.apply(Math, numbers),
           minNumber = Math.min.call(Math, [5, 48, 120, -215]);

function f (a, b, c) {
  console.log(a, b, c);
}
const f_Extend = f.bind(null,"extend_A"); // 等于 f.call(null, "extend_A", b, c)
f_Extend("A","B","C"); //  extend_A A B
f.call(null,"extend_A"); // extend_A undefined undefined

4. 使用jQuery，找到id位selector的select标签中有用data-target属性为isme的option的值？

const el = $("#selector option[data-target = isme]");

5. 优化代码

for(var i = 0; i < document.getElementsByTagName('a').length; i++) {
    document.getElementsByTagName('a')[i].onmouseover = function(){
        this.style.color = 'red';
    };
    document.getElementsByTagName('a')[i].onmouseout = function(){
        this.style.color = '';
    };

第一点，可以利用事件代理的方式，把事件绑定在它们共同的父元素上面。第二点，不用每次都去获取a标签，可以用一个变量把它存起来，后面就可以直接用。
6. 请设计一个算法。将两个有序数组合并为一个数组。请不要使用concat以及sort方法。

function merge (left, right) {
  let result = [],
       il = 0,
       ir = 0;
  while(il < left.length && ir < right.length) {
    if (left[il] < right[ir]) {
      result.push(left[il++]);
    } else {
      reuslt.push(right[ir++]);
    }
  }
  result.concat(left[il] ? left.slice(il) : right.slice(rl));
  return result;
}

[ghost]

typeof NaN 应该是显示number吧