20240307-1-前端开发校招面试问题整理JavaScript

前端开发校招面试问题整理【1】——JavaScript

1、JavaScript 基础

Q:介绍 js 的基本数据类型?

基本类型(值类型):String,Number,Boolean,Null,Undefined,Symbol,BigInt。

数字类型包含整数与浮点数,整数精度为 2^53,浮点数值最高精度为 17 位小数。
另外注意的是,NAN 属于数字类型,代表非数字,即 1/0=NAN,NAN/1=NAN。
Infinity 代表超过了范围的数,有正负号。

undefined:表示变量已声明,但不含有值。
null:表示变量为空。

引用类型:对象,数组,函数(其实都是对象,都是一种引用)。

数据封装类对象:Object、Array、Boolean、Number、String
其他对象:Function、Arguments、Math、Date、RegExp、Error

基本类型被保存在栈内存中,引用类型被保存在堆内存中

Q:js 中如何判断一个对象是什么类型?

使用 typeof 可以判断一个 javascript 基本对象的类型。

typeof 'John' // 返回 string
typeof 3.14 // 返回 number
typeof NaN // 返回 number
typeof false // 返回 boolean
typeof [1, 2, 3, 4] // 返回 object
typeof { name: 'John', age: 34 } // 返回 object
typeof new Date() // 返回 object
typeof function () {} // 返回 function
typeof myCar // 返回 undefined (如果 myCar 没有声明)
typeof null // 返回 object

使用 constructor 可以返回一个构造器的类型,可以根据构造器名称来判断类型。

"John".constructor // 返回函数 String() {[native code]}
(3.14).constructor // 返回函数 Number() {[native code]}
false.constructor // 返回函数 Boolean() {[native code]}
[1,2,3,4].constructor // 返回函数 Array() {[native code]}
{name:'John', age:34}.constructor // 返回函数 Object() {[native code]}
new Date().constructor // 返回函数 Date() {[native code]}
function () {}.constructor // 返回函数 Function() {[native code]}

使用 instanceof 可以检测引用类型,如:

console.log(person instanceof Object) // 变量 person 是 Object 吗?
console.log(colors instanceof Array) // 变量 colors 是 Array 吗?
console.log(pattern instanceof RegExp) // 变量 pattern 是 RegExp 吗?

Q:js 的原型链你是如何理解的?

只要是对象就有原型, 并且原型也是对象, 因此只要定义了一个对象, 那么就可以找到他的原型, 如此反复, 就可以构成一个对象的序列, 这个结构就被成为原型链。

每个对象都会在其内部初始化一个属性,就是 prototype(原型),当我们访问一个对象的属性时,如果这个对象内部不存在这个属性,那么他就会去 prototype 里找这个属性,这个 prototype 又会有自己的 prototype,于是就这样一直找下去,也就是我们平时所说的原型链的概念。

关系:instance.constructor.prototype = instance.proto

Q:js 中 function.call 和 function.apply 的区别?

function.apply(thisObj, [argArray])
function.call(thisObj, arg1, arg2,, argN);

apply:调用一个对象的一个方法,用另一个对象替换当前对象。例如:B.apply(A, arguments);即 A 对象应用 B 函数,即将 B 上下文从初始的上下文改变为 A 的上下文。

call:调用一个对象的一个方法,用另一个对象替换当前对象。例如:B.call(A, args1,args2);即 A 对象调用 B 对象的方法。

Q:js 中作用域你是如何理解的?

全局作用域:写在最外层的对象,或者写在内层但是没有用 var 声明的变量,作用域为全局,例如:

var outerVar = "outer";
function fn() {innerVar = “inner”;console.log(outerVar);
}
fn(); //result:outer
console.log(innerVar); //result:inner

函数作用域:写在函数内层使用 var 声明的变量,例如:

function fn() {var innerVar = 'inner'
}
console.log(innerVar) // ReferenceError: innerVar is not defined

作用域链:内部函数可以链式访问外部函数的变量,例如:

