第一题
先来个简单的开开胃, 请问以下内容会输出什么?
js
var a = 0,
b = 0;
function A(a) {
A = function (b) {
console.log(a + b++);
};
console.log(a++);
}
A(1);
A(2);
答案解析
输出
解析
- 第一次调用 A 被重新赋值
- 第二次调用的是重新赋值的函数
第二题
这个也是开胃菜,请问以下内容会输出什么?
js
let a = {},
b = '0',
c = 0;
a[b] = '唐诗';
a[c] = '宋词';
console.log(a[b]);
答案解析
输出
解析
- js 中对象的 key 只能是
string、symbol
- a[b] 与 a[c] 都可看做是 a['0'], 最后一次赋值是
宋词
所以结果也就是宋词
第三题
这个应该是所有题里最简单的了, 请问以下内容会输出什么?
js
let a = {},
b = Symbol('1'),
c = Symbol('1');
a[b] = '唐诗';
a[c] = '宋词';
console.log(a[b]);
答案解析
输出
解析
Symbol
创建的数据是唯一的与里边的值无关!
第四题
这个题看着简单啊,注意有坑,请问以下内容会输出什么?
js
let a = {},
b = {
n: '1'
},
c = {
m: '2'
};
a[b] = '唐诗';
a[c] = '宋词';
console.log(a[b]);
答案解析
输出
解析
- 会调用对象的
toString
方法, 所以b、c
都等于[object Object]
第五题
这个题也有坑,谨慎回答,请问以下内容会输出什么?
js
var test = (function (i) {
return function () {
alert(i *= 2);
}
})(2);
test(5);
答案解析
输出
解析
- 如果你的回答是 4 也没啥毛病,但是准确些应该是 '4',因为 alert 只能输出字符串类型的值
- test 是一个立即执行函数, 传入了 2 所以等于 4
- 调用
test(5)
时,实际上是在调用test
变量所引用的匿名函数。这个匿名函数在定义时,已经通过闭包的方式访问了立即执行函数中的变量i
。在匿名函数中直接使用i
这个变量而不需要通过参数来传递。所以test(5)
传递的参数无效
第六题
请问以下内容会输出什么?
js
console.log(1)
const promise = new Promise((resolve, reject) => {
console.log(2);
setTimeout(() => {
resolve(3);
reject(4);
},0);
});
promise.then((data) => {
console.log(data);
}).catch((error)=> {
console.log(error);
});
console.log(5);
答案解析
输出
解析
- js 执行代码是从上到下执行的,遇见微任务就添加到微任务队列,遇到宏任务就添加到宏任务队列(宏任务先于微任务执行,同层级微任务先于宏任务执行)
- 首先执行
console.log(1)
,输出1
。 - 接着执行
new Promise
,在 Promise 函数中会立即执行console.log(2)
,输出2
。 - 在 Promise 函数中,使用
setTimeout
定时器注册一个回调函数延时时间为0
,该回调函数会被添加到宏任务队列中,等待下一次事件循环的执行。 - 接着执行
promise.then
和promise.catch
方法,但是由于 Promise 还未被解决或拒绝,因此这两个方法会被添加到微任务队列中,等待 Promise 状态的改变。 - 接着执行
console.log(5)
,输出5
。 - 由于微任务队列中有任务需要执行,因此在本次事件循环中,会先执行微任务队列中的任务。在微任务队列中,首先执行
promise.then
方法中的回调函数,输出3
。 - 接着执行
promise.catch
方法中的回调函数,由于 Promise 已经被解决该回调函数不会被执行。
第七题
请问以下内容会输出什么?
js
for (i = 0; i < 3; i++) {
setTimeout(() => console.log(++i), 0);
}
答案解析
输出
解析
- 这个题是一个变种,输出
3 3 3
那个大家应该都知道了! - 这里循环结束
i
的值是 3,i
没有使用任何关键字定义所以是全局变量在window
上是共享的 setTimeout
是宏任务会在下次事件循环时依次执行, 所以当setTimeout
执行的时候i
已经变成了 3- 第一次在执行 ++i 时 i 变成了 4 并输出,第二次在执行 ++i 时 i 变成了 5 并输出,第三次在执行 ++i 时 i 变成了 6 并输出
第八题
请问以下内容会输出什么?
js
var fullname = 'a';
var obj = {
fullname: 'b',
prop: {
fullname: 'c',
getFullname: () => {
return this.fullname;
}
}
};
console.log(obj.prop.getFullname());
var test = obj.prop.getFullname;
console.log(test());
答案解析
输出
js
a
a
解析
obj.prop.getFullname
是一个箭头函数,箭头函数中的this
指向定义时所在的上下文,而不是调用时所在的上下文。obj.prop.getFullname
是在全局上下文中定义的,因此this
指向全局对象window
。所以obj.prop.getFullname
返回的是'a'
。test
是一个变量,其值为obj.prop.getFullname
函数的引用。由于test
是在全局上下文中定义的,因此this
也指向全局对象window
。当调用test()
时,实际上是在全局上下文中调用obj.prop.getFullname
函数,因此返回的也是'a'
。
第九题
写一个函数根据参数输出对应的棱形
答案解析
js
function printDiamond(rows) {
if (rows < 1) return;
const maxStars = 2 * rows - 1;
for (let i = 1; i < maxStars; i += 2) {
const spaces = (maxStars - i) / 2;
// repeat 将指定字符串重复 n 次
console.log(' '.repeat(spaces) + '*'.repeat(i));
}
for (let i = maxStars; i >= 1; i -= 2) {
const spaces = (maxStars - i) / 2;
console.log(' '.repeat(spaces) + '*'.repeat(i));
}
}
printDiamond(3);
printDiamond(4);
总结
本文整理了几个前端的输出判断题,题目不算难更多的是 js 基础的一个理解
作者做了一遍大概是不及格!