草庐IT

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

前端技术栈 2023-05-08 原文

大厂面试题分享 面试题库

前后端面试题库 (面试必备) 推荐:★★★★★

地址:前端面试题库  web前端面试题库 VS java后端面试题库大全

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。

大厂面试题分享 面试题库

前后端面试题库 (面试必备) 推荐:★★★★★

地址:前端面试题库  web前端面试题库 VS java后端面试题库大全

 

有关【面试题】你到底懂不懂JavaScript?来做做这12道面试题试试!的更多相关文章

  1. Hive SQL 五大经典面试题 - 2

    目录第1题连续问题分析:解法:第2题分组问题分析:解法:第3题间隔连续问题分析:解法:第4题打折日期交叉问题分析:解法:第5题同时在线问题分析:解法:第1题连续问题如下数据为蚂蚁森林中用户领取的减少碳排放量iddtlowcarbon10012021-12-1212310022021-12-124510012021-12-134310012021-12-134510012021-12-132310022021-12-144510012021-12-1423010022021-12-154510012021-12-1523.......找出连续3天及以上减少碳排放量在100以上的用户分析:遇到这类

  2. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法? - 2

    我遇到了一个非常奇怪的问题,我很难解决。在我看来,我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时,我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性,其中包括href和data-method。再次单击此链接后,我的服务器收到了对新href的请求,但使用的是旧的data-method,即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是,如果我刷新页面,HTML与"new"HTML相同(随返回的JS发生变化),但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  3. ruby-on-rails - 看不懂Ruby的神奇 - 2

    在railscasts项目中你可以看到这段代码:before(:each)dologin_asFactory(:user,:admin=>true)end函数对应的定义是:Factory.define:userdo|f|f.sequence(:github_username){|n|"foo#{n}"}end我不明白admin参数是如何传递给函数的,而函数中没有关于admin参数的字样。谢谢 最佳答案 Factory.define不是一个函数定义,它是一个方法,它接受一个符号或字符串(在本例中是用户)和一个定义你正在制作的工厂的bl

  4. ruby - Ruby 中的 `&:capitalize` 到底是什么? - 2

    我刚读了这个答案Convertingupper-casestringintotitle-caseusingRuby.有如下一行代码"abc".split(/(\W)/).map(&:capitalize).join&:capitalize到底是什么?在我自己将它放入irb之前,我会告诉你,它不是有效的ruby​​语法。它必须是某种Proc对象,因为Array#map通常需要一个block。但事实并非如此。如果我单独将它放入irb,我会得到syntaxerror,unexpectedtAMPER。 最佳答案 foo(&a_proc_o

  5. ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2

    我有这个:AccountSummary我想单击该链接,但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan

  6. 深度学习12. CNN经典网络 VGG16 - 2

    深度学习12.CNN经典网络VGG16一、简介1.VGG来源2.VGG分类3.不同模型的参数数量4.3x3卷积核的好处5.关于学习率调度6.批归一化二、VGG16层分析1.层划分2.参数展开过程图解3.参数传递示例4.VGG16各层参数数量三、代码分析1.VGG16模型定义2.训练3.测试一、简介1.VGG来源VGG(VisualGeometryGroup)是一个视觉几何组在2014年提出的深度卷积神经网络架构。VGG在2014年ImageNet图像分类竞赛亚军,定位竞赛冠军;VGG网络采用连续的小卷积核(3x3)和池化层构建深度神经网络,网络深度可以达到16层或19层,其中VGG16和VGG

  7. ruby-on-rails - 无法构建 gem native 扩展 (mkmf (LoadError)) - Ubuntu 12.04 - 2

    这个问题在这里已经有了答案:Unabletoinstallgem-Failedtobuildgemnativeextension-cannotloadsuchfile--mkmf(LoadError)(17个答案)关闭9年前。嘿,我正在尝试在一台新的ubuntu机器上安装rails。我安装了ruby​​和rvm,但出现“无法构建gemnative扩展”错误。这是什么意思?$sudogeminstallrails-v3.2.9(没有sudo表示我没有权限)然后它会输出很多“获取”命令,最终会出现这个错误:Buildingnativeextensions.Thiscouldtakeawhi

  8. ruby - 使用 OpenSSL ruby​​ 从一个 .p12 文件中提取多个 key - 2

    我想知道如何从Apple.p12文件中提取key。根据我有限的理解,.p12文件是X504证书和私钥的组合。我看到我遇到的每个.p12文件都有一个X504证书和至少一个key,在某些情况下有两个key。这是因为每个.p12都有一个Apple开发人员key,有些还有一个额外的key(可能是Appleroot授权key)。我只考虑那些具有两个key的.p12文件是有效的。我的目标是区分具有一个key的.p12文件和具有两个key的.p12文件。到目前为止,我已经使用OpenSSL来检查X504文件和任何.p12的key。例如,我有这段代码可以检查目录中的所有.p12文件:Dir.glob(

  9. javascript - jQuery 的 jquery-1.10.2.min.map 正在触发 404(未找到) - 2

    我看到有关未找到文件min.map的错误消息:GETjQuery'sjquery-1.10.2.min.mapistriggeringa404(NotFound)截图这是从哪里来的? 最佳答案 如果ChromeDevTools报告.map文件的404(可能是jquery-1.10.2.min.map、jquery.min.map或jquery-2.0.3.min.map,但任何事情都可能发生)首先要知道的是,这仅在使用DevTools时才会请求。您的用户不会遇到此404。现在您可以修复此问题或禁用sourcemap功能。修复:获取文

  10. ruby-on-rails - 我将 Rails3 与 tinymce 一起使用。如何呈现用户关闭浏览器javascript然后输入xss? - 2

    我有一个用Rails3编写的站点。我的帖子模型有一个名为“内容”的文本列。在帖子面板中,html表单使用tinymce将“content”列设置为textarea字段。在首页,因为使用了tinymce,post.html.erb的代码需要用这样的原始方法来实现。.好的,现在如果我关闭浏览器javascript,这个文本区域可以在没有tinymce的情况下输入,也许用户会输入任何xss,比如alert('xss');.我的前台会显示那个警告框。我尝试sanitize(@post.content)在posts_controller中,但sanitize方法将相互过滤tinymce样式。例如

随机推荐