最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
你有必要知道的 JavaScript 面试题
时间:2015-12-23 编辑:简简单单 来源:一聚教程网
问题1: 作用域
看一下下面的代码:
(function(){
var a = b =5;
})();
console.log(b);结果会输出什么?
答案:
5
这个问题考查的要点是两个不同的作用域,'a'被var声明成了一个局部变量,但是'b'实际上没有被定义,所以它是一个全局变量。
这个问题还牵扯到另个一个比较重要的问题,就是strict mode,如果你选择了strict mode,上面的代码就会报Uncaught ReferenceError,因为b没有被定义,它可以帮你检查出代码的一些问题:
(function(){
'use strict';
var a = window.b =5;
})();
console.log(b);问题2: 创建“native”方法
写一个重复打印字符串对象的方法,输入一个整数,这个整数代表重复打印的字数,比如:
1.console.log('hello'.repeatify(3));
这样会打印出hellohellohello。
答案:
其中一种实现方法是这样:
String.prototype.repeatify =String.prototype.repeatify ||function(times){
var str ='';
for(var i =0; i < times; i++){
str +=this;
}
return str;
};这个问题考查的是开发者对JavaScript继承和prototype属性的了解程度。
Question 3: Hoisting
下面这段代码的输出结果是什么?
function test(){
console.log(a);
console.log(foo());
var a =1;
function foo(){
return2;
}
}
test();答案
undefined和2。
上面的代码和下面这段是等效的:
function test(){
var a;
function foo(){
return2;
}
console.log(a);
console.log(foo());
a =1;
}
test();问题4: 在JavaScript中如何执行
通过下面的代码给出结果,解释一下你的答案:
var fullname ='John Doe';
var obj ={
fullname:'Colin Ihrig',
prop:{
fullname:'Aurelio De Rosa',
getFullname:function(){
returnthis.fullname;
}
}
};
console.log(obj.prop.getFullname());
var test = obj.prop.getFullname;
console.log(test());答案:
Aurelio De Rosa 和John Doe。
问题5: call() 和 apply()
解决前面的问题之后让最后一个console.log()输出Aurelio De Rosa.
答案:
这个问题在于call()还是apply()。 如果你不知道它们之间的区别,我建设你先读一读 What’s the difference between function.call and function.apply? 下面这行代码我使用了call(),但是这个情况下apply()也会产生同样的结果:
console.log(test.call(obj.prop));
typeof bar === "object"
判断 bar
是不是一个对象有神马潜在的弊端?如何避免这种弊端?typeof
的弊端是显而易见的(这种弊端同使用 instanceof
):let obj = {};
let arr = [];
console.log(typeof obj === 'object'); //true
console.log(typeof arr === 'object'); //true
console.log(typeof null === 'object'); //true
typeof bar === "object"
并不能准确判断 bar
就是一个 Object。可以通过Object.prototype.toString.call(bar) === "[object Object]"
来避免这种弊端:let obj = {};
let arr = [];
console.log(Object.prototype.toString.call(obj)); //[object Object]
console.log(Object.prototype.toString.call(arr)); //[object Array]
console.log(Object.prototype.toString.call(null)); //[object Null]
[] === false
是返回 false
的。(function(){
var a = b = 3;
})();
console.log("a defined? " + (typeof a !== 'undefined'));
console.log("b defined? " + (typeof b !== 'undefined'));
console.log(b); //3
console,log(typeof a); //undefined
b = 3;
var a = b;
b
成了全局变量,而 a
是自执行函数的一个局部变量。var myObject = {
foo: "bar",
func: function() {
var self = this;
console.log("outer func: this.foo = " + this.foo);
console.log("outer func: self.foo = " + self.foo);
(function() {
console.log("inner func: this.foo = " + this.foo);
console.log("inner func: self.foo = " + self.foo);
}());
}
};
myObject.func();
func
中的 IIFE 有自己的独立作用域,并且它能访问到外部作用域中的 self
,所以第三个输出会报错,因为 this
在可访问到的作用域内是 undefined
,第四个输出是 bar
。如果你知道闭包,也很容易解决的:(function(test) {
console.log("inner func: this.foo = " + test.foo); //'bar'
console.log("inner func: self.foo = " + self.foo);
}(self));
for(var i = 0; i < 5; i++) {
setTimeout(function() {
console.log(i);
}, 1000);
}
for(var i = 0; i < 5; i++) {
(function(i) {
setTimeout(function() {
console.log(i);
}, 1000);
})(i)
}
(function($) {
//代码
} )(jQuery);
- 消除Javascript语法的一些不合理、不严谨之处,减少一些怪异行为;
- 消除代码运行的一些不安全之处,保证代码运行的安全;
- 提高编译器效率,增加运行速度;
- 为未来新版本的Javascript做好铺垫。
function foo1()
{
return {
bar: "hello"
};
}
function foo2()
{
return
{
bar: "hello"
};
}
var test = 1 +
2
console.log(test); //3
return
、break
、continue
等语句,如果后面紧跟换行,解析器一定会自动在后面填充分号(;),所以上面的第二个函数就变成了这样:function foo2()
{
return;
{
bar: "hello"
};
}
undefined
。NaN
是 Not a Number 的缩写,JavaScript 的一种特殊数值,其类型是 Number,可以通过 isNaN(param)
来判断一个值是否是 NaN
:console.log(isNaN(NaN)); //true
console.log(isNaN(23)); //false
console.log(isNaN('ds')); //true
console.log(isNaN('32131sdasd')); //true
console.log(NaN === NaN); //false
console.log(NaN === undefined); //false
console.log(undefined === undefined); //false
console.log(typeof NaN); //number
console.log(Object.prototype.toString.call(NaN)); //[object Number]
isNaN()
成为了 Number 的静态方法:Number.isNaN()
.console.log(0.1 + 0.2); //0.30000000000000004
console.log(0.1 + 0.2 == 0.3); //false
0.00110011001100110011……
注意 0011
是无限重复的,这是舍入误差造成的,所以对于 0.1 + 0.2 这样的运算,操作数会先被转成二进制,然后再计算:0.1 => 0.0001 1001 1001 1001…(无限循环)
0.2 => 0.0011 0011 0011 0011…(无限循环)
function add(num1, num2){
let r1, r2, m;
r1 = (''+num1).split('.')[1].length;
r2 = (''+num2).split('.')[1].length;
m = Math.pow(10,Math.max(r1,r2));
return (num1 * m + num2 * m) / m;
}
console.log(add(0.1,0.2)); //0.3
console.log(add(0.15,0.2256)); //0.3756
toPrecision()
和 toFixed()
方法,注意,方法的返回值字符串。function add(x, y) {
return x.toPrecision() + y.toPrecision()
}
console.log(add(0.1,0.2)); //"0.10.2"
isInteger(x)
来判断 x 是否是整数x
转换成10进制,判断和本身是不是相等即可:function isInteger(x) {
return parseInt(x, 10) === x;
}
isInteger()
来判断参数是否是整数:Number.isInteger(25) // true
Number.isInteger(25.0) // true
Number.isInteger(25.1) // false
Number.isInteger("15") // false
Number.isInteger(true) // false
-2^53
到 2^53
之间(不含两个端点),超过这个范围,无法精确表示这个值。ES6 引入了Number.MAX_SAFE_INTEGER
和 Number.MIN_SAFE_INTEGER
这两个常量,用来表示这个范围的上下限,并提供了Number.isSafeInteger()
来判断整数是否是安全型整数。(function() {
console.log(1);
setTimeout(function(){console.log(2)}, 1000);
setTimeout(function(){console.log(3)}, 0);
console.log(4);
})();
function isPalindrome(str) {
str = str.replace(/\W/g, '').toLowerCase();
return (str == str.split('').reverse().join(''));
}
codewars
上碰到过,并收录了一些不错的解决方式,可以戳这里:Palindrome For Your Domeconsole.log(sum(2,3)); // Outputs 5
console.log(sum(2)(3)); // Outputs 5
function sum() {
var fir = arguments[0];
if(arguments.length === 2) {
return arguments[0] + arguments[1]
} else {
return function(sec) {
return fir + sec;
}
}
}
for (var i = 0; i < 5; i++) {
var btn = document.createElement('button');
btn.appendChild(document.createTextNode('Button ' + i));
btn.addEventListener('click', function(){ console.log(i); });
document.body.appendChild(btn);
}
Button 4
,会在控制台输出什么?2、给出一种符合预期的实现方式
2、参考 IIFE。
var arr1 = "john".split(''); j o h n
var arr2 = arr1.reverse(); n h o j
var arr3 = "jones".split(''); j o n e s
arr2.push(arr3);
console.log("array 1: length=" + arr1.length + " last=" + arr1.slice(-1));
console.log("array 2: length=" + arr2.length + " last=" + arr2.slice(-1));
reverse()
的描述是酱紫的:代码如下 | 复制代码 |
Description
The reverse method transposes the elements of the calling array object in place, mutating the array, and returning a reference to the array. |
reverse()
会改变数组本身,并返回原数组的引用。slice
的用法请参考:sliceconsole.log(1 + "2" + "2");
console.log(1 + +"2" + "2");
console.log(1 + -"1" + "2");
console.log(+"1" + "1" + "2");
console.log( "A" - "B" + "2");
console.log( "A" - "B" + 2);
- 多个数字和数字字符串混合运算时,跟操作数的位置有关
console.log(2 + 1 + '3'); / /‘33’
console.log('3' + 2 + 1); //'321'
- 数字字符串之前存在数字中的正负号(+/-)时,会被转换成数字
console.log(typeof '3'); // string
console.log(typeof +'3'); //number
''
,将数字转为字符串console.log(typeof 3); // number
console.log(typeof (''+3)); //string
- 对于运算结果不能转换成数字的,将返回
NaN
console.log('a' * 'sd'); //NaN
console.log('A' - 'B'); // NaN
var list = readHugeList();
var nextListItem = function() {
var item = list.pop();
if (item) {
// process the list item...
nextListItem();
}
};
var list = readHugeList();
var nextListItem = function() {
var item = list.pop();
if (item) {
// process the list item...
setTimeout( nextListItem, 0);
}
};
for (var i = 0; i < 5; i++) {
setTimeout(function() { console.log(i); }, i * 1000 );
}
console.log("0 || 1 = "+(0 || 1));
console.log("1 || 2 = "+(1 || 2));
console.log("0 && 1 = "+(0 && 1));
console.log("1 && 2 = "+(1 && 2));
- 逻辑与返回第一个是
false
的操作数 或者 最后一个是true
的操作数
console.log(1 && 2 && 0); //0
console.log(1 && 0 && 1); //0
console.log(1 && 2 && 3); //3
false
,则该操作数之后的操作数都不会被计算- 逻辑或返回第一个是
true
的操作数 或者 最后一个是false
的操作数
console.log(1 || 2 || 0); //1
console.log(0 || 2 || 1); //2
console.log(0 || 0 || false); //false
true
,则该操作数之后的操作数都不会被计算console.log(1 && 2 || 0); //2
console.log(0 || 2 && 1); //1
console.log(0 && 2 || 1); //1
false
值:0, '0', +0, -0, false, '',null,undefined,null,NaN
console.log([] == false) //true
console.log({} == false) //false
console.log(Boolean([])) //true
console.log(Boolean({})) //true
if
中,[]
和 {}
都表现为 true
:console.log(false == '0')
console.log(false === '0')
var a={},
b={key:'b'},
c={key:'c'};
a[b]=123;
a[c]=456;
console.log(a[b]);
代码如下 | 复制代码 |
The reason for this is as follows: When setting an object property, JavaScript will implicitly stringify the parameter value. In this case, since b and c are both objects, they will both be converted to
[object Object]. As a result, a[b] anda[c] are both equivalent to a[ [object Object]] and can be used interchangeably. Therefore, setting or referencing a[c] is precisely the same as setting or referencing a[b]. |
console.log((function f(n){return ((n > 1) ? n * f(n-1) : n)})(10));
(function(x) {
return (function(y) {
console.log(x);
})(2)
})(1);
var hero = {
_name: 'John Doe',
getSecretIdentity: function (){
return this._name;
}
};
var stoleSecretIdentity = hero.getSecretIdentity;
console.log(stoleSecretIdentity());
console.log(hero.getSecretIdentity());
getSecretIdentity
赋给 stoleSecretIdentity
,等价于定义了 stoleSecretIdentity
函数:var stoleSecretIdentity = function (){
return this._name;
}
stoleSecretIdentity
的上下文是全局环境,所以第一个输出 undefined
。若要输出 John Doe
,则要通过 call
、apply
和 bind
等方式改变 stoleSecretIdentity
的this
指向(hero)。John Doe
。- DOM
- 指定的回调函数
function Traverse(p_element,p_callback) {
p_callback(p_element);
var list = p_element.children;
for (var i = 0; i < list.length; i++) {
Traverse(list[i],p_callback); // recursive call
}
}
相关文章
- Javascript面试笔试题(非常实用) 11-09
- JavaScript面试笔试题目收集整理 08-13
- Javascript 面试题5道 05-18
- javascript 一淘九宫格面试题详解 07-23
- HTML简单购物数量小程序代码展示 10-31
- html canvas实现弹幕功能 10-31