Javascript基础 86个面试题汇总 (附答案)

1.JavaScript是一门什么样的语言,它有哪些特点?(没有标准答案)

参考答案:
JavaScript是一门强大的编程语言,是一种专为与网页交互而设计的脚本语言,是一种动态类型、弱类型、基于原型的语言。

JavaScript是客户端和服务器端脚本语言,可以插入到HTML页面中,并且是目前较热门的Web开发语言。同时,JavaScript也是面向对象编程语言。

特点 :

1.脚本语言。JavaScript是一种解释型的脚本语言,C、C++等语言先编译后执行,而JavaScript是在程序的运行过程中逐行进行解释。
2.基于对象。JavaScript是一种基于对象的脚本语言,它不仅可以创建对象,也能使用现有的对象。
3.简单。JavaScript语言中采用的是弱类型的变量类型,对使用的数据类型未做出严格的要求,是基于Java基本语句和控制的脚本语言,其设计简单紧凑。
4.动态性。JavaScript是一种采用事件驱动的脚本语言,它不需要经过Web服务器就可以对用户的输入做出响应。在访问一个网页时,鼠标在网页中进行鼠标点击或上下移、窗口移动等操作JavaScript都可直接对这些事件给出相应的响应。
5.跨平台性。JavaScript脚本语言不依赖于操作系统,仅需要浏览器的支持。因此一个JavaScript脚本在编写后可以带到任意机器上使用,前提上机器上的浏览器支 持JavaScript脚本语言,目前JavaScript已被大多数的浏览器所支持。

2.JavaScript的数据类型都有什么?

  • 基本数据类型:Number、String、Boolean、Null、Undefined
  • 复杂数据类型:Object(Function、Array、Date、RegExp)

如何判断某变量是否为数组数据类型?

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

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

document.getElementById(ID).value;

4.希望获取到页面中所有的checkbox怎么做?(不使用第三方框架)

var inputs = document.getElementsByTagName("input"),
	arr = [],
	len = inputs.length;
while (len--){
	if(inputs[len].type == "checkbox"){
		arr.push(inputs[i]);
	}
}

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

var oDiv = document.getElementById(ID);
oDiv.innerHTML = "xxxx";
oDiv.getElementById(ID).style.color = "black";

6.当一个DOM节点被点击时候,我们希望能够执行一个函数,应该怎么做?

先获取到这个DOM节点,然后绑定onclick事件。比如myDOM.onclick = fn或者myDOM.addEventListener("click",fn);

或者直接在HTML中绑定<div onclick = "fn()"></div>

7.什么是Ajax和JSON,它们的优缺点。

Ajax是异步JavaScript和XML,用于在Web页面中实现异步数据交互。

优点:

  • 可以使得页面不重载全部内容的情况下加载局部内容,降低数据传输量
  • 避免用户不断刷新或者跳转页面,提高用户体验

缺点:

  • 对搜索引擎不友好
  • 要实现ajax下的前后退功能成本较大
  • 可能造成请求数的增加
  • 跨域问题限制

JSON是一种轻量级的数据交换格式,ECMA的一个子集

优点:轻量级、易于人的阅读和编写,便于机器(JavaScript)解析,支持复合数据类型(数组、对象、字符串、数字)

8.看下列代码输出为何?解释原因。

var a;
alert(typeof a); //undefined
alert(b); //报错

变量a是被声明的,只是没有赋值,所以值为undefined。而b未被声明,所以不存在。

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

var a = null;
alert(typeof a); //object

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

var undefined;
undefined == null; //true
1 == true; //true
2 == true; //false
0 == false; //true
0 == ''; // true
NaN == NaN; //false
[] == false; //true
[] == ![]; //true
  • undefined与null在if语句中会被自动转为false,相等运算符直接报告两者相等。(如果是全等的话结果为false)
  • 数字和布尔值进行比较会把布尔值变为数字,true为1,false为0。
  • 0为假即false,空值或者空格也为false。
  • NaN和任何值都不相等。
  • []被当作数组处理,空数组转换为0,所以等于false。
  • ![]想做将数组转换为布尔值的运算,[]为一个数组对象,所以![]为false。

