JS高频面试题(上)

1. 介绍JS有哪些内置对象?
  • 数据封装类对象:Object、Array、Boolean、Number、String

  • 其他对象:Function、Arguments、Math、Date、RegExp、Error

  • ES6新增对象:Symbol(标识唯一性的ID)、Map、Set、Promises、Proxy、Reflect

2. 如何最小化重绘(repaint)和回流(reflow)?
  • 需要要对元素进行复杂的操作时,可以先隐藏(display:"none"),操作完成后再显示

  • 需要创建多个DOM节点时,使用DocumentFragment创建完后一次性的加入document

  • 缓存Layout属性值,如:var left = elem.offsetLeft; 这样,多次使用 left 只产生一次回流

  • 尽量避免用table布局(table元素一旦触发回流就会导致table里所有的其它元素回流)

3. Javascript作用域链?
  • 全局函数无法查看局部函数的内部细节,但局部函数可以查看其上层的函数细节,直至全局细节

  • 如果当前作用域没有找到属性或方法,会向上层作用域[[Scoped]]查找,直至全局函数,这种形式就是作用域链

4. 数据请求

(1) XHR

var xhr = new XMLHttpRequest();
xhr.open('get',"www.aaaa.com",true);//异步
xhr.send();
xhr.onreadystatechange = function(){
    // readstate  4
    // status  200-300
    // 200 成功 (有可能强缓存策略,cache-control,expired)
    // 301 302 redirect
    // 304 从缓存读取数据。(协商缓存策略,etag)
    // 404 not found
    // 500 服务器错误。   
}
  xhr 可以取消?
  xhr.abort();//终止请求。
(2) fetch (w3c)
fetch("url",      
   {method:"post",body:"",credencial:'include'})
   .then(res=>res.json())
   .then(res=>{console.log(res)})
   // 兼容性问题
   // 发出的请求,默认是不带cookie.  credencial:'include'

(3) jsonp (解决跨域)

 动态创建script src指向没有跨域限制,  onload
​
  后端返回的数据格式 一定是, test('["111","222","3333"]');
​
  前端提前定义好 test这个方法,通过形参就拿到数据了。
​
  jsonp 可以做get请求, 无法做post请求(缺点);
​
  jsonp可以取消吗?不能

5. 跨域和同源策略

所谓的同源策略其实是浏览器的一种机制,只允许在同源,也就是同协议、同域名、同端口的的情况下才能进行数据交互。 但是我们在开发项目的过程中, 往往一个项目的接口不止一个域,所以往往就需要做跨域的处理,通常的跨域方式有这么几种:

1)JSONP,主要依赖的是script标签不受同源策略影响,src指向某一个接口的地址, 同步需要传递callback回调函数名字, 这样当接口调用成功后, 本地创建的全局回调函数就会执行, 并且接收到数据。不使用img标签的原因是因为img标签无法执行js语句

2)CORS,依赖服务端对前端的请求头信息进行放行,不做限制。

Access-Control-Allow-Origin配置成*

3)代理访问,前端访问不存在跨域问题的代理服务器,代理服务器再去访问目标服务器(服务器之间没有跨域限制)

6. 面向对象

(1)构造函数

function Test(name,age){
    this.name = name;
    this.age =age;
    this.getName= function(){
        return this.name;
    }
}
// Test();
var obj = new Test("kerwin",100);
​
var obj2 =new Test("xiaoming",18)

(2)原型

 //内存只有一份
Test.prototype.getName= function(){
​
}
//缺点是?
​
原型容易被覆盖
​
Array.prototype.concat = ....

(3)继承

//构造函数继承
function Test2(name,age,location){
    // this.name =name;
    // this.age =age;
    // Test.call(this,name,age);
    Test.apply(this,[name,age])
    this.location = location;
}
var obj = new Test2();
​
//原型继承
Test2.prototype =Test.prototype
//Test2.prototype =new Test()
Test2.prototype.constructor =Test2;
//混合继承​

