搜索
首页web前端js教程JS面试题(面试必看)

JS面试题(面试必看)

Jun 22, 2017 pm 02:16 PM
javascript试题

1.javascript的typeof返回哪些数据类型

  alert(typeof [1, 2]); //object 
    alert(typeof 'leipeng'); //string 
    var i = true;  
    alert(typeof i); //boolean 
    alert(typeof 1); //number 
    var a;  
    alert(typeof a); //undefined
    function a(){};
    alert(typeof a) //function

2.例举3种强制类型转换和2种隐式类型转换?
强制(parseInt(),parseFloat(),Number()) 
隐式(== ,!!)

3.split() 、join() 的区别
前者是切割成数组的形式,后者是将数组转换成字符串

4.数组方法pop() push() unshift() shift()
Push()尾部添加 pop()尾部删除 
Unshift()头部添加 shift()头部删除

5.事件绑定和普通事件有什么区别
普通添加事件的方法:

var btn = document.getElementById("hello");
btn.onclick = function(){
alert(1);
}
btn.onclick = function(){
alert(2);
}

执行上面的代码只会alert 2
事件绑定方式添加事件:

var btn = document.getElementById("hello");
btn.addEventListener("click",function(){
alert(1);
},false);
btn.addEventListener("click",function(){
alert(2);
},false);

执行上面的代码会先alert 1 再 alert 2
普通添加事件的方法不支持添加多个事件,最下面的事件会覆盖上面的,而事件绑定(addEventListener)方式添加事件可以添加多个。
addEventListener不兼容低版本IE
普通事件无法取消
addEventLisntener还支持事件冒泡+事件捕获

6.IE和DOM事件流的区别
1.执行顺序不一样、 
2.参数不一样 
3.事件加不加on 
4.this指向问题

7.IE和标准下有哪些兼容性的写法

var ev = ev || window.event 
document.documentElement.clientWidth || document.body.clientWidth 
var target = ev.srcElement||ev.target

8.call和apply的区别
call方法: 
语法:call(thisObj,Object1,Object2...)
定义:调用一个对象的一个方法,以另一个对象替换当前对象。
说明:
call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。 
如果没有提供 thisObj 参数,那么 Global 对象被用作 thisObj。 

apply方法: 
语法:apply(thisObj,[argArray])
定义:应用某一对象的一个方法,用另一个对象替换当前对象。 
说明: 
如果 argArray 不是一个有效的数组或者不是 arguments 对象,那么将导致一个 TypeError。
如果没有提供 argArray 和 thisObj 任何一个参数,那么 Global 对象将被用作 thisObj, 并且无法被传递任何参数。

9.b继承a的方法

