五年前端这题都做不对?

第一题

先来个简单的开开胃, 请问以下内容会输出什么?

js 复制代码
var a = 0,  
b = 0; 

function A(a) {  
    A = function (b) {  
        console.log(a + b++);  
    };  
    console.log(a++);  
}  

A(1);  
A(2);

答案解析

输出
解析
  1. 第一次调用 A 被重新赋值
  2. 第二次调用的是重新赋值的函数

第二题

这个也是开胃菜,请问以下内容会输出什么?

js 复制代码
let a = {},  
b = '0',  
c = 0;  
  
a[b] = '唐诗';  
  
a[c] = '宋词';  
  
console.log(a[b]);

答案解析

输出
解析
  1. js 中对象的 key 只能是 string、symbol
  2. a[b] 与 a[c] 都可看做是 a['0'], 最后一次赋值是 宋词 所以结果也就是 宋词

第三题

这个应该是所有题里最简单的了, 请问以下内容会输出什么?

js 复制代码
let a = {},  
b = Symbol('1'),  
c = Symbol('1');  
  
a[b] = '唐诗';  
  
a[c] = '宋词';  
  
console.log(a[b]);

答案解析

输出
解析
  1. Symbol 创建的数据是唯一的与里边的值无关!

第四题

这个题看着简单啊,注意有坑,请问以下内容会输出什么?

js 复制代码
let a = {},  
b = {  
n: '1'  
},  
c = {  
m: '2'  
};  
  
a[b] = '唐诗';  
  
a[c] = '宋词';  
  
console.log(a[b]);

答案解析

输出
解析
  1. 会调用对象的 toString 方法, 所以 b、c 都等于 [object Object]

第五题

这个题也有坑,谨慎回答,请问以下内容会输出什么?

js 复制代码
var test = (function (i) {  
    return function () {  
        alert(i *= 2);  
    }  
})(2);  

test(5);

答案解析

输出
解析
  1. 如果你的回答是 4 也没啥毛病,但是准确些应该是 '4',因为 alert 只能输出字符串类型的值
  2. test 是一个立即执行函数, 传入了 2 所以等于 4
  3. 调用 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);

答案解析

输出
解析
  1. js 执行代码是从上到下执行的,遇见微任务就添加到微任务队列,遇到宏任务就添加到宏任务队列(宏任务先于微任务执行,同层级微任务先于宏任务执行)
  2. 首先执行 console.log(1),输出 1
  3. 接着执行 new Promise,在 Promise 函数中会立即执行 console.log(2),输出 2
  4. 在 Promise 函数中,使用 setTimeout 定时器注册一个回调函数延时时间为 0,该回调函数会被添加到宏任务队列中,等待下一次事件循环的执行。
  5. 接着执行 promise.thenpromise.catch 方法,但是由于 Promise 还未被解决或拒绝,因此这两个方法会被添加到微任务队列中,等待 Promise 状态的改变。
  6. 接着执行 console.log(5),输出 5
  7. 由于微任务队列中有任务需要执行,因此在本次事件循环中,会先执行微任务队列中的任务。在微任务队列中,首先执行 promise.then 方法中的回调函数,输出 3
  8. 接着执行 promise.catch 方法中的回调函数,由于 Promise 已经被解决该回调函数不会被执行。

第七题

请问以下内容会输出什么?

js 复制代码
for (i = 0; i < 3; i++) {  
    setTimeout(() => console.log(++i), 0);  
}

答案解析

输出
解析
  1. 这个题是一个变种,输出 3 3 3 那个大家应该都知道了!
  2. 这里循环结束 i 的值是 3, i 没有使用任何关键字定义所以是全局变量在 window 上是共享的
  3. setTimeout 是宏任务会在下次事件循环时依次执行, 所以当 setTimeout 执行的时候 i 已经变成了 3
  4. 第一次在执行 ++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
解析
  1. obj.prop.getFullname 是一个箭头函数,箭头函数中的 this 指向定义时所在的上下文,而不是调用时所在的上下文。
  2. obj.prop.getFullname 是在全局上下文中定义的,因此 this 指向全局对象 window。所以obj.prop.getFullname 返回的是 'a'
  3. 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 基础的一个理解

作者做了一遍大概是不及格!

各位大哥都做对了吗?评论区留下你们的见解!

往期文章

相关推荐
小墨宝8 分钟前
js 生成pdf 并上传文件
前端·javascript·pdf
HED24 分钟前
用扣子快速手撸人生中第一个AI智能应用!
前端·人工智能
DN金猿28 分钟前
使用npm install或cnpm install报错解决
前端·npm·node.js
丘山子28 分钟前
一些鲜为人知的 IP 地址怪异写法
前端·后端·tcp/ip
志存高远6641 分钟前
Kotlin 的 suspend 关键字
前端
www_pp_1 小时前
# 构建词汇表:自然语言处理中的关键步骤
前端·javascript·自然语言处理·easyui
YuShiYue1 小时前
pnpm monoreop 打包时 node_modules 内部包 typescript 不能推导出类型报错
javascript·vue.js·typescript·pnpm
天天扭码1 小时前
总所周知,JavaScript中有很多函数定义方式,如何“因地制宜”?(ˉ﹃ˉ)
前端·javascript·面试
一个专注写代码的程序媛2 小时前
为什么vue的key值,不用index?
前端·javascript·vue.js
장숙혜2 小时前
ElementUi的Dropdown下拉菜单的详细介绍及使用
前端·javascript·vue.js