一周热文和最新 JS 进阶面试题 #3

水深无声 2023-01-21 14:30 37阅读 0赞

▲** 点击下方“前端开发博客”**关注公众号

回复“面试”获取面试精选文章

忙碌的一周过去了，一起来汇总一下前端开发博客最近一周有哪些值得阅读的东西吧。

## 文章排行 ##

1.  [10个棘手的用于面试的JavaScript代码段][10_JavaScript]
2.  [4种方案详解如何实现准时的setTimeout][4_setTimeout]
3.  [7个提高JavaScript代码质量的优秀实践][7_JavaScript]
4.  [Vue中避免滥用this去读取data中数据][Vue_this_data]
5.  [小程序静默登录方案设计][Link 1]
6.  [记一次高级前端开发工程师面经][Link 2]
7.  [一年半经验的前端面经总结][Link 3]

## 最新试题 ##

###### [上周试题][Link 4] ######

###### 18. 输出是什么？ ######

function checkAge(data) {
      if (data === { age: 18 }) {
        console.log('You are an adult!')
      } else if (data == { age: 18 }) {
        console.log('You are still an adult.')
      } else {
        console.log(`Hmm.. You don't have an age I guess`)
      }
    }
    
    checkAge({ age: 18 })

*  A: `You are an adult!`
 *  B: `You are still an adult.`
 *  C: `Hmm.. You don't have an age I guess`

#### 答案: C ####

在测试相等性时，基本类型通过它们的值（value）进行比较，而对象通过它们的引用（reference）进行比较。JavaScript 检查对象是否具有对内存中相同位置的引用。

题目中我们正在比较的两个对象不是同一个引用：作为参数传递的对象引用的内存位置，与用于判断相等的对象所引用的内存位置并不同。

这也是 `{ age: 18 } === { age: 18 }` 和 `{ age: 18 } == { age: 18 }` 都返回 `false` 的原因。

--------------------

###### 19. 输出是什么？ ######

function getAge(...args) {
      console.log(typeof args)
    }
    
    getAge(21)

*  A: `"number"`
 *  B: `"array"`
 *  C: `"object"`
 *  D: `"NaN"`

#### 答案: C ####

扩展运算符（`...args`）会返回实参组成的数组。而数组是对象，因此 `typeof args` 返回 `"object"`。

--------------------

###### 20. 输出是什么？ ######

function getAge() {
      'use strict'
      age = 21
      console.log(age)
    }
    
    getAge()

*  A: `21`
 *  B: `undefined`
 *  C: `ReferenceError`
 *  D: `TypeError`

#### 答案: C ####

使用 `"use strict"`，你可以确保不会意外地声明全局变量。我们从来没有声明变量 `age`，因为我们使用 `"use strict"`，它将抛出一个引用错误。如果我们不使用 `"use strict"`，它就会工作，因为属性 `age` 会被添加到全局对象中了。

--------------------

###### 21. 输出是什么？ ######

const sum = eval('10*10+5')

*  A: `105`
 *  B: `"105"`
 *  C: `TypeError`
 *  D: `"10*10+5"`

#### 答案: A ####

代码以字符串形式传递进来，`eval` 对其求值。如果它是一个表达式，就像本例中那样，它对表达式求值。表达式是 `10 * 10 + 5`。这将返回数字 `105`。

--------------------

###### 22. cool\_secret 可访问多长时间？ ######

sessionStorage.setItem('cool_secret', 123)

*  A: 永远，数据不会丢失。
 *  B: 当用户关掉标签页时。
 *  C: 当用户关掉整个浏览器，而不只是关掉标签页。
 *  D: 当用户关闭电脑时。

#### 答案: B ####

关闭 tab 标签页 后，`sessionStorage` 存储的数据才会删除。

如果使用 `localStorage`，那么数据将永远在那里，除非调用了 `localStorage.clear()`。

--------------------

###### 23. 输出是什么？ ######

var num = 8
    var num = 10
    
    console.log(num)

*  A: `8`
 *  B: `10`
 *  C: `SyntaxError`
 *  D: `ReferenceError`

#### 答案: B ####

使用 `var` 关键字，你可以用相同的名称声明多个变量。然后变量将保存最新的值。

你不能使用 `let` 或 `const` 来实现这一点，因为它们是块作用域的。

--------------------

