80道前端面试经典选择题，值得收藏！

时间  2020-02-09
标签 前端 面试 经典 选择题 值得 收藏 栏目 快乐工作 繁體版
原文   原文链接

前言

看了一下各类面试题，选择题是必有的javascript

因此我整理了一些经典的前端面试选择题，但愿能对你们往后找工做有所帮助！css

cmd-markdown-logo

HTML/CSS

一、在 css 选择器当中，优先级排序正确的是（）html

A、id选择器>标签选择器>类选择器前端

B、标签选择器>类选择器>id选择器java

C、类选择器>标签选择器>id选择器es6

D、id选择器>类选择器>标签选择器web

解析：面试

选D

4个等级的定义以下： 正则表达式

第一等：表明内联样式，如: style=””，权值为1000算法

第二等：表明ID选择器，如：#content，权值为100

第三等：表明类，伪类和属性选择器，如.content，权值为10

第四等：表明类型选择器和伪元素选择器，如div p，权值为1

二、下列定义的 css 中，哪一个权重是最低的？（ ）

A、#game .name

B、#game .name span

C、#game div

D、#game div.name

解析：

选C

权重越大，优先级越高

CSS选择器优先级是指“基础选择器”的优先级：

ID > CLASS > ELEMENT > *

三、关于HTML语义化，如下哪一个说法是正确的？（ ）

A、语义化的HTML有利于机器的阅读，如PDA手持设备、搜索引擎爬虫；但不利于人的阅读

B、Table 属于过期的标签，遇到数据列表时，需尽可能使用 div 来模拟表格

C、语义化是HTML5带来的新概念，此前版本的HTML没法作到语义化

D、header、article、address都属于语义化明确的标签

解析：

选D

一、什么是HTML语义化？

根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。

二、为何要语义化？

为了在没有CSS的状况下，页面也能呈现出很好地内容结构、代码结构

用户体验：例如title、alt用于解释名词或解释图片信息、label标签的活用；

有利于SEO ：和搜索引擎创建良好沟通，有助于爬虫抓取更多的有效信息：

爬虫依赖于标签来肯定上下文和各个关键字的权重；

方便其余设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；

便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，能够减小差别化

四、CSS 样式，下面哪个元素可以达到最大宽度，且先后各有一个换行？（ ）

A、Block Element

B、Square Element

C、Side Element

D、Box Element

解析：

选A

块级元素block element

行内元素 inline element

行内块元素 inline-block element

五、下面使用Animate-timing-function定义的贝塞尔曲线，哪个是先快后慢的（ ）

A、animation-timing-function :
cubic-bezier(.22,1.23,.97,.89)

B、animation-timing-function :
cubic-bezier(1.23,..22,97,.89)

C、animation-timing-function :
cubic-bezier(1.23,.97,.89,.22)

D、animation-timing-function ：
cubic-bezier(.22,.97,.89,1.23)

解析：

选A

cubic-bezier即为贝兹曲线中的绘制方法

有四点，分别为P0-3，其中P0、P3是默认的点，对应了[0,0], [1,1]。

而剩下的P一、P2两点则是咱们经过cubic-bezier()自定义的。

cubic-bezier(x1, y1, x2, y2) 为自定义，x1,x2,y1,y2的值范围在[0, 1]。

六、放在HTML里的哪一部分JavaScripts会在页面加载的时候被执行？（ ）

A、文件头部位置

B、文件尾

C、<head>标签部分

D、<body>标签部分

解析：

选D

head部分中的JavaScripts会在被调用的时候才执行。

body部分中的JavaScripts会在页面加载的时候被执行。

七、问一份标准的HTML文档有哪几个必须的HTML标签？（ ）

A、<html>

B、<head>

C、<title>

D、<body>

解析：

选A、B、C、D

注意一下题目说的是标准的HTML文档

八、下列说法正确的有：（ ）

A、visibility:hidden;所占据的空间位置仍然存在，仅为视觉上的彻底透明；

B、display:none;不为被隐藏的对象保留其物理空间；

C、visibility:hidden;与display:none;二者没有本质上的区别；

D、visibility:hidden;产生reflow和repaint（回流与重绘）；

解析：

选A、B

visiblity:看不见，摸的着.

display:看不见，摸不着.

display是dom级别的，能够渲染和重绘。

visiblity不是dom级别的，不能重绘，只能渲染

九、请选出全部的置换元素（ ）

A、img

B、input

C、textarea

D、select

解析：

选A、B、C、D

置换元素：浏览器根据元素的标签和属性，来决定元素的具体显示内容

例如：

浏览器会根据<img>标签的src属性的
值来读取图片信息并显示出来，而若是查看html代码，则看不到图片的实际内容；
<input>标签的type属性来决定是显示输入 框，仍是单选按钮等。 
html中 的<img>、<input>、<textarea>、<select>、<object> 都是置换元素
这些元素每每没有实际的内容，便是一个空元素。
置换元素在其显示中生成了框，这也就是有的内联元素可以设置宽高的缘由。

不可替换元素：html 的大多数元素是不可替换元素，即其内容直接表现给用户端（如浏览器）

例如：

<label>label中的内容</label> 标签<label>是一个非置换元素，文字label中的内容”将全被显示。