function A( age, name ){ 
this.age = age;
this.name = name;
A.prototype.show = function(){
alert('父级方法');
}
function B(age,name,job){
A.apply( this, arguments );
this.job = job;
B.prototype = new A();
var b = new A(14,'侠客行');
var a = new B(15,'狼侠','侠客');

10.如何阻止事件冒泡和默认事件

canceBubble()只支持IE,return false,stopPropagation()

11.添加 删除 替换 插入到某个接点的方法

obj.appendChid() 
obj.insertBefore()
obj.replaceChild()
obj.removeChild()

12.javascript的本地对象,内置对象和宿主对象
本地对象为array obj regexp等可以new实例化 
内置对象为gload Math 等不可以实例化的
宿主为浏览器自带的document,window 等

13.window.onload 和document ready的区别
window.onload 是在dom文档树加载完和所有文件加载完之后执行一个函数Document.ready原生种没有这个方法,jquery中有 $().ready(function),在dom文档树加载完之后执行一个函数(注意,这里面的文档树加载完不代表全部文件加载完)。 
$(document).ready要比window.onload先执行 window.onload只能出来一次,$(document).ready可以出现多次

14.”==”和“===”的不同
前者会自动转换类型,后者不会

15.javascript的同源策略
一段脚本只能读取来自于同一来源的窗口和文档的属性,这里的同一来源指的是主机名、议和端口号的组合

16.JavaScript是一门什么样的语言,它有哪些特点?
没有标准答案。
javaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML网页上使用,用来给HTML网页增加动态功能。JavaScript兼容于ECMA标准,因此也称为ECMAScript。
基本特点
1.是一种解释性脚本语言(代码不进行预编译)。
2.主要用来向HTML(标准通用标记语言下的一个应用)页面添加交互行为。
3.可以直接嵌入HTML页面,但写成单独的js文件有利于结构和行为的分离。
4.跨平台特性,在绝大多数浏览器的支持下,可以在多种平台下运行(如Windows、Linux、Mac、Android、iOS等)。

17.JavaScript的数据类型都有什么?
基本数据类型:String,boolean,Number,Undefined, Null 
引用数据类型:Object(Array,Date,RegExp,Function)
那么问题来了,如何判断某变量是否为数组数据类型?
方法一.判断其是否具有“数组性质”,如slice()方法。可自己给该变量定义slice方法,故有时会失效
方法二.obj instanceof Array 在某些IE版本中不正确
方法三.方法一二皆有漏洞,在ECMA Script5中定义了新方法Array.isArray(), 保证其兼容性,最好的方法如下:

if(typeof Array.isArray==="undefined")
{
  Array.isArray = function(arg){
        return Object.prototype.toString.call(arg)==="[object Array]"
    }; 
}

18.已知ID的Input输入框,希望获取这个输入框的输入值,怎么做?(不使用第三方框架)

document.getElementById(“ID”).value

19.希望获取到页面中所有的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]); 
} 
}

20.设置一个已知ID的DIV的html内容为xxxx,字体颜色设置为黑色(不使用第三方框架)

var dom = document.getElementById(“ID”); 
dom.innerHTML = “xxxx”
dom.style.color = “#000”

21.当一个DOM节点被点击时候,我们希望能够执行一个函数,应该怎么做?
直接在DOM里绑定事件:b28bc9950e24daa5d8431db20bacf9ca94b3e26ee717c64999d7867364b1b4a3
在JS里通过onclick绑定:xxx.onclick = test 
通过事件添加进行绑定:addEventListener(xxx, ‘click’, test) 
那么问题来了,Javascript的事件流模型都有什么? 
“事件冒泡”:事件开始由最具体的元素接受,然后逐级向上传播 
“事件捕捉”:事件由最不具体的节点先接收,然后逐级向下,一直到最具体的 
“DOM事件流”:三个阶段:事件捕捉,目标阶段,事件冒泡

22.看下列代码输出为何?解释原因。
var a;
alert(typeof a); // undefined
alert(b); // 报错
解释:Undefined是一个只有一个值的数据类型,这个值就是“undefined”,在使用var声明变量但并未对其赋值进行初始化时,这个变量的值就是undefined。而b由于未声明将报错。注意未申明的变量和声明了未赋值的是不一样的。

23.看下列代码,输出什么?解释原因。
var a = null; 
alert(typeof a); //object 
解释:null是一个只有一个值的数据类型,这个值就是null。表示一个空指针对象,所以用typeof检测会返回”object”。

24.看下列代码,输出什么?解释原因。

var undefined; 
undefined == null; // true 
1 == true;   // true 
2 == true;   // false 
0 == false;  // true 
0 == '';     // true 
NaN == NaN;  // false 
[] == false; // true 
[] == ![];   // true

undefined与null相等,但不恒等(===) 
一个是number一个是string时,会尝试将string转换为number 
尝试将boolean转换为number,0或1 
尝试将Object转换成number或string,取决于另外一个对比量的类型 
所以,对于0、空字符串的判断,建议使用 “===” 。“===”会先判断两边的值类型,类型不匹配时为false。 
那么问题来了,看下面的代码,输出什么,foo的值为什么? 
var foo = "11"+2-"1"; 
console.log(foo); 
console.log(typeof foo); 
执行完后foo的值为111,foo的类型为String。