(4)原型链

原型链的基本原理:任何一个实例,通过原型链,找到它上面的原型,该原型对象中的方法和属性,可以被所有的原型实例共享。

7. 闭包

闭包是JS中的一种特性,往往用于解决一些特定的问题,当A函数中返回了B函数, 并且返回的B函数中有使用到A函数中的局部变量(包含参数)就会形成一个特性的形态,就叫闭包。

此时,理论上来说A函数执行完成后,生成了B函数后,应该被垃圾回收机制回收,但是因为生成的B函数还在使用A函数中的局部变量, 就会导致A函数没有及时回收,导致内存泄露。

   //1. 函数防抖(搜索查询)
        
        inputelement.oninput = (function(){
            var timer =null;
            return function(){
                console.log("scroll")
                if(timer){
                    clearTimeout(timer);
                }
                timer = setTimeout(() => {
                    console.log("代码执行,ajax"); 
                    
                }, 500)
            }
        })()
        // 2. 函数节流(onrize,onscroll)
            window.onscroll = (function(){
                var date = Date.now();
                return function(){
​
                    if(Date.now()-date>500){
                        date = Date.now();
                        console.log("代码执行echarts resize")
​
                    }
                }
            })()
        
        // 3. ul li
        var oli = document.getElementsByTagName("li");
​
        for(var i=0;i<oli.length;i++){
            oli[i].onclick =(function(index){
                return function(){
                    console.log(index)
                }
            })(i)   
        }
8. 数组去重
 var arr = [1,2,3,4,3,4];
​
 var myset = new Set(arr);
 var mya = Array.from(myset);
9. 数组常用的合并方法
  • concat

  • [...a, ...b]展开运算符

  • [a, b].flat()

  • ......

10. cookie和session

cookie和session是为HTTP请求挂载状态的,也就说在前后端交互的过程中,往往需要利用cookie或者session来对客户端进行标记。

传统的cookie验证方式是这样的:

  1. 客户端在向服务端登录的时候,服务端直接通过响应头上set-cookie字段,为浏览器客户端注入cookie,或者将对应的信息放置在响应内容中,客户端自行将其存储在cookie中。

  2. 客户端在每次发送请求的时候就可以将cookie携带在请求头上进行数据的传递,服务端拿到此次请求头中的cookie进行验证。

  3. 客户端自行设置cookie或者由服务端设置cookie的时候也去设置此cookie的过期时间,当cookie过期后相当于登录过期了。

session的验证方式:

  1. 客户端在向服务端登录的时候,服务端自行建立客户信息表,并且建立生命周期机制,服务端再将此信息通过cookie或者数据直接返回的形式,返回给客户端。

  2. 客户端拿到验证信息后,可以选择存储在cookie中获取localStorage中都可以。

  3. 每次请求的时候携带验证信息(cookie就自动写到,localStorage需要取出携带)

  4. 服务端接收到请求后,判断该验证信息是否过期

cookie和session本质是都是利用cookie或者localStorage来进行数据交互,而cookie和localStorage又都有跨域的限制:

cookie通过设置domain可以实现一级域名下的二级域名之间可以互相访问,localStorage则不能跨域。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【Java程序员面试专栏 专业技能篇】MySQL核心面试指引(二):核心机制策略

关于MySQL部分的核心知识进行一网打尽,包括三部分:基础知识考察、核心机制策略、性能优化策略,通过一篇文章串联面试重点,并且帮助加强日常基础知识的理解,全局思维导图如下所示 本篇Blog为第二部分:核心机制策略,子节点表示追问或同级提问 日志机制 关于MySQL的几…

图像处理python基础

array 读取图片 tensor 模型预测 一般过程&#xff1a;读取数据np->tensor->model->result->np->画图 shape确保图像输入输出尺寸正确 读取图片 将在GPU上运行的tensor类型转变成在CPU上运行的np类型 三类计算机视觉任务的输入&#xff1a; 分类&#xff1…

