WEB前端面试JavaScript试题及答案1-20

1.[单选题] 有以下 ES6 代码

function * gen() {
 yield 1;
 yield 2;
 yield 3;
}

下面选项描述正确的是哪个？
A.gen()执行后返回 2
B.gen()执行后返回 undefined
C.gen()执行后返回一个 Generator 对象
D.gen()执行后返回 1

--------------------------------------------------------------------------------------

答案：C

提示：这是 ES6 的新 feature， function 后面带 * 的叫做 generator 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 选项错误，因为函数 Math.max(x);的参数是 Number 类型，可以是小数，整数，正数，负数或者是0.如果不是上面所述类型就会返回 NaN。

3.[问答题] 写一个 traverse 函数，输出所有页面宽度和高度大于 50 像素的节点。

--------------------------------------------------------------------------------------

function traverse() { 
 var arr = []; 
 var elements = []; 
 if (document.all) { 
 elements = document.all; 
 } else { 
 elements = document.getElementsByTagName("*"); 
 } 
 //console.log(elements.length);
 for (var i = 0; i < elements.length; i++) { 
 var ele = elements[i]; 
 //console.log(ele.tagName);
 
 //width 返回的是字符串 offsetWidth 返回的是带边框的 Number 型的数字
 var width = parseFloat(ele.style.width) || ele.offsetWidth; 
 //console.log(width); 
 var height = parseFloat(ele.style.height) || ele.offsetHeight; 
 //console.log(height); 
 if (width > 50 && height > 50) { 
 arr.push(elements[i].tagName); 
 } 
 } 
 return arr; 
 } 
 window.onload=function() //注意 onload 的使用方式
 {
 console.log(traverse());
 console.log("a");
 console.log('a');
 }

4.[问答题] 请写一个表格以及对应的 CSS，使表格奇数行为白色背景，偶数行为灰色背景，鼠标移上去时为黄色背景。

<table class="table">
 <tr><td>第一行</td></tr>
 <tr><td>第二行</td></tr>
 <tr><td>第三行</td></tr>
 <tr><td>第四行</td></tr>
</table>
<style>
 .table tr:nth-child(odd){
 background-color:white;
 }
 .table tr:nth-child(even){
 background-color:gray;
 }
 .table tr:hover{
 background-color:yellow;
 }
</style>

5.[问答题] 写一个求和的函数 sum，达到下面的效果

// Should equal 15
sum(1, 2, 3, 4, 5);
// Should equal 0
sum(5, null, -5);
// Should equal 10
sum('1.0', false, 1, true, 1, 'A', 1, 'B', 1, 'C', 1, 'D', 1, 'E', 1, 'F', 1, 'G', 1);
// Should equal 0.3, not 0.30000000000000004
sum(0.1, 0.2);

--------------------------------------------------------------------------------------

function sum() {
 var nResult = 0;
 for (var i = 0, l = arguments.length; i < l; i++) {
 nResult += window.parseFloat(arguments[i]) || 0;
 }
 return nResult.toFixed(3) * 1000 / 1000;
//数字舍入为有3位小数的数字
}

6.[填空题] 删除给定数组中的第二项和第三项，并且在得到的新的数组中第二项后面添加一个新的值：

var arr1 = ['a','b','c','d','e']; 
var arr2 = arr1. 1 ( 2 , 3 ,'newvalue')

--------------------------------------------------------------------------------------
答案：splice       1         2

7.[填空题] 在空白处填入适当的代码使输出结果成立：

function showMoney( ) { 
 //在此处写代码
}; 
var personA = new Object; 
var personB = new Object; 
personA.money= "100"; 
personB.money= "150"; 
personA.showMoney= showMoney; 
personB.showMoney= showMoney;

输出结果

personA.showMoney( ); //"100" 
personB.showMoney( ); //"150"

--------------------------------------------------------------------------------------

答案：return this.money;

8.[填空题] 使用 for in 循环数组中的元素会枚举原型链上的所有属性，过滤这些属性的方式是使用 _ 函数

--------------------------------------------------------------------------------------

答案：hasOwnProperty

9.[问答题] 请实现一个 fibonacci 函数，要求其参数和返回值如下所示：