25.看代码给答案。

var a = new Object();
a.value = 1;
b = a;
b.value = 2;
alert(a.value);

答案:2(考察引用数据类型细节)

26.已知数组var stringArray = [“This”, “is”, “Baidu”, “Campus”],Alert出”This is Baidu Campus”。
答案:alert(stringArray.join(“”))

27.已知有字符串foo=”get-element-by-id”,写一个function将其转化成驼峰表示法”getElementById”。

function combo(msg){
    var arr=msg.split("-");
    for(var i=1;i<arr.length;i++){
        arr[i]=arr[i].charAt(0).toUpperCase()+arr[i].substr(1,arr[i].length-1);
    }
    msg=arr.join("");
    return msg;
}

(考察基础API)
28.var numberArray = [3,6,2,4,1,5]; (考察基础API)
1) 实现对该数组的倒排,输出[5,1,4,2,6,3] 
numberArray.reverse()
2) 实现对该数组的降序排列,输出[6,5,4,3,2,1]
numberArray.sort(function(a,b){return b-a})

29.输出今天的日期,以YYYY-MM-DD的方式,比如今天是2014年9月26日,则输出2014-09-26
var d = new Date(); 
// 获取年,getFullYear()返回4位的数字
var year = d.getFullYear();
// 获取月,月份比较特殊,0是1月,11是12月
var month = d.getMonth() + 1;
// 变成两位
month = month 3c042d0e6e5459de3fc2dcef52724b93b6c5a531a458a2e790c1fd6421739d1c{$id}b90dd5946f0946207856a8a37f441edfb6c5a531a458a2e790c1fd6421739d1c{$name}b90dd5946f0946207856a8a37f441edffd273fcf5bcad3dfdad3c41bd81ad3e5”中的{$id}替换成10,{$name}替换成Tony (使用正则表达式)
答案:"a34de1251f0d9fe1e645927f19a896e8b6c5a531a458a2e790c1fd6421739d1c{$id}b90dd5946f0946207856a8a37f441edfb6c5a531a458a2e790c1fd6421739d1c{$id}_{$name}b90dd5946f0946207856a8a37f441edffd273fcf5bcad3dfdad3c41bd81ad3e5".replace(/{\$id}/g, '10').replace(/{\$name}/g, 'Tony');

31.为了保证页面输出安全,我们经常需要对一些特殊的字符进行转义,请写一个函数escapeHtml,将95ec6993dc754240360e28e0de8de30a, &, “进行转义

function escapeHtml(str) { 
return str.replace(/[<>”&]/g, function(match) {
    switch (match) {
                   case “<”:
                      return “<”;
                   case “>”:
                      return “>”;
                   case “&”:
                      return “&”;
                   case “\””:
                      return “"”;
      }
  });
}

32.foo = foo||bar ,这行代码是什么意思?为什么要这样写?
答案:if(!foo) foo = bar; //如果foo存在,值不变,否则把bar的值赋给foo。
短路表达式:作为”&&”和”||”操作符的操作数表达式,这些表达式在进行求值时,只要最终的结果已经可以确定是真或假,求值过程便告终止,这称之为短路求值。

33.看下列代码,将会输出什么?(变量声明提升)

var foo = 1; 
(function(){
    console.log(foo);
    var foo = 2;
    console.log(foo);
})()
答案:输出undefined 和 2。上面代码相当于:
var foo = 1;
(function(){
    var foo;
    console.log(foo); //undefined
    foo = 2;
    console.log(foo); // 2; 
  })()

函数声明与变量声明会被JavaScript引擎隐式地提升到当前作用域的顶部,但是只提升名称不会提升赋值部分。

34.用js实现随机选取10–100之间的10个数字,存入一个数组,并排序。

