JS高频面试题(上)

news2024/9/29 3:23:29
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则不能跨域。

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

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

相关文章

Linux文本编辑器-vi/vim

一.vi/vim编辑器介绍 vi\vim是visual interface的简称, 是Linux中最经典的文本编辑器 同图形化界面中的 文本编辑器一样&#xff0c;vi是命令行下对文本文件进行编辑的绝佳选择。 vim 是 vi 的加强版本&#xff0c;兼容 vi 的所有指令&#xff0c;不仅能编辑文本&#xff0c;而…

Unity - 将项目转为HDRP

Camera window -> Package Manager 之后会出现HDRP向导窗口&#xff0c;均点击修复。 在Edit中&#xff0c;更改项目中的材质

web前端之不一样的居中方式、解决tabBar选项卡居中问题、css支持嵌套、auto

MENU 前言htmlstyle效果 前言 这里不能使用justify-content: center;&#xff0c;因为在小屏幕上&#xff0c;这种方式无法显示最前面的两个tabBar。 html <div id"box" class"d_f o_a mt_50 mb_50 ml_20 mr_20"><div class"ws_n">…

CSS复合选择器和CSS层叠性、继承性有哪些内容?

知识引入 1.CSS复合选择器 书写CSS样式表时&#xff0c;可以使用CSS基础选择器选中目标元素。但是在实际网站开发中&#xff0c;一个网页中可能包含成千上万的元素&#xff0c;如果仅使用CSS基础选择器&#xff0c;是远远不够的。为此&#xff0c;CSS提供了几种复合选择器&am…

操作系统-进程通信(共享存储 消息传递 管道通信 读写管道的条件)

文章目录 什么是进程通信为什么进程通信需要操作系统支持共享存储消息传递直接通信方式间接通信方式 管道通信小结注意 什么是进程通信 分享吃瓜文涉及到了进程通信 进程通信需要操作系统支持 为什么进程通信需要操作系统支持 进程不能访问非本进程的空间 当进程P和Q需要…

Python爬虫框架选择与使用:推荐几个常用的高效爬虫框架

目录 前言 一、Scrapy框架 1. 安装Scrapy 2. Scrapy示例代码 3. 运行Scrapy爬虫 二、Beautiful Soup库 1. 安装Beautiful Soup 2. Beautiful Soup示例代码 3. 运行Beautiful Soup代码 三、Requests库 1. 安装Requests库 2. Requests示例代码 3. 运行Requests代码 …

周订单量超300%增长!百度智能云千帆AI原生应用商店公布百天成绩单

​ 1月25日&#xff0c;国内首家面向企业客户进行一站式交易的AI原生应用商店——百度智能云千帆AI原生应用商店上线100天。上线百日&#xff0c;累计上线AI原生应用超100款&#xff0c;涵盖文案智能创作、AI作画、代码生成、数字人等应用场景&#xff0c;应用数量指数级增长…

Java面试——基础篇

目录 1、java语言有哪些优点和缺点? 2、JVM 、 JDK 和 JRE的关系 3、为什么说 Java 语言“编译与解释并存”&#xff1f; 4、Java和c的区别 5、基本数据类型 5.1、java的8种基本数据类型&#xff1a; 5.2、基本类型和包装类型的区别&#xff1a; 5.3、包装类型的缓存机…

Docker 魔法解密:探索 UnionFS 与 OverlayFS

本文主要介绍了 Docker 的另一个核心技术&#xff1a;Union File System。主要包括对 overlayfs 的演示&#xff0c;以及分析 docker 是如何借助 ufs 实现容器 rootfs 的。 1. 概述 Union File System Union File System &#xff0c;简称 UnionFS 是一种为 Linux FreeBSD NetB…

2023.1.23 关于 Redis 哨兵模式详解

目录 引言 人工恢复主节点故障 ​编辑 主从 哨兵模式 Docker 模拟部署哨兵模式 关于端口映射 展现哨兵机制 哨兵重新选取主节点的流程 哨兵模式注意事项 引言 人工恢复主节点故障 1、正常情况 2、主节点宕机 3、程序员主动恢复 先看看该主节点还能不能抢救如果不好定…