加速应用开发:低代码云SaaS和源码交付模式如何选

随着数字化转型的加速&#xff0c;企业对于快速开发和交付高质量应用的需求也越来越迫切。为了满足这一需求&#xff0c;开发者们开始探索采用低代码平台进行软件开发工作&#xff0c;以加速应用开发过程。 目前&#xff0c;市场上的低代码产品众多&#xff0c;但基本可分为简单…

imgaug库图像增强指南(38):从入门到精通——图像卷积的全面解析

引言 在深度学习和计算机视觉的世界里&#xff0c;数据是模型训练的基石&#xff0c;其质量与数量直接影响着模型的性能。然而&#xff0c;获取大量高质量的标注数据往往需要耗费大量的时间和资源。正因如此&#xff0c;数据增强技术应运而生&#xff0c;成为了解决这一问题的…

Redis——关于它为什么快?使用场景?以及使用方式?为何引入多线程?

目录 1.既然redis那么快&#xff0c;为什么不用它做主数据库&#xff0c;只用它做缓存&#xff1f; 2.Redis 一般在什么场合下使用&#xff1f; 3.redis为什么这么快&#xff1f; 4.Redis为什么要引入了多线程&#xff1f; 1.既然redis那么快&#xff0c;为什么不用它做主数据…

磺化-Cy5-左旋聚乳酸,Sulfo-Cyanine5-PLLA,一种生物相容性良好的生物降解材料

您好&#xff0c;欢迎来到新研之家 文章关键词&#xff1a;磺化-Cy5-左旋聚乳酸&#xff0c;Sulfo-Cyanine5-PLLA&#xff0c;Sulfo-Cyanine5-Poly(L-lactic acid) 一、基本信息 产品简介&#xff1a;Sulfo Cy5 PLLA, also known as sulfonated Cyanine5 L-polylactic acid,…

Go实现LRU算法

LRU是什么&#xff1f; LRU是内存淘汰策略&#xff0c;LRU &#xff08;Least recently used&#xff1a;最近最少使用&#xff09;算法在缓存写满的时候&#xff0c;会根据所有数据的访问记录&#xff0c;淘汰掉未来被访问几率最低的数据。也就是说该算法认为&#xff0c;最近…

开源运维平台Spug本地docker部署结合内网穿透实现远程访问

文章目录 前言1. Docker安装Spug2 . 本地访问测试3. Linux 安装cpolar4. 配置Spug公网访问地址5. 公网远程访问Spug管理界面6. 固定Spug公网地址 前言 Spug 面向中小型企业设计的轻量级无 Agent 的自动化运维平台&#xff0c;整合了主机管理、主机批量执行、主机在线终端、文件…

Qt Quick程序的发布|Qt5中QML和Qt Quick 的更改

# Quick程序的发布旧版做法 # Qt5中QML和Qt Quick 的更改 1.QML语言的更改(Qt4->Qt5) 在QML语言中,只有少量更改会影响QML代码的迁移:无法直接导入单独的文件(例如:import"MyType.qml”),需要导人该文件所在的目录; JavaScript文件中的相对路径被解析…

性能优化-OpenCL 介绍

「发表于知乎专栏《移动端算法优化》」 本文首先对 GPU 进行了概述&#xff0c;然后着重地对移动端的 GPU 进行了分析&#xff0c;随后我们又详细地介绍了 OpenCL 的背景知识和 OpenCL 的四大编程模型。希望能帮助大家更好地进行移动端高性能代码的开发。 &#x1f3ac;个人简介…

Chatgpt的崛起之路

Chatgpt的崛起之路 背景与发展历程背景发展历程 技术原理第一阶段&#xff1a;训练监督策略模型第二阶段&#xff1a;训练奖励模型第三阶段&#xff1a;采用强化学习来增强模型的能力。 国内使用情况及应用的领域面临的数据安全挑战与建议ChatGPT获取数据产生的问题数据泄露问题…