看下面的代码,输出什么,foo的值为什么?

var foo = "11"+2-"1";
console.log(foo); //111

先做"11"+2运算,当一个为字符串一个为数字时,将数字转换为字符串,所以字符串拼接为"112"。当两个数据都是字符串时,+以外的运算会先把字符串转换为数字,即112-1=111,foo类型为Number。如果是+运算,则为"112"+“1”=“1121”,foo类型为String。

11.看代码给答案。

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

a,b都指向同一个对象,所以b修改了value值,a的value值也变了。

12.已知数组var stringArray = [“This”, “is”, “Baidu”, “Campus”],Alert出"This is Baidu Campus"。

stringArray.join(" ");

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

var fooArr = foo.split("-");
var newFoo = fooArr[0];
for(var i=1;i<fooArr.length;i++){
	newFoo += fooArr[i].charAt(0).toUpperCase()+fooArr[i].slice(1);
}
return newFoo;

13.var numberArray = [3,6,2,4,1,5];

  1. 实现对该数组的倒排,输出[5,1,4,2,6,3]

    numberArray.reverse();

  2. 实现对该数组的降序排列,输出[6,5,4,3,2,1]

numberArray.sort(function(a,b){
   	return b-a;
   });

14.输出今天的日期,以YYYY-MM-DD的方式,比如今天是2014年9月26日,则输出2014-09-26

var date = new Date();
var year = date.getFullYear();
var month = date.getMonth()+1;
var nowDate = date.getDate();
if(month<10){month = "0" + month;}
if(nowDate<10){nowDate = "0" + nowDate;}
var today = year + "-" + month + "-" + nowDate;

15.将字符串“<tr><td>{KaTeX parse error: Expected 'EOF', got '}' at position 3: id}̲&lt;/td&gt;&lt;…name}</td></tr>”中的{KaTeX parse error: Expected 'EOF', got '}' at position 3: id}̲替换成10,{name}替换成Tony。(使用正则表达式)

var str = "<tr><td>{$id}</td><td>{$name}</td></tr>";
str.replace(/\{\$id\}/,"10").replace(/\{\$name\}/,"Tony");

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

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

17.foo = foo||bar ,这行代码是什么意思?为什么要这样写?

如果foo不为假则使用原来的值,没有值则把bar的值付给foo。

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

var foo = 1;
function(){
	console.log(foo); //undefined
	var foo = 2;
	console.log(foo); //2
}

函数声明和变量声明会被隐式地提升到当前作用域的顶部,但是不会提升赋值部分。相当于:

var foo = 1;
function(){
	var foo;
	console.log(foo); //undefined
	foo = 2;
	console.log(foo); //2
}

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

var url = "http://item.taobao.com/item.htm?a=1&b=2&c=&d=xxx&e";
var gets = url.split("?")[1];
var getsArr = gets.split("&");
var obj = {};
for(var i=0;i<getsArr.length;i++){
	obj[getsArr[i].split("=")[0]] = getsArr[i].split("=")[1];
}
return obj;

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

var arr1 = [1,2,3];
var arr2 = [“a”,“b”,“c”];
var newArr = arr1.contant(arr2);
newArr.splice(1,1);

21.怎样添加、移除、移动、复制、创建和查找节点

- appendChild() //添加
- reomveChild() //移除
- insertBefore() //移动
- cloneNode() //复制
- createElement();createTextNode();createDocumentFragment //复制
- getElementById();getElementsByTagName();getElementsByClassName();getElementsByName() //查找

22.有这样一个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}

var url = "http://item.taobao.com/item.htm?a=1&b=2&c=&d=xxx&e";
var gets = url.split("?")[1];
var getsArr = gets.split("&");
var obj = {};
for(var i=0;i<getsArr.length;i++){
	obj[getsArr[i].split("=")[0]] = getsArr[i].split("=")[1];
}
return obj;