十、如下哪些动画效果没法经过贝塞尔曲线cubic-bezier实现（ ）

A、linear

B、ease

C、fade-in

D、ease-out

解析：

选C

fade-in和fade-out为淡入淡出效果

十一、下面属于CSS3新增属性的有？（ ）

A、box-shadow

B、text-shadow

C、border-radius

D、rgba

解析：

选A、B、C、D

下边我对CSS3新增属性用法的整理：

一、box-shadow（阴影效果）

二、border-color（为边框设置多种颜色）

三、border-image（图片边框）

四、text-shadow（文本阴影）

五、text-overflow（文本截断）

六、word-wrap（自动换行）

七、border-radius（圆角边框）

八、opacity（透明度）

九、box-sizing（控制盒模型的组成模式）

十、resize（元素缩放）

十一、outline（外边框）

十二、background-size（指定背景图片尺寸）

1三、background-origin（指定背景图片从哪里开始显示）

1四、background-clip（指定背景图片从什么位置开始裁剪）

1五、background（为一个元素指定多个背景）

1六、hsl（经过色调、饱和度、亮度来指定颜色颜色值）

1七、hsla（在hsl的基础上增长透明度设置）

1八、rgba（基于rgb设置颜色，a设置透明度）

十二、input元素的type属性的取值能够是( )

A、image

B、checkbox

C、button

D、select

解析：

选A、B、C

语法：

<input type=”value”>

属性值：

Button：定义可点击按钮(多数状况下，用于经过JavaScript启动脚本)

CheckBox：定义复选框

File：定义输入字段和”浏览”按钮，供文件上传

Hidden：定义隐藏的输入字段

Image：定义图像形式的提交按钮

Password：定义密码字段，该字段中的字符被遮码

Radio：定义单选按钮

Reset：定义重置按钮，重置按钮会清除表单中的全部数据

Submit：定义提交按钮，提交按钮会把表单数据发送到服务器

Text：定义单行输入字段，用户可在其中输入文本，默认宽度为20个字符

1三、新窗口打开网页，用到如下哪一个值（ ）

A、_self

B、_blank

C、_top

D、_parent

解析：

选B 
在html中经过<a>标签打开一个连接，经过 <a> 标签的 target

属性规定在何处打开连接文档。

若是在标签<a>中写入target属性，则浏览器会根据target的属性值去打开与其命名或名称相符的 框架<frame>或者窗口.

在target中还存在四个保留的属性值以下，

_black：在新窗口中打开被连接文档

_self：默认。在相同的框架中打开被连接文档

_ parent：在父框架中打开被连接文档

_top：在整个窗口中打开被连接文档

framename：在指定框架中打开被连接文档

1四、如下所有属于块级标签的是？（ ）

A、<div><p><input><span><img>

B、<div><h1><p><img><dl>

C、<span><h1><p><img><dl>

D、<div><p><form><ul><h1>

解析：

选D

在CSS中，html中的标签元素大致被分为三种不一样的类型：

块状元素、内联元素（又叫行内元素）和内联块状元素

常见的块状元素有：

<div>、<p>、<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote>、<form>

常见的内联元素有：

<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

常见的内联块状元素有：

<img>、<input>

1五、元素的alt和title有什么异同，选出正确的说法？（ ）

A、不一样的浏览器，表现同样

B、alt和title同时设置的时候，alt做为图片的替代文字出现，title是图片的解释文字

C、alt和title同时设置的时候，title做为图片的替代文字出现，alt是图片的解释文字

D、以上说法都不正确

解析：

选B

alt是html标签的属性，而title既是html标签，又是html属性。

title标签这个不用多说，网页的标题就是写在

<title></title>

这对标签以内的。

title做为属性时，用来为元素提供额外说明信息。

例如，给超连接标签a添加了title属性
，把鼠标移动到该连接上面是，就会显示title的内容，以达到补充说明或者提示的效果。

而alt属性则是用来指定替换文字，只能用在img、area和input元素中（包括applet元素），用于网页中图片没法正常显示时给用户提供文字说明使其了解图像信息

1六、下列说法错误的是( )

A、设置display:none后的元素只会致使浏览器的重排而不会重绘

B、设置visibility:hidde后的元素只会致使浏览器重绘而不会重排

C、设置元素opacity:0以后，也能够触发点击事件

D、visibility:hidden的元素没法触发其点击事件

解析：

选A

设置display:none后的元素会致使浏览器的重排重绘

1七、下列选项中，不属于CSS3样式选择器的是（ ）

A、empty选择器

B、root 选择器

C、target选择器

D、ID选择器

解析：

选D

ID选择器在css1中就定义了

1八、超连接访问事后hover样式就不出现了，被点击访问过的超连接样式再也不具备hover和active了，解决方法是改变CSS属性的排列顺序？（ ）

A、a:link {} a:visited {} a:hover {} a:active {}

B、a:visited {} a:link {} a:hover {} a:active {}

C、a:active {} a:link {} a:hover {} a:visited {}

D、a:link {} a:active {} a:hover {} a:visited {}

解析：

选A

a:link; a:visited; a:hover; a:active;

a:hover必须放在a:link和a:visited以后；

a:active必须放在a:hover以后。

1九、关于position定位，下列说法错误的是（ ）

A、fixed元素，可定位于相对于浏览器窗口的指定坐标，它始终是以 body 为依据

