45道CSS基础面试题（附答案）

、介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？

标准盒子模型：宽度=内容的宽度（content）+ border + padding + margin

低版本IE盒子模型：宽度=内容宽度（content+border+padding）+ margin

2、 box-sizing属性？

用来控制元素的盒子模型的解析模式，默认为content-box

context-box：W3C的标准盒子模型，设置元素的 height/width 属性指的是content部分的高/宽

border-box：IE传统盒子模型。设置元素的height/width属性指的是border + padding + content部分的高/宽

3 、CSS选择器有哪些？哪些属性可以继承？

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

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

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

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

!important 比内联优先级高

4、 CSS优先级算法如何计算？

元素选择符： 1

class选择符： 10

id选择符：100

元素标签：1000

!important声明的样式优先级最高，如果冲突再进行计算。
如果优先级相同，则选择最后出现的样式。
继承得到的样式的优先级最低。

5、 CSS3新增伪类有那些?

p:first-of-type 选择属于其父元素的首个元素

p:last-of-type 选择属于其父元素的最后元素

p:only-of-type 选择属于其父元素唯一的元素

p:only-child 选择属于其父元素的唯一子元素

p:nth-child(2) 选择属于其父元素的第二个子元素

:enabled :disabled 表单控件的禁用状态。

:checked 单选框或复选框被选中。

6 、如何居中div？如何居中一个浮动元素？如何让绝对定位的div居中？

div：

border: 1px solid red;margin: 0 auto; 
height: 50px;width: 80px;

浮动元素的上下左右居中：

border: 1px solid red;float: left;
position: absolute;width: 200px;
height: 100px;left: 50%;top: 50%;
margin: -50px 0 0 -100px;

绝对定位的左右居中：

border: 1px solid black;position: absolute;
width: 200px;height: 100px;margin: 0 auto;
left: 0;right: 0;

还有更加优雅的居中方式就是用flexbox，我以后会做整理。

7、 display有哪些值？说明他们的作用?

inline（默认）--内联

none--隐藏

block--块显示

table--表格显示

list-item--项目列表

inline-block

8、 position的值？

static（默认）：按照正常文档流进行排列；

relative（相对定位）：不脱离文档流，参考自身静态位置通过 top, bottom, left, right 定位；

absolute(绝对定位)：参考距其最近一个不为static的父级元素通过top, bottom, left, right 定位；

fixed(固定定位)：所固定的参照对像是可视窗口。

9、 CSS3有哪些新特性？

RGBA和透明度
background-image background-origin(content-box/padding-box/border-box) background-size background-repeat
word-wrap（对长的不可分割单词换行）word-wrap：break-word
文字阴影：text-shadow： 5px 5px 5px #FF0000;（水平阴影，垂直阴影，模糊距离，阴影颜色）
font-face属性：定义自己的字体
圆角（边框半径）：border-radius 属性用于创建圆角
边框图片：border-image: url(border.png) 30 30 round
盒阴影：box-shadow: 10px 10px 5px #888888
媒体查询：定义两套css，当浏览器的尺寸变化时会采用不同的属性

10、请解释一下CSS3的flexbox（弹性盒布局模型）,以及适用场景？

该布局模型的目的是提供一种更加高效的方式来对容器中的条目进行布局、对齐和分配空间。在传统的布局方式中，block 布局是把块在垂直方向从上到下依次排列的；而 inline 布局则是在水平方向来排列。弹性盒布局并没有这样内在的方向限制，可以由开发人员自由操作。

试用场景：弹性布局适合于移动前端开发，在Android和ios上也完美支持。

11、用纯CSS创建一个三角形的原理是什么？

首先，需要把元素的宽度、高度设为0。然后设置边框样式。

width: 0;height: 0;border-top: 40px solid transparent;
border-left: 40px solid transparent;border-right: 40px solid transparent;
border-bottom: 40px solid #ff0000;

12、一个满屏品字布局如何设计?

第一种真正的品字：

三块高宽是确定的；
上面那块用margin: 0 auto;居中；
下面两块用float或者inline-block不换行；
用margin调整位置使他们居中。

第二种全屏的品字布局:

上面的div设置成100%，下面的div分别宽50%，然后使用float或者inline使其不换行。

13 、常见的兼容性问题？

不同浏览器的标签默认的margin和padding不一样。
*{margin:0;padding:0;}
IE6双边距bug：块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大。hack：display:inline;将其转化为行内属性。
渐进识别的方式，从总体中逐渐排除局部。首先，巧妙的使用“9”这一标记，将IE浏览器从所有情况中分离出来。接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。