23.正则表达式构造函数var reg=new RegExp(“xxx”)与正则表达字面量var reg=//有什么不同?匹配邮箱的正则表达式?

当使用RegExp()构造函数的时候,不仅需要转义引号(即"表示"),并且还需要双反斜杠(即\表示一个\)。

/^([A-Za-z0-9-_])+@([A-Za-z0-9]+.)+([a-z])+$/

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

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

Javascript事件处理器在线程空闲之前不会运行。

如何让上述代码输出1 2 3?

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

25.写一个function,清除字符串前后的空格。(兼容所有浏览器)

if(!String.prototype.trim){
	String.prototype.trim = function(){
		return this.replace(/^\s+/,"").replace(/\s+$/,"");
	}
}

26.Javascript中callee和caller的作用?

如果一对兔子每月生一对兔子;一对新生兔,从第三个月起就开始生兔子;假定每对兔子都是一雌一雄,试问一对兔子,第n个月能繁殖成多少对兔子?(使用callee完成)

var result = [];
function fn(n){
	if(n==1){
		return 1;
	}else if(n==2){
		return 1;
	}else{
		result[n] = arguments.callee(n-2)+arguments.callee(n-1);
		return result[n];
	}
}

27. 解释什么是回调函数,并提供一个简单的例子

回调函数是可以作为参数传递给另一个函数的函数,并在某些操作完成后执行。下面是一个简单的回调函数示例,这个函数在某些操作完成后打印消息到控制台。

function modifyArray(arr, callback) {
 // 对 arr 做一些操作
 arr.push(100);
 // 执行传进来的 callback 函数
 callback();
}
var arr = [1, 2, 3, 4, 5];
modifyArray(arr, function() {
 console.log("array has been modified", arr);
});

28. 如何检查一个数字是否为整数?

检查一个数字是小数还是整数,可以使用一种非常简单的方法,就是将它对 1 进行取模,看看是否有余数。

function isInt(num) {
 return num % 1 === 0;
}
console.log(isInt(4)); // true
console.log(isInt(12.2)); // false
console.log(isInt(0.3)); // false

29. 你能解释一下 ES5 和 ES6 之间的区别吗?

ECMAScript 5(ES5):ECMAScript 的第 5 版,于 2009 年标准化。这个标准已在所有现代浏览器中完全实现。
ECMAScript 6(ES6)或 ECMAScript 2015(ES2015):第 6 版 ECMAScript,于 2015 年标准化。这个标准已在大多数现代浏览器中部分实现。
以下是 ES5 和 ES6 之间的一些主要区别:
 

// 箭头函数和字符串插值:
const greetings = (name) => {
 return `hello ${name}`;
}
const greetings = name => `hello ${name}`;

30. Javascript 中的“闭包”是什么?举个例子?

闭包是在另一个函数(称为父函数)中定义的函数,并且可以访问在父函数作用域中声明和定义的变量。

闭包可以访问三个作用域中的变量:

  • 在自己作用域中声明的变量;
  • 在父函数中声明的变量;
  • 在全局作用域中声明的变量。
    var globalVar = "abc";
    // 自调用函数
    (function outerFunction (outerArg) { // outerFunction 作用域开始
     // 在 outerFunction 函数作用域中声明的变量
     var outerFuncVar = 'x'; 
     // 闭包自调用函数
     (function innerFunction (innerArg) { // innerFunction 作用域开始
     // 在 innerFunction 函数作用域中声明的变量
     var innerFuncVar = "y";
     console.log( 
     "outerArg = " + outerArg + "
    " +
     "outerFuncVar = " + outerFuncVar + "
    " +
     "innerArg = " + innerArg + "
    " +
     "innerFuncVar = " + innerFuncVar + "
    " +
     "globalVar = " + globalVar);
     // innerFunction 作用域结束
     })(5); // 将 5 作为参数
    // outerFunction 作用域结束
    })(7); // 将 7 作为参数
    

    innerFunction 是在 outerFunction 中定义的闭包,可以访问在 outerFunction 作用域内声明和定义的所有变量。除此之外,闭包还可以访问在全局命名空间中声明的变量。

    上述代码的输出将是:

    outerArg = 7
    outerFuncVar = x
    innerArg = 5
    innerFuncVar = y
    globalVar = abc
    

    31. “this”关键字的原理是什么?请提供一些代码示例。

  • 在 JavaScript 中,this 是指正在执行的函数的“所有者”,或者更确切地说,指将当前函数作为方法的对象。
    function foo() {
     console.log( this.bar );
    }
    var bar = "global";
    var obj1 = {
     bar: "obj1",
     foo: foo
    };
    var obj2 = {
     bar: "obj2"
    };
    foo(); // "global"
    obj1.foo(); // "obj1"
    foo.call( obj2 ); // "obj2"
    new foo(); // undefined
    

    32. 如何向 Array 对象添加自定义方法,让下面的代码可以运行?