B、relative元素以它原来的位置为基准偏移，在其移动后，原来的位置再也不占据空间

C、absolute 的元素，若是它的 父容器设置了 position 属性，而且 position 的属性值为 absolute 或者 relative，那么就会依据父容器进行偏移

D、fixed 属性的元素在标准流中不占位置

解析：

选B

absolute：

生成绝对定位的元素，相对于static定位之外的第一个父元素进行定位，元素的位置经过”left”、”top”、”right”、以及”bottom”属性进行规定

fixed：

生成绝对定位的元素，相对于浏览器窗口进行定位，元素的位置经过”left”、”top”、”right”以及”bottom”属性进行规定

relative：

生成相对定位的元素，相对于其正常位置进行定位，所以，”left：20”会向元素的LEFT位置添加20像素

static：

默认值，没有定位，元素出现正常的流中（忽略top，bottom，left，right或者z-index声明）

inherit：

规定应该从父元素继承position属性的值

20、css中哪些属性能够继承（ ）

A、font-size

B、color

C、font-family

D、border

解析：

选A、B、C

margin padding border display 不能够继承

2一、下列哪些是浏览器支持的锚伪类：（ ）

A、a:link

B、a:disabled

C、a:hover

D、a:active

解析：

选A、C、D

在支持 css 的浏览器中，连接的不一样状态均可以不一样的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态和鼠标悬停状态。用来表示连接不一样状态的伪类就是锚伪类

a:link {color: green;} / 未访问的连接 /

a:visited {color: blue;} / 已访问的连接 /

a:hover {color:orange;} / 鼠标移动到连接上 /

a:active {color: yellow;} / 选定的连接 /

2二、关于CSS选择器，如下说法正确的是：（ ）

A、每条选择器最多只能出现一个伪元素

B、每条选择器最多只能出现一个伪类

C、:nth-child(an+b)中n的取值从0开始

D、A+B匹配A以后全部符合B规则的元素

解析：

选A、C

C选项：

nth-child(an+b)在下标计算表达式an+b中：

a,b是系数能够是任意整数；

n就是个字面量“n”，表示是递增变量，而且取值是从0开始的整数。

D选项：

B是A的下一个兄弟节点（AB有相同的父结点，而且B紧跟在A的后面）

2三、列表分为两类，一是无序列表，一是有序列表，如下哪一个是无序列表？（ ）

A、<UL>

B、<OL>

C、<DIR>

D、<DL>

解析：

选A

Ul无序列表

OL有序列表

2四、浮动会致使页面的非正常显示，如下几种清除浮动的方法，哪一个是不推荐使用的？（ ）

A、在浮动元素末尾添加一个空的标签例如 <div style=”clear:both”></div>

B、经过设置父元素overflow值为hidden；

C、父元素也设置浮动

D、给父元素添加clearfix类

解析：

选C

这四种方法均可以清除，最经常使用的是DA方法；

B方法的话，若是子元素中有使用了绝对定位，在页面上显示是在父元素外面，通常就无法使用B方法了。

大型项目通常会多层嵌套，若是采用给父元素设置浮动的方法，那么父元素的父元素颇有可能也要设置浮动，页面布局很容易乱掉

2五、下列关于web页面级优化描述最正确的是（ ）

A、减小HTTP请求的次数

B、进行资源合拼和压缩

C、Inline images

D、将外部脚本置于低端

E、减小没必要要的HTTP跳转

F、以上描述都对

解析：

选F

一、减小HTTP请求的次数。

http协议是无状态的应用层协议，每次http请求都须要创建通讯链路、进行数据传输，而在服务器端每一个http都须要启动独立的线程去处理，这些通讯和服务的开销都很昂贵。因此减小http请求的数目可有效提升访问性能，A正确。

二、进行资源合拼和压缩。

合并CSS、合并javascript、合并图片，将浏览器一次访问须要的javascript和CSS合并成一个文件，这样浏览器就只须要一次请求。在服务器端对文件进行压缩，在浏览器端对文件解压缩，可有效减小通讯传输的数据量，B正确。

三、Inline images，使用data: URL

scheme的方式将图片嵌入到页面或CSS中嵌入页面，由于直接嵌入页面增大了页面的体积，并且没法利用浏览器缓存。因此使用在CSS中的图片则更为理想一些，C正确。

四、将外部脚本置于低端

浏览器在加载javascript后当即执行，有可能会阻塞整个页面，形成页面显示缓慢，所以javascript最好放在页面最下面，D正确。

五、减小没必要要的HTTP跳转

对于以目录形式访问的HTTP连接，不少人都会忽略连接最后是否带’/’，假如你的服务器对此是区别对待的话，那么你也须要注意，这其中极可能隐藏了301跳转，增长了多余请求，E正确

2六、网页开发中，通常需判断浏览器类型，需经过userAgent中获取浏览器内核来判断，下列说法错误的是？（ ）

A、一直到IE9，都是Trident内核

B、firefox是Gecko内核

C、chrome是webkit内核

D、IE是目前最快的浏览器

解析：

选D

-moz表明firefox浏览器私有属性

-ms表明IE浏览器私有属性

-webkit表明chrome、safari私有属性 IE使用的是Trident内核，Firefox