{background-color:#f1ee18;/*所有识别*/.background-color:#00deff; /*IE6、7、8识别*/+background-color:#a200ff;/*IE6、7识别*/_background-color:#1e0bd1;/*IE6识别*/}

设置较小高度标签（一般小于10px），在IE6，IE7中高度超出自己设置高度。hack：给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。
IE下，可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性；Firefox下，只能使用getAttribute()获取自定义属性。解决方法:统一通过getAttribute()获取自定义属性。
Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决。
超链接访问过后hover样式就不出现了，被点击访问过的超链接样式不再具有hover和active了。解决方法是改变CSS属性的排列顺序:L-V-H-A ( love hate ): a:link {} a:visited {} a:hover {} a:active {}

14、为什么要初始化CSS样式

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。

15、 absolute的containing block计算方式跟正常流有什么不同？

无论属于哪种，都要先找到其祖先元素中最近的 position 值不为 static 的元素，然后再判断：

若此元素为 inline 元素，则 containing block 为能够包含这个元素生成的第一个和最后一个 inline box 的 padding box (除 margin, border 外的区域) 的最小矩形；
否则,则由这个祖先元素的 padding box 构成。

如果都找不到，则为 initial containing block。

补充：

static(默认的)/relative：简单说就是它的父元素的内容框（即去掉padding的部分）
absolute: 向上找最近的定位为absolute/relative的元素
fixed: 它的containing block一律为根元素(html/body)

16、CSS里的visibility属性有个collapse属性值？在不同浏览器下以后什么区别？

当一个元素的visibility属性被设置成collapse值后，对于一般的元素，它的表现跟hidden是一样的。

chrome中，使用collapse值和使用hidden没有区别。
firefox，opera和IE，使用collapse值和使用display：none没有什么区别。

17、 display:none与visibility：hidden的区别？

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

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

18、 position跟display、overflow、float这些特性相互叠加后会怎么样？

display属性规定元素应该生成的框的类型；position属性规定元素的定位类型；float属性是一种布局方式，定义元素在哪个方向浮动。

类似于优先级机制：position：absolute/fixed优先级最高，有他们在时，float不起作用，display值需要调整。float 或者absolute定位的元素，只能是块元素或表格。

19 、对BFC规范(块级格式化上下文：block formatting context)的理解？

BFC规定了内部的Block Box如何布局。

定位方案：

内部的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

20、为什么会出现浮动和什么时候需要清除浮动？清除浮动的方式？

浮动元素碰到包含它的边框或者浮动元素的边框停留。由于浮动元素不在文档流中，所以文档流的块框表现得就像浮动框不存在一样。浮动元素会漂浮在文档流的块框上。

浮动带来的问题：

父元素的高度无法被撑开，影响与父元素同级的元素
与浮动元素同级的非浮动元素（内联元素）会跟随其后
若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构。

清除浮动的方式：

父级div定义height
最后一个浮动元素后加空div标签并添加样式clear:both。
包含浮动元素的父标签添加样式overflow为hidden或auto。
父级div定义zoom

21、上下margin重合的问题

在重合元素外包裹一层容器，并触发该容器生成一个BFC。

例子：

<div class="aside"></div>
<div class="text">
 <div class="main"></div>
</div>
<!--下面是css代码--> 
.aside { 
margin-bottom: 100px; 
 width: 100px; 
 height: 150px; 
 background: #f66;
 } 
.main { 
 margin-top: 100px; 
 height: 200px; 
 background: #fcc;
 }
 .text{ 
 /*盒子main的外面包一个div，
通过改变此div的属性使两个盒子分属于两个不同的BFC，
以此来阻止margin重叠*/
 overflow: hidden; 
//此时已经触发了BFC属性。
 }

22、设置元素浮动后，该元素的display值是多少？

自动变成display:block

23、移动端的布局用过媒体查询吗？

通过媒体查询可以为不同大小和尺寸的媒体定义不同的css，适应相应的设备的显示。

<head>里边
<link rel="stylesheet" type="text/css" href="xxx.css" media="only screen and (max-device-width:480px)">
CSS : @media only screen and (max-device-width:480px) {/css样式/}

24 、使用 CSS 预处理器吗？

Less sass

25、 CSS优化、提高性能的方法有哪些？

避免过度约束
避免后代选择符
避免链式选择符
使用紧凑的语法
避免不必要的命名空间
避免不必要的重复
最好使用表示语义的名字。一个好的类名应该是描述他是什么而不是像什么
避免！important，可以选择其他选择器
尽可能的精简规则，你可以合并不同类里的重复规则

26、浏览器是怎样解析CSS选择器的？

CSS选择器的解析是从右向左解析的。若从左向右的匹配，发现不符合规则，需要进行回溯，会损失很多性能。若从右向左匹配，先找到所有的最右节点，对于每一个节点，向上寻找其父节点直到找到根元素或满足条件的匹配规则，则结束这个分支的遍历。

两种匹配规则的性能差别很大，是因为从右向左的匹配在第一步就筛选掉了大量的不符合条件的最右节点（叶子节点），而从左向右的匹配规则的性能都浪费在了失败的查找上面。

而在 CSS 解析完毕后，需要将解析的结果与 DOM Tree 的内容一起进行分析建立一棵 Render Tree，最终用来进行绘图。在建立 Render Tree 时（WebKit 中的「Attachment」过程），浏览器就要为每个 DOM Tree 中的元素根据 CSS 的解析结果（Style Rules）来确定生成怎样的 Render Tree。

27 、在网页中的应该使用奇数还是偶数的字体？为什么呢？

使用偶数字体。偶数字号相对更容易和 web 设计的其他部分构成比例关系。Windows 自带的点阵宋体（中易宋体）从 Vista 开始只提供 12、14、16 px 这三个大小的点阵，而 13、15、17 px时用的是小一号的点。（即每个字占的空间大了 1 px，但点阵没变），于是略显稀疏。

28、 margin和padding分别适合什么场景使用？

何时使用margin：

需要在border外侧添加空白
空白处不需要背景色
上下相连的两个盒子之间的空白，需要相互抵消时。

何时使用padding：

需要在border内侧添加空白
空白处需要背景颜色
上下相连的两个盒子的空白，希望为两者之和。

兼容性的问题：在IE5 IE6中，为float的盒子指定margin时，左侧的margin可能会变成两倍的宽度。通过改变padding或者指定盒子的display：inline解决。

29 、元素竖向的百分比设定是相对于容器的高度吗？

当按百分比设定一个元素的宽度时，它是相对于父容器的宽度计算的，但是，对于一些表示竖向距离的属性，例如 padding-top , padding-bottom , margin-top , margin-bottom 等，当按百分比设定它们时，依据的也是父容器的宽度，而不是高度。

30 、全屏滚动的原理是什么？用到了CSS的哪些属性？

原理：有点类似于轮播，整体的元素一直排列下去，假设有5个需要展示的全屏页面，那么高度是500%，只是展示100%，剩下的可以通过transform进行y轴定位，也可以通过margin-top实现
overflow：hidden；transition：all 1000ms ease；

31、什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的IE？

响应式网站设计(Responsive Web design)是一个网站能够兼容多个终端，而不是为每一个终端做一个特定的版本。

基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理。

页面头部必须有meta声明的viewport。

<meta name=’viewport’ content=”width=device-width, 
initial-scale=1. maximum-scale=1,user-scalable=no”>

32、视差滚动效果？

视差滚动（Parallax Scrolling）通过在网页向下滚动的时候，控制背景的移动速度比前景的移动速度慢来创建出令人惊叹的3D效果。

CSS3实现
优点：开发时间短、性能和开发效率比较好，缺点是不能兼容到低版本的浏览器
jQuery实现
通过控制不同层滚动速度，计算每一层的时间，控制滚动效果。
优点：能兼容到各个版本的，效果可控性好
缺点：开发起来对制作者要求高
插件实现方式
例如：parallax-scrolling，兼容性十分好

33、 ::before 和 :after中双冒号和单冒号有什么区别？解释一下这2个伪元素的作用

单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。
::before就是以一个子元素的存在，定义在元素主体内容之前的一个伪元素。并不存在于dom之中，只存在在页面之中。

:before 和 :after 这两个伪元素，是在CSS2.1里新出现的。起初，伪元素的前缀使用的是单冒号语法，但随着Web的进化，在CSS3的规范里，伪元素的语法被修改成使用双冒号，成为::before ::after

34、你对line-height是如何理解的？

行高是指一行文字的高度，具体说是两行文字间基线的距离。CSS中起高度作用的是height和line-height，没有定义height属性，最终其表现作用一定是line-height。

单行文本垂直居中：把line-height值设置为height一样大小的值可以实现单行文字的垂直居中，其实也可以把height删除。

多行文本垂直居中：需要设置display属性为inline-block。

35 、怎么让Chrome支持小于12px 的文字？

p{font-size:10px;-webkit-transform:scale(0.8);} //0.8是缩放比例

36、让页面里的字体变清晰，变细用CSS怎么做？

-webkit-font-smoothing在window系统下没有起作用，但是在IOS设备上起作用-webkit-font-smoothing：antialiased是最佳的，灰度平滑。

37、 position:fixed;在android下无效怎么处理？

<meta name="viewport" content="width=device-width, 
initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0,
 user-scalable=no"/>

38、如果需要手动写动画，你认为最小时间间隔是多久，为什么？

多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60＊1000ms ＝ 16.7ms。

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

行框的排列会受到中间空白（回车空格）等的影响，因为空格也属于字符,这些空白也会被应用样式，占据空间，所以会有间隔，把字符大小设为0，就没有空格了。

解决方法：

可以将<li>代码全部写在一排
浮动li中float：left
在ul中用font-size：0（谷歌不支持）；可以使用letter-space：-3px

40、 display:inline-block 什么时候会显示间隙？

有空格时候会有间隙解决：移除空格
margin正值的时候解决：margin使用负值
使用font-size时候解决：font-size:0、letter-spacing、word-spacing

41、有一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度

外层div使用position：relative；高度要求自适应的div使用position: absolute; top: 100px; bottom: 0; left: 0

42、 png、jpg、gif 这些图片格式解释一下，分别什么时候用。有没有了解过webp？

png是便携式网络图片（Portable Network Graphics）是一种无损数据压缩位图文件格式.优点是：压缩比高，色彩好。大多数地方都可以用。
jpg是一种针对相片使用的一种失真压缩方法，是一种破坏性的压缩，在色调及颜色平滑变化做的不错。在www上，被用来储存和传输照片的格式。
gif是一种位图文件格式，以8位色重现真色彩的图像。可以实现动画效果.
webp格式是谷歌在2010年推出的图片格式，压缩率只有jpg的2/3，大小比png小了45%。缺点是压缩的时间更久了，兼容性不好，目前谷歌和opera支持。

43、 style标签写在body后与body前有什么区别？

页面加载自上而下当然是先加载样式。

写在body标签后由于浏览器以逐行方式对HTML文档进行解析，当解析到写在尾部的样式表（外联或写在style标签）会导致浏览器停止之前的渲染，等待加载且解析样式表完成之后重新渲染，在windows的IE下可能会出现FOUC现象（即样式失效导致的页面闪烁问题）

44、 CSS属性overflow属性定义溢出元素内容区的内容会如何处理?

参数是scroll时候，必会出现滚动条。

参数是auto时候，子元素内容大于父元素时出现滚动条。

参数是visible时候，溢出的内容出现在父元素之外。

参数是hidden时候，溢出隐藏。

45、阐述一下CSS Sprites

将一个页面涉及到的所有图片都包含到一张大图中去，然后利用CSS的 background-image，background- repeat，background-position 的组合进行背景定位。利用CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能；CSS Sprites能减少图片的字节。

选题

JS基础

js概念与类型检测

以下不属于 typeof 运算符返回值的是？

A. "string"
B. "function"
C. "object"
D. "null"

执行以下代码，错误的输出结果是

A. 输入：typeof {"x":1} 输出："object" 
B. 输入：typeof 1 输出："number" 
C. 输入：typeof [{x:1}] 输出："array" 
D. 输入：typeof NaN 输出："number"

可以用typeof来判断的基本类型有

A. undefined
B. null
C. array
D. object

以下不属于JavaScript基本数据类型的是：

A. Boolean
B. undefined
C. Symbol
D. Array

以下关于JavaScript中数据类型的说法错误的是()

A. 数据类型分为基本数据类型和引用数据类型
B. JavaScript一共有8种数据类型
C. Object是引用数据类型，且只存储于堆(heap)中
D. BigInt是可以表示任意精度整数的基本数据类型，存储于栈(stack)中

答案

DCADC

逻辑判断

请选择结果为ture的表达式？

A. null instanceof Object
B. null===undefined
C. null==undefined
D. NaN==NaN

下列代码结果为 true 的是？

A. Symbol.for('a')===Symbol.for('a')
B. Symbol('a')===Symbol('a')
C. NaN===NaN
D. {}==={}

根据如下变量，下列表达式中返回值为true的是

var a=1;
var b=[];
var c='';
var d=true;

A. (a || b)===true
B. (b && c)===true
C. (c && d)===true
D. (d || a)===true

1==true的返回值是true，这句话是否正确？

A. T
B. F

下面代码输出为true的是?

A. console.log([]===[]);
B. console.log(undefined==0);
C. console.log(undefined==false);
D. console.log(false=='');

浏览器环境下，以下打印结果为true的是

A. console.log("12"===12)
B. console.log (NaN===NaN)
C. console.log (typeof(null)===typeof(window))
D. console.log ([1,2,3]===[1,2,3])

注意浏览器环境与node环境的差别，比如C选项

以下表达式，正确的是

A. Number('a')==Number('a')
B. -1==true
C. 3 + '2'===5
D. ![]==''

答案

CADADCD

Math

如何把 7.25 四舍五入为最接近的整数

A. Math.round(7.25)
B. Math.ceil(7.25)
C. round(7.25)
D. Math.rnd(7.25)

下面哪个选项可以产生0<=num<=10的随机整数

A. Math.floor(Math.random()*6)
B. Math.floor(Math.random()*10)
C. Math.floor(Math.random()*11)
D. Math.ceil(Math.random()*10)

以下( )表达式产生一个0~7之间(含0,7)的随机整数

A. Math.floor(Math.random()*6)
B. Math.floor(Math.random()*7)
C. Math. floor(Math.random()*8)

答案

A CD(注意D) C

字符串

split() 方法用于把一个字符串分割成字符串数组。

A. T
B. F

String对象的哪个方法可以寻找子字符串并返回该子字符串位置

A. match()
B. indexOf()
C. search()
D. concat()

答案

A BC

JSON

下面哪一个是JSON数据？

A. ｛name:"xiaoming",age,"student"｝
B. ｛"name":"xiaoming","age":"student"｝
C. ｛"xiaoming","student"｝
D. ["xiaoming","student"]

下面分别使用 JSON.stringify 方法，返回值 res 分别是

const fn=function(){}
const res=JSON.stringify(fn)
const num=123
const res=JSON.stringify(num)
const res=JSON.stringify(NaN)
const b=true
const res=JSON.stringify(b)

A. 'function'、'123'、'NaN'、'true'
B. undefined、'123'、undefined、'true'
C. undefined、'123'、'null'、'true'
D. undefined、'123'、'null'、undefined

答案

BC

数组

js数组中不会改变原有数组的方法是()

A. push
B. concat
C. sort
D. shift

下列哪种数组的方法不会修改数组本身

A. slice
B. splice
C. sort
D. unshift

JavaScript中需要往数组末尾处添加一个元素，应该使用以下哪个方法：

A. push
B. pop
C. shift
D. unshift

以下js操作Array的方法中不能添加元素的是：

A. push
B. pop
C. unshift
D. splice

数组以下哪个方法会影响原数组？

A. concat
B. splice
C. slice
D. join

JavaScript中，下列哪一个Array的方法的返回值类型和其他不同

A. concat
B. shift
C. filter
D. map

如下的Array.prototype上的方法中，那个方法不会改变原有的数组？

A. push
B. slice
C. splice
D. sort

对于一个数字组成的数组 nums，现在需要执行在不改动 nums 的基础上去重操作，返回一个新的无重复元素的数组，以下几段代码能完成这一操作的是()

// (1)
const newNums=Array.from(new Set(nums))

// (2)
const newNums=nums.filter((n, i)=> {
    return nums.indexOf(n)===i
})

// (3)
const newNums=nums.forEach((n, i)=> {
    return nums.indexOf(n)===i
})

// (4)
const newNums=nums.reduce((acc, n, i)=> {
    return [].concat(acc, nums.indexOf(n)===i ? n : []
)
})

A. (1)、(2)、(3)、(4)
B. (1)、(3)、(4)
C. (1)、(2)、(4)
D. (1)、(4)

答案

BAABB
BBC

正则

正则表达式 ^d+[^d]+ 能匹配下列哪个字符串？

A. 123
B. 123a
C. d123
D. 123def

下面哪个不是RegExp对象的方法

A. test
B. match
C. exec
D. compile

以下哪项可以去除变量str中的所有空格

A. str.replace(`/\s*/g,""`)
B. str.replace(`/^\s|\s$/g,""`)
C. str.replace(`/^\s*/, ""`)
D. str.replace(`/(\s*$)/g, ""`)

答案

CBA

其他

下列函数哪个不是JavaScript的全局函数

A. encodeURI
B. parseFloat
C. round
D. eval

编写高性能JavaScript，以下描述错误的是

A. 遵循严格模式："use strict"
B. 将js脚本放在页面顶部，加快渲染页面
C. 将js脚本成组打包，减少请求，尽量减少使用闭包
D. 使用非阻塞方式下载js脚本，最小化重绘(repaint)和回流(reflow)

有关JavaScript中系统方法的描述，错误的是？

A. parseFloat方法：该方法将一个字符串转换成对应的小数
B. isNaN方法：该方法用于检测参数是否为数值型，如果是，返回true，否则，返回false。
C. escape方法： 该方法返回对一个字符串编码后的结果字符串
D. eval方法：该方法将某个参数字符串作为一个JavaScript执行题

下面列出的浏览器，无webkit内核的是()

A. chrome
B. Safari
C. 搜狗浏览器
D. Firefox

下列代码哪个能够实现获取形式为 2017-08-01 形式的日期( )？

// A
var formatDate=getDate()
// B
var formatDate=new Date()
// C
var formatDate=function (date) {
    var y=date.getFullYear();
    var m=date.getMonth() + 1;
    
    var d=date.getDate();
    return y + '-' + m + '-' + d;
};
// D
var formatDate=function (date) {
    var y=date.getFullYear();
    var m=date.getMonth() + 1;
    m=m < 10 ? '0' + m : m;
    var d=date.getDate();
    d=d < 10 ? ('0' + d) : d;
    return y + '-' + m + '-' + d;
};

下面哪一项不能最小化重绘(repaint)和回流(reflow)

A. 需要对元素进行复杂的操作时，可以先隐藏(display:"none")，操作完成后再显示
B. 需要创建多个DOM节点时，使用DocumentFragment创建完后一次性的加入document
C. 尽量避免用table布局(table元素一旦触发回流就会导致table里所有的其它元素回流)
D. 尽量不要使用 css 属性简写，如：用border-width, border-style, border-color代替border

答案

CBBDDD

JS深入

this

下列哪种方法不能改变this指向()

A. eval
B. apply
C. bind
D. call

在JavaScript中下面选项关于this描述正确的是

A. 在使用new实例化对象时, this指向这个实例对象
B. 将对象的方法赋值给变量A。执行A()时 该方法中的this指向这个对象。 
C. 在函数定义时,this指向全局变量
D. 在浏览器下的全局范围内，this指向全局对象

下面有关JavaScript中call和apply方法的描述，错误的是？

A. call与apply都属于Function.prototype的一个方法，所以每个function实例都有call、apply属性
B. 两者传递的参数不同，call函数第一个参数都是要传入给当前对象的对象，apply不是
C. apply传入的是一个参数数组，也就是将多个参数组合成为一个数组传入
D. call传入的则是直接的参数列表。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。

答案

AAB

作用域(闭包)

内存泄漏是 javascript 代码中必须尽量避免的，以下几段代码可能会引起内存泄漏的有()

// (1)
function getName() {
    name='javascript'
}
getName()

// (2)
const elements={
    button: document.getElementById('button')
};
function removeButton() {
    document.body.removeChild(elements.button);
}
removeButton()

// (3)
let timer=setInterval(()=> {
    const node=document.querySelector('#node') 
    if(node) {
        clearInterval(timer)
    }
}, 1000);

A. (1)、(2)、(3)
B. (2)、(3)
C. (1)、(3)
D. (1)、(2)

那个操作不会造成内存泄露

A. 没有清理的DOM元素引用
B. 被遗忘的定时器
C. 事件侦听没有移除
D. 局部变量不用时，没有设为null

下列关于闭包理解错误的是

A. 增加一定的内存消耗
B. 使用不当可能会导致内存泄漏
C. 可以使用闭包模拟私有方法
D. 闭包会改动对象的原型链

答案

DDD

原型与继承

JavaScript实现继承的方式，不正确的是：

A. 原型链继承
B. 构造函数继承
C. 组合继承
D. 关联继承

所有对象都有原型

A. T
B. F

以下关于原型链的描述正确的是:

A. 通过原型链继承的属性和对象自己定义的属性等效
B. 通过原型链可以模拟对象的私有属性
C. 在对象上访问不存在的属性时,会依次遍历整条原型链
D. 所有 JavaScript 中的对象都是位于原型链顶端的 `Object` 的实例

答案

DBC

其他

以下不属于前端数据存储方式的是？

A. jsonp
B. cookie
C. localStorage
D. sessionStorage

答案

DOM题

事件流

将A元素拖拽并放置到B元素中，B元素需要做哪项操作()？

A. event.preventDefault()
B. event.prevent()
C. event.drag()
D. event.drop()

以下不支持冒泡的鼠标事件为( )？

A. mouseover
B. click
C. mouseleave
D. mousemove

在javascript中，用于阻止默认事件的默认操作的方法是

A. stopDeafault()
B. stopPropagation()
C. preventDefault()
D. preventDefaultEven()

事件传播的三个阶段是什么

目标 -> 捕获 -> 冒泡
冒泡 -> 目标 -> 捕获
目标 -> 冒泡 -> 捕获
捕获 -> 目标 -> 冒泡

下面有关 javascript 常见事件的触发情况，描述错误的是？

A. onchange：用户改变域的内容
B. onkeypress：某个键盘的键被按下或按住
C. onmousedown：某个鼠标按键被按下
D. onblur：元素获得焦点

答案

ACCDD

DOM遍历

下列哪项不属于DOM查找节点的属性()？

A. parentObj.firstChild
B. parentObj.children
C. neborNode.previousSibling
D. neborNode.siblings

DOM中，给父节点添加子节点的正确方法为()？

A. appendChild(parentNode,newNode);
B. append(parentNode,newNode);
C. parentNode.append(newNode);
D. parentNode.appendChild(newNode);

JavaScript中document.getElementById()返回值的类型为？

A. Array
B. Object
C. String
D. Function

DOM中，给父节点添加子节点的正确方法为()？

A. appendChild(parentNode,newNode);
B. append(parentNode,newNode);
C. parentNode.append(newNode);
D. parentNode.appendChild(newNode);

答案

DDBD

其他

DOM元素的以下属性改变会导致重排(reflows)的是

outline
visiblity
font-size
background-color

答案

BOM题

setInterval(updateClock,60)的含义是( )？

A. 每隔60秒调用一次updateClock()
B. 每隔60毫秒调用一次updateClock()
C. 每隔60分钟调用一次updateClock()
D. 每分钟调用60次updateClock()

使用方法( )可以获取到地理位置所在的经纬度？

A. Geolocation.watchPosition()
B. Geolocation.getCurrentPosition()
C. Geolocation.getPosition()
D. Geolocation.Position()

setInterval("alert('welcome');",1000);这段代码的意思是

A. 等待1000秒后，再弹出一个对话框
B. 等待1秒钟后弹出一个对话框
C. 每隔一秒钟弹出一个对话框
D. 语句报错,语法有问题

答案

BBC

ES6题

箭头函数

下列对js箭头函数描述错误的是()

A. 箭头函数没有原型属性
B. 箭头函数不绑定this，会捕获其所在的上下文的this值，作为自己的this值
C. 箭头函数可以作为构造函数，使用new
D. 箭头函数不绑定arguments，取而代之用rest参数解决

关于箭头函数下列说法错误的一项是：

A. 函数体内this的指向是定义时所在的对象，而不是使用时所在的对象
B. 箭头函数内不能使用arguments对象
C. 箭头函数不能使用yield命令
D. 可以使用new创建一个箭头函数的实例

答案

CD

promise

关于将 Promise.all 和 Promise.race 传入空数组的两段代码的输出结果说法正确的是：

Promise.all([]).then((res)=> {
    console.log('all');
});
Promise.race([]).then((res)=> {
    console.log('race');
});

A. all 和 race 都会被输出
B. all 和 race 都不会被输出
C. all 会被输出，而 race 不会被输出
D. all 不会被输出，race 会被输出

以下方案中，不是用于解决回调陷阱的的是：

A. Promise
B. Generator
C. async
D. Proxy

在 ECMAScript6 中，不属于promise的状态是:

A. Pending
B. Pause
C. Fulfilled
D. Rejected

答案

CDB

解构赋值

关于ES6解构表达式,描述正确的是()

let [a,b, c,d, e]="hello";

A. e="hello";
B. 其它都为undefined
C. 当中 a="h", b="e";
D. 语法报错

答案

多选题

JS基础

下面哪些数组方法会改变原数组

A. push 
B. concat 
C. splice 
D. map

下面可以声明数字的js代码是

A. const a=0xa1
B. const a=076
C. const a=0b21
D. const a=7e2

以下属于操作符 typeof 的返回值的是：

(1)function
(2) object
(3) null
(4) array
(5) NaN
(6) bigint
(7) regexp
(8) undefined

A. (1)、(2)、(3)、(4)、(5)、(6)、(7)、(8)
B. (1)、(2)、(3)、(8)
C. (1)、(2)、(8)
D. (1)、(2)、(6)、(8)

以下()结果等于字符串string

A. typeof 'string'
B. String('string').toString()
C. 'string'.split('').sort().join('')
D. (function(string){return string})('string')
E. JSON.parse('{"string":"string"}').string

下面的等式成立的是?

A. parseInt(46.8) `==` parseFloat(46.8)
B. NaN `!==` NaN
C. isNaN('abc') `==` NaN
D. typeof NaN `===` 'number'

以下哪些选项可以将集合A转化为数组？

A. Array.from(A)
B. [].slice.apply(A)
C. [...A]
D. [].map.call(A, o=> o)

下列结果返回 true 的是

A. null==undefined
B. null===undefined
C. null===null
D. NaN==null
E. NaN===NaN
F. Infinity + 1 !==Infinity

答案

AC ABD D ABDE BD ABCD AC

JS深入

关于以下代码，说法正确的有哪些？

function Person() { } var person=new Person();

A. 每一个原型都有一个constructor属性指向关联的构造函数。
B. 每一个对象都有一个prototype属性。
C. Object.getPrototypeOf(person)===Person.prototype
D. person.constructor===Person

下列在 JS 时间循环机制中属于微任务(microTask)的是？

A. process.nextTick
B. promise
C. setTimeout
D. setInterval

答案

ACD AB

ES6

以下关于let和const的说法中正确的是:

A. let声明的变量值和类型都可以改变
B. const声明的常量不可以改变
C. 两者都不存在变量提升，同时存在暂时性死区，只能在声明的位置后面使用
D. const可以先声明再初始化，可以后赋值

下面关于Promise说法正确的是(注意“返回结果”的意思包含成功或者失败)

A. Promise.all在所有给定的promise都fulfilled后才返回结果
B. Promise.race在给定的promise中，某个fulfilled后才返回结果
C. promise.then的回调函数中，可以返回一个新的promise
D. 对于一个向后台获取数据已经产生结果的promise:p1，再次调用p1.then，不会去重新发起请求获取数据

答案

ABC CD

DOM

下列关于使用 JS 修改元素样式的代码，正确的有哪些？

document.body.style.['background-color']='#fff'
document.body.style.setProperty('background-color', '#fff')
document.body.style='background-color': #fff'
document.body.style.fontSize='14px'

下列方法可用于阻止事件冒泡的有

A. event.cancelBubble=true;
B. event.stopPropagation();
C. event.preventDefault();
D. return false;

答案

BCD ABD

填空题

类型检测

在JavaScript中，有var arr=[]; typeof arr的结果为
以下使用 typeof 操作符的代码的输出结果为

var x=typeof x
var res=typeof typeof x;
console.log(x, res)

[typeof null, null instanceof Object]的结果是什么
typeof typeof 0
JavaScript的typeof运算符的可能结果为array？解释为什么
下面代码的输出结果是多少？

var arr=[];
console.log(typeof arr, Object.prototype.toString.call(arr));

console.log(Object.prototype.toString.call(undefined))

类型转换

表达式 "2"+3+4 的值为
console.log('5' + 3, 5 + '3')
var a=parseInt(“111办公室”);alert(a);
["0x1", "0x2", "0x3"].map(parseInt) 的结果
在js中执行 1+'1'的结果是？
在js中执行 parseInt('77',40)的结果是?

逻辑判断

请给出 [5<6<3,3<2<4] 代码的运行结果
(2<3)||(3<2) 表达式将返回值为
console.log(true||false&&false, true&&false||true)的输出结果是？

其他

1 + - + + + - + 1 的结果是
[ 'a', ,'b', ,].length 的结果是

程序题

JS基础

下面两个程序的输出结果分别是？

// case 1
function showCase(value) {
    switch(value) {
    case 'A':
        console.log('Case A');
        break;
    case 'B':
        console.log('Case B');
        break;
    case undefined:
        console.log('Case undefined');
        break;
    default:
        console.log('Case default');
    }
}
showCase(new String('A'));

// case 2
function showCase(value) {
    switch(value) {
    case 'A':
        console.log('Case A');
        break;
    case 'B':
        console.log('Case B');
        break;
    case undefined:
        console.log('Case undefined');
        break;
    default:
        console.log('Case default');
    }
}
showCase(String('A'));

p标签的的内容会显示什么？

<html>
    <body>
        <p id="demo"></p>
        <script type="text/javascript">
            var x=10;
            var y="10";
            document.getElementById("demo").innerHTML=Boolean(x==y);
        </script>
    </body>
</html>

document.write的结果会是什么？

function funcA(x){
    var temp=4;

    function funcB(y){
        document.write( ++x + y + (temp--));
    }

    funcB(5);
}

funcA(6)

alert的结果会是多少

var varArr=function(i,j,str) {  
    return j==0 ? str : varArr(i,--j,(str+=" " + i[j]));
}
var arr=new Array('apple','orange','peach','lime');
var str=varArr(arr,arr.length,"");
alert(str);

下面程序的输出结果是多少？

function greetingMaker(greeting) { 
    function addName(name) {    
        greeting=greeting.split(' ').reverse().join("-");
        return greeting + " " + name;
    }
    
    return addName;
}

var daytimeGreeting=greetingMaker("Good Day to you");
alert(daytimeGreeting(name));

下面程序的输出结果是多少？

String.prototype.GetNum=function() { 
    var regEx=/[^\d]/g; 
    return this.replace(regEx, ''); 
};

var str="a1b2c3";
str=str.GetNum();
alert(str);

下面程序的输出结果是多少？

function sum(a, b) {
  return a + b;
}
sum(1, "2");

下面程序的输出结果是多少？

var str="我非常喜欢编程";
str.length=3;
console.log(str);

下面程序的输出结果是多少？

let number=0;
console.log(number++);
console.log(++number);
console.log(number);

下面程序的输出结果是多少？

function nums(a, b) {
    if (a > b)
        console.log('a is bigger')
    else 
        console.log('b is bigger')
    return a + b
}
console.log(nums(4, 2))
console.log(nums(1, 2))

下面程序输出结果是多少？

function side(arr) {
    arr[0]=arr[2];
}
function func1(a, b, c=3) {
    c=10;
    side(arguments);
    console.log(a + b + c);
}
function func2(a, b, c) {
    c=10;
    side(arguments);
    console.log(a + b + c);
}
func1(1, 1, 1);
func2(1, 1, 1);

下面代码的输出结果是什么？

var a=3;
var b=new Number(3);
var c=3;

console.log(a==b);
console.log(a===b);
console.log(b===c);

执行下列语句后，a.length的值为？

var a=[];
a.push(1, 2);
a.shift(3, 4);
a.concat([5, 6]);
a.splice(0, 1, 2);

下面这几段代码分别输出结果是多少？为什么？

var a={}, b='123', c=123;
a[b]='b';
a[c]='c';
console.log(a[b]);
// example 2
var a={}, b=Symbol('123'), c=Symbol('123');
a[b]='b';
a[c]='c';
console.log(a[b]);
// example 3
var a={}, b={key:'123'}, c={key:'456'};
a[b]='b';
a[c]='c';
console.log(a[b]);

下面每项的返回值是什么？为什么？

null==undefined
0.1 + 0.2==0.3
typeof NaN
typeof Function
typeof Object
typeof {}
'a' + 1
'a' - 1
Function instanceof Object
Object instanceof Function

下面程序的输出结果是多少？

var array=[]
for(var i=0; i < 3; i++) {
    array.push(()=> i)
}
var newArray=array.map(el=> el())
console.log(newArray)

下面程序的输出结果是多少？

 function a(m, n) {
        var b=function (l) {
            return l <=m ? l * b(l + 1) : 1;
        }

        return b(m - n + 1);
    }

console.log(a(4, 2));

下面程序的输出结果是多少？

console.log(typeof undefined==typeof NULL);
console.log(typeof function () {}==typeof class {});

执行后a和b.age的值分别为

var a=10
var b={
    age: 11
}
function fn(x,y) {
    --y.age;
    return --x;
}
fn(a,b)

下面程序的执行结果是：

var number=4;
var numberFactorial=(function (number){
    return (number===0)? 1: number* factorial(number-1)
})(number)
console.log(numberFactorial)

下面程序的输出结果是：

var array=[]
for(var i=0; i < 3; i++) {
    array.push(()=> i)
}
var newArray=array.map(el=> el())
console.log(newArray)

下面程序的输出结果是：

function addToList(item, list) {
    return list.push(item)
}
const result=addToList("nowcoder", ["hello"])
console.log(result)

下面程序的输出结果是：

const first=()=> { console.log('first'); return false; }
const second=()=> { console.log('second'); return true; }
console.log( first() && second() );
console.log( second() || first() );

下面代码的输出结果是：

var s='12ab3cd', arr=s.split(/\d/);
console.log(arr[3],arr[4])

下面程序的输出结果是：

function getAge(...args) {
  console.log(typeof args);
}

getAge(21);

下面程序的输出结果是:

var arr=[1,2,3];
arr.push(arr.shift())
console.log(arr[1],arr[2])

JS深入

this指向

题目解析：this指向题目解析及扩展[3]

关于this还可以看看：可能是最好的 this 解析了...

下列程序的输出结果是多少？为什么？

var x=1;

var obj={
    x: 3,
    fun:function () {
        var x=5;
        return this.x;
    }
};

var fun=obj.fun;
console.log( obj.fun(), fun() );

下列程序的输出结果是多少？你能理清楚test函数的this指向吗？

var a=5;
 function test() { 
    a=0; 
    alert(a); 
    alert(this.a); 
    var a;
    alert(a); 
}
new test();

下列程序的输出结果是多少？为什么？

function fun () {
    return ()=> {
        return ()=> {
            return ()=> {
                console.log(this.name)
            }
        }
    }
}
var f=fun.call({name: 'foo'})
var t1=f.call({name: 'bar'})()()
var t2=f().call({name: 'baz'})()
var t3=f()().call({name: 'qux'})

执行以下代码，输出结果分别是多少？

let obj1={
    a: 1,
    foo: ()=> {
        console.log(this.a)
    }
}
// log1
obj1.foo()
const obj2=obj1.foo
// log2
obj2()

下面程序的输出结果是什么？为什么？

const Person=(name="wang",age=10)=> {
this.name=name;
this.age=age;
return this.name +' is '+ this.age + 'years old'
}
let result=new Person('zhang',11)
console.log(result)

请表述以下代码的执行结果和原因

var person={
  age: 18,
  getAge: function() {
    return this.age;
  }
};
var getAge=person.getAge
getAge()

请按顺序写出打印结果，并说明原因。

var name='global';
var obj={
    name: 'local',
    foo: function(){
        this.name='foo';
    }.bind(window)
};
var bar=new obj.foo();
setTimeout(function() {
    console.log(window.name);
}, 0);
console.log(bar.name);
 
var bar3=bar2=bar;
bar2.name='foo2';
console.log(bar3.name);

下面程序的执行结果是：

var obj={
    name:"zhangsan",
    sayName:function(){
        console.info(this.name);
    }
}

var wfunc=obj.sayName;
obj.sayName();
wfunc();
var name="lisi";
obj.sayName();
wfunc();

下面程序的输出结果是：

var name='test' 
var a={    
    name: 'ass',    
    getName: function() {    
        return this.name;   
    } 
} 
var b=a.getName; 
b();

事件循环

下列程序的输出结果分别是多少？为什么？

const promiseA=Promise.resolve('a')
promiseA. then((res)=> {
    console.log(res)
}).then((res)=> {
    console.log(res)
})
const promiseB=Promise.resolve('b')
promiseB. then((res)=> {
    console.log(res)
})
promiseB. then((res)=> {
    console.log(res)
})

下面程序的输出结果依次是多少？

setTimeout(()=> {
    console.log(1)
}, 0)

const P=new Promise((resolve, reject)=> {
    console.log(2)
    setTimeout(()=> {
        resolve()
        console.log(3)
    }, 0)
})

P.then(()=> {
    console.log(4)
})
console.log(5)

下面程序的输出结果是

setTimeout(function(){
    console.log(1);
}, 0)
new Promise(function(resolve){
    console.log(2);
    resolve();
    console.log(3);
}).then(function(){
    console.log(4);
})
console.log(5);

下面程序的输出结果是？

(async ()=> {
    console.log(1);
    setTimeout(()=> {
        console.log(2);
}, 0);
await new Promise((resolve, reject)=> {
    console.log(3);
}).then(()=> {
    console.log(4);
});
    console.log(5);
})();

下面程序的输出结果是:

new Promise((resolve)=> {
    console.log('1')
    resolve()
    console.log('2')
}).then(()=> {
    console.log('3')
})
setTimeout(()=> {
    console.log('4')
})
console.log('5')

下面程序的输出结果是:

var p1=new Promise(function(resolve, reject){
    resolve("2")
})
setTimeout(function(){
    console.log("1")
},10)
p1.then(function(value){
    console.log(value)
})
setTimeout(function(){
    console.log("3")
},0)

下面程序的输出结果是：

setTimeout(function() {
  console.log('setTimeout');
}, 0);
Promise.resolve().then(function() {
  console.log('promise1');
}).then(function() {
  console.log('promise2');
});

请表述以下代码的执行结果和原因

setTimeout(function() {
    console.log(1)
},0)
new Promise(function executor(resolve){
    console.log(2)
    for (var i=0; i<10000; i++) {
        i - 9999 && resolve()
    }
    console.log(3)
}).then(function() {
    console.log(4)
})
console.log(5)

在网页中有两个div块，html代码如下

<div class="outer">
 <div class="inner"></div>
</div>

对应的js代码如下：

var outer=document.querySelector('.outer');
var inner=document.querySelector('.inner');

function onClick() {
    console.log('click');

    setTimeout(function() {
        console.log('timeout');
    }, 0);

    Promise.resolve().then(function() {
        console.log('promise');
    });

    outer.setAttribute('data-random', Math.random());
}

inner.addEventListener('click', onClick);
outer.addEventListener('click', onClick);

当点击class为inner的div块时，控制台依次输出结果是什么？ 10. 下面程序的输出结果是？

(async ()=> {
    console.log(1);
    setTimeout(()=> {
        console.log(2);
}, 0);
await new Promise((resolve, reject)=> {
    console.log(3);
}).then(()=> {
    console.log(4);
});
    console.log(5);
})();

下面程序的输出结果是：

setTimeout(()=> console.log('a'));
Promise.resolve().then(
   ()=> console.log('b’);
 ).then(
   ()=> Promise.resolve('c').then(
     (data)=> {
       setTimeout(()=> console.log('d'));
       console.log('f');
       return data;
     }
   )
 ).then(data=> console.log(data));

下面程序的输出结果是：

console.log('one'); 
setTimeout(function() { console.log('two'); }, 0); 
Promise.resolve()
       .then(function() { console.log('three'); })
 console.log('four');

下面程序的执行结果是：

setTimeout(function () {
    console.log(C)
},0)
console.log('D')
new Promise(function(resolve){
    console.log('E')
    resolve()
    console.log('F')
}).then(function() {
    console.log('G')
})
console.log('H')

有一个输出函数定义如下：

function log(msg, time) {
  return new Promise((resolve)=> {
    setTimeout(()=> {
      console.log(msg);
      resolve();
    }, time);
  });
}

则下面三段代码输出的结果是：

// 第一段代码：
(async ()=> {
  for (let i=0; i < 5; i++) {
    await log(i, 1000);
  }
})();

// 第二段代码：
(async ()=> {
  [ 1, 2, 3, 4 ].forEach(async (i)=> {
    await log(i, 1000);
  });
})();

// 第三段代码：
(async ()=> {
  for (const i of [ 1, 2, 3, 4 ]) {
    await log(i, 1000);
  }
})();

原型与原型链

关于原型JS：看完这篇文章，彻底了解 “原型” & “this”

传送门: 原型与原型链题目解析[4]

下面程序的输出结果依次是？

function Fn1(name) {
    if(name){
    this.name=name;
    }
}
Fn1.prototype.name="jack"
let a=new Fn1();
console.log('a:', a.name);

function Fn2(name) {
    this.name=name;
}
Fn2.prototype.name="jack"
let b=new Fn2();
console.log('b:', b.name);

下面程序的输出结果是？

var Foo=(function() {
    var x=0;
    function Foo() {}
    Foo.prototype.increment=function() {
        ++x;
        console.log(x);
    };
    return Foo;
})();
 
var a=new Foo();
a.increment();
a.increment();
var b=new Foo();
a.increment();

下面程序的输出结果是？

var name='Jay'
function Person(name){
    this.name=name;
    console.log(this.name)
}
var a=Person('Tom')
console.log(name)
console.log(a)
var b=new Person('Michael')
console.log(b)

请表述以下代码的执行结果和原因

class A{}
class B extends A{}
const a=new A()
const b=new B()
a.__proto__
b.__proto__
B. __proto__
B. prototype.__proto__
b.__proto__.__proto__

请表述以下代码的执行结果和原因

function test() {           
    getName=function() { 
        Promise.resolve().then(()=> console.log(0)); 
        console.log(1);               
    };

    return this; 
}
test.getName=function() { 
     setTimeout(()=> console.log(2), 0); 
     console.log(3);               
};
test.prototype.getName=function() {    

     console.log(4); 
};       
var getName=function() { 
     console.log(5);             
};
function getName() {

     console.log(6); 
}      
      
test.getName(); 
getName(); 
test().getName(); 
getName();  
new test.getName();
new test().getName();
new new test().getName();

请表述以下代码的执行结果和原因

var tmp={};
var A=function() {};
A. prototype=tmp;

var a=new A();
A. prototype={};

var b=Object.create(tmp);
b.constructor=A. constructor;

console.log(a instanceof A);
console.log(b instanceof A);

下面程序的执行结果是：

function Foo(){}
Foo.prototype.z=3;
var obj=new Foo();
console.info(obj.z)
obj.z=10;
console.info(obj.z);
delete obj.z;
console.info(obj.z);

下面程序的执行结果是：

const Book={
  price: 32
}
const book=Object.create(Book);
book.type='Math';
delete book.price;
delete book.type;
console.log(book.price);
console.log(book.type);

作用域与预编译

下面的程序会报错吗？如果不会，输出结果分别是多少？

function sayHello() {
    console.log(name);
    console.log(age);
    var name="Tom";
    let age=18;
} 
sayHello();

下面的程序i的打印结果分别是多少？

for (var i=0; i < 3; i++) {
    setTimeout(_=> {
        console.log(i)
    })
}

for (let i=0; i < 3; i++) {
    setTimeout(_=> {
        console.log(i)
    })
}

下面程序的输出结果是：

console.log(a);
var a='a';
console.log(b);
let b='b';

下面程序的输出结果是：

var foo="Hello";
(function(){
    var bar=" World";
    alert(foo + bar);
})();
alert(foo + bar);

下面程序的输出结果是：

var a=10;
(function () {
    console.log(a)
    a=5
    console.log(window.a)
    var a=20;
    console.log(a)
})()

下面代码的输出结果是:

const a=10
function runFunction() {
    const a=20
    console.log('inside', a)
}
runFunction()
console.log('outside', a)

请描述打印结果并说明原因

"use strict"
var name='Jay'
var person={
    name: 'Wang',
    pro: {
        name: 'Michael',
        getName: function () {
            return this.name
        }
    }
}
console.log(person.pro.getName)
var people=person.pro.getName
console.log(people())

下面程序的结果是：

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
<script>
var elements=document.getElementsByTagName("li");
for (var i=0;i<elements.length;i++){
    elements[i].onclick=function( ){
    alert(i); 
    };
}

下面程序的输出结果是

compute(10,100);
var compute=function(A,B) {
    console.info(A * B) ;
};
function compute(A,B){
    console.info(A + B);
}
function compute(A,B){
    console.info((A + B)*2);
}
compute(2,10);

下面程序的执行结果是：

meili()
function meili() {
    console.log("meili")
}
mogu()
var mogu=function() {
    console.log("mogu")
}

下面两个代码片段输出结果有什么区别？为什么？

// 片段1
check('first');
function check(ars){
    console.log(ars);
}
// 片段2
check('second');
var check=function(ars){
    console.log(ars);
}

ES6

对象

下面代码的输出结果是？

const student={name: 'ZhangSan'}
Object.defineProperty(student, 'age', {value: 22})
console.log(student)
console.log(Object.keys(student))

generator

下列程序的输出结果是多少？为什么？

function * cb(x, y) {
    for(let i=Math.ceil(x); i <=y; i++) {
        yield i;
    }
}

var a=cb(6, 9);
console.log(a.next());
console.log(a.next());

扩展运算符

下面程序的输出结果是：

function fn(...args) {
  console.log(typeof args);
}
fn(21);

promise

Promise.reject(0)
       .catch(e=> e)
       .catch(e=> console.log(e))

class

请写出下面ES6代码编译后所生成的ES5代码

class Person {
     constructor (name) {
          this.name=name;
     }
     greet () {
          console.log(`Hi, my name is ${this.name}`);
     }
     greetDelay (time) {
          setTimeout(()=> {
               console.log(`Hi, my name is ${this.name}`);
          }, time);
     }
}

标签模板

下面程序的输出结果是多少？

function getPersonInfo (one, two, three) {
    console.log(one)
    console.log(two)
    console.log(three)
}
const person='Lydia'
const age=21
getPersonInfo `${person} is ${age} years old`

module

请写出index里面的输出结果

// module.js
export default ()=> "Hello world"
export const name="nowcoder"
// index.js
import * as data from "./module"
console.log(data)

有a.js和b.js两个文件，请写出b文件中代码的输出

// a.js
let a=1
let b={}
setTimeout(()=> {    
a=2    
b.b=2
}, 100)
module.exports={ a, b }

// b.js
const a=require('./a')
console.log(a.a)
console.log(a.b)
setTimeout(()=> {    
    console.log(a.a)    
    console.log(a.b)
}, 500)

其他

输出结果是：

<div id="box1">
    <div id="box2">
        content
    </div>
</div>
<script>
const $=document.querySelector.bind(document);
const box1=$('#box1');
const box2=$('#box2');

box1.addEventListener('click', ()=>{
    console.log('box1 true');
}, true);

box1.addEventListener('click', ()=>{
    console.log('box1 false');
}, false);

box2.addEventListener('click', ()=>{
    console.log('box2 true');
}, true);

box2.addEventListener('click', ()=>{
    console.log('box2 false');
}, false);
</script>

输出结果是：

$(function () { 
    function fn1( value ) {
        alert( value );
    }
    function fn2( value ) {
        fn1("A");
        return false;
    }
    var callbacks=$.Callbacks();
    callbacks.add( fn1 ); 
    callbacks.fire( "B" );
    callbacks.add( fn2 ); 
    callbacks.fire( "C" );
})

实现在p元素后添加“Hello World!”，则横线处应使用的方法为( )？


<html>
    <head>
        <script type="text/javascript" src="/jquery/jquery.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $("button").click(function(){
                    $("<b>Hello World!</b>").______("p");
                });
            });
        </script>
    </head>
    <body>
        <p>This is a paragraph.</p>
        <p>This is another paragraph.</p>
        <button>在每个p元素的结尾添加内容</button>
    </body>
