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 livar 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则不能跨域。

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

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

相关文章

Python + Selenium —— 网页元素定位之CSS 选择器!

CSS(Cascading Style Sheets)是一种语言&#xff0c;用来描述HTML和XML文档的样式。 CSS 选择器用来定位 HTML 上的元素&#xff0c;然后对其进行渲染。通过 CSS 选择器可以定位到页面上的任意元素。这些选择器可以被 WebDriver 用作另外的定位策略。 CSS 可以较为灵活的选择控…

蓝桥杯准备之路-Java基础复习

一、基本数据类型 int(32),long(64),float,double,boolean ,char 溢出判断&#xff1a; System.out.println("蓝桥杯练习第一天");Scanner scan new Scanner(System.in);int a scan.nextInt();System.out.println(a);int a1 Integer.MAX_VALUE;System.out.prin…

Linux管道学习(无名管道)

目录 1、概述 2、管道的创建 3、管道读写行为 3.1、管道读 在linux中管道有两种&#xff0c;一是无名管道&#xff08;匿名管道&#xff09;&#xff0c;第二种是有名管道&#xff1b;无名管道主要用于有血缘关系的父子进程间通信&#xff0c;有名管道则不受该限制&#xf…

字符串匹配(BF KMP)详解 + 刷题

目录 &#x1f33c;前言 BF 算法 KMP 算法 &#xff08;1&#xff09;前缀函数 -- O(n^3) &#xff08;2&#xff09;前缀函数 -- O(n^2) &#xff08;3&#xff09;前缀函数 -- O(n) &#xff08;4&#xff09;辅助理解 &#x1f40b;P1308 -- 统计单词数 …

文件包含技术总结

开发人员一般会把重复使用的函数写到单个文件中&#xff0c;需要使用某个函数时直接调用此文件&#xff0c;而无需再次编写&#xff0c;这中文件调用的过程一般被称为文件包含。 allow_url_fopen On&#xff08;是否允许打开远程文件&#xff09; allow_url_include On&…

机器学习算法(一)

一、线性回归 线性回归&#xff08;Linear Regression&#xff09;可能是最流行的机器学习算法。线性回归就是要找一条直线&#xff0c;并且让这条直线尽可能地拟合散点图中的数据点。它试图通过将直线方程与该数据拟合来表示自变量&#xff08;x 值&#xff09;和数值结果&am…

uniapp page宽度设置为750rpx,子元素宽度100%,大小不一致

uniapp page宽度设置为750rpx&#xff0c;子元素宽度100%&#xff0c;大小不一致。 原因是我在page加了margin: 0 auto;去掉就正常了&#xff08;但是如果在超大屏幕还是会出现&#xff0c;我猜是使用rpx导致的&#xff0c;rpx渲染成页面时会转成精确到一个小数点几位数的rem&a…

[实战]加密传输数据解密

前言 下面将分享一些实际的渗透测试经验&#xff0c;帮助你应对在测试中遇到的数据包内容加密的情况。我们将以实战为主&#xff0c;技巧为辅&#xff0c;进入逆向的大门。 技巧 开局先讲一下技巧&#xff0c;掌握好了技巧&#xff0c;方便逆向的时候可以更加快速的找到关键函数…

arcgis实现截图/截屏功能

arcgis实现截图/截屏功能 文章目录 arcgis实现截图/截屏功能前言效果展示相关代码 前言 本篇将使用arcgis实现截图/截屏功能&#xff0c;类似于qq截图 效果展示 相关代码 <!DOCTYPE html> <html> <head><meta charset"utf-8"><meta nam…

突发:Do Kwon申请破产!

作者&#xff1a;秦晋 1月22日&#xff0c;据《彭博社》报道&#xff0c; 由Do Kwon联合创立的Terraform Labs Pte.数字资产公司在美国特拉华州申请破产保护。 根据周日在特拉华州提交的法庭文件显示&#xff0c;该公司的资产和负债估计均在1亿至5亿美元之间&#xff0c;债权人…

【Linux编译器-gcc/g++使用】

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言 设计样例&#xff0c;先见一下 方案一&#xff1a; 方案二&#xff1a; 在企业里面一般维护软件的源代码的话&#xff0c;要维护几份&#xff1f; 方案一&…

mysql数据库事务(事务设置、隔离级别、实现原理)

目录 事务 数据库事务 事务特性 事务设置 事务隔离级别 1.读未提交 2.读已提交 3.可重复读 4.串行化 事务实现原理 原子性&#xff1a;undolog 持久性&#xff1a;redolog 隔离性: 如果隔离级别是读已提交&#xff1a; 如果隔离级别是可重复读&#xff1a; 事务…

【Linux】 开始使用 gcc 吧!!!

Linux 1 认识gcc2 背景知识3 gcc 怎样完成 &#xff1f;3.1 预处理预处理^条件编译 3.2 编译3.3 汇编3.4 链接 4 函数库5 gcc 基本选项Thanks♪(&#xff65;ω&#xff65;)&#xff89;谢谢阅读下一篇文章见&#xff01;&#xff01;&#xff01; 1 认识gcc 我们在windows环…

系统架构设计师教程(十六)嵌入式系统架构设计理论与实践

嵌入式系统架构设计理论与实践 16.1 嵌入式系统概述16.1.1 嵌入式系统发展历程16.1.2 嵌人式系统硬件体系结构16.2 嵌入式系统软件架构原理与特征16.2.1 两种典型的嵌入式系统架构模式16.2.2 嵌入式操作系统16.2.3 嵌入式数据库16.2.4 嵌入式中间件16.2.5 嵌入式系统软件开发环…

智能风控体系之divergence评分卡简介

评分卡模型的出现据说最早是在20世纪40年代&#xff0c;Household Finance and Spiegel和芝加哥邮购公司第一次尝试在贷款决策过程中使用信用评分.但是这两家公司都终止了这项业务。后来&#xff0c;在20世纪50年代末&#xff0c;伊利诺伊州的美国投资公司&#xff08;AIC&…

《WebKit 技术内幕》学习之十四(1):调式机制

第14章 调试机制 支持调试HTML、CSS和JavaScript代码是浏览器或者渲染引擎需要提供的一项非常重要的功能&#xff0c;这里包括两种调试类型&#xff1a;其一是功能&#xff0c;其二是性能。功能调试能够帮助HTML开发者使用单步调试等技术来查找代码中的问题&#xff0c;性能调…

Spring Boot 模块工程(通过 Maven Archetype)建立

前言 看到我身边的朋友反馈说&#xff0c;IDEA 新建项目时&#xff0c;如果通过 Spring Initializr 来创建 Spring Boot , 已经无法选择 Java 8 版本&#xff0c;通过上小节的教程&#xff0c;不知道该如何创建 Spring Boot 模块工程。如下图所示&#xff1a; 一.IDEA 搭建 …

Kafka(八)使用Kafka构建数据管道

目录 1 使用场景2 构建数据管道时需要考虑的问题2.1 及时性2.2 可靠性高可用可靠性数据传递 2.3 高吞吐量2.4 数据格式2.5 转换ETLELT 2.6 安全性2.7 故障处理2.8 耦合性和灵活性临时数据管道元数据丢失末端处理 3 使用Connect API3.1 Connect的数据处理流程sourcesinkconnecto…

IP组播地址

目录 1.硬件组播 2.因特网范围内的组播 IP组播地址让源设备能够将分组发送给一组设备。属于多播组的设备将被分配一个组播组IP地址 组播地址范围为224.0.0.0~239.255.255.255(D类地址)&#xff0c;一个D类地址表示一个组播组。只能用作分组的目标地址。源地址总是为单播地址…