# 第一题先来个简单的开开胃, 请问以下内容会输出什么? ```js var a = 0, b = 0; function A(a) { A = function (b) { console.log(a + b++); }; console.log(a++); } A(1); A(2); ```

答案解析

##### 输出 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d34050ec665940788ac4d68f203d2d51~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1080&h=98&s=24144&e=png&b=faf9f8) ##### 解析 1. 第一次调用 A 被重新赋值 2. 第二次调用的是重新赋值的函数

# 第二题这个也是开胃菜,请问以下内容会输出什么? ```js let a = {}, b = '0', c = 0; a[b] = '唐诗'; a[c] = '宋词'; console.log(a[b]); ```

答案解析

##### 输出 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0dcbe401347b4713a1f5b5f8fff52ed9~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1082&h=52&s=14520&e=png&b=faf9f8) ##### 解析 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]); ```

答案解析

##### 输出 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e910a834c92d4e5ab329082de4e6c73e~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1078&h=50&s=14616&e=png&b=faf9f8) ##### 解析 1. `Symbol` 创建的数据是唯一的与里边的值无关!

# 第四题这个题看着简单啊,注意有坑,请问以下内容会输出什么? ```js let a = {}, b = { n: '1' }, c = { m: '2' }; a[b] = '唐诗'; a[c] = '宋词'; console.log(a[b]); ```

答案解析

##### 输出 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8f802cbaa55049ba82ae9d303f56a90e~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1084&h=52&s=14951&e=png&b=faf9f8) ##### 解析 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e8aad9aba33e4f07811eec385203a0ed~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1064&h=162&s=44016&e=png&b=faf9f8) 1. 会调用对象的 `toString` 方法, 所以 `b、c` 都等于 `[object Object]`

# 第五题这个题也有坑,谨慎回答,请问以下内容会输出什么? ```js var test = (function (i) { return function () { alert(i *= 2); } })(2); test(5); ```

答案解析

##### 输出 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/685dddd8d8a24549aeb95eab7c1a27b2~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=920&h=286&s=74683&e=png&b=fefefe) ##### 解析 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); ```

答案解析

##### 输出 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/61cdfa96a81b420c821a1e1d287348b1~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1080&h=204&s=44835&e=png&b=faf9f8) ##### 解析 1. js 执行代码是从上到下执行的,遇见微任务就添加到微任务队列,遇到宏任务就添加到宏任务队列(**宏任务先于微任务执行,同层级微任务先于宏任务执行**) 1. 首先执行 `console.log(1)`，输出 `1`。 1. 接着执行 `new Promise`，在 Promise 函数中会立即执行 `console.log(2)`，输出 `2`。 1. 在 Promise 函数中，使用 `setTimeout` 定时器注册一个回调函数延时时间为 `0`，该回调函数会被添加到宏任务队列中，等待下一次事件循环的执行。 1. 接着执行 `promise.then` 和 `promise.catch` 方法，但是由于 Promise 还未被解决或拒绝，因此这两个方法会被添加到微任务队列中，等待 Promise 状态的改变。 1. 接着执行 `console.log(5)`，输出 `5`。 1. 由于微任务队列中有任务需要执行，因此在本次事件循环中，会先执行微任务队列中的任务。在微任务队列中，首先执行 `promise.then` 方法中的回调函数，输出 `3`。 1. 接着执行 `promise.catch` 方法中的回调函数，由于 Promise 已经被解决该回调函数不会被执行。

# 第七题请问以下内容会输出什么? ```js for (i = 0; i < 3; i++) { setTimeout(() => console.log(++i), 0); } ```

答案解析

##### 输出 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ade6209a809a452dbe49c18bbd9c2060~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1076&h=210&s=36049&e=png&b=faf9f8) ##### 解析 1. 这个题是一个变种,输出 `3 3 3` 那个大家应该都知道了! 1. 这里循环结束 `i` 的值是 3, `i` 没有使用任何关键字定义所以是全局变量在 `window` 上是共享的 1. `setTimeout` 是宏任务会在下次事件循环时依次执行, 所以当 `setTimeout` 执行的时候 `i` 已经变成了 3 1. 第一次在执行 ++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` 指向定义时所在的上下文，而不是调用时所在的上下文。 1. `obj.prop.getFullname` 是在全局上下文中定义的，因此 `this` 指向全局对象 `window`。所以`obj.prop.getFullname` 返回的是 `'a'`。 1. `test` 是一个变量，其值为 `obj.prop.getFullname` 函数的引用。由于 `test` 是在全局上下文中定义的，因此 `this` 也指向全局对象 `window`。当调用 `test()` 时，实际上是在全局上下文中调用 `obj.prop.getFullname` 函数，因此返回的也是 `'a'`。

# 第九题写一个函数根据参数输出对应的棱形 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2e79fbd868cc4cc68d69d4b64c085b9d~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1382&h=514&s=111346&e=png&b=303841)

答案解析

```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); ``` ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4895a196ff3347f0b70e238f23a4b00d~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=866&h=586&s=27497&e=png&b=292c33)

# 总结本文整理了几个前端的输出判断题,题目不算难更多的是 js 基础的一个理解作者做了一遍大概是不及格! ### 各位大哥都做对了吗?评论区留下你们的见解! # 往期文章 + [从零到一建立属于自己的前端组件库](https://juejin.cn/post/7124487017588588574) + [求求你们了，对自己代码质量有点要求！](https://juejin.cn/post/7073049322656366622) + [不要用vue2的思维写vue3](https://juejin.cn/post/7105930378052894750) + [openlayers 实战离线地图](https://juejin.cn/post/7017301189406490655) + [一个开源的leafletjs示例项目](https://juejin.cn/post/7269411820905087013) + [vue3 JSX 从零开始](https://juejin.cn/post/6969079432371765262) + [手摸手，配置项目中全局loading](https://juejin.cn/post/6911102469535694856) + [vue + element-ui动态主题及网站换肤2021，亲测可用！！！](https://juejin.cn/post/7028395505075879967) + [vue3+elementPlus主题动态切换2022，亲测可用！](https://juejin.cn/post/7035793403342225445) + [go ➕ “蓝兔支付”实现个人网上支付](https://juejin.cn/post/7280007090768298040)