</html>

输出结果是：

<div id="box1">
  <div id="box2">
    content
  </div>
</div>
<script>
const $=document.querySelector.bind(document);
const box1=$('#box1');
const box2=$('#box2');
box1.addEventListener('click', ()=> {
  console.log('box1 true');
}, true);
box1.addEventListener('click', ()=> {
  console.log('box1 false');
}, false);
box2.addEventListener('click', ()=> {
  console.log('box2 true');
}, true);
box2.addEventListener('click', ()=> {
  console.log('box2 false');
}, false);
</script>

请选择下面代码输出1的次数

、关于HTML语义化，你知道都有哪些标签？

语义化就是让计算机能够快速读懂内容，高效的处理信息。搜索引擎只能通过标签来判断内容的语义，因为页面的很大一部分流量来自搜索引擎，要使页面尽可能地对搜索引擎友好，所以尽可能地使用语义化标签，如：

div是division分离，span是span范围，table是表格，ol是orderList有序列表，ul是unorderList无序列表，li是list item列表选项，html5进一步推进web语义化的发展，使用了一些新的标签有header、artical、address等。

2、HTML标签分类有哪些？都有啥特点?

块级标签

默认宽度是100%

块级标签独占一行

块级标签可以使用height设置高度

常见块级标签：div、p、h1~h6、ol、ul、table、form等等。

