第一题
先来个简单的开开胃, 请问以下内容会输出什么?
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 - ab 与 ac 都可看做是 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 基础的一个理解
作者做了一遍大概是不及格!