###### 24. 输出是什么？ ######

const obj = { 1: 'a', 2: 'b', 3: 'c' }
    const set = new Set([1, 2, 3, 4, 5])
    
    obj.hasOwnProperty('1')
    obj.hasOwnProperty(1)
    set.has('1')
    set.has(1)

*  A: `false` `true` `false` `true`
 *  B: `false` `true` `true` `true`
 *  C: `true` `true` `false` `true`
 *  D: `true` `true` `true` `true`

#### 答案: C ####

所有对象的键（不包括 Symbol）在底层都是字符串，即使你自己没有将其作为字符串输入。这就是为什么 `obj.hasOwnProperty('1')` 也返回 `true`。

对于集合，它不是这样工作的。在我们的集合中没有 `'1'`：`set.has('1')` 返回 `false`。它有数字类型为 `1`，`set.has(1)` 返回 `true`。

--------------------

好了，以上就是本周的汇总，以后我们每周会汇总一次，相信你会从中找到你喜欢的内容，最后，记得点个在看，转发文章，关注一下我哦。

**整理不易，点个“在看”，支持我们↓↓↓**

[10_JavaScript]: http://mp.weixin.qq.com/s?__biz=MzAxODE4MTEzMA%3D%3D&chksm=83dbb84bb4ac315d7127b468d71c9641b4939abe6d8a1162e9709be638666b36289e8f46fde5&idx=1&mid=2650088750&scene=21&sn=f7da40973d58ae50bc59b272e9bb9dd5#wechat_redirect
[4_setTimeout]: https://mp.weixin.qq.com/s?__biz=MzAxODE4MTEzMA%3D%3D&chksm=83dbb990b4ac308644bdb6ed5a335d6d5cc3446cfdbe4a2fcb73d144c3d9320d520079ba195a&idx=1&lang=zh_CN&mid=2650088693&scene=21&sn=e0af8cea38e24cb0443e1440af5064a2&token=1328217054#wechat_redirect
[7_JavaScript]: http://mp.weixin.qq.com/s?__biz=MzAxODE4MTEzMA%3D%3D&chksm=83dbb80fb4ac311917963e0b4fd9844fd539b3bfe585e786b9a2e618c22910947e1e2101d374&idx=1&mid=2650088810&scene=21&sn=9593fc5fe0d043233947d274ca507ef9#wechat_redirect
[Vue_this_data]: http://mp.weixin.qq.com/s?__biz=MzAxODE4MTEzMA%3D%3D&chksm=83dbb8deb4ac31c8a2c693aa8b62395e9874b7aef093d541e7fb995d63ebb798dbd480b23e04&idx=2&mid=2650088891&scene=21&sn=7f9b1d45943e792a37ba82b532898a36#wechat_redirect
[Link 1]: http://mp.weixin.qq.com/s?__biz=MzAxODE4MTEzMA%3D%3D&chksm=83dbb8deb4ac31c813bff4aa35ad7cba938aa3cb24f4b65c9881fc4974912f4a068ad60f0639&idx=1&mid=2650088891&scene=21&sn=320135ad7a94096965e581b4858e0cd0#wechat_redirect
[Link 2]: http://mp.weixin.qq.com/s?__biz=MzAxODE4MTEzMA%3D%3D&chksm=83dbb80fb4ac3119f1b1be41fb6cbdfedc3bbe1efb4f478804a81a4f2434c1a6797988c2fb0c&idx=2&mid=2650088810&scene=21&sn=f111434fdc1d0a326a3045df5590ebc9#wechat_redirect
[Link 3]: http://mp.weixin.qq.com/s?__biz=MzAxODE4MTEzMA%3D%3D&chksm=83dbb82bb4ac313dd343a69b595f6bdee2ca55cd3e46d2245b89293f5b5d8c50b0b35649a607&idx=2&mid=2650088782&scene=21&sn=7a65fd8fe502dca7e7fab5c85173cba4#wechat_redirect
[Link 4]: http://mp.weixin.qq.com/s?__biz=MzAxODE4MTEzMA%3D%3D&chksm=83dbb980b4ac30963a23e612ac99dc17c4e4f756fbcba0129d84b50af1b798c90d16b6fffd7c&idx=1&mid=2650088677&scene=21&sn=302e8a196cfd16cd859b8627b8e4ef57#wechat_redirect