使用的是Gecko内核。目前使用IE内核的浏览器还有搜狗，遨游，360等等。

2七、关于浮动元素，下面说法错误的是（ ）

A、若是有多个浮动元素，浮动元素会按顺序排下来而不会发生重叠的现象

B、浮动元素会尽量地向顶端对齐、向左或向右对齐

C、若是有非浮动元素和浮动元素同时存在，而且非浮动元素在前，则浮动元素不会高于非浮动元素

D、行内元素与浮动元素发生重叠，其边框，背景和内容都会显示在浮动元素之下

解析：

选D

行内元素与浮动元素发生重叠，边框、背景、内容都会显示在浮动元素之上

块级元素与浮动元素发生重叠，边框、背景会显示在浮动元素之下，内容会显示在浮动元素之上

2八、要将下面代码中超连接文本呈现为红色，不可使用的样式表是（ ）

<div><a href="http://www.w3.org/">**连接到W3C**</a></div>
A、a:link{color:red}

B、div a:link{color:red}

C、div&gt;a:link{color:red}

D、div:first-child{color:red}

解析：

选D 
div：first-child

表示选择属于父元素的第一个子元素的每一个<div>元素

2九、下列哪一个不属于id与class之间的区别（ ）

A、id在文档中只能使用一次，而class能够屡次使用

B、id比class具备更高的样式优先级

C、一个元素只能有一个id属性值，却能够拥有多个class属性值

D、在class中能够定义:hover伪类，在id中不能定义

解析：

选D

在样式表定义一个样式的时候，能够定义id也能够定义class。

一、在CSS文件里书写时，ID加前缀"#"；CLASS用"."

二、id一个页面只可使用一次；class能够屡次引用。

三、ID是一个标签，用于区分不一样的结构和内容；class是一个样式，能够套在任何结构和内容上

四、从概念上说就是不同的：id是先找到结构/内容，再给它定义样式；class是先定义好一种样式，再套给多个结构/内容。

30、把鼠标移到按钮并点击时，会产生一串什么样的事件（ ）

A、active hover focus

B、foucs hover active

C、hover active foucus

D、hover focus active

解析：

选D

触发顺序为 link-->visited--->hover--->active

3一、下列哪些是HTML5相关的框架或类库：( )

A、spring-core

B、RactiveJS

C、Dubbo

D、Bootstrap

E、AngularJS

F、Hibernate

解析：

选B、D、E

Spring框架是一个开放源代码的J2EE应用程序框架

Dubbo是一款高性能、轻量级的开源Java RPC框架

Hibernate是一个开放源代码的对象关系映射框架

3二、css中clear的做用是什么？（ ）

A、清除该元素全部样式

B、清除该元素父元素的全部样式

C、指明该元素周围不可出现浮动元素

D、指明该元素的父元素周围不可出现浮动元素

解析：

选C

clear : none | left | right | both.

对于CSS的清除浮动(clear)，

这个规则只能影响使用清除的元素自己，不能影响其余元素

3三、css 中可继承的属性有哪些（ ）

A、height

B、font-size

C、border

D、width

E、color

解析：

选B、E

全部元素可继承：visibility和cursor。

内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction。

终端块状元素可继承：text-indent和text-align。

列表元素可继承：list-style、list-style-type、list-style-position、list-style-image

JavaScript

一、JavaScript中window对象的子对象不包含如下哪一个对象？（ ）

A. document   B. self   C. history   D. message

解析：

选D

window的主对象主要有以下几个：

document   frames   history  location   navigator   screen

window、self、window.self三者是等价的

二、将一个整数序列整理为升序，两趟处理后变为10,12,21,9,7,3,4,25，则采用的排序算法可能Z:（ ）

A、插入排序

B、快速排序

C、选择排序

D、堆排序

解析：

选C

第一层循环：依次遍历序列当中的每个元素

第二层循环：将遍历获得的当前元素依次与余下的元素进行比较

符合最小元素的条件，则交换

选择排序的基本思想：比较+交换

三、下边这代码输出的结果是：( )

function showCase(value) {
    switch(value) {
    case 'A':
        console.log('Case A');
        break;
    case 'B':
        console.log('Case B');
        break;
    case undefined:
        console.log('undefined');
        break;
    default:
        console.log('Do not know!');
    }
}
showCase(new String('A'));

A、Case A

B、Case B

C、undefined

D、Do not know!

解析：

选D

此题考查的是关于new string();其中new是一个实例对象,要匹配的也是object,
因此输出结果为Do not know

四、下边这代码输出的结果是（ ）

var two   = 0.2
var one   = 0.1
var eight = 0.8
var six   = 0.6
console.log([two - one == one, eight - six == two]);

A、[true, true]

B、[false, false]

C、[true, false]

D、other

解析：

选C

这题考的是浮点数计算时精度丢失问题

五、如下代码的执行结果是什么（ ）

var string = 'string';  
var number = 0;       
var bool = true;     
console.log(number || string);      
console.log(number && string); 
console.log(bool || number);
console.log(bool && number);

A. ‘string’, 0, true,0

B. ‘string’, true,0, 0

C. ‘string’, ‘string’,true, 0

D. ‘string’, 0, true,true

解析：