name = 'aaa'function b() {var name = 'bbb'function c() {var name = 'ccc'console.log(name) //ccc}function d() {console.log(name) //bbb}c()d()
}
b()
console.log(name) //aaa

Q:js 中什么是闭包?

闭包是利用了 js 的作用域特性,使用返回值为函数的函数,使里面的函数能够访问到外面函数的变量。我们调用外面的函数,就可以调用返回值函数,对外面函数的变量进行修改。

闭包可以访问另一个函数作用域中变量的函数。
作用:
1、可以减少全局变量的对象,防止全局变量过去庞大,导致难以维护
2、防止修改常量。
3、读取函数内部的变量,让这些变量的值始终保持在内存中。

例如:

const add = function () {let counter = 0return function () {counter++return counter}
}const x = add()
console.log(x()) // 计数器为 1
console.log(x()) // 计数器为 2
console.log(x()) // 计数器为 3

2、JavaScript 流控制

Q:介绍一下 js 中 Promise 的用法?

Promise 对象代表一个异步操作,其不受外界影响,有三种状态:
Pending // 进行中、未完成的
Resolved // 已完成,又称 Fulfilled
Rejected // 已失败

Promise 对象提供了如下四种方法:
then // 异步操作完成调用方法
catch // 异步操作失败调用方法
all // 所有函数操作完成后调用方法
race // 第一个完成或失败后调用方法

举个例子:

function read(time) {console.log('正在阅读')let p = new Promise(function (resolve, reject) {setTimeout(function () {console.log('阅读完毕')time = time + 1resolve(time)}, 2000)})return p
}function write(time) {console.log('正在写作')let p = new Promise(function (resolve, reject) {setTimeout(function () {console.log('写作完毕')time = time + 1resolve(time)}, 2000)})return p
}function rest(time) {console.log('正在休息')let p = new Promise(function (resolve, reject) {setTimeout(function () {console.log('休息完毕')time = time + 1resolve(time) //把promise的状态设置为resolved,成功}, 2000)})return p
}function badDream(time) {console.log('正在做梦')let p = new Promise(function (resolve, reject) {setTimeout(function () {console.log('做了噩梦')time = time + 1reject(time) //把promise的状态设置为rejected,失败}, 2000)})return p
}read(0).then(function (data) {return write(data)}).then(function (data) {return badDream(data)}).then(function (data) {return rest(data)}).then(function (data) {console.log(data)}).catch(function (data) {//处理失败的方法console.log('第' + data + '步出错')})const p1 = new Promise(function (resolve, reject) {setTimeout(function () {console.log('p1完成')resolve(11)}, 1000)
})const p2 = new Promise(function (resolve, reject) {setTimeout(function () {console.log('p2完成')resolve(22)}, 2000)
})const p3 = new Promise(function (resolve, reject) {setTimeout(function () {console.log('p3完成')resolve(33)}, 3000)
})//all,所有函数都执行结束后,回调方法
Promise.all([p1, p2, p3]).then(function (data) {console.log('全部完成', data)
})//race,第一个函数执行结束后,回调方法
Promise.race([write(1), rest(2)]).then(function (results) {console.log('准备工作完毕:')console.log(results)
})

Q:介绍一下 js 中 async 和 await 的用法?与 Promise 的区别?

async 作为一个关键字放到函数前面,用于表示函数是一个异步函数。
因为 async 就是异步的意思,异步函数也就意味着该函数的执行不会阻塞后面代码的执行。
async 会返回一个 Promise 对象,比如我们 console.log(timeout()),会得到一个 Promise 对象,如果 resolve 会返回 hello world,如果 reject 就会抛异常。
但这不是重点,async 的最大优势在于其内部可以使用 await,能够更简洁的处理 Promise 的 then 链。
如果 async 中没有 await,它其实就相当于一个 resolve 返回了 return 值的 Promise 对象罢了。

await 表达式会暂停当前 async function 的执行,等待 Promise 处理完成。若 Promise 正常处理(fulfilled),其回调的 resolve 函数参数作为 await 表达式的值,继续执行 async function。若 Promise 处理异常(rejected),await 表达式会把 Promise 的异常原因抛出。另外,如果 await 操作符后的表达式的值不是一个 Promise,则返回该值本身。

async 和 await 结合能够更直观地处理 Promise 的 then 链。

举个例子:
Promise 的写法:

doSomething().then(function (res) {return doNext(res)}).then(function (nextRes) {return doFinalThing(nextRes)}).then(function (finalResult) {console.log('Got the final result: ' + finalResult)}).catch(failureCallback)

async/await 的写法:

try {const result = await doSomething()const nextRes = await doNext(result)const finalResult = await doFinalThing(newResult)console.log('Got the final result: ' + finalResult)
} catch (error) {failureCallback(error)
}

3、JavaScript 常用数据结构

Q:说几个常用的 Array 的 api?

Array 的 API 重点是会用,而不是知道这个 API 是干什么的

push(a)           // 末尾添加,返回数组长度
unshift(a)	      // 首位添加,返回数组长度
shift()	          // 删除第一个元素,并返回删除的元素
pop()	            // 删除最后一个元素,并返回删除的元素
join(a)	          // 把数组中的所有元素放到一个字符串中,分隔符为a
concat(a, b)	    // 将b连接到a后面
sort()	          // 数组排序
reverse()	        // 数组倒序
isArray(a)	      // a是否为数组
slice(a, b)	      // 根据输入的开始点和末尾点,截取出新的数组(包括前不包括后)
splice(a, b, c)	  // 从a位置开始,删除b长度的数组,插入cindexOf(a)	      // 从前向后寻找值等于a的项,返回index
lastIndexOf(a)	  // 从后向前寻找等于a的项,返回indexevery(function(item, index, array))	      // 对数组每一项运行一次某函数,若函数每一项都为true,返回true
some(function(item, index, array))	      // 对数组每一项运行一次某函数,若函数某一项为true,返回true
filter(function(item, index, array))	    // 对数组每一项运行一次某函数,返回返回值为true的项的数组
map(function(item, index, array))	        // 对数组每一项运行一次某函数,返回返回值的数组
forEach(function(item, index, array))	    // 对数组每一项运行一次某函数,无返回值
reduce(function(prev, cur, index, array)) //接收四个参数:前一个值、当前值、项的索引和数组对象,这个函数的任意返回值会作为第一个参数传给下一项。

Q:for in 和 for of 遍历数组/对象的区别?

对于数组:for in 输出的是数组索引值(下标),for of 输出的是数组元素。
对于对象:for in 输出的是对象 key 值,for of 输出的是对象 value 值。

Q:代码实现一下展平数组?

const arr = [1, 3, [3, 4, [5, 6]]]// 第一种方案:用现成api,不兼容低版本的浏览器
const arr1 = arr.flat(Infinity)// 第二种方案:原生循环递归实现
function flat2(arr) {const result = []arr.forEach((item) => {if (Array.isArray(item)) {result.push(...flat(item))} else {result.push(item)}})return result
}
const arr2 = flat2(arr)// 第三种方案:使用解构和递归实现
function flat3(arr) {const result = [].concat(...arr.map((x) => (Array.isArray(x) ? flat(x) : x)))return result
}
const arr3 = flat3(arr)

Q:代码实现一下深拷贝对象?

// 对象中如果均为基本类型
JSON.parse(JSON.stringify(obj))// 对象中如果既有基本类型,还有Array和Object
function deepCopy(data) {let outputif (data === null || !(typeof data === 'object')) {output = data} else {output = data.constructor.name === 'Array' ? [] : {}for (let key in data) {output[key] = deepCopy(data[key])}}return output
}

Q:“test” 和 new String(“test”)有什么区别,{}和 new Object()有什么区别?

"test"是一个 string 类型的常量,而 new String()会创建一个字符串对象。

const obj1 = new String('abc') // 类型为object
const obj2 = 'abc' // 类型为stringobj1 == obj2 // true
obj1 === obj2 // false

而 {} 和 new Object() 本身都是创建对象,并返回这个对象的引用。

const obj1 = new Object('abc') // 类型为object
const obj2 = {} // 类型为obejctobj1 == obj2 // false
obj1 === obj2 // false

4、DOM/BOM api

Q:addEventListener 用法?和 onxxx 的区别是什么?

onxxx 是 DOM0 的标准,所有浏览器支持,它会直接在 DOM 对象上注册事件名称。
例如:

document.getElementById('click').onclick = function (event) {console.log(event.target)
}

addEventListener 是 DOM2 的标准,IE8 以上浏览器支持,它分为三个阶段:捕获阶段,目标阶段,冒泡阶段。
每个事件都会先由根传到目标元素,再传回根。

Q:事件代理指的是什么?

事件代理是指为了给多个元素添加事件(比如 li),我们给元素的父级元素添加事件,当事件发生时,我们通过e.target捕获事件目标,判断目标后,执行对应的事件。

Q:如何使用 js 访问 cookie?如果想要禁止用 js 访问 cookie,该怎么做?

使用 document.cookie 即可查看 cookie。cookie 储存形式是key=value;key=value;形式的字符串。

在 header 中设置 HttpOnly 后可以防止 js 访问 cookie。

Q:如何使用 js 计算浏览器可视区域?

// 获取浏览器窗口的可视区域的宽度
const width = document.documentElement.clientWidth || document.body.clientWidth// 获取浏览器窗口的可视区域的高度
const height = document.documentElement.clientHeight || document.body.clientHeight

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

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

相关文章

WinSCP下载安装并结合内网穿透实现固定公网TCP地址访问本地服务器

文章目录 1. 简介2. 软件下载安装:3. SSH链接服务器4. WinSCP使用公网TCP地址链接本地服务器5. WinSCP使用固定公网TCP地址访问服务器 1. 简介 ​ Winscp是一个支持SSH(Secure SHell)的可视化SCP(Secure Copy)文件传输软件,它的主要功能是在本地与远程计…

FFmpeg教程(干货快速上手)

什么是FFmpeg? FFmpeg是一款免费、开源的跨平台多媒体处理工具,它支持几乎所有的视频格式和编码标准。FFmpeg包含了一系列的子项目和工具,如ffmpeg命令行工具用于转码和处理视频和音频文件,ffplay用于播放多媒体内容,…

穿越牛熊,股市的春天还有多远?

2023年,资本市场的严冬令无数投资者和机构投资者都感受到了前所未有的压力。VC/PE、公募基金、股权投资类公司等机构,在这一年里业绩普遍不佳,寒意弥漫。VC/PE机构的营业收入普遍呈现负增长,公募基金更是历史上首次连续两年亏损&a…

LeetCode 刷题 [C++] 第3题.无重复字符的最长子串

题目描述 给定一个字符串 s ,请你找出其中不含有重复字符的 最长子串 的长度。 题目分析 可以使用滑动窗口加哈希表来实现: 使用start和end两个变脸来表示滑动窗口的头部位置和尾部位置,两者开始均为0;借助哈希表来记录已经遍…

Unity 给刚体一个力或速度

创建平面和小球,给力或给速度让其弹起 给小球挂载刚体(Rigibdody)和脚本 (力是累计或者衰减的,直接给速度就是赋值,但如果速度就和力类似了) using System.Collections; using System.Collect…

解决 ucore lab3 无法触发 page fault 的问题

问题描述 完成清华大学操作系统实验课 ucore(x86) lab3 时,发现无法触发 page fault 异常,具体来说时 check_pgfault() 函数会在执行如下代码时报错 static void check_pgfault(void) {// ......uintptr_t addr 0x100;assert(find_vma(mm, addr) vma…

three.js 射线Ray,三维空间中绘制线框

效果&#xff1a; 代码&#xff1a; <template><div><el-container><el-main><div class"box-card-left"><div id"threejs"></div> <div>{{ res1 }}</div> <div>{{ res2 }}</div><…

serial库串口通讯

前言 Python的pyserial库允许与不同的设备进行通信。 安装 python > 3.4 pip install pyserial 基本流程 import serial# 1. 打开串口 ser serial.Serial()# 2. 设置串口参数&#xff08;例如波特率、数据位、校验位、停止位&#xff09; ser.port /dev/ttyS0 # 这是一…

CDN介绍

概念介绍 CDN Content Delivery Network&#xff0c;缩写&#xff1a;CDN&#xff09;是一种提供更快互联网访问的服务&#xff0c;通过在网络的边缘或核心交换区域部署内容代理服务器来实现。这些服务器利用全局负载调度机制来分发内容&#xff0c;从而构建了一个覆盖范围广…

nRF52832——GPIOTE与外部中断

这里写目录标题 GPIOTE 原理分析GPIOTE 输入事件应用GPIOTE 事件寄存器应用GPIOTE 事件组件的应用&#xff08;库函数&#xff09;GPIOTE PORT 事件应用 GPIOTE 任务应用GPIOTE 任务触发 LED 寄存器操作组件方式进行任务配置 GPIOTE 原理分析 GPIO 任务和时间&#xff08;GPIO…

仿牛客网项目---Elasticsearch分布式搜索引擎

1.什么是ElasticSearch分布式搜索引擎&#xff1f; Elasticsearch是一个开源的分布式搜索引擎&#xff0c;提供实时的、高可用性的搜索和分析解决方案。它支持快速索引和搜索大规模数据&#xff0c;具有分布式架构、RESTful API、基于JSON的查询语言等功能&#xff0c;适用于各…

蓝桥杯集训·每日一题2024 (二分,双指针)

前言&#xff1a; 开学了&#xff0c;平时学习的压力也逐渐大起来了&#xff0c;不过还算可以接受&#xff0c;等到后面阶段考的时候就不一样了&#xff0c;我目前为了转专业退选了很多课&#xff0c;这些课我都需要花时间来刷绩点&#xff0c;不然保研就没有竞争力了。我自己会…

OpenCASCADE+Qt创建建模平台

1、建模平台效果 2、三维控件OCCWidget 将V3d_View视图与控件句柄绑定即可实现3d视图嵌入Qt中&#xff0c;为了方便也可以基于QOpenGLWidget控件进行封装&#xff0c;方便嵌入各种窗体使用并自由缩放。 #ifndef OCCTWIDGET_H #define OCCTWIDGET_H#include <QWidget> #i…

javaWebssh药品进销存信息管理系统myeclipse开发mysql数据库MVC模式java编程计算机网页设计

一、源码特点 java ssh药品进销存信息管理系统是一套完善的web设计系统&#xff08;系统采用ssh框架进行设计开发&#xff09;&#xff0c;对理解JSP java编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。开发环境为TOM…

Filter过滤器+JWT令牌实现登陆验证

一、背景 我们需要在客户端访问服务器的时候给定用户一定的操作权限&#xff0c;比如没有登陆时就不能进行其他操作。如果他需要进行其他操作&#xff0c;而在这之前他没有登陆过&#xff0c;服务端则需要将该请求拦截下来&#xff0c;这就需要用到过滤器&#xff0c;过滤器可以…

原创+顶级SCI优化!23年新算法PSA优化CNN-LSTM-Attention一键实现多变量回归预测!

声明&#xff1a;文章是从本人公众号中复制而来&#xff0c;因此&#xff0c;想最新最快了解各类智能优化算法及其改进的朋友&#xff0c;可关注我的公众号&#xff1a;强盛机器学习&#xff0c;不定期会有很多免费代码分享~ 目录 效果展示 数据介绍 创新点 模型流程 部…

RabbitMQ的web控制端介绍

2.1 web管理界面介绍 connections&#xff1a;无论生产者还是消费者&#xff0c;都需要与RabbitMQ建立连接后才可以完成消息的生产和消费&#xff0c;在这里可以查看连接情况channels&#xff1a;通道&#xff0c;建立连接后&#xff0c;会形成通道&#xff0c;消息的投递、获取…

Vue-Router使用

1.安装 npm install vue-router4 2. 添加路由 新建router文件夹&#xff0c;新建文件 index.ts import { createRouter, createWebHashHistory,createWebHistory} from "vue-router";const routes [{path: /login,component: () > import("../views/Logi…

牛客网——美团2024届秋招笔试第三场编程真题

牛客网——美团2024届秋招笔试第三场编程真题 &#x1f60d;&#x1f60d;&#x1f60d; 相知&#x1f64c;&#x1f64c;&#x1f64c; 相识&#x1f622;&#x1f622;&#x1f622; 开始刷题1. 平均数为k的最长连续子数组2. 小球投盒3. 小红结账4. 小美的游戏5. 小美种果树6…

python自学6

第一节第十章 开发图表 第一个可视化图表&#xff0c;折线图的开发 json数据格式 pyecharts模块 图标源码网站 Document gallery.pyecharts.org pyecharts模块的快速入门 pyecharts配置有两个选项 全局配置是对整个可视化界面进行配置&#xff0c;比如名字&#xff0c;工具…