PHP程序员小白到大牛集训(12期免息)
首页 >web前端 >js教程 > 正文

分享12道面试题,看你懂不懂JavaScript!

转载2022-09-15 13:02:21769 + Vue前端学习QQ群(点击入群)
你到底懂不懂JavaScript?下面本篇文章给大家整理分享12道JavaScript面试题,来做做这12道面试题试试,看看能不能全部答对!

前端(vue)入门到精通课程:进入学习
API 文档、设计、调试、自动化测试一体化协作工具:点击使用

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。

【相关推荐:javascript学习教程

以上就是分享12道面试题,看你懂不懂JavaScript!的详细内容,更多请关注php中文网其它相关文章!

声明:本文转载于:掘金社区,如有侵犯,请联系admin@php.cn删除

  • 相关标签:javascript
  • 程序员必备接口测试调试工具:点击使用

    Apipost = Postman + Swagger + Mock + Jmeter

    Api设计、调试、文档、自动化测试工具

    后端、前端、测试,同时在线协作,内容实时同步

    支持grpc,http,websocket,socketio,socketjs类型接口调试

    相关文章

    相关视频


    视频教程分类

    专题推荐

    官方公众号

    php中文网课程

    扫码关注官方公众号
    回复“phpcn01”领取php学习资料课程
    全套工具、电子书、脑图、内部课程等

    推荐视频教程

    开通VIP会员课 0元学

    热门推荐