选A 
var string = 'string';               对象为true
var number = 0;                      非零数字为true
var bool = true;                     非空字符串为true
console.log(number || string);         其余为false
console.log(number && string);          
console.log(bool || number);
console.log(bool && number);

六、下面能够匹配的正则表达式是（ ）

<img src=”http://image.163.com”></img>
A、<img src=”[^”]*”></img>

B、<img src=”[.”]*”></img>

C、<img src=”[^”]*></img>

D、<img src=”[.”]*></img>

<font color=#F4A460>解析：</font>

选A 
var a='<IMG src="http://image.163.com">'
          var b=/<IMGsrc="[^"]*">/gi          
           var s=a.match(b)                           
        for(var i= 0;i<s.length;i++)             
            {                                         
                      alert(s[i]);
                    alert(RegExp.$1)
               }

七、["1", "2", "3"].map(parseInt) 返回的结果为（ ）

A：["1", "2", "3"]

B：[1, 2, 3]

C：[0, 1, 2]

D：other

解析：

选D

这题的答案是：[1,NaN,NaN]

该题用到了map与parseInt；parseInt() 函数的语法是parseInt(string, radix)；

string 必需。要被解析的字符串。

radix可选。表示要解析的数字的基数。该值介于 2 ~ 36 之间。

若是省略该参数或其值为 0，则数字将以 10 为基础来解析。若是它以 “0x” 或 “0X” 开头，将以 16 为基数。

若是该参数小于 2 或者大于 36，则 parseInt() 将返回 NaN
实际上map里的callback函数接受的是三个参数 分别为元素 下标和数组
回调函数的语法以下所示：
function callbackfn(value, index, array1)
可以使用最多三个参数来声明回调函数。

八、[typeof null, null instanceof Object]这些类型的结果是（ ）

A: ["object", false]

B: [null, false]

C: ["object", true]

D: other

解析：

选A

这题考察的是typeof运算符和instanceof运算符

typeof运算符，一些基础类型的结果是：

Undefined "undefined"

Null "object"

Boolean "boolean"

Number "number"

String "string"

Any other object "object"

Array "object"

Null instanceof任何类型都是false

九、下边代码输出的结果是（ ）

var val = 'smtg';
console.log('Value is ' + (val === 'smtg') ? 'Something' : 'Nothing');

A: Value is Something

B: Value is Nothing

C: NaN

D: other

解析：

选D

这题考的是js中的运算符优先级，

这里’+’运算符的优先级要高于’?’

因此val === ‘smtg’实际上就是true

因此结果为’Something’

十、下边代码输出的结果是（ ）

var name = 'World!';
(function () {
    if (typeof name === 'undefined') {
        var name = 'Jack';
        console.log('Goodbye ' + name);
    } else {
        console.log('Hello ' + name);
    }
})();

A: Goodbye Jack

B: Hello Jack

C: Hello undefined

D: Hello World

解析：

选A

这题考的是js做用域中变量的提高，

js的做用于中使用var定义变量都会被提高到全部代码的最前面，

因此var name目前是undefined,

题目的typeof name === ‘undefined’的结果为true时，就会输出’Goodbye Jack’

十一、var arr = [];typeof arr 的结果是（ ）

A、array

B、function

C、object

D、undefined

解析：

选C

5种简单数据类型（也称基本数据类型）：

Undefined、Null、Boolean、Number、String

1种复杂数据类型：Object（基本上除了上述5种，其他都是Object）

十二、如下代码执行后，console 的输出是（ ）

function Foo(){
console.log(this.location);
}
Foo();

A、当前窗口的 Location 对象

B、undefined

C、null

D、TypeError

解析：

选A

这题考的是this的用法

'use strict'条件下，会报TypeError

无'use strict'下，this指向window

1三、下列事件哪一个不是由鼠标触发的事件（）

A、click

B、contextmenu

C、mouseout

D、keydown

解析：

选D

常见的事件：

1. 点击事件：
        1. onclick：单击事件
        2. ondblclick：双击事件

    2. 焦点事件
        1. onblur：失去焦点
        2. onfocus:元素得到焦点。

    3. 加载事件：
        1. onload：一张页面或一幅图像完成加载。

    4. 鼠标事件：
        1. onmousedown    鼠标按钮被按下。
        2. onmouseup    鼠标按键被松开。
        3. onmousemove    鼠标被移动。
        4. onmouseover    鼠标移到某元素之上。
        5. onmouseout    鼠标从某元素移开。
    5. 键盘事件：
        1. onkeydown    某个键盘按键被按下。    
        2. onkeyup        某个键盘按键被松开。
        3. onkeypress    某个键盘按键被按下并松开。

    6. 选择和改变
        1. onchange    域的内容被改变。
        2. onselect    文本被选中。

    7. 表单事件：
        1. onsubmit    确认按钮被点击。
        2. onreset    重置按钮被点击。

1四、如何遍历下面的 my_data 对象？（ ）

var my_data={a:’Ape’, b:’Banana’, c:’Citronella’};

A、for(var key in my_data) {}

B、foreach(my_data as key=>value) {}

C、for(var i=0;i<my_data.length;i++) {}

D、全不正确

解析：

选A

for in遍历对象所拥有的属性(可枚举的)

因为对象和数组不一样，不能用下标来访问，只能用for in遍历