function randomNub(aArray, len, min, max) {
  if (len >= (max - min)) {
  return &#39;超过&#39; + min + &#39;-&#39; + max + &#39;之间的个数范围&#39; + (max - min - 1) + &#39;个的总数&#39;;
  }
  if (aArray.length >= len) {
  aArray.sort(function(a, b) {
  return a - b
  });
  return aArray;
  }
  var nowNub = parseInt(Math.random() * (max - min - 1)) + (min + 1);
  for (var j = 0; j < aArray.length; j++) {
  if (nowNub == aArray[j]) {
  randomNub(aArray, len, min, max);
  return;
  }
  }
  aArray.push(nowNub);
  randomNub(aArray, len, min, max);
  return aArray;
  }
  var arr=[];
  randomNub(arr,10,10,100);

35.把两个数组合并,并删除第二个元素。

var array1 = [&#39;a&#39;,&#39;b&#39;,&#39;c&#39;];
var bArray = [&#39;d&#39;,&#39;e&#39;,&#39;f&#39;];
var cArray = array1.concat(bArray);
cArray.splice(1,1);

36.怎样添加、移除、移动、复制、创建和查找节点(原生JS,实在基础,没细写每一步)
1)创建新节点

createDocumentFragment()    //创建一个DOM片段
createElement()   //创建一个具体的元素
createTextNode()   //创建一个文本节点

2)添加、移除、替换、插入

appendChild()      //添加
removeChild()      //移除
replaceChild()      //替换
insertBefore()      //插入

3)查找

getElementsByTagName()    //通过标签名称
getElementsByName()     //通过元素的Name属性的值
getElementById()        //通过元素Id,唯一性

37.有这样一个URL:,请写一段JS程序提取URL中的各个GET参数(参数名和参数个数不确定),将其按key-value形式返回到一个json结构中,如{a:’1′, b:’2′, c:”, d:’xxx’, e:undefined}。
答案: 

function serilizeUrl(url) { 
var urlObject = {}; 
if (/\?/.test(url)) { 
var urlString = url.substring(url.indexOf("?") + 1); 
var urlArray = urlString.split("&"); 
for (var i = 0, len = urlArray.length; i < len; i++) { 
var urlItem = urlArray[i]; 
var item = urlItem.split("="); 
urlObject[item[0]] = item[1]; 
} 
return urlObject; 
} 
return null; }

38.正则表达式构造函数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})$/;

39.看下面代码,给出输出结果。

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

答案:4 4 4。

原因:Javascript事件处理器在线程空闲之前不会运行。追问,如何让上述代码输出1 2 3?

for(var i=1;i<=3;i++){
   setTimeout((function(a){  //改成立即执行函数
       console.log(a);   
   })(i),0); 
};

40.写一个function,清除字符串前后的空格。(兼容所有浏览器)
使用自带接口trim(),考虑兼容性: 

if (!String.prototype.trim) {
 String.prototype.trim = function() {
 return this.replace(/^\s+/, "").replace(/\s+$/,"");
 }
}
  // test the function
var str = " \t\n test string ".trim();
alert(str == "test string"); // alerts "true"

以上是JS面试题(面试必看)的详细内容。更多信息请关注PHP中文网其他相关文章!

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
JavaScript是用C编写的吗?检查证据JavaScript是用C编写的吗?检查证据Apr 25, 2025 am 12:15 AM

是的,JavaScript的引擎核心是用C语言编写的。1)C语言提供了高效性能和底层控制,适合JavaScript引擎的开发。2)以V8引擎为例,其核心用C 编写,结合了C的效率和面向对象特性。3)JavaScript引擎的工作原理包括解析、编译和执行,C语言在这些过程中发挥关键作用。

JavaScript的角色:使网络交互和动态JavaScript的角色:使网络交互和动态Apr 24, 2025 am 12:12 AM

JavaScript是现代网站的核心,因为它增强了网页的交互性和动态性。1)它允许在不刷新页面的情况下改变内容,2)通过DOMAPI操作网页,3)支持复杂的交互效果如动画和拖放,4)优化性能和最佳实践提高用户体验。

