面试必问JavaScript基础面试题(附答案详解)

news2024/11/20 12:38:29

文章目录

  • 前言
  • 1、JavaScript的数据类型有哪些?
  • 2、null,undefined的区别?
  • 3、JS中变量的作用域是什么?
  • 4、说说var、let、const之间的区别?
            • 区别一:作用域
            • 区别二:定义变量
            • 区别三:let与const区别
  • 5、栈和堆的区别?
  • 6、Javascript实现继承的几种方式?
  • 7、谈谈this的理解?
  • 8、什么是window对象? 什么是document对象?
  • 9、什么是闭包(closure),说说优缺点?
  • 10、new操作符具体干了什么呢?
  • 11、 JS延迟加载的方式有哪些?
  • 12、同步和异步的区别?
  • 13、call和applyd的区别?
  • 14、documen.write和 innerHTML的区别?
  • 15、数组对象有哪些原生方法,列举一下?
  • 总结

前言

JavaScript(简称“JS”) 是一种具有函数优先的轻量级,解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名,但是它也被用到了很多非浏览器环境中,JavaScript 基于原型编程、多范式的动态脚本语言,并且支持面向对象、命令式、声明式、函数式编程范式。JavaScript的标准是ECMAScript 。截至 2012 年,所有浏览器都完整的支持ECMAScript 5.1,旧版本的浏览器至少支持ECMAScript 3 标准。2015年6月17日,ECMA国际组织发布了ECMAScript的第六版,该版本正式名称为 ECMAScript 2015,但通常被称为ECMAScript 6 或者ES2015。


1、JavaScript的数据类型有哪些?

  • 基本数据类型:
    字符串(String)、数字(Number)、布尔(Boolean)、空值(Null)、未定义(Undefined)、Symbol。
  • 引用数据类型:
    对象(Object)、数组(Array)、函数(Function)。

注意:Symbol 是 ES6 引入了一种新的原始数据类型,表示独一无二的值。

在这里插入图片描述

2、null,undefined的区别?

  • null表示一个对象被定义了,但存放了空指针,转换为数值时为0。
  • undefined表示声明的变量未初始化,转换为数值时为NAN。

3、JS中变量的作用域是什么?

变量的作用域是程序中定义它的区域,JS变量只有两个作用域:

  • 全局变量 :全局变量具有全局作用域,这意味着它在JS代码中的任何位置都可见
  • 局部变量 :局部变量仅在定义它的函数中可见,函数参数始终是该函数的本地参数。

4、说说var、let、const之间的区别?

区别一:作用域
  • 用 var 声明的变量的作用域是它当前的执行上下文,即如果是在任何函数外面,则是全局执行上下文,如果在函数里面,则是当前函数执行上下文。换句话说,var 声明的变量的作用域只能是全局或者整个函数块的。
  • let 声明的变量的作用域则是它当前所处代码块,即它的作用域既可以是全局或者整个函数块,也可以是 if、while、switch等用{}限定的代码块。另外,var 和 let 的作用域规则都是一样的,其声明的变量只在其声明的块或子块中可用。
区别二:定义变量
  • var定义变量时,存在变量的默认提升功能,而let和const没有
  • var 定义变量是可以重复定义,而let和const不可以重复定义(同时定义一个变量时)
  • var定义变量时会自动挂载在Windows对象上,而let和const不会
  • let存在暂时死去问题
区别三:let与const区别
  • const声明的是一个只读变量,声明之后不允许改变其值,因此const一旦声明必须初始化,否则会报错

5、栈和堆的区别?

  • 栈(stack):由编译器自动分配释放,存放函数的参数值,局部变量等;
  • 堆(heap):一般由程序员分配释放,若程序员不释放,程序结束时可能由操作系统释放。

6、Javascript实现继承的几种方式?

Javascript实现继承有三种方式:

  • 方式一:构造函数法(又叫经典继承)
function SuperType(name) {
    this.name = name;
    this.sayName = function() {
        window.alert(this.name);
    };
}
function SubType(name, age) {
    SuperType.call(this, name); //在这里借用了父类的构造函数
    this.age = age;
}
  • 方式二:对象冒充
function SuperType(name) {
    this.name = name;
    this.sayName = function() {
        window.alert(this.name);
    }
}   
function SubType(name, age) {
    this.supertype = SuperType; //在这里使用了对象冒充
    this.supertype(name);
    this.age = age;
}
  • 方式三:组合继承(最常用)
