五年前端这题都做不对?

第一题

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

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 基础的一个理解

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

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

往期文章

相关推荐
卓伊凡2 分钟前
【03】建立隐私关于等相关页面和内容-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓
前端
笨笨鸟慢慢飞4 分钟前
Vue3后退不刷新,前进刷新
前端
LuckySusu6 分钟前
【vue篇】SSR 深度解析:服务端渲染的“利”与“弊”
前端·vue.js
LuckySusu7 分钟前
【vue篇】SPA 单页面应用:现代 Web 的革命与挑战
前端·vue.js
LuckySusu8 分钟前
【vue篇】Vue 初始化页面闪动(FOUC)问题终极解决方案
前端·vue.js
fruge10 分钟前
从 0 到 1 理解前端工程化:图表化解析核心逻辑
前端
LuckySusu10 分钟前
【vue篇】技术分析:Template 与 JSX 的本质区别与选型指南
前端·vue.js
BestStarLi15 分钟前
个人写码感悟:TailwindCSS不要忽视子选择器
前端
_大学牲17 分钟前
Flutter 之魂 GetX🔥(三)深入掌握依赖管理
前端·flutter
今天头发还在吗23 分钟前
【框架演进】Vue与React的跨越性变革:从Vue2到Vue3,从Class到Hooks
javascript·vue.js·react.js