1五、如何判断一个js对象是不是Array,arr为要判断的对象，其中最准确的方法是？（ ）

A、typeof(arr)

B、arr instanceof Array

C、arr.toString==='[object Array]';

D、Object.prototype.toString.call(arr) === '[object Array]';

解析：

选D

A选项中的typeof(arr) 返回的是 Object

instanceof 在跨 frame 对象构建的场景下会失效

arr.toString 没有这种用法，正确的用法是 arr.toString() 返回的是数组的内容

1六、在不少时候，咱们须要给网页中的一些元素不停的切换样式，那么要怎样实现给元素删除一个样式的同时，添加另一个样式（ )

A、

$('#ele').removeClass('className');
$('#ele').addClass('ClassName');

B、

$('us').removeClass('className');
$('us').addClass('ClassName');

C、

$('.us').removeClass('className');
$('.us').addClass('ClassName');

D、

$('us').remove('className');
$('us').add('ClassName');

解析：

选A

B选项错

选项使用元素选择器，可是 HTML 中没有 us 标签

C选项错

选项使用类选择器，可是删除了类样式后，如何经过类选择器给元素添加样式

D选项错

add() 方法：把元素添加到已存在的元素组合中。

remove() 方法：移除被选元素，包括全部的文本和子节点。

1七、下列代码hasOwnProperty的做用是？（ ）

var obj={}
……..
obj.hasOwnProperty("val")

A、判断obj对象是否具备val属性

B、判断obj对象是否具备val的值

C、判断obj的原型对象是否具备val的属性

D、判断obj的原型对象是否具备val的值

解析：

选A

hasOwnProperty：

是用来判断一个对象是否有你给出名称的属性或对象

isPrototypeOf :

是用来判断要检查其原型链的对象是否存在于指定对象实例中，是则返回true，不然返回false。

1八、下列不属于javascript内置对象的是（ ）

A、Math

B、Date

C、RegExp

D、Window

E、Error

解析：

选D

js中的内部对象包括

Array、Boolean、Date、Function、Global、Math、Number、Object、RegExp、String以及各类错误类对象，
包括Error、EvalError、RangeError、ReferenceError、SyntaxError和TypeError。

1九、javascirpt中的数字在计算机内存储为多少Byte（ ）

A、2 Byte

B、4Byte

C、8Byte

D、16Byte

解析：

选C

"JavaScript内部，全部数字都是以64位浮点数形式储存，即便整数也是如此。"

8 Byte = 64bit ;

8个字节，64位

20、如下运行结果（ ）

for(var i = 0; i < 10; i++) {
    setTimeout(function() {
        console.log(i);
    }, 1000);
}

A、0--9

B、10个10

C、10个9

D、无限循环

解析：

选B

setTimeout中的闭包函数是每1s执行一次

因为for循环的执行速度远小于1s，

因此当开始执行闭包函数的时候for循环已经结束了（i=10），

以后闭包函数执行十次（由于循环了10次），因此打印了10个10。

2一、若需给子scope发送消息，需使用哪一个方法（ ）

A、$emit()

B、$broadcast()

C、$on()

D、$send()

解析：

选B

$broadcast是向下传播事件

2二、函数的调用方式有哪些：（ ）

A、直接调用

B、做为对象方法调用

C、做为构造函数调用

D、经过call和apply方法调用

解析：

选A、B、C、D

cmd-markdown-logo

2三、下拉菜单中，用户更改表单元素Select中的值时，就会调用（ ）事件处理程序

A、onMouseOver

B、onFocus

C、onChange

D、onClick

解析：

选C

切换下拉菜单更改状态用onchange

A选项：鼠标事件

B选项：焦点事件通常是input

C选项：改变状态

D选项：点击事件

2四、在ES6规范中，如下类型哪些属于基本数据类型（ ）

A、String

B、Null

C、Undefined

D、Symbol

解析：

选A、B、C、D

基本数据类型：

Number,String, Null, Undefined,  Boolean，Symbol（es6新增）

引用数据类型：

Object，Function

2五、语句var arr=[a,b,c,d];执行后，数组arr中每项都是一个整数，下面获得其中最大整数语句正确的是哪几项？（ ）

A、Math.max(arr)

B、Math.max(arr[0], arr[1], arr[2], arr[3])

C、Math.max.call(Math, arr[0], arr[1], arr[2], arr[3])

D、Math.max.apply(Math,arr)

解析：

选B、C、D

由于传入的数组，因此A选项错误

C选项，Function.call()能够传入任意多个参数，因此C正确

D选项，Function.apply()第二个参数以数组形式传递，因此D正确

2六、如下结果里，返回true的是（ ）

A、!![]

B、1===’1’

C、null===undefined

D、!!’’

解析：

选A

A选项，因为数组属于对象类型，因此空的数组转换成布尔型是true，前置！！，两次取反，返回true。A正确。

B选项，“===”同等于（包含数据类型），左右两端数据类型不一样，所以返回false。

C选项，同上，因为左右两端数据类型不一样，返回false。

D选项，字符的编码值为0的字符，所以返回false。

2七、JavaScript实现继承的方式，不正确的是( )

A、原型链继承

B、构造函数继承

C、组合继承

D、关联继承

解析：

选D

JavaScript实现继承共6种方式：

