JS面试题

最新推荐文章于 2024-05-15 19:04:55 发布

27th

最新推荐文章于 2024-05-15 19:04:55 发布

阅读量870

点赞数

分类专栏：面试题前端

前端同时被 2 个专栏收录

23 篇文章 0 订阅

订阅专栏

面试题

2 篇文章 0 订阅

订阅专栏

1、如何优化自己的代码

2、使用 js 实现这样的效果：在文本域里输入文字时，当按下 enter 键时不换行，而是替换成“{{enter}}”,(只需要考虑在行尾按下 enter 键的情况).

textarea.onkeydown = function(e) {
	// 阻止enter键的默认换行效果
	e.preventDefault();
	if (e.keycode=='enter键码') {
		tetarea.value+='{{enter}}';
	}
}

3、请将url的search部分参数与值转换成一个json对象

我写的：考虑不周到。

function getJsonFromUrlSearch(search) {
	var item = {};
	var x = search.split("&");
	for (var i = 0; i < x.length; i++) {
		var y = x[i].split("=");
		var key = y[0];
		var value = y[1];
		item[key] = value; 
	}
	return item;
}
getJsonFromUrlSearch('a=1&b=2&c=3');

大神写的：考虑到没有&的情况，只有一对参数

//search部分的参数格式：a=1&b=2&c=3
function getJsonFromUrlSearch(search) {
    var item;
    var result = {};
    if (search.indexOf('&') < 0) {
        item = search.split('=');
        result[item[0]] = item[1];
        return result;
    }
    var splitArray = search.split('&');
    for (var i = 0; i < splitArray.length; i++) {
        var obj = splitArray[i];
        item = obj.split('=');
        result[item[0]] = item[1];
    }
    return result;
}
var c = getJsonFromUrlSearch("a=1&b=2&c=3");

4、请简要描述web前端性能需要考虑哪方面，你的优化思路是什么

减少http请求

小图弄成大图

合理的设置缓存

资源合并、压缩

将外部js文件置底

5、简述disabled和readonly的区别

6、写出三个使用this的经典应用

构造函数、原型、对象字面量

7、尽可能详细解释ajax的工作原理

ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用JavaScript来操作DOM而更新页面，这其中最关键的一步是从服务器获得请求数据。

XMLHttpRequest是ajax的核心机制，它是在IE5中首先引入的，是一种支持异步请求的技术，简单地说，也就是JavaScript可以及时向服务器提出请求和处理响应，而不阻塞用户，达到无刷新的效果。

8、为什么扩展JavaScript内置对象不是好的做法？

因为扩展内置对象会影响整个程序中所使用到的该内置对象的原型属性。

9、请解释一下JavaScript的同源策略

域名、协议、端口相同

10、什么是三元表达式？“三元”表示什么意思

x?true:false

因为运算符会涉及3个表达式

11、浏览器标准模式和怪异模式之间的区别是什么？

标准模式：浏览器按W3C标准解析执行代码；

怪异模式：使用浏览器自己的方式解析执行代码，因为不同浏览器解析执行的方式不一样，所以称之怪异模式。

浏览器解析式到底使用标准模式还是怪异模式，与网页中的DTD声明直接相关，DTD声明定义了标准文档的类型（标准模式解析）文档类型，会使浏览器使用相应的方式加载网页并显示，忽略DTD声明，将使网页进入怪异模式。

12、Http协议中，get和post有什么区别？分别适用什么场景？

get传送的数据长度有限制，post没有

get通过url传递，在浏览器地址栏可见，post在报文中传递

场景：

post一般用于表单提交

个体一般用于简单的数据查询，严格要求不是很高的场景。

13、http状态消息200、302、304、403、404、500分别表示什么？

200：请求已成功，请求所希望的响应头或数据体将随此响应返回。

302：请求的资源临时从不同的url响应请求。由于这样的重定向是临时的，客户端应当继续向原有地址发送以后的请求。只有在Cache-Control或Expires中进行了指定的情况下，这个响应才是可缓存的。

304：如果客户端发送了一个带条件的get请求且该请求被允许，而文档的内容（自上次访问以来或者根据请求的条件）并没有改变，则服务器当返回这个状态码。304响应禁止包含消息体，因此始终以消息头后的第一个空行结尾。

403：服务器已经理解请求，但是拒绝请求它。

404：请求失败，请求所希望得到的资源未被在服务器上发现

500：服务器遇到了一个未曾预料的状况，导致了它无法完成对请求的处理。一般来说，这个问题都会在服务器端的源代码出现错误时出现。

14、http协议中，header信息里面，怎么控制页面失败时间（last-modified,cache-control,Expires分别代表什么）

last-modified:文档最后修改时间。客户可以通过If-Modified-Since请求头提供一个日期，该请求将被视为一个条件get，只有改动时间迟于指定时间的文档才会返回，否则返回一个304（Not Modified）状态。Last-Modified也可用setDateHeader方法来设置。

Expires：应该在什么时候认为文档已经过期，从而不再缓冲它？

15、Http协议目前常用的有哪几个？KEEPALIVE从哪个版本开始出现的？

http1.0

http1.1keeplive