2023年AI大模型:从科技热潮到商业变革

出品&#xff1a;新商纪&#xff0c;作者&#xff1a;独孤依风 2023年&#xff0c;大模型技术在全球科技界掀起了一场风暴&#xff0c;引发了科技巨头们的激烈角逐。这一年&#xff0c;大模型不仅重新定义了人工智能的边界&#xff0c;还催生了跨行业技术革新。 根据IDC的预测…

如何在Kali系统配置启动SSH并结合内网穿透实现远程连接

文章目录 1. 启动kali ssh 服务2. kali 安装cpolar 内网穿透3. 配置kali ssh公网地址4. 远程连接5. 固定连接SSH公网地址6. SSH固定地址连接测试 简单几步通过[cpolar 内网穿透](cpolar官网-安全的内网穿透工具 | 无需公网ip | 远程访问 | 搭建网站)软件实现ssh 远程连接kali! …

JavaEE之多线程编程:5. 死锁(详解!!!)

文章目录 一、死锁是什么二、关于死锁的三种形式三、如何避免死锁 一、死锁是什么 死锁是这样的一种情形&#xff1a;多个同时被阻塞&#xff0c;它们中的一个或者全部都在等待某个资源被释放。由于线程被无限期地阻塞&#xff0c;因此程序不可能正常终止。 【举个例子理解死…

24.1.25Linux shell之cal、ncal、printf

cal 命令用于在终端上显示当前月份的日历。默认情况下&#xff0c;它会展示当前月份的完整日历&#xff0c;包括星期和日期。常用的就是下面两个参数&#xff1a; ncal 这个比上面得的功能多&#xff0c;一个是会把今天的日子标注出来&#xff0c;一个是排版不一样&#xff1…

redis-持久化主从复制

一.主从复制 1.是什么 主机数据更新后根据配置和策略&#xff0c; 自动同步到备机的master/slaver机制&#xff0c;Master以写为主&#xff0c;Slave以读为主 2.能干嘛 读写分离&#xff0c;性能扩展&#xff08;主 写 从 读&#xff09; 容灾快速恢复 3 主从复制 一主二…

使用redisson控制多个springboot实例负载同时只有一个实例执行任务

一 redisson依赖 <!-- redisson 依赖--><dependency><groupId>org.redisson</groupId><artifactId>redisson-spring-boot-starter</artifactId><version>3.23.4</version></dependency> 二 定时任务代码 pack…

【复现】奥威亚视屏云平台文件读取漏洞_27

目录 一.概述 二 .漏洞影响 三.漏洞复现 1. 漏洞一&#xff1a; 四.修复建议&#xff1a; 五. 搜索语法&#xff1a; 六.免责声明 一.概述 奥威亚视屏云平台拥有丰富的应用模块&#xff0c;包括结对帮扶、网络教研、教研共同体、优课汇聚、教学资源、在线巡课、AI课堂分…

Cesium介绍及3DTiles数据加载时添加光照效果对比

一、Cesium简介 Cesium原意是化学元素铯&#xff0c;铯是制造原子钟的关键元素&#xff0c;通过命名强调了Cesium产品专注于基于时空数据的实时可视化应用。熟悉GIS开发领域的读者都知道&#xff0c;Cesium是一个用于创建3D地理空间应用程序的开源JavaScript库&#xff0c;它允…

DA14531平台secondary_bootloade工程修改笔记

DA14531平台secondary_bootloade工程修改笔记 1.支持在线仿真 初始时加入syscntl_load_debugger_cfg(); 表示可以重复Jlink连接调试仿真 2.支持串口烧录&#xff0c;和支持单线线写 utilities\secondary_bootloader\includes\bootloader.h /************** 2-wire UART supp…