原型链继承、借用构造函数继承、组合继承、原型式继承、寄生式继承、寄生组合式继承。

2八、如下代码执行后，console 的输出是（ ）

let x = 10;
let foo = () => {
console.log(x);
let x = 20;
x++;
}
foo();)

A、抛出 ReferenceError

B、10

C、20

D、21

解析：

选A

let不存在变量提高，因此没有事先声明。

let块级做用域，因此不会去访问外部的x。

既不会访问外部，又没有事先声明，输出x便会报错

2九、关于 this 的工做原理，下面 4 种状况的描述哪个是错误的？（ ）

A、在全局范围内，this指向全局对象（浏览器下指window）

B、对象函数调用时，this指向当前对象

C、全局函数调用时，this指向全局函数

D、使用new实例化对象时，this指向新建立的对象

解析：

选C

this有四种状况！

一、当在函数调用的时候指向widow

二、当方法调用的时候指向调用对象

三、当用apply和call上下文调用的时候指向传入的第一个参数

四、构造函数调用指向实例对象

JS中this关键字， 它表明函数运行时，自动生成的一个内部对象，只能在函数内部使用。

全局函数调用时，this指向全局函数； 应该是指向调用全局函数的对象。

30、如下js操做Array的方法中不能添加元素的是：（ ）

A、push

B、pop

C、unshift

D、splice

解析：

选B

数组.pop(): 删除数组的最后一项，该表达式返回最后一项的数据

3一、关于javascript，如下选项描述错误的是（ ）

A、在原型上扩展的可枚举方法，会被for in循环出来

B、使用object.defineProperty可向对象添加或者修改属性

C、经过hasOwnProperty可判断一个对象以及其原型链上是否具备指定名称的属性

D、原型链是JS实现继承的一种模型

E、每一个对象都有prototype属性，返回对象类型原型的引用

F、For循环是按顺序的，for in 循环是不必定按顺序的

解析：

选C

hasOwnProperty方法是用来检测给定的属性是否在当前对象的实例中。

3二、关于ES6的使用如下描述错误的是？（ ）

A、

const a = 1;

const b = 2;

const map = {a, b};

B、

enum TYPE {
OK,
YES
}

C、

class A {
constructor (a) {
this.a = a;
}
}
class AA extends A {
constructor (a, b) {
super(a);
this.b = b;
}
toString () {
return this.a + '' + this.b;
}
}

D、

function* greet(){

yield
"How";

yield
"are";

yield
"you";

}

var greeter = greet();

console.log(greeter.next().value);

console.log(greeter.next().value);

console.log(greeter.next().value);

解析：

选B

es6中将构造方法的function换成了class，

用于与普通函数区分，其中的属性都放在constructor中，

方法在原型中，子类继承采用extends关键字;对于es6中枚举的使用，

只能是以类的方式定义枚举类，不能直接使用enum关键字

3三、获取 input 节点的错误方法是( )

<form class="file" name="upload">
<input id="file" name="file" />
</form>

A、document.querySelectorAll('file')[0]

B、document.getElementById('file')[0]

C、document.getElementByTagName('file')[0]

D、document.getElementById('file')

解析：

选A、B、C、D

A选项：应该是 document.querySelectorAll('#file')[0]

B选项：应该是 document.getElementById('file')

C选项：应该是 document.getElementsByTagName('input')[0]

D选项：input标签中就没有class属性

3四、下列哪些会返回false（ ）

A、null

B、undefined

C、0

D、‘0'

解析：

选A、B、C

cmd-markdown-logo

3五、如下哪些选项能够将集合A转化为数组（ ）

A、Array.form(A)

B、[].slice.apply(A)

C、[…A]

D、[].map.call(A, o => o)

解析：

选A、B、C、D

A选项：能够把对象转换成真正的数组

B选项：slice( )方法可从已有的数组中返回选定的元素

C选项：展开运算符，把A集合的元素展开后，用数组[]承载，返回新的数组

D选项：map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值

3六、js数组的方法中，哪些方法不能改变自身数组（ ）

A、splice

B、concat

C、sort

D、pop

解析：

选B

splice删除数据会改变数组

concat链接数组可是不改变院数组

sort排序会改变数组

pop出栈返回最后一个最后一个元素，改变数组

3七、下面有关JavaScript中 call和apply的描述，错误的是( )

A、call与apply都属于Function.prototype的一个方法，因此每一个function实例都有call、apply属性

B、apply传入的是一个参数数组，也就是将多个参数组合成为一个数组传入

C、call传入的则是直接的参数列表。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。

D、二者传递的参数不一样，call函数第一个参数都是要传入给当前对象的对象，apply不是

解析：

选D

call, apply方法它们除了第一个参数,即执行时上下文对象相同外,

call方法的其它参数将依次传递给借用的方法做参数,而apply就两个参数,

第二个参数为一个数组传递

3八、白屏时间first paint和可交互时间dom ready的关系是（ ）

A、先触发first paint ，后触发dom ready

B、先触发dom ready，后触发first paint

C、一块儿触发

D、不要紧

解析：

选A

白屏时间（first Paint Time）——用户从打开页面开始到页面开始有东西呈现为止

首屏时间——用户浏览器首屏内全部内容都呈现出来所花费的时间