function SuperType(name) {
    this.name = name
}    
SuperType.prototype = {
    sayName : function() {
        window.alert(this.name);
    }
};     
function SubType(name, age) {
    SuperType.call(this, name); //在这里继承属性
    this.age = age;
}
SubType.prototype = new SuperType(); //在原型上继承方法

7、谈谈this的理解?

  • this总是指向函数的直接调用者(而非间接调用者)
  • 如果有new关键字,this指向new出来的那个对象
  • 在事件中,this指向目标元素,特殊的是IE的attachEvent中的this总是指向全局对象window。
  • 详解…

8、什么是window对象? 什么是document对象?

  • window对象:代表浏览器中打开的一个窗口;
  • document对象:代表整个html文档。实际上,document对象是window对象的一个属性。

9、什么是闭包(closure),说说优缺点?

闭包:指的是一个函数可以访问另一个函数作用域中变量。常见的构造方法,是在一个函数内部定义另外一个函数。内部函数可以引用外层的变量;外层变量不会被垃圾回收机制回收。
注意,闭包的原理是作用域链,所以闭包访问的上级作用域中的变量是个对象,其值为其运算结束后的最后一个值。
优缺点:

  • 优点:避免全局变量污染。
  • 缺点:容易造成内存泄漏。

10、new操作符具体干了什么呢?

  • 创建一个空对象,并且 this 变量引用该对象,同时还继承了该函数的原型。
  • 属性和方法被加入到 this 引用的对象中。
  • 新创建的对象由 this 所引用,并且最后隐式的返回 this 。

11、 JS延迟加载的方式有哪些?

一般有六种方式;defer属性、async属性、动态创建dom方式、使用jquery的getScript方法、使用setTimeout延迟方法、让js最后加载。

  • defer属性:延迟脚本。立即下载,但延迟执行(延迟到整个页面都解析完毕后再运行),按照脚本出现的先后顺序执行。
  • async属性:异步脚本。下载完立即执行,但不保证按照脚本出现的先后顺序执行;
  • 动态创建dom方式
  • 使用jquery的getScript方法:getScript() 方法通过 HTTP GET 请求载入并执行 JavaScript 文件。

语法:jQuery.getScript(url,success(response,status))

  • 使用setTimeout延迟方法
  • 让js最后加载 将脚本元素放在文档体的底端(</body>标签前面),这样脚本就可以在HTML解析完毕后加载了。但此方案的问题是,只有在所有HTML DOM加载完成后才开始脚本的加载/解析过程。对于有大量js代码的大型网站,可能会带来显著的性能损耗。

12、同步和异步的区别?

同步的概念在操作系统中:不同进程协同完成某项工作而先后次序调整(通过阻塞、唤醒等方式),同步强调的是顺序性,谁先谁后。异步不存在顺序性。

  • 同步:浏览器访问服务器,用户看到页面刷新,重新发请求,等请求完,页面刷新,新内容出现,用户看到新内容之后进行下一步操作。
  • 异步:浏览器访问服务器请求,用户正常操作,浏览器在后端进行请求。等请求完,页面不刷新,新内容也会出现,用户看到新内容。

13、call和applyd的区别?

call()方法和apply()方法的作用相同,动态改变某个类的某个方法的运行环境。他们的区别在于接收参数的方式不同。
区别:

  • 在使用call()方法时,传递给函数的参数必须逐个列举出来
  • 使用apply()时,传递给函数的是参数数组。

14、documen.write和 innerHTML的区别?

  • document.write()只能重绘整个页面
setTimeout(function(){
       document.write('<p>5 secs later</p>');
}, 5000);

或者