行级标签

默认宽度由内容撑开

行级标签不会自动换行，从左到右一次排列

行级标签height设置高度失效，高度由内容撑开。

常见行级标签：span、a、br、strong、lable、i、em。

行内块标签

结合行级和块级的优点

可以设置元素的宽高

还可以将多个元素显示在一行从左到右一次排列。

常见行内块标签：img、input。

3、网页编码设置有几种方式？

Charset属性规定HTML文档的字符编码，常见的属性值有以下几个：

UTF-8(8-bit Unicode Transformation Format)是一种针对Unicode的可变长度字符编码，又称万国码。用在网页上可以同一页面显示中文简体繁体以及其他语言。
GBK是汉字编码，是双字节码，可表示简体和繁体字。
ISO8859-2字符集，也称Latin-2，收集了东欧字符。

4、HTML的框架优缺点有哪些？

Html框架有iframe和frame两个，将多个页面通过一个浏览器窗口显示。

框架的优点：

重载页面时不需要重载整个页面，只需要重载页面中的一个框架页，减少数据传输，加快网页加载速度。
Iframe使用简单不需要引入任何插件，主要用于不需要搜索引擎搜索的页面。
方便制作导航，多个页面共用，方便开发和维护。

缺点：

会产生很多页面，不容易管理。
不方便打印，不能实现对frameset的打印。
浏览器后退按钮失效。
不利于SEO优化，不能为每个页面设置标题和关键字，影响搜索。
多数小型移动设备无法完全显示框架。
多框架页面会增加服务器的http请求。
H5已经抛弃该标签。

