javascript系列
文章平均质量分 78
主要有javaScript系列,es6系列,Vue系列,Vue3系列,Css系列,
kleinBlue.
当天空下坠一切变成克莱因蓝。
展开
-
1.Javscript数组的常用方法有哪些?
数组基本操作可以归纳为 增、删、改、查,需要留意的是哪些方法会对原数组产生影响,哪些方法不会下面对数组常用的操作方法做一个归纳增下面前三种是对原数组产生影响的增添方法,第四种则不会对原数组产生影响 push() unshift() splice() concat() push()push()方法接收任意数量的参数,并将它们添加到数组末尾,返回数组的最新长度letcolors=[];//创建一个数组letcount=color...原创 2021-10-18 10:52:17 · 97 阅读 · 0 评论 -
HTTP与HTTPS的区别
超文本传输协议HTTP协议被用于在Web浏览器和网站服务器之间传递信息,HTTP协议以明文方式发送内容,不提供任何方式的数据加密,如果攻击者截取了Web浏览器和网站服务器之间的传输报文,就可以直接读懂其中的信息,因此,HTTP协议不适合传输一些敏感信息,比如:信用卡号、密码等支付信息。 为了解决HTTP协议的这一缺陷,需要使用另一种协议:安全套接字层超文本传输协议HTTPS,为了数据传输的安全,HTTPS在HTTP的基础上加入了SSL协议,SSL依靠证书来验证服务器的身份,并为浏览器和服务器之间的通原创 2021-12-13 11:03:05 · 240 阅读 · 0 评论 -
2.Javscript字符串的常用方法有哪些?
一、操作方法我们也可将字符串常用的操作方法归纳为增、删、改、查增这里增的意思并不是说直接增添内容,而是创建字符串的一个副本,再进行操作除了常用+以及${}进行字符串拼接之外,还可通过concatconcat用于将一个或多个字符串拼接成一个新字符串letstringValue="hello";letresult=stringValue.concat("world");console.log(result);//"helloworld"console....原创 2021-10-18 10:56:52 · 110 阅读 · 0 评论 -
3.谈谈 JavaScript 中的类型转换机制
一、概述JS中有六种简单数据类型:undefined、null、boolean、string、number、symbol,以及引用类型:object但是我们在声明的时候只有一种数据类型,只有到运行期间才会确定当前类型letx=y?1:a;上面代码中,x的值在编译阶段是无法获取的,只有等到程序运行时才能知道虽然变量的数据类型是不确定的,但是各种运算符对数据类型是有要求的,如果运算子的类型与预期不符合,就会触发类型转换机制常见的类型转换有: 强制转换(显示转换...原创 2021-10-18 10:59:55 · 156 阅读 · 0 评论 -
4.== 和 ===区别,分别在什么情况使用?
一、等于操作符等于操作符用两个等于号( == )表示,如果操作数相等,则会返回true前面文章,我们提到在JavaScript中存在隐式转换。等于操作符(==)在比较中会先进行类型转换,再确定操作数是否相等遵循以下规则:如果任一操作数是布尔值,则将其转换为数值再比较是否相等letresult1=(true==1);//true如果一个操作数是字符串,另一个操作数是数值,则尝试将字符串转换为数值,再比较是否相等letresult1=("55"==...原创 2021-10-18 11:02:41 · 307 阅读 · 0 评论 -
5.深拷贝浅拷贝的区别?如何实现一个深拷贝?
一、数据类型存储JavaScript中存在两大数据类型: 基本类型 引用类型 基本类型数据保存在在栈内存中引用类型数据保存在堆内存中,引用数据类型的变量是一个指向堆内存中实际对象的引用,存在栈中二、浅拷贝浅拷贝,指的是创建新的数据,这个数据有着原始数据属性值的一份精确拷贝如果属性是基本类型,拷贝的就是基本类型的值。如果属性是引用类型,拷贝的就是内存地址即浅拷贝是拷贝一层,深层次的引用类型则共享内存地址下面简单实现一个浅拷贝functionshall...原创 2021-10-18 11:05:14 · 117 阅读 · 0 评论 -
6.说说你对闭包的理解?闭包使用场景?
一、是什么一个函数和对其周围状态(lexical environment,词法环境)的引用捆绑在一起(或者说函数被引用包围),这样的组合就是闭包(closure)也就是说,闭包让你可以在一个内层函数中访问到其外层函数的作用域在JavaScript中,每当创建一个函数,闭包就会在函数创建的同时被创建出来,作为函数内部与外部连接起来的一座桥梁下面给出一个简单的例子functioninit(){varname="Mozilla";//name是一个被init...原创 2021-10-18 11:10:59 · 275 阅读 · 0 评论 -
7.说说你对Javascript中作用域的理解?
一、作用域作用域,即变量(变量作用域又称上下文)和函数生效(能被访问)的区域或集合换句话说,作用域决定了代码区块中变量和其他资源的可见性举个例子functionmyFunction(){letinVariable="函数内部变量";}myFunction();//要先执行这个函数,否则根本不知道里面是啥console.log(inVariable);//UncaughtReferenceError:inVariableisnotdefined...原创 2021-10-18 11:19:39 · 363 阅读 · 0 评论 -
8.JavaScript原型,原型链 ? 有什么特点?
一、原型JavaScript常被描述为一种基于原型的语言——每个对象拥有一个原型对象当试图访问一个对象的属性时,它不仅仅在该对象上搜寻,还会搜寻该对象的原型,以及该对象的原型的原型,依次层层向上搜索,直到找到一个名字匹配的属性或到达原型链的末尾准确地说,这些属性和方法定义在Object的构造器函数(constructor functions)之上的prototype属性上,而非实例对象本身下面举个例子:函数可以有属性。每个函数都有一个特殊的属性叫作原型prototypefun...原创 2021-10-18 11:21:49 · 575 阅读 · 1 评论 -
9.说说Javascript中的继承?如何实现继承?
一、是什么继承(inheritance)是面向对象软件技术当中的一个概念如果一个类别B“继承自”另一个类别A,就把这个B称为“A的子类”,而把A称为“B的父类别”也可以称“A是B的超类” 继承的优点 继承可以使得子类具有父类别的各种属性和方法,而不需要再次编写相同的代码在子类别继承父类别的同时,可以重新定义某些属性,并重写某些方法,即覆盖父类别的原有属性和方法,使其获得与父类别不同的功能虽然JavaScript并不是真正的面向对象语言,但它天生的灵活性,使应用场景更加丰富关..原创 2021-10-18 11:24:15 · 327 阅读 · 3 评论 -
10.说说你对Javascript中this对象的理解
一、定义函数的this关键字在JavaScript中的表现略有不同,此外,在严格模式和非严格模式之间也会有一些差别在绝大多数情况下,函数的调用方式决定了this的值(运行时绑定)this关键字是函数运行时自动生成的一个内部对象,只能在函数内部使用,总指向调用它的对象举个例子:functionbaz(){//当前调用栈是:baz//因此,当前调用位置是全局作用域console.log("baz");bar()...原创 2021-10-18 11:29:51 · 355 阅读 · 1 评论 -
11.JavaScript中执行上下文和执行栈是什么?
一、执行上下文简单的来说,执行上下文是对Javascript代码执行环境的一种抽象概念,只要有Javascript代码运行,那么它就一定是运行在执行上下文中执行上下文的类型分为三种: 全局执行上下文:只有一个,浏览器中的全局对象就是window对象,this指向这个全局对象 函数执行上下文:存在无数个,只有在函数被调用的时候才会被创建,每次调用函数都会创建一个新的执行上下文 Eval 函数执行上下文:指的是运行在eval函数中的代码,很少用而且不建议使用 下...原创 2021-10-19 08:28:40 · 212 阅读 · 1 评论 -
12.在JavaScript中的事件模型如何理解?
一、事件与事件流javascript中的事件,可以理解就是在HTML文档或者浏览器中发生的一种交互操作,使得网页具备互动性, 常见的有加载事件、鼠标事件、自定义事件等由于DOM是一个树结构,如果在父子节点绑定事件时候,当触发子节点的时候,就存在一个顺序问题,这就涉及到了事件流的概念事件流都会经历三个阶段: 事件捕获阶段(capture phase) 处于目标阶段(target phase) 事件冒泡阶段(bubbling phase) 事件冒泡是一种从下往上..原创 2021-10-19 08:35:53 · 406 阅读 · 1 评论 -
13.关于 typeof 与 instanceof 区别?
一、typeoftypeof操作符返回一个字符串,表示未经计算的操作数的类型使用方法如下:typeofoperandtypeof(operand)operand表示对象或原始值的表达式,其类型将被返回举个例子typeof1//'number'typeof'1'//'string'typeofundefined//'undefined'typeoftrue//'boolean'typeofSymbol()//'symbol'typ...原创 2021-10-19 08:38:18 · 181 阅读 · 1 评论 -
14.什么是事件代理?应用场景?
一、是什么事件代理,俗地来讲,就是把一个元素响应事件(click、keydown......)的函数委托到另一个元素前面讲到,事件流的都会经过三个阶段:捕获阶段 -> 目标阶段 -> 冒泡阶段,而事件委托就是在冒泡阶段完成事件委托,会把一个或者一组元素的事件委托到它的父层或者更外层元素上,真正绑定事件的是外层元素,而不是目标元素当事件响应到目标元素上时,会通过事件冒泡机制从而触发它的外层元素的绑定事件上,然后在外层元素上去执行函数下面举个例子:比如一个宿舍的同学同时快..原创 2021-10-19 08:41:26 · 131 阅读 · 1 评论 -
15.new操作符具体都干了什么?
一、是什么在JavaScript中,new操作符用于创建一个给定构造函数的实例对象例子functionPerson(name,age){this.name=name;this.age=age;}Person.prototype.sayName=function(){console.log(this.name)}constperson1=newPerson('Tom',20)console.log(person1)//...原创 2021-10-19 08:44:34 · 475 阅读 · 1 评论 -
16.Ajax 原理是什么?如何实现?
一、是什么AJAX全称(Async Javascript and XML)即异步的JavaScript和XML,是一种创建交互式网页应用的网页开发技术,可以在不重新加载整个网页的情况下,与服务器交换数据,并且更新部分网页Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用JavaScript来操作DOM而更新页面流程图如下:下面举个例子:领导想找小李汇报一下工作,就委托秘书去叫小李,自己就接着做其他事情,直到秘书告诉他小李...原创 2021-10-19 09:05:39 · 89 阅读 · 1 评论 -
17.bind、call、apply 区别?如何实现一个bind?
一、作用call、apply、bind作用是改变函数执行时的上下文,简而言之就是改变函数运行时的this指向那么什么情况下需要改变this的指向呢?下面举个例子varname="lucy";constobj={name:"martin",say:function(){console.log(this.name);}};obj.say();//martin,this指向obj对象setTimeout(obj.say,0);/...原创 2021-10-19 09:07:23 · 188 阅读 · 1 评论 -
18.你对JavaScript中事件循环的理解
一、是什么JavaScript在设计之初便是单线程,即指程序运行时,只有一个线程存在,同一时间只能做一件事为什么要这么设计,跟JavaScript的应用场景有关JavaScript初期作为一门浏览器脚本语言,通常用于操作DOM,如果是多线程,一个线程进行了删除DOM,另一个添加DOM,此时浏览器该如何处理?为了解决单线程运行阻塞问题,JavaScript用到了计算机系统的一种运行机制,这种机制就叫做事件循环(Event Loop)事件循环(Event Loop)在J...原创 2021-10-19 09:10:38 · 86 阅读 · 0 评论 -
19.正则表达式的理解?应用场景?
一、是什么正则表达式是一种用来匹配字符串的强有力的武器它的设计思想是用一种描述性的语言定义一个规则,凡是符合规则的字符串,我们就认为它“匹配”了,否则,该字符串就是不合法的在JavaScript中,正则表达式也是对象,构建正则表达式有两种方式: 字面量创建,其由包含在斜杠之间的模式组成 constre=/\d+/g; 调用RegExp对象的构造函数 constre=newRegExp("\\d+","g");construl="\\d+"...原创 2021-10-19 09:18:36 · 1050 阅读 · 1 评论 -
20.DOM的理解,常见的操作有哪些?
一、DOM文档对象模型 (DOM) 是HTML和XML文档的编程接口它提供了对文档的结构化的表述,并定义了一种方式可以使从程序中对该结构进行访问,从而改变文档的结构,样式和内容任何HTML或XML文档都可以用DOM表示为一个由节点构成的层级结构节点分很多类型,每种类型对应着文档中不同的信息和(或)标记,也都有自己不同的特性、数据和方法,而且与其他类型有某种关系,如下所示:<html><head><title>...原创 2021-10-20 08:58:28 · 175 阅读 · 1 评论 -
21.BOM的理解,常见的BOM对象你了解哪些?
了独立于内容与浏览器窗口进行交互的对象其作用就是跟浏览器做一些交互效果,比如如何进行页面的后退,前进,刷新,浏览器的窗口发生变化,滚动条的滚动,以及获取客户的一些信息如:浏览器品牌版本,屏幕分辨率浏览器的全部内容可以看成DOM,整个浏览器可以看成BOM。区别如下:二、windowBom的核心对象是window,它表示浏览器的一个实例在浏览器中,window对象有双重角色,即是浏览器窗口的一个接口,又是全局对象因此所有在全局作用域中声明的变量、函数都会变成window对象的属性和方原创 2021-10-20 09:02:06 · 820 阅读 · 0 评论 -
22.对尾递归的理解,有哪些应用场景
一、递归递归(英语:Recursion)在数学与计算机科学中,是指在函数的定义中使用函数自身的方法在函数内部,可以调用其他函数。如果一个函数在内部调用自身本身,这个函数就是递归函数其核心思想是把一个大型复杂的问题层层转化为一个与原问题相似的规模较小的问题来求解一般来说,递归需要有边界条件、递归前进阶段和递归返回阶段。当边界条件不满足时,递归前进;当边界条件满足时,递归返回下面实现一个函数pow(x, n),它可以计算x的n次方使用迭代的方式,如下:functi...原创 2021-10-20 09:07:17 · 179 阅读 · 1 评论 -
23.JavaScript 中内存泄漏的几种情况?
一、是什么内存泄漏(Memory leak)是在计算机科学中,由于疏忽或错误造成程序未能释放已经不再使用的内存并非指内存在物理上的消失,而是应用程序分配某段内存后,由于设计错误,导致在释放该段内存之前就失去了对该段内存的控制,从而造成了内存的浪费程序的运行需要内存。只要程序提出要求,操作系统或者运行时就必须供给内存对于持续运行的服务进程,必须及时释放不再用到的内存。否则,内存占用越来越高,轻则影响系统性能,重则导致进程崩溃在C语言中,因为是手动管理内存,内存泄露是经常出现的事情。..原创 2021-10-20 09:09:59 · 337 阅读 · 1 评论 -
24.JavaScript中本地存储的方式有哪些?区别及应用场景?
一、方式javaScript本地缓存的方法我们主要讲述以下四种: cookie sessionStorage localStorage indexedDB cookieCookie,类型为「小型文本文件」,指某些网站为了辨别用户身份而储存在用户本地终端上的数据。是为了解决HTTP无状态导致的问题作为一段一般不超过 4KB 的小型文本数据,它由一个名称(Name)、一个值(Value)和其它几个用于控制cookie有效期、安全性、使用范围的可选属性组...原创 2021-10-20 09:12:03 · 148 阅读 · 1 评论 -
25.对函数式编程的理解?优缺点?
一、是什么函数式编程是一种"编程范式"(programming paradigm),一种编写程序的方法论主要的编程范式有三种:命令式编程,声明式编程和函数式编程相比命令式编程,函数式编程更加强调程序执行的结果而非执行的过程,倡导利用若干简单的执行单元让计算结果不断渐进,逐层推导复杂的运算,而非设计一个复杂的执行过程举个例子,将数组每个元素进行平方操作,命令式编程与函数式编程如下//命令式编程vararray=[0,1,2,3]for(leti=0;i&l...原创 2021-10-20 09:14:41 · 1132 阅读 · 1 评论 -
26.JavaScript中如何实现函数缓存?有哪些应用场景?
一、是什么函数缓存,就是将函数运算过的结果进行缓存本质上就是用空间(缓存存储)换时间(计算过程)常用于缓存数据计算结果和缓存对象constadd=(a,b)=>a+b;constcalc=memoize(add);//函数缓存calc(10,20);//30calc(10,20);//30缓存缓存只是一个临时的数据存储,它保存数据,以便将来对该数据的请求能够更快地得到处理二、如何实现实现函数缓存主要依靠闭包、柯里化、高阶函数,这里再简...原创 2021-10-20 09:17:11 · 273 阅读 · 1 评论 -
27. JavaScript 数字精度丢失的问题,解决方案?
一、场景复现一个经典的面试题0.1+0.2===0.3//false为什么是false呢?先看下面这个比喻比如一个数 1÷3=0.33333333......这是一个除不尽的运算,3会一直无限循环,数学可以表示,但是计算机要存储,方便下次再使用,但0.333333...... 这个数无限循环,再大的内存它也存不下,所以不能存储一个相对于数学来说的值,只能存储一个近似值,这么存储后再取出时自然就出现精度丢失问题二、浮点数“浮点数”是一种表示数字的标准,整数也...原创 2021-10-20 09:21:01 · 395 阅读 · 1 评论 -
28.函数节流和防抖?有什么区别?如何实现?
一、是什么本质上是优化高频率执行代码的一种手段如:浏览器的resize、scroll、keypress、mousemove等事件在触发时,会不断地调用绑定在事件上的回调函数,极大地浪费资源,降低前端性能为了优化体验,需要对这类事件进行调用次数的限制,对此我们就可以采用throttle(节流)和debounce(防抖)的方式来减少调用频率定义 节流: n 秒内只运行一次,若在 n 秒内重复触发,只有一次执行 防抖: n 秒后在执行该事件,若在 n 秒内被重复触发,则重新...原创 2021-10-20 09:23:01 · 77 阅读 · 1 评论 -
29.JavaScript如何判断一个元素是否在可视区域中?
一、用途可视区域即我们浏览网页的设备肉眼可见的区域,如下图在日常开发中,我们经常需要判断目标元素是否在视窗之内或者和视窗的距离小于一个值(例如 100 px),从而实现一些常用的功能,例如: 图片的懒加载 列表的无限滚动 计算广告元素的曝光情况 可点击链接的预加载 二、实现方式判断一个元素是否在可视区域,我们常用的有三种办法: offsetTop、scrollTop getBoundingClientRect Inters..原创 2021-10-21 08:45:23 · 4801 阅读 · 2 评论 -
30.JavaScript如何实现上拉加载,下拉刷新?
一、前言下拉刷新和上拉加载这两种交互方式通常出现在移动端中本质上等同于PC网页中的分页,只是交互形式不同开源社区也有很多优秀的解决方案,如iscroll、better-scroll、pulltorefresh.js库等等这些第三方库使用起来非常便捷我们通过原生的方式实现一次上拉加载,下拉刷新,有助于对第三方库有更好的理解与使用二、实现原理上拉加载及下拉刷新都依赖于用户交互最重要的是要理解在什么场景,什么时机下触发交互动作上拉加载首先可以看一张图上拉加载的本..原创 2021-10-21 08:46:40 · 655 阅读 · 1 评论 -
31.大文件上传如何做断点续传?
一、是什么不管怎样简单的需求,在量级达到一定层次时,都会变得异常复杂文件上传简单,文件变大就复杂上传大文件时,以下几个变量会影响我们的用户体验 服务器处理数据的能力 请求超时 网络波动 上传时间会变长,高频次文件上传失败,失败后又需要重新上传等等为了解决上述问题,我们需要对大文件上传单独处理这里涉及到分片上传及断点续传两个概念分片上传分片上传,就是将所要上传的文件,按照一定的大小,将整个文件分隔成多个数据块(Part)来进行分片上传如下图..原创 2021-10-21 08:48:16 · 1032 阅读 · 1 评论 -
32.什么是单点登录?如何实现?
一、是什么单点登录(Single Sign On),简称为 SSO,是目前比较流行的企业业务整合的解决方案之一SSO的定义是在多个应用系统中,用户只需要登录一次就可以访问所有相互信任的应用系统SSO 一般都需要一个独立的认证中心(passport),子系统的登录均得通过passport,子系统本身将不参与登录操作当一个系统成功登录以后,passport将会颁发一个令牌给各个子系统,子系统可以拿着令牌会获取各自的受保护资源,为了减少频繁认证,各个子系统在被passport授权以后,会建立一..原创 2021-10-21 08:50:01 · 495 阅读 · 1 评论 -
33.web常见的攻击方式有哪些?如何防御?
一、是什么Web攻击(WebAttack)是针对用户上网行为或网站服务器等设备进行攻击的行为如植入恶意代码,修改网站权限,获取网站用户隐私信息等等Web应用程序的安全性是任何基于Web业务的重要组成部分确保Web应用程序安全十分重要,即使是代码中很小的 bug 也有可能导致隐私信息被泄露站点安全就是为保护站点不受未授权的访问、使用、修改和破坏而采取的行为或实践我们常见的Web攻击方式有 XSS (Cross Site Scripting) 跨站脚本攻击 CSRF(..原创 2021-10-21 08:51:27 · 189 阅读 · 1 评论