window.onload = function() { document.write("HI");
  • innerHTML可以重绘页面的一部分

15、数组对象有哪些原生方法,列举一下?

pop、push、shift、unshift、splice、reverse、sort、concat、join、slice、toString、indexOf、lastIndexOf、reduce、reduceRight
forEach、map、filter、every、some

总结

以上就是今天所整理的内容,本文仅仅简单介绍了前端面试关于JavaScript面试题的一部分题,后续会更新更多关于前端的知识,喜欢关注收藏加关注!

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

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

相关文章

微信小程序云开发 | 插件的微信小程序云开发

1、插件开发简介 1●插件简介 插件是对一组JavaScript接口、自定义组件或页面的封装&#xff0c;可嵌入小程序中使用。插件不能独立运行&#xff0c;必须嵌入在其他小程序中才能被用户使用&#xff1b;而第三方小程序在使用插件时&#xff0c;也无法看到插件的代码。因此&…

英雄联盟轮播图手动轮播

感谢大朋友们小朋友们的催更&#xff0c;这个月都在努力复习功课&#xff0c;无异于对待期末考试。 通过前一个个小案例越做越熟悉&#xff0c;代码越来越简洁&#xff0c;整体架构越来越规范 一步一步循序渐进&#xff0c;今天写一个英雄联盟轮播图手动轮播练练手。 清除网页的…

js逆向点点数据:自动扣webpak-webpackJsonp思路

url链接:点点数据-App应用市场数据分析,AppStore排行榜,ASO,ASM优化平台 请求数据是k&#xff0c;网址是个标准的webpak&#xff0c;不过有有很多个js文件&#xff0c;文件加起来十几mb&#xff0c;就很恶心 扣的话还是扣知乎webpak的老办法&#xff0c;导出加载器&#xff0c…

【蓝桥杯Web】第十四届蓝桥杯Web模拟赛 3 期 | 精品题解(上)

&#x1f9d1;‍&#x1f4bc; 个人简介&#xff1a;一个不甘平庸的平凡人&#x1f36c; &#x1f5a5;️ 蓝桥杯专栏&#xff1a;蓝桥杯题解/感悟 &#x1f5a5;️ TS知识总结&#xff1a;十万字TS知识点总结 &#x1f449; 你的一键三连是我更新的最大动力❤️&#xff01; &…

Promise.allSettled()方法介绍

前言&#xff1a; 本篇文章介绍 Promise 对象的Promise.allSettled() 方法&#xff0c;另外的关于 Promise 文章 可以看我的 ES6专栏 promise 实现 Ajax 首先通过 promise 对象实现 Ajax &#xff08;如下&#xff09; &#xff0c;后面 在代码中 会使用到 const getJSON f…

uniapp添加极光推送

1.从dcloud插件市场下载极光SDK插件 &#xff08;可以云打包&#xff0c;也可以离线打包&#xff09; 极光JCore官方SDK下载地址 https://ext.dcloud.net.cn/plugin?id4028https://ext.dcloud.net.cn/plugin?id4028 极光JPush官方SDK下载地址 极光JPush官方SDK - DCloud 插…

Request获取请求数据中文乱码问题

目录 一、当Request请求字母时&#xff0c;输出正常 二、当Request请求参数为汉字时 三、使用伪代码了解乱码的形成 URL编码 四、Request请求参数中文乱码-Post请求解决方案 五、Request请求参数中文乱码-Get请求解决方案 前言&#xff1a;Tomcat在7以及更低版本时&#…

【虚幻引擎UE】UE5 实现WEB和UE通讯思路(含工程源码)

UE5实现WEB和UE通讯思路 两个方案,根据需求选择适合自己的: 1.UE打包为像素流页面,嵌入WEB进行通讯。 2.UE和WEB基于WEB UI插件实现通讯,打包为像素流页面。 实现效果如下 ↓ 本文着重说明第二种方案。 示例项目工程文件:https://download.csdn.net/download/qq_35079…

使用nodejs写接口

一、基本步骤 要使用Node.js编写接口&#xff0c;需要遵循以下步骤&#xff1a; 1、安装Node.js&#xff1a;如果尚未在计算机上安装Node.js&#xff0c;可以在Node.js的官方网站上下载安装程序&#xff0c;并按照说明进行安装。 2、初始化项目&#xff1a;在项目文件夹中打…

完美解决 - 前端发版后浏览器缓存问题(发版后及时拉取最新版本代码)

一、简介 开发完发布新版本后&#xff0c;在有些电脑上总需要强刷才能获取到最新版本的内容&#xff0c;太恶心了。 浏览器缓存&#xff08;Browser Caching&#xff09;是为了节约网络的资源加速浏览&#xff0c;浏览器在用户磁盘上对最近请求过的文档进行存储&#xff0c;当…

为什么要将程序部署到云服务器上?华为云Web及移动App上云解决方案体验测评

Web及移动App上云是指将Web应用程序或移动应用程序部署到云计算平台上&#xff0c;以便用户可以通过互联网访问这些应用程序。这种部署方式可以提高应用程序的可靠性、可扩展性和安全性&#xff0c;同时也可以降低应用程序的运营成本。 三大特性决定系统的稳定能力 部署应用服务…

【中秋征文】“海上生明月”中秋节网页特效

&#x1f4cb; 个人简介 &#x1f496; 作者简介&#xff1a;大家好&#xff0c;我是阿牛&#xff0c;全栈领域优质创作者。&#x1f61c;&#x1f4dd; 个人主页&#xff1a;馆主阿牛&#x1f525;&#x1f389; 支持我&#xff1a;点赞&#x1f44d;收藏⭐️留言&#x1f4d…

van-uploader上传图片实现过程、使用原生input实现上传图片

1、使用van-uploader 使用van-uploader组件上传图片&#xff0c;并将其封装成组件&#xff0c;接收传入的参数imglist。图片地址为服务器返回的。 完整代码 <template><div class"image-uploader"><div class"list-img" v-for"(src…

html 导入百度地图 网页中如何导入百度地图

先看案例如图所示 首先我们需要知道我们想要标注地点的经纬度 经纬度查询网址如下 图中以同程大厦为例 经纬度查询定位 拾取坐标系统 经纬度查询地图 好了 准备工作做好 现在开始编码~ 第一步 html css部分 注意点1. #map 命名 不要随意更改 如影响到您的布局 您可以在外面在…

多种方法解决前后端报出的SyntaxError: xxx is not valid JSON的问题,比如“[object Object]“ is not valid JSON

文章目录1. 复现问题2. 分析问题3. 解决问题4. 该错误的其他解决方法5. 文章总结1. 复现问题 今天启动后端服务&#xff0c;访问knife4j文档时&#xff0c;却报出如下错误&#xff1a; 于是&#xff0c;按F12打开调试页面板&#xff0c;找到了具体的错误信息&#xff0c;如下所…

那些你不得不了解的HTML基础

瞧一瞧&#xff0c;看一看&#xff0c;新鲜的HTML出笼了 目录 一、HTML基本语法&#xff08;标签&#xff09; 注释 标题 段落 换行 特殊转义字符 格式化标签 图片 超链接a标签 表格标签 列表标签 表单标签 无语义标签 二、基于上述实现的两个案例 制作一份简历…

vue 之 CSS进行样式穿透的方法(/deep/、::v-deep、>>> 、:deep、额外的全局<style>)

一、简介 在很多vue的组件库 , 如vant&#xff0c;elementUI&#xff0c; iview等都可能自定义一些样式文件&#xff0c;如果我们在项目中引入了样式组件或者通过v-html渲染了数据&#xff0c;然后想要去修改他们内部的某元素的样式, 直接修改样式很可能不起作用&#xff0c;修…

做一个前端网页送给女朋友~轮播图+纪念日

文章目录1. 轮播图框架2. 轮播图大盒子实现1. 盒子及图片的可视化2. 将图片重叠起来并放入轮播图盒子中...相对定位与绝对定位3. 添加左右按钮4. 点击按钮跳转图片5. 鼠标离开图片轮播图按钮隐藏6. 添加小圆点按钮7. 点击小圆点跳转图片并且该小圆点变色8. 自动轮播9. 最后一步…

Vue项目中ESLint配置(VScode)

Vue项目中ESLint配置&#xff08;VScode&#xff09; 1.VScode的配置格式化代码 1.1下载eslint插件 1.2配置setting.json 打开左上角文件-首选项-设置,在设置中搜索eslint&#xff0c;点击并翻页到最下面&#xff0c;点击setting.json进行配置&#xff1a; // 值设置为true时…

Springboot Long类型数据太长返回给前端,精度丢失问题 复现、解决

前言 惯例&#xff0c;收到兄弟求救&#xff0c;关于long类型丢失精度的问题&#xff1a; 存在一个初学者不会&#xff0c;就会有第二个初学者不会&#xff0c;所以我出手。 正文 不多说&#xff0c;开搞。 如题&#xff0c; 后端返回的数据 给到 前端&#xff0c; Long类型数…