5、HTML5有哪些新特性，移除了哪些元素？

H5新增了图像、位置、存储、多任务等功能。

新增元素：

Canvas
video和audio元素
本地离线缓存：localStorage长期存储，浏览器关闭之后数据不丢失，sessionStorage的数据在浏览器关闭后自动删除。
语义化标签：artical、footer、header、nav、section
位置API：Geolocation
表单控件：calendar、date、time、email、search、url
新技术：web worker(运行在后台的js,独立于其他脚本，不影响页面性能。可以在页面继续任何操作，此时web worker在后台运行)、web socket
拖放API：drag、drop

移除元素：

框架元素：frame、frameset、noframes。
纯表现元素：basefont、font、center、u、big、strike、tt

Html5新增了 27 个元素，废弃了 16 个元素，根据现有的标准规范，把 HTML5 的元素按优先级定义为结构性属性、级块性元素、行内语义性元素和交互性元素 4 大类。

6、如何区分HTML和HTML5？

DOCUMENT声明方式是区分的重要元素。

Html声明方式：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd”>
Html5声明方式：<!DOCTYPE html>

根据新增加的结构、功能来区分。H5有好多新增语义化标签。

7、H5文件离线存储怎么使用，工作原理是什么？

在线情况下，浏览器发现html头部有manifest属性，它会请求manifest文件，如果是第一次访问那么浏览器就会根据manifest文件的内容下载相应的资源，并进行离线存储。如果已经访问过并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面。然后浏览器会对比新的manifest文件与旧的manifest文件，如果文件没有改变，就不会有任何操作，如果文件改变了，那么就会重新下载资源，并进行离线缓存。

