五年前端这题都做不对?

第一题

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

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

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

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

往期文章

相关推荐
二十雨辰1 小时前
歌词滚动效果
前端·css
法医1 小时前
和文心快码做朋友,让编程像“说话”一样简单
前端·文心快码
前端小巷子1 小时前
JS 打造「放大镜 + 缩略图」一体组件
前端·javascript·面试
陈随易1 小时前
适合中国宝宝的AI编程神器,文心快码
前端·后端·node.js
知识分享小能手1 小时前
React学习教程,从入门到精通,React AJAX 语法知识点与案例详解(18)
前端·javascript·vue.js·学习·react.js·ajax·vue3
UrbanJazzerati2 小时前
掌握 DOM 的基础属性与方法:从操作元素到构建动态效果
前端·面试
hashiqimiya2 小时前
html实现右上角有个图标,鼠标移动到该位置出现手型,点击会弹出登录窗口。
前端·html
古夕2 小时前
前端文件下载的三种方式:a标签、Blob、ArrayBuffer
前端·javascript·vue.js
纯真时光2 小时前
Vue3中pinia状态管理库的使用(Composition API 风格)
前端
李李记2 小时前
Node.js 打包踩坑?NCC+PKG 从单文件到多平台可执行文件,解决 axios 缺失等 80% 问题
javascript