用户可操做时间(dom Interactive)——用户能够进行正常的点击、输入等操做，默承认以统计domready时间，由于一般会在这时候绑定事件操做

总下载时间——页面全部资源都加载完成并呈现出来所花的时间，即页面 onload 的时间

3九、最后一句alert的输出结果是( )

var msg='hello'; 
for (var i=0; i<10; i++)
 { 
   var msg='hello'+i*2+i; 
 }
 alert(msg);

A、hello

B、hello27

C、hello30

D、hello189

解析：

选D

这里只是for循环不是函数，

所以for内部定义的msg与for外部定义的msg为在同一块做用域，为同一个变量。

输出hello189

hello+9*2+9

40、要在10秒后调用checkState，下列哪一个是正确的（ ）

A、window.setTimeout(checkState, 10);

B、window.setTimeout(checkState(), 10);

C、window.setTimeout(checkState, 10000);

D、window.setTimeout(checkState(), 10000);

解析：

选C

checkState加了( )至关于函数表达式，会当即执行，执行的结果做为返回值传递给settimeout

10 s 应该为 10000

因此选C

4一、下列代码获得的结果是（ ）

console.log(([])?true:false); 
console.log(([]==false?true:false)); 
console.log(({}==false)?true:false)

A、false true true

B、true true false

C、true false true

D、true true true

解析：

选B 
Boolean([]); //true
Number([]); //0
Number({}); // NaN
Number(false); //0
console.log(([])?true:fasle);// => console.log((true)?true:false);
console.log([]==false?true:false); // => console.log(0==0?true:false);
console.log(({}==false)?true:false); // => console.log((NaN==0)?true:false);

第一个

([])布尔转换成true

第二个

==相等比较时，容许类型转换

其余类型值和布尔值==比较时，先将布尔值强制转换为对应数字，再进行比较

[]==false

[]==0

[]和数字相等比较时转数字0

0==0

true

第三个

{}==false

{}==0

NaN==0

false

4二、JavaScript定义var a="40",var b=7,则执行a%b会获得( )

A、null

B、undefined

C、5

D、"5"

解析：

选C

运算中，+号，数字隐式转换成字符串

其他的运算符号是字符串隐式转换成数字

4三、下列关于闭包描述正确的是？（ ）

A、(function(){})()理论上是一个闭包

B、闭包不耗内存，能够随意使用

C、闭包内变量执行后不会被清除

D、闭包不知足链式做用域结构

解析：

选A、C

逻辑上当即执行函数能够理解为：声明闭包函数-执行-释放内存

闭包内变量要到整个闭包被清除的时候才会清除

4四、在ECMAScript6 中,promise的状态有（ ）

A、Pending

B、Pause

C、Resolved

D、Rejected

解析：

选A、C、D

Promise 对象表明一个异步操做，有3种状态：

Pending(进行中)、Resolved(已完成，又称Fulfilled)和Rejected(已完成)’

4五、下面有关浏览器中使用js跨域获取数据的描述，说法错误的是（ ）

A、使用window.name来进行跨域

B、域名、端口相同，协议不一样，属于相同的域

C、js可使用jsonp进行跨域

D、经过修改document.domain来跨子域

解析：

选B

只要 协议、域名、端口有任何一个不一样, 都被看成是不一样的域

4六、下面关于DNS说法正确的是（ ）

A、DNS协议端口号为53

B、DNS的做用是域名和IP地址的相互映射

C、DNS协议大多数运行在UDP协议之上

D、DNS的默认缓存时间为1小时

解析：

选A、C

A选项：DNS协议默认端口号是53

B选项：DNS就是将域名翻译成IP地址。

C选项：主要用UDP，可是当请求字节过长超过512字节时用TCP协议，将其分割成多个片断传输

D：操做系统的DNS缓存：windows DNS缓存的默认值是 MaxCacheTTL，它的默认值是86400s，也就是一天。macOS 严格遵循DNS协议中的TTL。
游览器的DNS缓存：chrome对每一个域名会默认缓存60s；IE将DNS缓存30min；Firefox默认缓存时间只有1分钟；Safari约为10S。

4七、下面运行结果正确的是（ ）

var a = {}, b = Object.prototype;
[a.prototype === b, Object.getPrototypeOf(a) === b]

A、other

B、[true, true]

C、[false, false]

D、[false, true]

解析：

选D

这题考的是__proto__和prototype的区别

Object其实是一个构造函数（typeof Object的结果为"function"）

使用字面量建立对象和new Object建立对象是同样的，

因此a.__proto__也就是Object.prototype，

而Object.getPrototypeOf(a)与a.__proto__是同样的，因此第二个结果为true

而实例对象是没有prototype属性的，只有函数才有

因此a.prototype实际上是undefined，第一个结果为false

4八、下面运行结果正确的是（ ）

var a = /678/,
    b = /678/;
a == b
a === b

A、other

B、true，true

C、true、false

D、false、false

解析：

选D

JavaScript中的正则表达式依旧是对象，使用typeof运算符就能得出结果：object

运算符左右两边都是对象时，比较他们是否指向同一个对象

最后

但愿看到文章的同窗都有收获！

文章要是有不对的地方还望指正！

最后祝你们都愈来愈优秀！

欢迎你们加入，一块儿学习前端，共同进步！
cmd-markdown-logo
cmd-markdown-logo

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程