js部分面试题,前端开发面试技能介绍,前端基础入门教程
document.write(“------------------------------------------------------------------------------------------------”);
document.write(“
”);
document.write(“变量a是数组类型的判断结果是:”+isArray2(a));
document.write(“
”);
document.write(“变量b是数组类型的判断结果是:”+isArray2(b));
document.write(“
”);
document.write(“变量c是数组类型的判断结果是:”+isArray2©);
document.write(“
”);
document.write(“变量arr1是数组类型的判断结果是:”+isArray2(arr1));
document.write(“
”);
document.write(“变量arr2是数组类型的判断结果是:”+isArray2(arr2));
document.write(“
”);
3.例举3种强制类型转换和2种隐式类型转换?
强制(parseInt,parseFloat,number)
隐式(== - ===)
4.split() join() 的区别?
前者是切割成数组的形式,后者是将数组转换成字符串
5.数组方法pop() push() unshift() shift()
Push()尾部添加 pop()尾部删除
Unshift()头部添加 shift()头部删除
6:当一个DOM节点被点击时候,我们希望能够执行一个函数,应该怎么做?
•直接在DOM里绑定事件:<div οnclick=”test()”>
•在JS里通过onclick绑定:xxx.onclick = test
•通过事件添加进行绑定:addEventListener(xxx, ‘click’, test)
7:Javascript的事件流模型都有什么?
•“事件冒泡”:事件开始由最具体的元素接受,然后逐级向上传播
•“事件捕捉”:事件由最不具体的节点先接收,然后逐级向下,一直到最具体的
•“DOM事件流”:三个阶段:事件捕捉,目标阶段,事件冒泡
8.IE和DOM事件流的区别?
1.执行顺序不一样(IE中事件的执行顺序是按添加的顺序执行的;DOM是冒泡和捕捉)
2.参数不一样(第三个参数的区别)
3.事件加不加on
4.this指向问题
9.IE和标准下有哪些兼容性的写法?
Var ev = ev || window.event
document.documentElement.clientWidth || document.body.clientWidth
Var target = ev.srcElement||ev.target
event.srcElement : 设置或获取触发事件的对象。
引用对象,这个对象有什么属性,就可以使用。
常用的有:
event.srcElement.TagName //事件对象的html标记
event.srcElement.innerText //事件对象的内文本
event.srcElement.value //表单事件对象的值
10.ajax请求的时候get 和post方式的区别?
一个在url后面 一个放在虚拟载体里面
有大小限制
安全问题
应用不同 一个是论坛等只需要请求的,一个是类似修改密码的
get:传输量小,快,不安全;
post:传输量大,慢,安全。
11.call和apply的区别?
Object.call(this,obj1,obj2,obj3)
Object.apply(this,arguments)
每个函数都有两个非继承而来的方法call和apply,这两个方法的用途都是用来调用函数(在特定的作用域中),实际上等于函数体内的this对象的值。
两者的区别:Object.call(this,obj1,obj2,obj3)
Object.apply(this,arguments) 推荐使用这种
Object.apply(this,[obj1,obj2,obj3])
好处:使用apply()函数的好处是,可以吧函数和对象之间进行解藕。
12.ajax请求时,如何解析json数据?
使用eval parse 鉴于安全性考虑 使用parse更靠谱
parse_ini_file() 函数解析一个配置文件,并以数组的形式返回其中的设置。
语法:parse_ini_file(file,process_sections)
参数:file:必需,规定要检查的,ini,文件
process_sections:可选。如果设置为 true,则返回一个多维数组,包括了配置文件中每一节的名称和设置。默认是 false。
13:Ajax同步和异步的区别,如何解决跨域问题?
第一种回答:
-
jsonp
-
iframe
-
window.name、window.postMessage
-
服务器上设置代理页面
第二种回答:
document.domain+iframe
动态创建script标签
第三种回答:
1、Web代理的方式。即用户访问A网站时所产生的对B网站的跨域访问请求均提交到A网站的指定页面,由该页面代替用户页面完成交互,
从而返回合适的结果。此方案可以解决现阶段所能够想到的多数跨域访问问题,但要求A网站提供Web代理的支持,因此A网站与B网站
之间必须是紧密协作的,且每次交互过程,A网站的服务器负担增加,且无法代用户保存session状态。
2、on-Demand方式。MYMSN的门户就用的这种方式,不过MYMSN中不涉及跨域访问问题。动态控制script标记的生成,通过修改script
标记的src属性完成对跨域页面的调用。此方案存在的缺陷是,script的src属性完成该调用时采取的方式时get方式,如果请求时传递
的字符串过大时,可能会无法正常运行。不过此方案非常适合聚合类门户使用。
3、iframe方式。查看过醒来在javaeye上的一篇关于跨域访问的帖子,他提到自己已经用iframe的方式解决了跨域访问问题。数据提
交跟获取,采用iframe这种方式的确可以了,但由于父窗口与子窗口之间不能交互(跨域访问的情况下,这种交互被拒绝),因此无
法完成对父窗口效果的影响。
4、用户本地转储方式:IE本身依附于windows平台的特性为我们提供了一种基于iframe,利用内存来“绕行”的方案,即两个window之
间可以在客户端通过windows剪贴板的方式进行数据传输,只需要在接受数据的一方设置Interval进行轮询,获得结果后清除Interval即可。
FF的平台独立性决定了它不支持剪贴板这种方式,而以往版本的FF中存在的插件漏洞又被fixed了,所以FF无法通过内存来完成暗渡陈仓。
而由于文件操作FF也没有提供支持(无法通过Cookie跨域完成数据传递),致使这种技巧性的方式只能在IE中使用。
5、结合了前面几种方式,在访问A网站时,先请求B网站完成数据处理,再根据返回的标识来获得所需的结果。这种方法的缺点也很明显,
B网站的负载增大了。优点,对session也实现了保持,同时A网站与B网站页面间的交互能力增强了。最重要的一点,这种方案满足了我的全部需要。
总结一下,以上方案中可选择的情况下,我最推荐on-Demand方式,在不需要提交大量数据的情况下,这种方式能够解决您的大部分问题。
14.写一个获取非行间样式的函数?
写法一:
function getStyle(obj,name){
if(obj.currentStyle){
return obj.currentStyle[name];
}
else{
return getComputedStyle(obj,false)[name]; //false是一个无用的参数
}
}
getStyle 函数有 2 个参数:
第一个参数 obj 为要获取的对象,
第二个参数 name 为要获取的属性,并且做了兼容处理, currentStyle 针对 IE 浏览器,getComputedStyle 针对火狐浏览器。
写法二:
function getStyle(obj,attr,value){
if(!value){
if(obj.currentStyle){
return obj.currentStyle(attr)
}else{
obj.getComputedStyle(attr,false)
}
}else{
obj.style[attr]=value
}
}
15.事件委托是什么?
事件委托(event delegation):利用事件冒泡的原理,让自己的所触发的事件,让他的父元素代替执行!
解释:使用事件委托技术能让你避免对特定的每个节点添加事件监听器;相反,事件监听器是被添加到它们的父元素上。
事件监听器会分析从子元素冒泡上来的事件,找到是哪个子元素的事件。
16.闭包是什么,有什么特性,对页面有什么影响?
闭包就是能够读取其他函数内部变量的函数。
影响:
由于闭包会使函数中的变量都被保存到内存中,对内存的消耗很大,所以不能滥用闭包,否则会造成网页的性能问题,在IE中可能导致内存泄露
17.如何阻止事件冒泡和默认事件?
if(event && event.stopPropagation){ //非IE
event.stopPropagation();
}else{ //IE
window.event.cancelBubble = true;
}
18. 添加、移除、移动、复制、创建和查找节点的方法?
1)创建新节点
createDocumentFragment() //创建一个DOM片段
createElement() //创建一个具体的元素
createTextNode() //创建一个文本节点
2)添加、移除、替换、插入
appendChild() //添加
removeChild() //移除
replaceChild() //替换
insertBefore() //插入
3)查找
getElementsByTagName() //通过标签名称
getElementsByName() //通过元素的Name属性的值
getElementById() //通过元素Id,唯一性
getElementsByClassName() //通过元素的Class属性的值
19.解释jsonp的原理,以及为什么不是真正的ajax?
动态创建script标签,回调函数
Ajax是页面无刷新请求数据操作
20.javascript的本地对象,内置对象和宿主对象?
本地对象为array obj regexp等可以new实例化
内置对象为gload Math 等不可以实例化的
宿主为浏览器自带的document,window 等
21.document load 和document ready的区别?
Document.onload 是在结构和样式加载完才执行js
Document.ready原生种没有这个方法,jquery中有 $().ready(function)
22.””和“=”的不同?
返回值:相等true,不相等false
==是先转换数据类型再进行比较,只要值相等,就相等;
===是不转换数据类型进行等比较,必须是值相等,类型相等,才相等。
23.javascript的同源策略?
一段脚本只能读取来自于同一来源的窗口和文档的属性,这里的同一来源指的是主机名、协议和端口号的组合
24.编写一个数组去重的方法?
function clearRepeatArray(arr){
for(var i=0;i<arr.length-1;i++){
for(var j=i+1;j<arr.length;j++){
if(arr[i]==arr[j]){
arr.splice(j,1);
break;
}
}
}
return arr;
}
26.排序算法?
function paiXu(arr){
for(var i=0;i<arr.length-1;i++){
for(var j=0;j<arr.length-1-i;j++){
if(arr[j]>arr[j+1]){
var temp = arr[j];
arr[j] = arr[j+1];
arr[j+1] = temp;
}
}
}
return arr;
}
27:希望获取到页面中所有的checkbox怎么做?(不使用第三方框架) ?
var domList = document.getElementsByTagName(‘input’)
var checkBoxList = [];
var len = domList.length; //缓存到局部变量
while (len–) { //使用while的效率会比for循环更高
if (domList[len].type == ‘checkbox’) {
checkBoxList.push(domList[len]);
}
}
28:什么是Ajax和JSON,它们的优缺点?
AJAX(Asynchronous JavaScript And XML):
即异步JavaScript和XML,它不是一种新的编程语言即异步JavaScript和XML,它不是一种新的编程语言,
而是一种用于创造更好更快以及交互性更强的Web应用程序技术(用于在web页面中实现异步数据交互)。
优点:
可以使得每一次请求更加迅捷,对于每一次请求返回的不是整个页面,只仅仅是所需要的返回数据。
也就是可以使页面不重载全部内容的情况下加载。避免用户不断刷新或者跳转页面,提高用户体验 。
缺点:
对搜索引擎不友好,(要实现ajax下的前后退功能成本较大,可能造成请求数据的增加跨域问题限制)
JSON(Java Script Object Notation):
是一种轻量级的数据交换格式,ECMA的一个子集。可在不同平台之间进行数据交换,是数据的载体。
是一种轻量级的数据交换格式,ECMA的一个子集。可在不同平台之间进行数据交换,是数据的载体。
优点:
轻量级的数据交换格式, 易于人的的阅读和编写,占用宽带小; 便于机器(JavaScript)解析,
(可以通过简单的eval()进行json数据的读取)和生成 ,支持复合数据类型(数组,对象,字符串,数字) 支持多种语言;
缺点:没有XML格式这么推广的深入人心和喜用广泛,没有XML那么通用性。
JSON格式目前在Web Service中推广还属于初级阶段
29:有这样一个URL:http://item.taobao.com /item.htm?a=1&b=2&c=&d=xxx&e,
请写一段JS程序提取URL中的各个GET参数(参数名和 参数个数不确定),将其按key-value形式返回到一个json结构中,
如{a:’1′, b:’2′ , c:”, d:’xxx’, e:undefined}?*/
function test(){
var url=“http://item.taobao.com /item.htm?a=1&b=2&c=&d=xxx&e”;
//找到问号的下标,截取下标加1之后的字符
var index=url.lastIndexOf(“?”);
var str=url.substring(index+1);
//1、split(“&”)变成数组
var arr = str.split(“&”);
//2、遍历数组
for(var i=0;i<arr.length;i++){
if(arr[i].indexOf(“=”)>-1){//如果元素有等号;把等号替换成:" 再在最后拼接 "
//a=1 --》 a:“1”
arr[i]=arr[i].replace(“=”,“:\”“)+”\“”;
}else{
//如果元素没有等号,直接在后面拼接 :undefined;
//e --》 e:undefined;
arr[i]=arr[i]+“:undefined”;
}
}
//3、把数组的每个元素用join拼接成字符串 resultStr;
var resultStr = arr.join(“,”);
//4、在resultStr的两端分别拼接上 左花括号和右花括号
resultStr = “{”+resultStr+“}”;
//5、把json的字符串形式变成对象;
var keyValueJson = eval(“(”+resultStr+“)”);
console.log(keyValueJson.a);
console.log(keyValueJson.b);
console.log(keyValueJson.c);
console.log(keyValueJson.d);
console.log(keyValueJson.e);
}
30:正则表达式构造函数var reg=new RegExp(“xxx”)与正则表达字面量var reg=//有什么不同?匹配邮箱的正则表达式?*/
当使用RegExp()构造函数的时候,不仅需要转义引号(即\”表示”),并且还需要双反斜杠(即\\表示一个\)。使用正则表达字面量的效率更高。
var regMail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/;
var regMail = /^\w+@\w+(\.(net|com|cn))+$/;
31:.Javascript中callee和caller的作用?
caller是返回一个对函数的引用,该函数调用了当前函数;
callee是返回正在被执行的function函数,也就是所指定的function对象的正文。
案例:
那么问题来了?如果一对兔子每月生一对兔子;一对新生兔,从第二个月起就开始生兔子;
假定每对兔子都是一雌一雄,试问一对兔子,第n个月能繁殖成多少对兔子?(使用callee完成)
var result=[];
function fn(n){ //典型的斐波那契数列
if(n==1){
return 1;
}else if(n==2){
return 1;
}else{
if(result[n]){
return result[n];
}else{
//argument.callee()表示fn()
result[n]=arguments.callee(n-1)+arguments.callee(n-2);
return result[n];
}
}
}
32: 下面这个ul,如何点击每一列的时候alert其index?(闭包)?
- 这是第一条
- 这是第二条
- 这是第三条
- \*/
var lis;
window.onload = function(){
lis = document.getElementById(“test”).children;
for(var i=0;i<lis.length;i++){
lis[i].onclick = demo;
}
}
function demo(){
小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。
深知大多数初中级前端工程师,想要提升技能,往往是自己摸索成长或者是报班学习,但自己不成体系的自学效果低效又漫长,而且极易碰到天花板技术停滞不前!
因此收集整理了一份《2024年Web前端开发全套学习资料》送给大家,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频
如果你觉得这些内容对你有帮助,可以添加下面V无偿领取!(备注:前端)
最后
一个好的心态和一个坚持的心很重要,很多冲着高薪的人想学习前端,但是能学到最后的没有几个,遇到困难就放弃了,这种人到处都是,就是因为有的东西难,所以他的回报才很大,我们评判一个前端开发者是什么水平,就是他解决问题的能力有多强。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
分享一些前端面试题以及学习路线给大家
?(闭包)?
- 这是第一条
- 这是第二条
- 这是第三条
- \*/
var lis;
window.onload = function(){
lis = document.getElementById(“test”).children;
for(var i=0;i<lis.length;i++){
lis[i].onclick = demo;
}
}
function demo(){
小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。
深知大多数初中级前端工程师,想要提升技能,往往是自己摸索成长或者是报班学习,但自己不成体系的自学效果低效又漫长,而且极易碰到天花板技术停滞不前!
因此收集整理了一份《2024年Web前端开发全套学习资料》送给大家,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。[外链图片转存中…(img-1DGRe5gR-1710824929724)]
[外链图片转存中…(img-0LixqpUa-1710824929725)]
[外链图片转存中…(img-nRNlYcZH-1710824929726)]
[外链图片转存中…(img-P95XygzJ-1710824929726)]由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频
如果你觉得这些内容对你有帮助,可以添加下面V无偿领取!(备注:前端)
[外链图片转存中…(img-eaFjNdXM-1710824929727)]最后
一个好的心态和一个坚持的心很重要,很多冲着高薪的人想学习前端,但是能学到最后的没有几个,遇到困难就放弃了,这种人到处都是,就是因为有的东西难,所以他的回报才很大,我们评判一个前端开发者是什么水平,就是他解决问题的能力有多强。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
分享一些前端面试题以及学习路线给大家
[外链图片转存中…(img-0FQMgSS7-1710824929727)]
更多推荐
所有评论(0)