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的区别

1. find 条件符合就找到第一个符合的元素返回,否则返回 undefined
2. filter 如果条件符合  就返回一个新的数组(多个元素),否则返回空数组[]

some和every的区别

1. every()是对数组中每一项运行给定函数,如果该函数对每一项返回true,则返回true。 有点&&的意思
2. some()是对数组中每一项运行给定函数,如果该函数对任一项返回true,则返回true。有点||的意思

深拷贝和浅拷贝

箭头函数和普通函数有什么区别

1. 箭头函数不能用于构造函数,如果使用会报错
2. 箭头函数没有 arguments对象、prototype 原型对象
3. 箭头函数的this在定义时就已经指定,而普通函数是调用时才指定,如果普通函数用于构造函数this的指向就是当前实例

Promise有几种状态

1. pending(初始状态)
   pending的意思是“待定的,发生的”,相当于是一个初始状态。创建[Promise]对象时,且没有调用resolve或者是reject方法,相当于时初始状态。这个初始状态会随着你调用resolve,或者是reject函数而切换到另一种状态。

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

3. 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判断变量是不是数组,你能写出哪些方法

1. isArray
2. Array.prototype.isPrototypeOf([])
3. Object.prototype.toString.call([]).indexOf('Array') > -1
4. [].constructor.toString().indexOf('Array') > -1

slice是干嘛的、splice是否会改变原数组

1. slice是来截取的
    参数可以写slice(3)、slice(1,3)、slice(-3)
    返回的是一个新的数组
2. 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<arr.length;i++){
        if( arr[i] !== arr[i-1]){
            brr.push( arr[i] );
        }
    }
    return brr;
}

找出多维数组最大值

function fnArr(arr){
    var newArr = [];
    arr.forEach((item,index)=>{
        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)

闭包

1. 闭包是什么
    闭包是一个函数加上到创建函数的作用域的连接,闭包“关闭”了函数的自由变量。
2. 闭包可以解决什么问题【闭包的优点】
    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)
      }
3. 闭包的缺点
    3.1 变量会驻留在内存中,造成内存损耗问题。
                解决:把闭包的函数设置为null
  3.2 内存泄漏【ie】 ==> 可说可不说,如果说一定要提到ie

原型链


1. 原型可以解决什么问题:解决了对象的共享属性、方法
2. 谁有原型:函数拥有prototype、对象拥有__proto__
3. 对象查找属性或者方法的顺序
    先在对象本身查找 > 构造函数中查找 > 对象的原型 > 构造函数的原型中 > 当前原型的原型中查找
4. 原型链的最顶端是null

JS继承有哪些方式

1. ES6 class 的extends
2. 原型链继承
3. 借用构造函数继承
4. 组合式继承(原型链继承和借用构造函数继承)

方式一: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动态创建<script type="text/javascript" src="xxx">标签
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,884评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,347评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,435评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,509评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,611评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,837评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,987评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,730评论 0 267
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,194评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,525评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,664评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,334评论 4 330
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,944评论 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,764评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,997评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,389评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,554评论 2 349

推荐阅读更多精彩内容