[GDMEC-无人机遥感研究小组]无人机遥感小组-000-数据集制备

基于labelme的无人机语义分割数据集制备 文章目录 基于labelme的无人机语义分割数据集制备1. 数据获取2. 安装labelme3.利用labelme进行标注 1. 数据获取 数据集制备需要利用无人机飞行并采集标注。使用录制模式&#xff0c;镜头垂直向下进行拍摄&#xff0c;得到DJI_XXXX.MP4…

如何实现动态代理(俩种方式)

文章目录 基于接口的动态代理&#xff1a;基于类的动态代理&#xff1a; 基于接口的动态代理&#xff1a; 通过Java的反射机制来动态创建代理对象&#xff0c;代理对象实现了一个或多个接口。 Java提供了java.lang.reflect包中的Proxy类和InvocationHandler接口来实现基于接口…

仰暮计划|“他说,他是出生于两个时代的人”

凌保庆老爷爷&#xff0c;1942年10月4日出生&#xff0c;今年82岁&#xff0c;家住在河南省登封市唐庄乡磨沟村。7月28日&#xff0c;我作为仰暮计划小队的一员去拜访了这位老人&#xff0c;听凌爷爷讲述了他的故事。 走进这户人家的时候&#xff0c;凌爷爷正在书房里。虽然家…

Spring Cloud 系列:基于Seata 实现 XA模式

https://seata.io/zh-cn/docs/user/mode/xa https://seata.io/zh-cn/docs/dev/mode/xa-mode XA 规范 是 X/Open 组织定义的分布式事务处理&#xff08;DTP&#xff0c;Distributed Transaction Processing&#xff09;标准&#xff0c;XA 规范 描述了全局的TM与局部的RM之间的…

【深度学习】线性回归模型与梯度下降法

线性回归模型与梯度下降法 线性回归模型与枚举法 线性回归模型定义: w:权重b:偏置#mermaid-svg-ZAxF27Mw5dXNQgw2 {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-ZAxF27Mw5dXNQgw2 .error-icon{fill:#552222;}…

大数据开发之Spark(完整版)

第 1 章&#xff1a;Spark概述 1.1 什么是spark 回顾&#xff1a;hadoop主要解决&#xff0c;海量数据的存储和海量数据的分析计算。 spark是一种基于内存的快速、通用、可扩展的大数据分析计算引擎。 1.2 hadoop与spark历史 hadoop的yarn框架比spark框架诞生的晚&#xff…

JRT的无源码发布

之前介绍过JRT最大的特点就是业务脚本化。老javaer就会说你业务代码都在发布环境放着&#xff0c;那怎么代码保密&#xff0c;在发布环境别人随便改了启不是不安全&#xff0c;或者一些代码我就是不想让人看源码呢。 其实JRT的业务脚本化只是特性&#xff0c;不是代表就必须要…

【域名解析】如何将域名指向对应服务器IP

目录 &#x1f337;一、域名解析基本概念 &#x1f33c;1. 定义 &#x1f33c;2. 域名解析类型 &#x1f337;二、域名解析服务器IP地址 &#x1f33c;1. 操作步骤 &#x1f33c;2. 验证 &#x1f337;一、域名解析基础知识 &#x1f33c;1. 基本概念 定义&#xff1a; …

【操作系统】实验八 proc文件系统

&#x1f57a;作者&#xff1a; 主页 我的专栏C语言从0到1探秘C数据结构从0到1探秘Linux &#x1f618;欢迎关注&#xff1a;&#x1f44d;点赞&#x1f64c;收藏✍️留言 &#x1f3c7;码字不易&#xff0c;你的&#x1f44d;点赞&#x1f64c;收藏❤️关注对我真的很重要&…

破解不了WIFI?也许你应该试试社工...

以下案例为虚拟环境,请勿模仿 做什么? 由于工作出差在该某某企业出差,手机和电脑都没办法用流量…流量包1G1块…太贵了…我勒个豆啊…发现WIFI密码难以破解&#xff08;小kali上过了&#xff09;。 出去逛逛吧…发现楼道有海康威视摄像头,学过交换机的一般都看得出来这个摄像…