/**
*@desc: fibonacci
*@param: count {Number}
*@return: result {Number} 第 count 个 fibonacci 值，计数从 0 开始
 fibonacci 数列为：[1, 1, 2, 3, 5, 8, 13, 21, 34 „]
 则 getNthFibonacci(0)返回值为 1
 则 getNthFibonacci(4)返回值为 5
*/
function getNthFibonacci(count) {
}

--------------------------------------------------------------------------------------

function getNthFibonacci(count) {
 if (count <= 1) {
 return 1;
 }
 return getNthFibonacci(count - 1) + getNthFibonacci(count - 2);
}

10.[填空题] 输出对象中值大于 2 的 key 的数组

var data = {a: 1, b: 2, c: 3, d: 4}; 
Object.keys(data).filter(function(x) { return ___ ;})

期待输出：[“c”,”d”]

--------------------------------------------------------------------------------------

答案：data[x] > 2

11.[填空题] 填写内容让下面代码支持 a.name = “name1”; b.name = “name2”;

function obj(name){ 
 1 
} 
obj. 2 = "name2"; 
var a = obj("name1"); 
var b = new obj;

--------------------------------------------------------------------------------------

答案：if (name) { this.name = name; } return this;       prototype.name

12.[填空题] 

javascript 语言特性中，有很多方面和我们接触的其他编程语言不太一样，比如说，javascript 语言实现继承机制的核心就是 1 ，而不是 Java 语言那样的类式继承。Javascript 解析引擎在读取一个 Object 的属性的值时，会沿着 2 向上寻找，如果最终没有找到，则该属性值为 3 ； 如果最终找到该属性的值，则返回结果。与这个过程不同的是，当 javascript解析引擎执行“给一个 Object 的某个属性赋值”的时候，如果当前 Object 存在该属性，则改写该属性的值，如果当前的 Object 本身并不存在该属性，则赋值该属性的值 。

--------------------------------------------------------------------------------------

答案：prototype   原型链   undefined

13.[单选题] 下面有关 html 的描述，不推荐的是？

A.在页面顶部添加 doctype 声明；
B.在 </head> „ <body> 中间插入 HTML 代码；
C.避免使用 <font> 标签；
D.使用 <table> 元素展现学生成绩表等数据

--------------------------------------------------------------------------------------

答案：B

14.[单选题] 下面关于 CSS 布局的描述，不正确的是？

A.块级元素实际占用的宽度与它的 width 属性有关；
B.块级元素实际占用的宽度与它的 border 属性有关；
C.块级元素实际占用的宽度与它的 padding 属性有关；
D.块级元素实际占用的宽度与它的 background 属性有关。
--------------------------------------------------------------------------------------
答案：D

15.[单选题] 下列事件哪个不是由鼠标触发的事件（）

A.click
B.contextmenu
C.mouseout
D.keydown
--------------------------------------------------------------------------------------
答案：D

16.[问答题] js 如何获取和设置 cookie？

--------------------------------------------------------------------------------------

// 创建 cookie
function setCookie(name, value, expires, path, domain, secure) {
 var cookieText = encodeURIComponent(name) + '=' + encodeURIComponent(value);
 if (expires instanceof Date) {
 cookieText += '; expires=' + expires;
 }
 if (path) {
 cookieText += '; expires=' + expires;
 }
 if (domain) {
 cookieText += '; domain=' + domain;
 }
 if (secure) {
 cookieText += '; secure';
 }
 document.cookie = cookieText;
}
// 获取 cookie
function getCookie(name) {
 var cookieName = encodeURIComponent(name) + '=';
 var cookieStart = document.cookie.indexOf(cookieName);
 var cookieValue = null;
 if (cookieStart > -1) {
 var cookieEnd = document.cookie.indexOf(';', cookieStart);
 if (cookieEnd == -1) {
 cookieEnd = document.cookie.length;
 }
 cookieValue = decodeURIComponent(document.cookie.substring(cookieStart + 
cookieName.length, cookieEnd));
 }
 return cookieValue;
}
// 删除 cookie
function unsetCookie(name) {
 document.cookie = name + "= ; expires=" + new Date(0);
}