页面头部加入manifest属性。如：<html manifest="demo.appcache">

在cache.manifest文件中编写离线存储的资源。

8、Cookies,sessionStorage和localStorage的区别？

共同点：都是保存在浏览器端，而且都是同源的。

区别：

Cookies是为了标识用户身份而存储在用户本地的数据，始终在同源http请求中携带，在浏览器与服务器间来回传递，而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。
存储大小差异。Cookie保存的数据很小，不能超过4k，而sessionStorage和localStorage保存数据大，可达到5M。
存储有效期不同。Cookie在设置的cookie过期前始终有效，而sessionStorage仅在浏览器关闭之前有效，localStorage始终有效，与浏览器窗口没关系。
作用域不同：cookie在所有同源窗口都是共享，sessionStorage不能在不同浏览器窗口上共享，localStorage在所有同源窗口都是共享的。

9、title与h1的区别、b与strong的区别、i与em的区别？

title属性没有明确意义，只表示标题，h1表示层次明确的标题，对页面信息抓取也有很大的影响。

strong标明重点内容，语气加强含义，b表示无意义的视觉表示

em表示强调文本，i是斜体，是无意义的视觉表示

视觉样式标签：b、u、i、s

语义样式标签：strong、em、ins、del、code

10、viewport 所有属性？

