• 技术文章 >web前端 >js教程

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

    青灯夜游青灯夜游2022-09-15 13:02:21转载294
    你到底懂不懂JavaScript?下面本篇文章给大家整理分享12道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。

    【相关推荐:javascript学习教程

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

    声明:本文转载于:掘金社区,如有侵犯,请联系admin@php.cn删除
    专题推荐:javascript
    上一篇:简单了解JavaScript变量or循环中的var和let 下一篇:node服务CPU过高怎么办?聊聊排查思路
    VIP课程(WEB全栈开发)

    相关文章推荐

    • ❤️‍🔥共22门课程,总价3725元,会员免费学• 使用javascript需要安装什么吗• javascript怎么判断两个数组是否有重复的元素• JavaScript webpack5配置及使用基本介绍• 归纳总结JavaScript条件判断使用技巧• 关于JavaScript中的数组方法和循环
    1/1

    PHP中文网