C和JavaScript:连接解释C和JavaScript:连接解释Apr 23, 2025 am 12:07 AM

C 和JavaScript通过WebAssembly实现互操作性。1)C 代码编译成WebAssembly模块,引入到JavaScript环境中,增强计算能力。2)在游戏开发中,C 处理物理引擎和图形渲染,JavaScript负责游戏逻辑和用户界面。

从网站到应用程序:JavaScript的不同应用从网站到应用程序:JavaScript的不同应用Apr 22, 2025 am 12:02 AM

JavaScript在网站、移动应用、桌面应用和服务器端编程中均有广泛应用。1)在网站开发中,JavaScript与HTML、CSS一起操作DOM,实现动态效果,并支持如jQuery、React等框架。2)通过ReactNative和Ionic,JavaScript用于开发跨平台移动应用。3)Electron框架使JavaScript能构建桌面应用。4)Node.js让JavaScript在服务器端运行,支持高并发请求。

Python vs. JavaScript:比较用例和应用程序Python vs. JavaScript:比较用例和应用程序Apr 21, 2025 am 12:01 AM

Python更适合数据科学和自动化,JavaScript更适合前端和全栈开发。1.Python在数据科学和机器学习中表现出色,使用NumPy、Pandas等库进行数据处理和建模。2.Python在自动化和脚本编写方面简洁高效。3.JavaScript在前端开发中不可或缺,用于构建动态网页和单页面应用。4.JavaScript通过Node.js在后端开发中发挥作用,支持全栈开发。

C/C在JavaScript口译员和编译器中的作用C/C在JavaScript口译员和编译器中的作用Apr 20, 2025 am 12:01 AM

C和C 在JavaScript引擎中扮演了至关重要的角色,主要用于实现解释器和JIT编译器。 1)C 用于解析JavaScript源码并生成抽象语法树。 2)C 负责生成和执行字节码。 3)C 实现JIT编译器,在运行时优化和编译热点代码,显着提高JavaScript的执行效率。

JavaScript在行动中:现实世界中的示例和项目JavaScript在行动中:现实世界中的示例和项目Apr 19, 2025 am 12:13 AM

JavaScript在现实世界中的应用包括前端和后端开发。1)通过构建TODO列表应用展示前端应用,涉及DOM操作和事件处理。2)通过Node.js和Express构建RESTfulAPI展示后端应用。

JavaScript和Web:核心功能和用例JavaScript和Web:核心功能和用例Apr 18, 2025 am 12:19 AM

JavaScript在Web开发中的主要用途包括客户端交互、表单验证和异步通信。1)通过DOM操作实现动态内容更新和用户交互;2)在用户提交数据前进行客户端验证,提高用户体验;3)通过AJAX技术实现与服务器的无刷新通信。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

SecLists

SecLists

SecLists是最终安全测试人员的伙伴。它是一个包含各种类型列表的集合,这些列表在安全评估过程中经常使用,都在一个地方。SecLists通过方便地提供安全测试人员可能需要的所有列表,帮助提高安全测试的效率和生产力。列表类型包括用户名、密码、URL、模糊测试有效载荷、敏感数据模式、Web shell等等。测试人员只需将此存储库拉到新的测试机上,他就可以访问到所需的每种类型的列表。

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一个PHP/MySQL的Web应用程序,非常容易受到攻击。它的主要目标是成为安全专业人员在合法环境中测试自己的技能和工具的辅助工具,帮助Web开发人员更好地理解保护Web应用程序的过程,并帮助教师/学生在课堂环境中教授/学习Web应用程序安全。DVWA的目标是通过简单直接的界面练习一些最常见的Web漏洞,难度各不相同。请注意,该软件中

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

功能强大的PHP集成开发环境

安全考试浏览器

安全考试浏览器

Safe Exam Browser是一个安全的浏览器环境,用于安全地进行在线考试。该软件将任何计算机变成一个安全的工作站。它控制对任何实用工具的访问,并防止学生使用未经授权的资源。