你到底懂不懂JavaScript?来做做这12道面试题试试!

本文涉及的产品
全局流量管理 GTM,标准版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
云解析 DNS,旗舰版 1个月
简介: 你到底懂不懂JavaScript?来做做这12道面试题试试!

JavaScript 是每一个前端开发者都应该掌握的基础技术,但是很多时候,你可能并不完全懂 JavaScript。

检测一个人的技术水平有两个非常简单的办法,看他写的代码,或者让他看别人写的代码。

我总结了一些可以考察对 JavaScript 理解能力的代码题,你可以试着做一下,看看能不能全部答对。全答对了,才算是懂一些 JavaScript。


第一题


尝试推测它的输出:


const person = { name: '代码与野兽' }
Object.defineProperty(person, 'age', { value: 18 })
console.log(person.age)
console.log(Object.keys(person))

输出:


18
['name']

解析:

很多人容易搞错第二个输出,因为使用 defineProperty 定义的属性默认是不可枚举的。


第二题


尝试推测它的输出:


const name = '代码与野兽'
age = 18
console.log(delete name)
console.log(delete age)
console.log(typeof age)

输出:


false
true
"undefined"

解析:

第一个 false 是因为 delete 只能删除对象上的属性,name 不是属性,所以删除失败。

第二个 true 是因为我们不使用任何声明创建变量,它会被视作全局变量,挂载到 window 对象上面,等价于 delete window.age,所以删除成功。

第三个 undefined 是因为 age 被删除了。


第三题


尝试推测它的输出:


let person = { name: '代码与野兽' }
const members = [person]
person = null
console.log(members)

输出:


[{
  name: "代码与野兽"
}]

解析:

很多人会认为输出结果应该是 [ null ],但是,我们只是设置了 person 这个变量的新引用,之前的引用还在 members 中。

简单来说,{ name: '代码与野兽' } 这个对象存在某个内存空间中,假设它的地址是 X201。它的逻辑大概像下面这样:


let person = X201
const members = [X201]
persion = null

第四题


尝试推测它的输出:


function SuperHero() {
  this.make = '代码与野兽'
  return { make: '野兽与代码'}
}
const mySuperhero = new SuperHero()
console.log(mySuperhero)

输出:


{
  make: "野兽与代码"
}

解析:

如果构造函数最终返回了一个对象,那么之前设置的属性都将失效。


第五题


尝试推测它的输出:


const name = '代码与野兽'
console.log(name.padStart(14))
console.log(name.padStart(2))

输出:


"         代码与野兽"
"代码与野兽"

解析:

padStart 方法可以在字符串的开头填充空格。

参数是新字符串的总长度,如果这个长度比原来的字符串长度短,那么不会填充。


第六题


尝试推测它的输出:


console.log(parseInt("7"))
console.log(parseInt("7*6"))
console.log(parseInt("7Din"))

输出:


7
7
7

解析:

如果 parseInt 的参数是字符串和数字的组合,那么它会从头开始检查,直到碰到数据类型错误的位置,如果在数据类型错误的位置之前是一个有效的数字,它就会返回数字。


第七题


尝试推测它的输出:


[1, 2, 3, 4].reduce((x, y) => console.log(x, y))

输出:


1
2
undefined
3
undefined
4

解析:

如果我们不给 reduce 传递初始值,那么 x 会是数组的第一个值,y 是数组的第二个值。


第八题


尝试推测它的输出:


function getUserInfo(one, two, three) {
  console.log(one)
  console.log(two)
  console.log(three)
}
const superHero = '代码与野兽'
const age = 1000
getUserInfo`${superHero} 是 ${age} 岁`
getUserInfo`hello`

输出:


["", " 是 ", " 岁"]
"代码与野兽"
1000
["hello"]
undefined
undefined

解析:

我们使用模板字符串语法去调用函数时,第一个参数始终都是分割好的字符串数组。其余的参数是模板表达式的值。


第九题


尝试推测它的输出:


(() => {
  let x, y;
  try {
    throw new Error()
  } catch (x) {
    (x = 1), (y = 2);
    console.log(x)
  }
  console.log(x)
  console.log(y)
})()

输出:


1
undefined
2

解析:

在 catch 中访问 x,访问的是参数,而不是外面的变量 x。


第十题


尝试推测它的输出:


class Clazz {}
console.log(typeof Clazz)

输出:


"function"

解析:

在 JavaScript 中,Class 也是 function。


第十一题


尝试推测它的输出:


const arr = [7, 1, 4, 3, 2];
for (const elem of arr) {
  setTimeout(() => console.log(elem), elem);
}

输出:


1
2
3
4
7

解析:

没什么好解释的......


第十二题


尝试推测它的输出:


const foo = { bar: 1 };
with(foo) {
  var bar = 2
};
console.log(foo.bar);

输出:


2

解析:

with 的对象会作为 global 对象。在 with 使用 var 等价于 window.[xxx]。而这时 foo 就是那个 window。



相关文章
|
2月前
|
JSON JavaScript 前端开发
Javascript基础 86个面试题汇总 (附答案)
该文章汇总了JavaScript的基础面试题及其答案,涵盖了JavaScript的核心概念、特性以及常见的面试问题。
48 3
|
2月前
|
前端开发 JavaScript
JavaScript 面试系列:如何理解 ES6 中 Generator ?常用使用场景有哪些?
JavaScript 面试系列:如何理解 ES6 中 Generator ?常用使用场景有哪些?
|
3月前
|
JavaScript 前端开发
常见的JS面试题
【8月更文挑战第5天】 常见的JS面试题
60 3
|
7天前
|
JSON JavaScript 前端开发
[JS]面试官:你的简历上写着熟悉jsonp,那你说说它的底层逻辑是怎样的?
本文介绍了JSONP的工作原理及其在解决跨域请求中的应用。首先解释了同源策略的概念,然后通过多个示例详细阐述了JSONP如何通过动态解释服务端返回的JavaScript脚本来实现跨域数据交互。文章还探讨了使用jQuery的`$.ajax`方法封装JSONP请求的方式,并提供了具体的代码示例。最后,通过一个更复杂的示例展示了如何处理JSON格式的响应数据。
18 2
[JS]面试官:你的简历上写着熟悉jsonp,那你说说它的底层逻辑是怎样的?
|
25天前
|
Web App开发 JavaScript 前端开发
前端Node.js面试题
前端Node.js面试题
|
3月前
|
存储 JavaScript 前端开发
2022年前端js面试题
2022年前端js面试题
37 0
|
3月前
|
JavaScript 前端开发 程序员
JS小白请看!一招让你的面试成功率大大提高——规范代码
JS小白请看!一招让你的面试成功率大大提高——规范代码
|
3月前
|
存储 JavaScript 前端开发
JS浅拷贝及面试时手写源码
JS浅拷贝及面试时手写源码
|
3月前
|
JavaScript 前端开发
JS:类型转换(四)从底层逻辑让你搞懂经典面试问题 [ ] == ![ ] ?
JS:类型转换(四)从底层逻辑让你搞懂经典面试问题 [ ] == ![ ] ?
|
4月前
|
缓存 JavaScript 前端开发
js高频面试题,整理好咯
中级前端面试题,不低于12k,整理的是js较高频知识点,可能不够完善,大家有兴趣可以留言补充,我会逐步完善,若发现哪里有错,还请多多斧正。
下一篇
无影云桌面