8个你可能不知道答案的常见JavaScript面试问题

news2025/1/18 8:50:46

不管你喜不喜欢,棘手的问题仍然会被野外的面试官问到。

 

原因是,这些问题可以告诉你很多关于你对语言的核心理解,因此你是否适合这份工作。

这些问题中涉及的常见概念包括:

  • Hoisting
  • 关闭
  • 范围
  • 值与引用类型
  • 原型继承

今天我们要一石二鸟。

准备好迎接下一次面试并立即复习核心概念。

1、为什么 typeoff是未定义的?

var y = 1;
if (function f() {}) {
 y += typeof f;
}

console.log(y); // 1undefined

解释

  • 条件语句if(function f() {})返回function f() {}真值,因此代码在 if 语句内执行。
  • typeof f返回undefined,因为该函数f(){}从未在语句外if声明,所以它不“存在”在if括号外if (f(){}) { It doesn't exist here }

这就是我们“修复”此代码片段的方式:

var y = 1;

function f() {}; //declare function outside if brackets

if (f) { //f exists so we enter the if block
 y += typeof f; //here typeof f is function
}

console.log(y); // 1function

2、写一个闭包的例子

function createFunction(msg) {
   return function(name) {
       return msg + name;
  }
}

let myFunc = createFunction("Hey ");
console.log(myFunc("Dude")); // Hey Dude

解释

  • 第一个函数(createFunction)返回一个匿名函数
  • 匿名函数msg从外部函数(createFunction())+name自身返回参数。

当我们声明变量javascript let myFunc = createFunction("Hey ")时,变量myFunc持有对外部返回的匿名函数的引用

有趣的是,当您调用javascript myFunc("Dude")(仅传递“名称”参数)时,它仍然“记住”执行msg时传入的值createFunction()。

从创建函数的外部“范围”访问变量的能力是闭包的定义之一。

在此处了解有关闭包的更多信息

3、编写一个可以像 multiply(2)(5)(10) 一样调用并返回 100 的 multiply() 函数

这与上面的示例类似,不同之处在于我们正在重新调整一个附加函数并立即调用所有函数(不使用变量来保存引用)

function multiply(x) {
   return function(y){
       return function(z) {
         return x*y*z;
      };
  }
}

multiply(2)(5)(10) //100

通过调用 multiply like

javascript multiply(2)(5)(10)

我们正在一个接一个地调用返回的函数。

我们可以使用中间变量使其更清晰。我们来看一下:

let func1 = multiply(2); // x is 2
console.log(func1) // function(y) { return function(z) { return x*y*z } }

let func2 = func1(5); // y is 5
console.log(func1) // function(z) { return x*y*z }

func2(10); // z is 10
// finally has all 3 values and returns their product.

在此处了解有关嵌套函数的更多信息

4、delete局部变量的运算符

以下代码的输出是什么?

let output = (function(x) {
   delete x;
   return x;
})(0);

*删除运算符旨在用于删除对象的属性,而不是值类型(在本例中为数字)。

这会起作用:

let obj = { name: 'Gus', age: 32 }
delete obj.age;

console.log(obj) // { name: 'Gus' }

5、delete对象运算符

const Person = {
   name: 'Gus',
   age: 32,
}

const person1 = Object.create(Person);
delete person1.age

console.log(person1.age); // 32
  • person1创建时将其原型设置为Person对象。
  • 当实例person1的age属性被删除时,我们仍然可以访问age原型对象(Person)的属性
  • 这就是为什么它似乎不起作用的原因。

这是一个很大的话题,你可以在这里了解更多

6、delete数组运算符

记录 arr.length 的结果是什么?

 let arr = ["a", "b", "c", "d"];
 delete arr[2];

 arr.length // 4
  • 在数组上使用时,删除运算符将删除元素设置为“空”,但不会将其从数组中删除,也不会更改数组的长度。

7、两个 console.log 的值是多少?

var favouriteAnime = "Dragon Ball";
(function() {
   console.log(favouriteAnime);
   var favouriteAnime = "Naruto";
   console.log(favouriteAnime);
})();

// undefined
// Naruto

以下是编译器如何解释这段代码:

var favouriteAnime; // declared and initialized with undefined
(function() {
   console.log(favouriteAnime);
   var favouriteAnime = "Naruto";
   console.log(favouriteAnime);
})();

favouriteAnime = "Dragon Ball";

// undefined
// Naruto

声明 JavaScript 函数和变量时要记住一些事情。

  • 变量赋值(myVar = 5) 优先于函数声明(function func(){})
  • 函数声明(function func(){}) 优先于变量声明(var myVar;) *let 或 const
  • 函数声明 (function func(){}) 被提升到变量声明 (var myVar;) 之上,但未被提升到变量赋值 (myVar = 5;) 之上。

作为最佳实践,您应该始终在调用函数之前声明它们。

在此处了解有关提升的更多信息

8、你会如何检查一个数字是否是整数?

检查数字是否为十进制或整数的最简单方法是使用内置的Number.isInteger()

console.log(Number.isInteger(4)); // true
console.log(Number.isInteger(12.2)); // false
console.log(Number.isInteger(0.3)); // false

另一种方法是看除以 1 是否还有余数。

function isInt(num) {
 return num % 1 === 0;
}

console.log(isInt(4)); // true
console.log(isInt(12.2)); // false
console.log(isInt(0.3)); // false

注意:在处理浮点数时,JavaScript 的精度是有限制的。如果你检查Number.isInteger(1.0000000000000001)将返回true。你可以在这里了解更多

结论

请记住按 F12 并亲自尝试这些示例。

这个微小的动作将帮助您更长时间地记住所学内容。

这是我们今天看到的内容的回顾:

  • 为什么 typeoff是未定义的?
  • 写一个闭包的例子
  • 编写一个可以像 multiply(2)(5)(10) 一样调用并返回 100 的 multiply() 函数
  • 局部变量的删除运算符
  • 对象上的删除运算符
  • 数组上的删除运算符
  • 两个 console.log 的值是多少?
  • 你会如何检查一个数字是否是整数?

谢谢阅读!如果你喜欢这篇文章*在下面发表评论(你可以打个招呼!),如果对你有帮助,记得点赞支持哦!

为了更好的让大家认识到 JavaScript 的精髓,我们在三十天计划群里推出了几节非常重要的 JavaScript 课程体系,而且每个系列知识点都保障是完整的。感兴趣可以通过下方的练习方式参与课程哦 。如果你正在学习 JavaScript,我们已经在三十天计划中完成了 4 个综合项目实战,那不妨可以听下这个课程体系,三十天计划群里还提供了算法、数组等知识体系!

前端工程师成长方法

更多完整 JavaScript 课程体系在我们的系统班里有完整的呈现,包含了 JavaScript 基础篇、重点、算法、原理、面试题、实战案例讲解!同时也为你提供了前端高级工程师成长体系!(详细看下图内容)

如果需要深度学习的同学可以联系助理老师了解详细的课程以及课程的报名方式!(不定期会推出活动,有大额优惠券推出,活动详情联系助理老师了解即可!)如果你才开始学习前端,那么可以先学习我们的三十天计划(零基础的同学报名系统班同学可以和老师沟通制定学习计划,可以得到更快的成长!)

为帮助到一部分同学不走弯路,真正达到一线互联网大厂前端项目研发要求,首次实力宠粉,打造了《30 天挑战学习计划》,内容如下:

HTML/HTML5,CSS/CSS3,JavaScript,真实企业项目开发,云服务器部署上线,从入门到精通

  • PC 端项目开发(1 个)
  • 移动 WebApp 开发(2 个)
  • 多端响应式开发(1 个)

共 4 大完整的项目开发 !一行一行代码带领实践开发,实际企业开发怎么做我们就是怎么做。从学习一开始就进入工作状态,省得浪费时间。

从学习一开始就同步使用 Git 进行项目代码的版本的管理,Markdown 记录学习笔记,包括真实大厂项目的开发标准和设计规范,命名规范,项目代码规范,SEO 优化规范

从蓝湖 UI 设计稿 到 PC 端,移动端,多端响应式开发项目开发

  • 真机调试,云服务部署上线;
  • Linux 环境下 的 Nginx 部署,Nginx 性能优化;
  • Gzip 压缩,HTTPS 加密协议,域名服务器备案,解析;
  • 企业项目域名跳转的终极解决方案,多网站、多系统部署;
  • 使用 使用 Git 在线项目部署;

这些内容在《30 天挑战学习计划》中每一个细节都有讲到,包含视频 + 图文教程 + 项目资料素材等。只为实力宠粉,真正一次掌握企业项目开发必备技能,不走弯路 !

过程中【不涉及】任何费用和利益,非诚勿扰 。

如果你没有添加助理老师微信,可以添加下方微信,说明要参加 30 天挑战学习计划,来自CSDN!老师会邀请你进入学习,并给你发放相关资料。

30 天挑战学习计划 Web 前端从入门到实战 | arry老师的博客-艾编程

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/197800.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

AC自动机详解

更好的阅读体验\color{red}{更好的阅读体验}更好的阅读体验 文章目录前置知识字典树 Trie支持操作建字典树实现思想代码实现例题Trie字符串统计最大异或对AC自动机基础概念实现思想代码实现例题搜索关键词单词前置知识 字典树 Trie Trie 是一种能够快速插入和查询字符串的多叉树…

成功解决yum安装的php版本过低的问题

文章目录前言一. 问题复现二. 问题分析三. 问题解决:四. 重要补充1. yum-config-manager介绍2. yum-uitls介绍3. remi资源库总结前言 大家好,我是沐风晓月,日常学习过程经常会遇到一些奇奇怪怪的问题,而解决问题就成了常态&#…

鸿蒙开发学习|HarmonyOS工程介绍

系列文章目录 第一章 HarmonyOS是什么 第二章 基础环境和开发工具 文章目录系列文章目录前言一、HarmonyOS工程介绍二、工程目录结构三、工程目录介绍1.entry2.Ability3.库文件4.资源文件5.配置文件6.pack.info7.HAR总结前言 本文将会给大家梳理 HarmonyOS 源码目录结构&…

关于《利用LexYacc进行词法分析和语法分析并生成语法树》

利用Lex&Yacc进行词法分析和语法分析 写在前面 利用Lex进行词法分析的流程在前面已经讲过,接下来是利用Lex&Yacc进行语法分析,最后可视化生成语法树。具体的操作视频:https://www.bilibili.com/video/BV1wY411q7aH/ 语法分析流程 …

【MySQL】MySQL 8.0 新特性之 - 窗口函数(Window Functions)

窗口函数 - Window Functions1. 定义1.1 窗口函数1.2 语法格式2. 分类2.1 序号函数2.1.1 row_number()2.1.2 rank()2.1.3 dense_rank()2.2.4 示例2.2 分布函数2.2.1 percent_rank()2.2.2 cume_dist()2.3 前后函数2.3.1 lag(expr, n, default)2.3.2 lead(expr, n, default)2.3.3…

致跟我一样苦恼的你们

2023年2月1日,我决定结束实习,回去准备春招和毕设。我把这个决定跟家人和朋友说时,他们似乎是有点不太赞同,他们觉得: “现在工作不好找,你可以先找好下一家公司后再选择离职” “毕设得事情,…

VBA提高篇_17 区域合纵连横,单元格精准定位

文章目录Application.Union方法:Application.Intersect方法:Range.CurrentRegion属性:Range.Resize(3,2)Range.Offset 单元格偏移属性Application.Union方法: 把多个Range联合在一起,作为一个新的Range对象返回 Sub RangeUnionDemo()Dim a&, r1 As Range, r2 As Range, r3 …

魔兽世界服务端AzerothCore+Centos系统+docker编译教程

魔兽世界服务端AzerothCoreCentos系统docker编译教程1.1 准备工作1.1.1 准备1.1.2 安装软件1.1.3 下载源码1.1.4 地图文件1.2 修改配置文件1.2.1 修改环境变量文件1.2.2 修改文件执行权限1.2.3 修改配置文件1.3 编译及启动1.3.1 编译项目1.3.2 启动容器1.3.3 无法启动1. 网络问…

【Java多线程】线程的安全问题

根据上篇文章买票问题举例,还可能出现的问题: 代码如下: class Window1 implements Runnable{private static int ticket 100;Overridepublic void run() {while (true){if (ticket > 0){try {Thread.sleep(100);} catch (InterruptedExc…

网站优化与seo的方法(seo的优化基础)

SEO优化的常规思路,别全以转化为目标 SEO优化作为现在公司推广营销的基础,几乎每个公司都在做这件事。这种优化既可以提升品牌知名度,又能直接给公司带来流量,确实让不少公司感觉很有用。但是在持续的过程中,又会觉得…

ESP32 Arduino 学习篇(五)TFT_eSPI库

前期准备:1.TFT_eSPI库的安装首先在Libraries里面搜索安装TFT_eSPI库到你的工程文件里面。2.TFT_eSPI库的配置文件配置该库有User_Setup.h和 User_Setup_Select.h两个配置文件,支持 ①自定义参数或 ②使用已有配置 驱动TFT屏幕。User_Setup.h — 由自己定…

PCB阻焊层介绍与设计经验总结

🏡《总目录》 目录1,什么是阻焊层2,阻焊层的用途,3,阻焊层的工艺流程4,阻焊设计的注意事项1,什么是阻焊层 阻焊层是顶层或底层布线层表面的顶层保护层,就是PCB表层的绿油层,在阻焊层…

【坤坤讲师--图】Dinic

Dinic是个很神奇的网络流算法。它是一个基于“层次图”的时间效率优先的最大流算法。层次图是什么东西呢?层次,其实就是从源点走到那个点的最短路径长度。于是乎,我们得到一个定理:从源点开始,在层次图中沿着边不管怎么走,经过的路径一定是终点在剩余图中的最短路。(摘自…

疫情时代的宠儿:抗生素行业,今后何去何从

本文由前嗅数据研究院出品 自2020年COVID-19流行开始,已经过去了3年,医药行业发生巨大的变化,各种大中小企业实现了一系列调整。疫情将近结束的时候,让我们回顾分析一下近年来医药领域抗生素行业相关发展。 本研究将从行业现状、…

SpringBoot+Vue核酸预约系统

简介:本项目采用了基本的springbootvue设计的核酸预约系统。详情请看截图。经测试,本项目正常运行。本项目适用于Java毕业设计、课程设计学习参考等用途。 项目描述 项目名称SpringBootVue核酸预约系统源码作者LHL项目类型Java EE项目 (前后…

计算机网络基础知识总结

计算机网络基础知识总结 如果说计算机把我们从工业时代带到了信息时代,那么计算机网络就可以说把我们带到了网络时代。随着使用计算机人数的不断增加,计算机也经历了一系列的发展,从大型通用计算机 -> 超级计算机 -> 小型机 -> 个人…

Windows驱动环境配置

windows驱动开发视频教程(2023最新版)_哔哩哔哩_bilibili 以前的 WDK 版本和其他下载 - Windows drivers | Microsoft Learn 确认本机操作系统版本 安装操作系统版本对应的Visual Studio 我的机器是1904可以安装vs2019,但是实际上我装的是vs2017也是没有问题的 安…

泼辣修图2023最新网页版MAC电脑手机修图软件功能介绍

泼辣修图5.11.4最新版为用户带来更多新版的修改工具,进一步优化相关的设备,可以更舒畅的使用去修改图片,还有很多贴纸,文字等等小工具使用,丰富照片情景。 适用于Windows的泼辣修图摄影爱好者都在用泼辣处理照片 泼辣…

并发编程学习案例-ReentrantReadWriteLock非公平的情况下读锁插队和写锁插队场景复现

文章目录一、前言二、源码三、 代码案例(一)复现写的时候插队场景参考执行结果(二)复现读的时候插队参考执行结果参考资料一、前言 Java ReentrantReadWriteLock 是 ReadWriteLock 的实现类,可以分出2把锁,…

OpenCV 图像形态学处理

本文是OpenCV图像视觉入门之路的第11篇文章,本文详细的在图像形态学进行了图像处理,例如:腐蚀操作、膨胀操作、开闭运算、梯度运算、Top Hat Black Hat运算等操作。 OpenCV 图像形态学处理目录 1 腐蚀操作 2 膨胀操作 3 开闭运算 4 梯度运…