17.[问答题] 请说说 cache-control 是怎么回事？

--------------------------------------------------------------------------------------

参考：
网页的缓存是由 HTTP 消息头中的“Cache-control”来控制的，常见的取值有 private、no-cache、max-age、must-revalidate 等，默认为 private。

Expires 头部字段提供一个日期和时间，响应在该日期和时间后被认为失效。允许客户端在这个时间之前不去检查（发请求），等同 max-age 的效果。但是如果同时存在，则被Cache-Control 的 max-age 覆盖。Expires = "Expires" ":" HTTP-date 
例如：
Expires: Thu, 01 Dec 1994 16:00:00 GMT （必须是 GMT 格式）如果把它设置为-1，则表示立即过期Expires 和 max-age 都可以用来指定文档的过期时间，但是二者有一些细微差别
1.Expires 在 HTTP/1.0 中已经定义，Cache-Control:max-age 在 HTTP/1.1 中才有定义，为了向下兼容，仅使用 max-age 不够。
2. Expires 指定一个绝对的过期时间(GMT 格式),这么做会导致至少 2 个问题：
 2.1 客户端和服务器时间不同步导致 Expires 的配置出现问题。 
 2.2 很容易在配置后忘记具体的过期时间，导致过期来临出现浪涌现象
3. max-age 指定的是从文档被访问后的存活时间，这个时间是个相对值(比如:3600s)，相对的是文档第一次被请求时服务器记录的 Request_time(请求时间) 
4. Expires 指定的时间可以是相对文件的最后访问时间(Atime)或者修改时间(MTime)，而max-age 相对对的是文档的请求时间(Atime) 
5. 如果值为 no-cache,那么每次都会访问服务器。如果值为 max-age，则在过期之前不会重复访问服务器

18.[问答题] 你了解 HTTP 状态码吗，请随便介绍一下。

--------------------------------------------------------------------------------------

参考：
100 Continue 继续，一般在发送 post 请求时，已发送了 http header 之后服务端将返回此信息，表示确认，之后发送具体参数信息
200 OK 正常返回信息
201 Created 请求成功并且服务器创建了新的资源
202 Accepted 服务器已接受请求，但尚未处理
301 Moved Permanently 请求的网页已永久移动到新位置
302 Found 临时性重定向
303 See Other 临时性重定向，且总是使用 GET 请求新的 URI 
304 Not Modified 自从上次请求后，请求的网页未修改过
400 Bad Request 服务器无法理解请求的格式，客户端不应当尝试再次使用相同的内容发起请求
401 Unauthorized 请求未授权
403 Forbidden 禁止访问
404 Not Found 找不到如何与 URI 相匹配的资源
500 Internal Server Error 最常见的服务器端错误
503 Service Unavailable 服务器端暂时无法处理请求（可能是过载或维护）

19.[问答题] js 数组去重。

--------------------------------------------------------------------------------------

参考：
有两个地方需要注意：1、返回值是否是当前引用，2、“重复”的判断条件。

Array.prototype.uniq = function () {
 // 长度只有 1，直接返回当前的拷贝
 if (this.length <= 1) {
 return this.slice(0);
 }
 var aResult = [];
 for (var i = 0, l = this.length; i < l; i++) {
 if (!_fExist(aResult, this[i])) {
 aResult.push(this[i]);
 }
 }
 return aResult;
 // 判断是否重复
 function _fExist(aTmp, o) {
 if (aTmp.length === 0) {
 return false;
 }
 var tmp;
 for (var i = 0, l = aTmp.length; i < l; i++) {
 tmp = aTmp[i];
 if (tmp === o) {
 return true;
 }
 // NaN 需要特殊处理
 if (!o && !tmp && tmp !== undefined && o !== undefined && isNaN(tmp) && 
isNaN(o)) {
 return true;
 }
 }
 return false;
 }
}

20.[问答题] 如何获取 UA？

--------------------------------------------------------------------------------------

function whatBrowser() { 
 document.Browser.Name.value=navigator.appName; 
 document.Browser.Version.value=navigator.appVersion; 
 document.Browser.Code.value=navigator.appCodeName; 
 document.Browser.Agent.value=navigator.userAgent; 
}