2022年前端js面试题

简介: 2022年前端js面试题

var、let、const区别

  1. var存在变量提升,而let、const没有
  2. let、const有块级作用域,而var没有
  3. var 在同一块作用域可以重复声明多个相同的变量,后者覆盖前者,let、const重
    复声明会报错
    4.let、var声明变量后可以进行改变值,const声明不能修改([对象、数组]的属性和方法可以改变
    合并对象的方法可以写几种
    const obj1 = {a:'a',b:'b',c:'c'};
    const obj2 = {c:'c',d:'d',e:'e'};
    方式一:使用ES6的拓展运算符
    {...obj1,...obj2}
    方式二:Object.assign(obj1,obj2);
    方式三:手写遍历
    function assign(obj1,obj2){
    for(let key in obj2){
     obj1[key] = obj2[key];
    
    }
    return obj1;
    }
    assign(obj1,obj2);
    find和filter的区别
  4. find 条件符合就找到第一个符合的元素返回,否则返回 undefined
  5. filter 如果条件符合 就返回一个新的数组(多个元素),否则返回空数组[]
    some和every的区别
  6. every()是对数组中每一项运行给定函数,如果该函数对每一项返回true,则返回true。 有点&&的意思
  7. some()是对数组中每一项运行给定函数,如果该函数对任一项返回true,则返回true。有点||的意思
    深拷贝和浅拷贝
    箭头函数和普通函数有什么区别
  8. 箭头函数不能用于构造函数,如果使用会报错
  9. 箭头函数没有 arguments对象、prototype 原型对象
  10. 箭头函数的this在定义时就已经指定,而普通函数是调用时才指定,如果普通函数用于构造函数this的指向就是当前实例
    Promise有几种状态
  11. pending(初始状态)
    pending的意思是“待定的,发生的”,相当于是一个初始状态。创建[Promise]对象时,且没有调用resolve或者是reject方法,相当于时初始状态。这个初始状态会随着你调用resolve,或者是reject函数而切换到另一种状态。

2 . resolved(成功态)
resolved表示成功了。当[Promise]实例对象中异步任务顺利完成且返回结果值时,就调用了resolved这个参数

  1. rejected(失败状态)
    rejected 失败,当[Promise]实例对象中异步任务执行失败时,就调用了resolved这个参数
    localstorage、sessionstorage、cookie的区别
    一、存储的时间有效期不同
    1、cookie的有效期是可以设置的,默认的情况下是关闭浏览器后失效
    2、sessionStorage的有效期是仅保持在当前页面,关闭当前会话页或者浏览器后就会失效
    3、localStorage的有效期是在不进行手动删除的情况下是一直有效的

二、存储的大小不同
1、cookie的存储是4kb左右,存储量较小,一般页面最多存储20条左右信息
2、localStorage和sessionStorage的存储容量是5Mb(官方介绍,可能和浏览器有部分差异性)

三、与服务端的通信
1、cookie会参与到与服务端的通信中,一般会携带在http请求的头部中,例如一些关键密匙验证等。
2、localStorage和sessionStorage是单纯的前端存储,不参与与服务端的通信
JS数据类型有哪些
基本类型:String、Number、Boolean、Undefined、Null、Symbol、Bigint
引用类型:Object(Array、Function、Date、RegExp)
注意:typeof null 返回的是 'object'
NaN是一个Number类型,但是不是一个具体的数字
typeof NaN 返回的是 'number'
null和undefined的区别

  1. 作者在设计js的都是先设计的null(为什么设计了null:最初设计js的时候借鉴了java的语言)
  2. null会被隐式转换成0,很不容易发现错误。
  3. 先有null后有undefined,出来undefined是为了填补之前的坑。
    具体区别:JavaScript的最初版本是这样区分的:null是一个表示"无"的对象(空对象指针),转为数值时为0;undefined是一个表示"无"的原始值,转为数值时为NaN。

==和===有什么不同
== : 比较的是值

    string == number || boolean || number ....都会隐式转换
    通过valueOf转换(valueOf() 方法通常由 JavaScript 在后台自动调用,并不显式地出现在代码中。)

=== : 除了比较值,还比较类型
JS微任务和宏任务

  1. js是单线程的语言。
  2. js代码执行流程:同步执行完==>事件循环
    同步的任务都执行完了,才会执行事件循环的内容
    进入事件循环:请求、定时器、事件....
  3. 事件循环中包含:【微任务、宏任务】
    微任务:promise.then
    宏任务:setTimeout..

要执行宏任务的前提是清空了所有的微任务

流程:同步 > 事件循环【微任务和宏任务】> 微任务 > 宏任务 > 微任务...

JS作用域

  1. 除了函数外,js是没有块级作用域。
  2. 作用域链:内部可以访问外部的变量,但是外部不能访问内部的变量。
    注意:如果内部有,优先查找到内部,如果内部没有就查找外部的。
  3. 注意声明变量是用var还是没有写(window.)
  4. 注意:js有变量提升的机制【变量悬挂声明】
  5. 优先级:声明变量 > 声明普通函数 > 参数 > 变量提升
    JS判断变量是不是数组,你能写出哪些方法
  6. isArray
  7. Array.prototype.isPrototypeOf([])
  8. Object.prototype.toString.call([]).indexOf('Array') > -1
  9. [].constructor.toString().indexOf('Array') > -1
    slice是干嘛的、splice是否会改变原数组
  10. slice是来截取的
    参数可以写slice(3)、slice(1,3)、slice(-3)
    返回的是一个新的数组
  11. splice 功能有:插入、删除、替换
    返回:删除的元素
    该方法会改变原数组
    JS数组去重
    方式一:new set

const arr= [1,2,3,2,4,1];
function unique(arr){
return [...new Set(arr)]
}

方式二:Object的key是唯一
function unique(arr) {
const param = {};
arr.forEach(key => {
param[key] = key;
});
return Object.keys(param);
};

方式三:indexOf

function unique( arr ){
var brr = [];
for( var i=0;i<arr.length;i++){
if( brr.indexOf(arr[i]) == -1 ){
brr.push( arr[i] );
}
}
return brr;
}

方式四:sort

function unique( arr ){
arr = arr.sort();
var brr = [];
for(var i=0;i{
newArr.push( Math.max(...item) )
})
return newArr;
}
console.log(fnArr([
[4,5,1,3],
[13,27,18,26],
[32,35,37,39],
[1000,1001,857,1]
]));
给字符串新增方法实现功能
给字符串对象定义一个addPrefix函数,当传入一个字符串str时,它会返回新的带有指定前缀的字符串,例如: console.log( 'world'.addPrefix('hello') ) 控制台会输出helloworld

String.prototype.addPrefix = function(str){
return str + this;
}
console.log( 'world'.addPrefix('hello') )
找出字符串出现最多次数的字符以及次数
var str = 'aaabbbbbccddddddddddx';
var obj = {};
for(var i=0;i<str.length;i++){
var char = str.charAt(i);
if( obj[char] ){
obj[char]++;
}else{
obj[char] = 1;
}
}
console.log( obj );
//统计出来最大值
var max = 0;
for( var key in obj ){
if( max < obj[key] ){
max = obj[key];
}
}
//拿最大值去对比
for( var key in obj ){
if( obj[key] == max ){
console.log('最多的字符是'+key);
console.log('出现的次数是'+max);
}
}
new操作符具体做了什么

  1. 创建了一个空的对象
  2. 将空对象的原型,指向于构造函数的原型
  3. 将空对象作为构造函数的上下文(改变this指向)
  4. 对构造函数有返回值的处理判断

实现代码如下 :
function Fun( age,name ){
this.age = age;
this.name = name;
}
function create( fn , ...args ){
var obj = {};
Object.setPrototypeOf(obj,fn.prototype);
var result = fn.apply(obj,args);
return result instanceof Object ? result : obj;
}
console.log( create(Fun,18,'张三') )
说一下call、apply、bind区别

  1. 共同点:功能一致,都是可以改变this指向
  2. 语法: 函数.call()、函数.apply()、函数.bind()
  3. 区别一:参数不同,apply第二个参数是数组,call和bind有多个参数需要挨个写
    区别二:call、apply都是立即执行 bind不会立即执行,因为bind返回的是一个函数需要加入()执行

场景:

  1. 用apply的情况
    var arr1 = [1,2,4,5,7,3,321];
    console.log( Math.max.apply(null,arr1) )

  2. 用bind的情况
    var btn = document.getElementById('btn');
    var h1s = document.getElementById('h1s');
    btn.onclick = function(){
    console.log( this.id );
    }.bind(h1s)
    闭包

  3. 闭包是什么
    闭包是一个函数加上到创建函数的作用域的连接,闭包“关闭”了函数的自由变量。
  4. 闭包可以解决什么问题【闭包的优点】
    2.1 内部函数可以访问到外部函数的局部变量
    2.2 闭包可以解决的问题
         var lis = document.getElementsByTagName('li');
    
    for(var i=0;i<lis.length;i++){
     (function(i){
       lis[i].onclick = function(){
         alert(i);
       }
     })(i)
    
    }
  5. 闭包的缺点
    3.1 变量会驻留在内存中,造成内存损耗问题。

             解决:把闭包的函数设置为null
    

    3.2 内存泄漏【ie】 ==> 可说可不说,如果说一定要提到ie
    原型链

  6. 原型可以解决什么问题:解决了对象的共享属性、方法

  7. 谁有原型:函数拥有prototype、对象拥有proto
  8. 对象查找属性或者方法的顺序
    先在对象本身查找 > 构造函数中查找 > 对象的原型 > 构造函数的原型中 > 当前原型的原型中查找
  9. 原型链的最顶端是null
    JS继承有哪些方式
  10. ES6 class 的extends
  11. 原型链继承
  12. 借用构造函数继承
  13. 组合式继承(原型链继承和借用构造函数继承)

方式一:ES6
class Parent{
constructor(){
this.age = 18;
}
}

class Child extends Parent{
constructor(){
super();
this.name = '张三';
}
}
let o1 = new Child();
console.log( o1,o1.name,o1.age );

方式二:原型链继承

function Parent(){
this.age = 20;
}
function Child(){
this.name = '张三'
}
Child.prototype = new Parent();
let o2 = new Child();
console.log( o2,o2.name,o2.age );

方式三:借用构造函数继承

function Parent(){
this.age = 22;
}
function Child(){
this.name = '张三'
Parent.call(this);
}
let o3 = new Child();
console.log( o3,o3.name,o3.age );

方式四:组合式继承

function Parent(){
this.age = 100;
}
function Child(){
Parent.call(this);
this.name = '张三'
}
Child.prototype = new Parent();
let o4 = new Child();
console.log( o4,o4.name,o4.age );
延迟加载JS有哪些方式

  1. defer 是等html全部解析完成,才会执行js代码,顺次执行js脚本。
  2. async 是和html解析同步的(并行的),不是顺次执行js脚本(谁先加载完谁先执行)
  3. 使用js动态创建
目录
相关文章
|
11天前
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
|
24天前
|
JSON JavaScript 前端开发
[JS]面试官:你的简历上写着熟悉jsonp,那你说说它的底层逻辑是怎样的?
本文介绍了JSONP的工作原理及其在解决跨域请求中的应用。首先解释了同源策略的概念,然后通过多个示例详细阐述了JSONP如何通过动态解释服务端返回的JavaScript脚本来实现跨域数据交互。文章还探讨了使用jQuery的`$.ajax`方法封装JSONP请求的方式,并提供了具体的代码示例。最后,通过一个更复杂的示例展示了如何处理JSON格式的响应数据。
30 2
[JS]面试官:你的简历上写着熟悉jsonp,那你说说它的底层逻辑是怎样的?
|
12天前
|
JSON 前端开发 JavaScript
聊聊 Go 语言中的 JSON 序列化与 js 前端交互类型失真问题
在Web开发中,后端与前端的数据交换常使用JSON格式,但JavaScript的数字类型仅能安全处理-2^53到2^53间的整数,超出此范围会导致精度丢失。本文通过Go语言的`encoding/json`包,介绍如何通过将大整数以字符串形式序列化和反序列化,有效解决这一问题,确保前后端数据交换的准确性。
28 4
|
22天前
|
机器学习/深度学习 自然语言处理 前端开发
前端神经网络入门:Brain.js - 详细介绍和对比不同的实现 - CNN、RNN、DNN、FFNN -无需准备环境打开浏览器即可测试运行-支持WebGPU加速
本文介绍了如何使用 JavaScript 神经网络库 **Brain.js** 实现不同类型的神经网络,包括前馈神经网络(FFNN)、深度神经网络(DNN)和循环神经网络(RNN)。通过简单的示例和代码,帮助前端开发者快速入门并理解神经网络的基本概念。文章还对比了各类神经网络的特点和适用场景,并简要介绍了卷积神经网络(CNN)的替代方案。
|
22天前
|
移动开发 前端开发 JavaScript
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
于辰在大学期间带领团队参考网易游戏官网的部分游戏页面,开发了一系列前端实训作品。项目包括首页、2021校园招聘页面和明日之后游戏页面,涉及多种特效实现,如动态图片切换和人物聚合效果。作品源码已上传至CSDN,视频效果可在CSDN预览。
29 0
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
|
27天前
|
JavaScript 前端开发 开发者
前端框架对比:Vue.js与Angular的优劣分析与选择建议
【10月更文挑战第27天】在前端开发领域,Vue.js和Angular是两个备受瞩目的框架。本文对比了两者的优劣,Vue.js以轻量级和易上手著称,适合快速开发小型到中型项目;Angular则由Google支持,功能全面,适合大型企业级应用。选择时需考虑项目需求、团队熟悉度和长期维护等因素。
40 1
|
28天前
|
JavaScript 前端开发 API
前端框架对比:Vue.js与Angular的优劣分析与选择建议
【10月更文挑战第26天】前端技术的飞速发展让开发者在构建用户界面时有了更多选择。本文对比了Vue.js和Angular两大框架,介绍了它们的特点和优劣,并给出了在实际项目中如何选择的建议。Vue.js轻量级、易上手,适合小型项目;Angular结构化、功能强大,适合大型项目。
25 1
|
1月前
|
缓存 前端开发 JavaScript
"面试通关秘籍:深度解析浏览器面试必考问题,从重绘回流到事件委托,让你一举拿下前端 Offer!"
【10月更文挑战第23天】在前端开发面试中,浏览器相关知识是必考内容。本文总结了四个常见问题:浏览器渲染机制、重绘与回流、性能优化及事件委托。通过具体示例和对比分析,帮助求职者更好地理解和准备面试。掌握这些知识点,有助于提升面试表现和实际工作能力。
64 1
|
1月前
|
前端开发 JavaScript UED
"前端小技巧大揭秘:JS如何将后台时间戳秒变亲切小时前、分钟前,让用户秒懂,提升互动体验!"
【10月更文挑战第23天】在Web开发中,将后台返回的时间戳转换为“小时前”、“分钟前”、“刚刚”等友好的时间描述是常见需求。本文介绍如何用JavaScript实现这一功能,通过计算当前时间和时间戳的差值,返回相应的描述,提升用户体验。
30 1
|
2月前
|
前端开发 JavaScript 安全
JavaScript前端开发技术
JavaScript(简称JS)是一种广泛使用的脚本语言,特别在前端开发领域,它几乎成为了网页开发的标配。从简单的表单验证到复杂的单页应用(SPA),JavaScript都扮演着不可或缺的角色。
26 3