五年前端这题都做不对?

第一题

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

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

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

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

往期文章

相关推荐
3345543226 分钟前
element动态表头合并表格
开发语言·javascript·ecmascript
John.liu_Test28 分钟前
js下载excel示例demo
前端·javascript·excel
Yaml441 分钟前
智能化健身房管理:Spring Boot与Vue的创新解决方案
前端·spring boot·后端·mysql·vue·健身房管理
PleaSure乐事43 分钟前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro
哟哟耶耶43 分钟前
js-将JavaScript对象或值转换为JSON字符串 JSON.stringify(this.SelectDataListCourse)
前端·javascript·json
getaxiosluo44 分钟前
react jsx基本语法,脚手架,父子传参,refs等详解
前端·vue.js·react.js·前端框架·hook·jsx
理想不理想v1 小时前
vue种ref跟reactive的区别?
前端·javascript·vue.js·webpack·前端框架·node.js·ecmascript
知孤云出岫1 小时前
web 渗透学习指南——初学者防入狱篇
前端·网络安全·渗透·web
贩卖纯净水.1 小时前
Chrome调试工具(查看CSS属性)
前端·chrome
栈老师不回家2 小时前
Vue 计算属性和监听器
前端·javascript·vue.js