JavaScript 不是基于类的,但它是基于原型的语言。这意味着每个对象都链接到另一个对象(也就是对象的原型),并继承原型对象的方法。你可以跟踪每个对象的原型链,直到到达没有原型的 null 对象。我们需要通过修改 Array 原型来向全局 Array 对象添加方法。

Array.prototype.average = function() {
 // 计算 sum 的值
 var sum = this.reduce(function(prev, cur) { return prev + cur; });
 // 将 sum 除以元素个数并返回
 return sum / this.length;
}
var arr = [1, 2, 3, 4, 5];
var avg = arr.average();
console.log(avg); // => 3

33. 请描述一下 Revealing Module Pattern 设计模式。

暴露模块模式(Revealing Module Pattern)是模块模式的一个变体,目的是维护封装性并暴露在对象中返回的某些变量和方法。如下所示:

var Exposer = (function() {
 var privateVariable = 10;
 var privateMethod = function() {
 console.log('Inside a private method!');
 privateVariable++;
 }
 var methodToExpose = function() {
 console.log('This is a method I want to expose!');
 }
 var otherMethodIWantToExpose = function() {
 privateMethod();
 }
 return {
 first: methodToExpose,
 second: otherMethodIWantToExpose
 };
})();
Exposer.first(); // 输出: This is a method I want to expose!
Exposer.second(); // 输出: Inside a private method!
Exposer.methodToExpose; // undefined

它的一个明显的缺点是无法引用私有方法。

34. 列举Java和JavaScript之间的区别?

Java是一门十分完整、成熟的编程语言。相比之下,JavaScript是一个可以被引入HTML页面的编程语言。这两种语言并不完全相互依赖,而是针对不同的意图而设计的。 Java是一种面向对象编程(OOPS)或结构化编程语言,类似的如C ++或C,而JavaScript是客户端脚本语言,它被称为非结构化编程。


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

答案:string,boolean,number,undefined,function,object,symbol

36. 例举3种强制类型转换和2种隐式类型转换?

答案:强制(parseInt,parseFloat,number)
隐式(== ===)

37. split() 和 join() 的区别?

答案:前者是将字符串切割成数组的形式,后者是将数组转换成字符串

38. 数组方法pop() push() unshift() shift()的区别?

答案:push()尾部添加 pop()尾部删除
unshift()头部添加 shift()头部删除

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

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

40. ajax请求的时候get 和post方式的区别?

答案:
一个在url后面 ,一个放在虚拟载体里面
get有大小限制(只能提交少量参数)
安全问题
应用不同 ,请求数据和提交数据

41. call和apply的区别?

Object.call(this,obj1,obj2,obj3)
Object.apply(this,arguments)

42. ajax请求时,如何解析json数据?

答案:使用JSON.parse

44. 事件委托是什么?

答案: 利用事件冒泡的原理,让自己的所触发的事件,让他的父元素代替执行!

45. 闭包是什么,有什么特性,对页面有什么影响?

答案:闭包就是能够读取其他函数内部变量的函数,使得函数不被GC回收,如果过多使用闭包,容易导致内存泄露

  • 0
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值