viewport是用户网页的可视区域，使用meta设置viewport时有很多属性，分别对以下各个属性介绍

width :设置layout viewport的宽度，为一个正整数，或字符串'device-width';
initial-scale:设置页面的初始缩放值，为一个数字，可以带小数。
minimum-scale:允许用户的最小缩放值，为一个数字，可以带小数。
maximum-scale:允许用户的最大缩放值，为一个数字，可以带小数。
height:设置layout viewport的高度，这个属性对我们并不重要，很少使用
user-scalable:是否允许用户进行缩放，值为‘no’或者‘yes’。
target-densitydpi:值可以为一个数值或者 high-dpi 、 medium-dpi、 low-dpi、 device-dpi 这几个字符串中的一个

安卓中还支持：target-densitydpi，表示目标设备的密度等级，作用是决定css中的1px 代表多少物理像素。

11、meta标签的name属性值？

name属性主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索机器人查找信息和分类信息用的。

Meta标签的name属性语法格式是：

Name主要有以下几个参数：

Keywords（关键字）：关键字用来告诉搜索引擎你网页的关键字是什么。
Description（网站内容描述）：描述用来浏览器你的网页主要内容是什么。
Robots（机器人向导）：robots用来搜索机器人哪些页面需要索引，哪些页面不需要索引。
Author（作者）：添加网页作者信息。

Content的参数主要有name的参数来决定，如果是关键字的时候，多个关键字之间使用逗号隔开，一般使用5个关键字为宜；如果是描述的时候，描述长度一般控制在200字左右；如果是索引的时候，一般使用inde、noindex、none、all，默认是all。

在线咨询

上一篇：Django 使用模板 templates
下一篇：古玛雅社会人类是如何生产食盐的？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

45道CSS基础面试题（附答案）

选题

JS基础

js概念与类型检测

逻辑判断

Math

字符串

JSON

数组

正则

其他

JS深入

this

作用域(闭包)

原型与继承

其他

DOM题

事件流

DOM遍历

其他

BOM题

ES6题

箭头函数

promise

解构赋值

多选题

JS基础

JS深入

ES6

DOM

填空题

类型检测

类型转换

逻辑判断

其他

程序题

JS基础

JS深入

this指向

事件循环

原型与原型链

作用域与预编译

ES6

对象

generator

扩展运算符

promise

class

标签模板

module

其他

您的项目需求