16、业界常用的优化web页面加载速度的方法（可以分别从页面元素展现，请求连接，css，js，服务器等方面介绍）

17、列举常用的web页面开发，调试以及优化工具

sublime vscode webstorm hbuilder dw

httpwatch=>ie

ff:firebug

chrome

18、解释什么sql注入，xss漏洞

19、如何判断一个js变量是数组类型

ES5：Array.isArray()

[] instanceof Array

Object.prototype.toString.call([]);//"[object Array]"

20、请列举js数组类型中的常用方法

（1）concat() 连接两个或更多数组，并返回结果

（2）join() 把数组的所有元素放入一个字符串，元素通过指定的分隔符进行分隔。

（3）pop() 删除并返回数组的最后一个元素

（4）push() 想数组的末尾添加一个或更多元素，并返回新的长度

（5）reverse() 颠倒数组中的顺序

（6）shift() 删除并返回数组的第一个元素

（7）slice() 从某个已有的数组返回选定的元素

（8）sort() 对数组的元素进行排序

（9）splice() 删除元素，并向数组添加新元素

（10）toSource() 返回该对象的源代码

（11）toString() 把数组转换为字符串，并返回结果

（12）toLocaleString() 把数组转换成本地数组，并返回结果。

（13）unshift() 向数组的开头添加一个或更多元素

（14）valueOf() 返回数组对象的原始值

21、FF与IE中如何阻止事件冒泡，如何获取事件对象，以及如何获取触发事件的元素

22、列举常用的js框架以及分别适用的领域

jQuery：简化了js的一些操作，并且提供了一些非常好用的API

jQuery UI、jQuery-easyUI，在jQuery的基础上提供一些常用的组件日期下拉框表格这些组件

require.js、sea.js（阿里的玉帛）+》模块化开发适用的

zepto：精简版的jQuery，常用于手机web前端开发提供了一些手机页面使用功能，touch

ext.js：跟jQuery差不多，但是不开源，也没有jQuery轻量

angular、knockoutjs、avalon（去哪儿前端总监）：MV框架，适用于单页应用开发（spa）

23、js中如何实现一个map

数组的map方法：

概述：map()方法返回一个由原数组中的每个元素调用一个指定方法后的返回值组成的新数组。

语法：callback 原数组中的元素经过该方法后返回一个新的元素。

currentValue:callback的第一个参数，数组中当前被传递的元素。

index:callback的第二个参数，数组中当前被传递的元素的索引。

array:callback的第三个参数，调用map方法的数组。

thisArg:执行callback函数时this指向的对象。

实现：

Array.prototype.map2 = function(callback) {
	for (var i = 0; i < this.length; i++) {
		this[i] = callback(this[i]);
	}
}

24、js可否实现面向对象编程，如果可以如何实现js对象的继承

创建对象的几种方式

实现继承的几种方式

原型链

25、如何获取对象a拥有的所有属性（可枚举的，不可枚举的，不包括继承来的属性）

Object.keys——IE9+

或者使用for...in并过滤出继承的属性

for(o in obj) {
	if (obj.hasOwnproperty(o)) {
		// 把o这个属性放入到一个数组中
	}
}

26、有下面这样一段html结构，使用css实现这样的效果：

左边容器无论宽度如何变动，右边容器都能自适应填满父容器剩余的宽度。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.wrap {
			width: 100%; height: 500px; border: 1px solid red;
			display: flex;
		}
		.left {
			border: 1px solid green;
		}
		.right {
			width: 100%;
			border: 1px solid blue;
		}
	</style>
</head>
<body>
	<div class="wrap">
		<div class="left">
			<div>dd77777777777777777</div>
		</div>
		<div class="right">
			<div>xx44</div>
		</div>
	</div>
</body>
</html>

27、下面这段代码想要循环昝输出结果01234，请问输出结果是否正确，如果不正确，请说明为什么，并修改循环内的代码使其输出正确结果

for(var i=0;i<5;++i){ 
    setTimeout(function(){ 
            console.log(i+''); 
        },100*i); 
}

55555

28、解释下这个css 选择器什么发生什么？
[role=nav]>ul a:not([href^-mailto]){}

role="nav"的第一级子元素 ul 的子元素所有的 a 元素除了 href="mailto..."的a 元素

29、主浏览器的内核

IE:trident

firefox:gecko

google:webkit

Opera:Presto

30、用原生JavaScript实现显示/隐藏一个DOM元素

dom.style.display="none";

dom.style.display="";

31、JavaScript有哪几种数据类型

Number String Boolean Null Undefined Object

32、jQuery框架中$.ajax()的常用参数

type

url

success

error

options

async

beforeSend(XHR)

cache

contentType

data

dataFilter

dataType

27th

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JS面试题

1、如何优化自己的代码2、使用 js 实现这样的效果：在文本域里输入文字时，当按下 enter 键时不换行，而是替换成“{{enter}}”,(只需要考虑在行尾按下 enter 键的情况).textarea.onkeydown = function(e) { // 阻止enter键的默认换行效果 e.preventDefault(); if (e.keycode=='enter键码') {...
复制链接

扫一扫