![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Javascript
文章平均质量分 84
主要记录自己学习过程中的心得和总结
小牲口online
。
展开
-
Typescript指南
文章目录TS的类型1.布尔类型2.数字类型3.字符串类型4.数组类型5.元组类型6.枚举类型7.any类型8.void类型9.never类型10.Object类型Ts的编译选项ts面向对象1.抽象类2.接口3.属性的封装4.泛型TS的类型首先ts支持JavaScript的所有基本类型,除此之外还多出了一些类型。1.布尔类型这是js与ts都具备的基本类型。let flag:boolean=false;2.数字类型和JavaScript的数字类型相似,typescript中的数组类型都是浮点型,原创 2021-12-27 16:25:01 · 652 阅读 · 0 评论 -
你能手写一个Promise吗?
文章目录一.初始化Promise二.构造函数实现三.then函数的实现四. catch的实现五. Promise.reject的实现六. Promise.resolve的实现七. Promise.all方法八. Promise.race方法如果你想更加深入的了解Promise的使用以及它的内部机制,那不妨跟着我来手写一个Promise吧。一.初始化Promise首先我们应该清楚Promise的基本结构,Promise的原型方法以及函数对象本身的方法。then与catch是我们Promise构造函原创 2021-08-07 15:53:03 · 227 阅读 · 0 评论 -
你应该掌握的前端性能优化面试点!
文章目录一.浏览器渲染原理1.浏览器渲染引擎的主要模块以及渲染过程3. style样式渲染4. link样式渲染5.阻塞渲染**关于CSS的阻塞**关于js的阻塞二. 重绘与重排1.什么是css图层2.图层创建的条件3.重绘4.重排(回流)5.常见的触发重排的操作6.关于重绘重排的优化方案7.requestAnimationFrame与定时器setTimeout的区别三. CDN1.CDN的概念2.CDN的作用3.CDN的使用常见四.防抖节流1.函数防抖2.函数节流五.懒加载1.懒加载的概念2.懒加载的实现原创 2021-07-16 00:24:34 · 281 阅读 · 1 评论 -
你需要注意的Javascript高频面试点
文章目录一.数据类型1. JavaScript有哪些数据类型,它们的区别?2. 数据类型的检测方式?3. 判断数组的方式有哪些?4. null和undefined的区别5.为什么null返回一个Object6.intanceof 操作符的实现原理及实现7. 为什么0.1+0.2 ! == 0.3,如何让其相等?8.如何获得安全的undefined值9.typeof NaN的结果是多少10.isNaN与Number.isNaN函数的区别11.==操作符的强制类型转换规则12.其他值转到string规则13.其原创 2021-07-08 19:00:42 · 722 阅读 · 10 评论 -
JavaScript面试:你可以手写一个new操作符吗?
要想知道new操作符的原理,就得先了解new的作用是什么,我们都知道,一般将我们的构造函数实例化为对象时就要使用new操作符。要想真正掌握并手写一个new,你需要掌握以下知识点:原型与原型链以及this绑定相关知识。其实new的内部流程十分简单,大概就是这么几个步骤:创建一个新的对象obj将对象的隐式原型指向构造函数的原型对象通过apply调用构造函数(改变this指向到obj)返回obj,如果构造函数有返回值还需判断,如果返回值为引用类型则返回引用类型对象,如果为原始类型就返回obj原创 2021-07-03 15:50:19 · 139 阅读 · 0 评论 -
JavaScript面试:手写bind/call/apply函数
1.手写call和apply函数手写call函数:步骤:1.判断第一个参数的类型2.将当前的函数作为传入对象的方法3.取出argument类数组的值4.执行obj.当前函数(newarugument),并保存返回值5.删除传入对象的方法6.返回返回值代码如下:Function.prototype.newCall = function (obj) { if (typeof obj != "object" || obj == null) { obj = window } ob原创 2021-07-03 15:48:26 · 163 阅读 · 0 评论 -
回望Javascript:ES6
1.let,var ,const的区别回答这个问题要从一下几个方向去回答:1.块级作用域:let和const具有块级作用域,var不存在块级作用域的概念。块级作用域解决了ES5的两个问题:内层变量可能覆盖外层变量和循环时泄露循环变量为全局变量2.变量提升:var 存在变量提升,let和const不存在变量提升(只能在声明后使用),涉及到上下文的概念3.给全局添加属性:在全局window下,var声明的变量是全局变量,并将变量添加到全局对象的属性上,而let和const不会。4.重复声明:var可以原创 2021-07-03 15:46:16 · 151 阅读 · 0 评论 -
回望Javascript:一些Js基础
文章目录1.JS访问内部数据变量的方式与哪些以及使用场景?2. Javascript函数调用的方式有哪四种?3.new操作符的实现原理4.数组有哪些原生的方法5.什么是DOM和BOM6.对类数组(伪数组)的的理解,如何转换为数组7.为什么要使用尾调用?8.for...in和for...of的区别9.对Ajax的理解,实现一个Ajax请求10.Ajax、axios和fetch的区别11.Javascript脚本延迟加载的方法有哪些?12.CommonJS和ES6模块的异同点?1.JS访问内部数据变量的方式与原创 2021-07-03 15:44:30 · 187 阅读 · 0 评论 -
回望Javascript:数据类型相关
1. JavaScript有哪些数据类型,它们的区别?Javascript有八种数据类型:Number,String,undefined,null,Boolean,Symbol,BigInt,Object。其中Symbol和BigInt是ES6中新增的数据类型:symbol代表创建后独一无二且不可变的数据类型,主要是为了解决可能出现的全局变量冲突的问题BigInt是一种数字类型的数据,它可以表示任意精度格式的整数,适用BigInt可以安全的存储和操作大整数,即使这个数已经超过了Number能够表示原创 2021-07-03 15:41:52 · 179 阅读 · 0 评论 -
回望Javascript:执行上下文/作用域链/闭包
文章目录1.执行上下文2.执行上下文栈3.作用域4.作用域链5.闭包6.内存溢出与内存泄露1.执行上下文执行上下文是用来预处理JS代码的执行上下文栈是用来管理执行上下文的JS代码执行时它的代码位置分为一个全局代码和函数内的代码,因此执行上下文分为全局执行上下文和函数执行上下文,全局执行上下文在执行全局代码前会创建一个全局执行上下文环境将window将其确定为全局执行上下文;并且对全局数据进行一个预处理,这里面就包括:var 定义的全局变量设为undefined,并且将其添加为window原创 2021-06-08 18:14:05 · 238 阅读 · 2 评论 -
回望Javascript:原型与原型链
文章目录1.原型对象上的constructor指向哪里2.显示原型与隐式原型3.谈一谈原型与原型链4.Function,Object与原型的关系5.原型链指向题目6.探索instanceOf(手写instanceof)7.两道面试题1.原型对象上的constructor指向哪里每个函数都有一个prototype属性,这是一个引用,指向了函数的原型对象,每个原型对象都有一个constructor属性,这个属性指向函数对象本身。验证一下: function Fun(params) {} conso原创 2021-06-03 18:18:31 · 217 阅读 · 2 评论 -
关于vue在面试或开发中需要留意的地方
前段时间学习了Vue框架,因此在我学习过程中整理了一些关于Vue的一些需要注意的地方,在后面根据所开发的项目,我可能会持续更新这篇基于Vue的博客,欢迎交流文章目录1.Vue中的mvvm2. methods和computed3. v-on的参数传递问题与常用的修饰符3.1 参数传递问题3.2 常用修饰符5.v-if和v-show的区别6.v-for时绑定key与不绑定key的区别7. Vue中数组方法中哪些是响应式的8. v-model双向绑定使用8.1 用于表单时9. 为什么组件中data必须是一个.原创 2021-04-19 19:17:51 · 1086 阅读 · 5 评论 -
Storage的封装
为什么要封装storage:Storage本身虽然有Api,但是只是简单的键值对的形式Storage只能存储字符串,需要人工转换成json对象Storage只能一次性清空,不能单个清空我们通常在Storage中存储json对象,因此我们需要自己封装Storage方法。/* Storage封装*/const STORAGE_KEY = 'mall';export default { // 存储值 setItem(key, value, modules_name) { if原创 2021-04-14 23:19:06 · 588 阅读 · 0 评论 -
跨域解决方式——JSONP,CORS
文章目录1.同源策略于跨域1.1 同源策略1.2 跨域1.3 为什么要设定跨域这个概念2.解决跨域的方案2.1 jsonp2.2 CORS2.3 CORS和jsonp的比较1.同源策略于跨域1.1 同源策略首先我认为想要了解跨域前必须先要知道浏览器的同源策略。同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现。同源指的是协原创 2021-03-22 23:59:22 · 302 阅读 · 0 评论 -
ES6学习笔记(下)
文章目录1. class类1.1 构造函数constructor()1.2 类的实例1.3 class表达式1.4 getter和setter函数1.5 generator方法1.6 静态属性和静态方法1.7 类的继承2. Module模块开发2.1 使用规则2.2 export2.3 import 命令2.4 ES5模块与CommonJs的差异3. Promise 对象3.1 Promise的状态改变3.2 Promise的基本使用3.3 为什么要使用Promise3.4 Promise具体用法4. a原创 2021-03-08 18:24:46 · 169 阅读 · 0 评论 -
ES6学习笔记(上)
文章目录0.前言:articulated_lorry:0.1 Babel解码器0.2 webpack自动化编译es61. let和const命令1.1 let1.2 const1.3 顶层对象1.4 es6声明变量的六种方式2.解构赋值2.1 数组的解构赋值2.2 对象的解构赋值2.3 函数参数的解构赋值2.4 字符串的解构赋值3.字符串的扩展3.1 Unicode编码3.2 字符串新增的方法3.3 字符串的遍历3.4 模板语法4.数组扩展4.1 扩展运算符5.函数扩展5.1 函数参数设置默认值5.2原创 2021-03-03 20:36:41 · 476 阅读 · 2 评论 -
前端常用的8种设计模式
文章目录1.引入2.单例模式3.装饰器模式3.适配器模式4.观察者模式(发布订阅模式)5.策略模式6.模板模式7.代理模式8.外观模式9.面试点1.引入简介:设计模式代表了最佳的实践,通常被有经验的面向对象的软件开发人员所采用。设计模式是软件开发人员在软件开发过程中面临的一般问题的解决方案。设计模式是一套被反复使用的、多数人知晓的、经过分类编目的、代码设计经验的总结。使用设计模式是为了重用代码、让代码更容易被他人理解、保证代码可靠性。毫无疑问,设计模式于己于他人于系统都是多赢的,设计模式使代码原创 2021-02-19 22:02:26 · 3359 阅读 · 1 评论 -
HTML5手势、拖放、定位事件
文章目录1.手势事件(移动端)1.1 click事件1.2 tap类事件1.3 swipe类事件1.4 touch类事件2.拖放事件3.定位事件3.1 getCurrentPosition()方法3.2 watchPosition()方法3.3 clearWatch()方法3.4 百度地图api获取当前定位1.手势事件(移动端)引入:zepto库,该库与jQuery用法相同。封装了移动端手势Zepto.js是专门为现代智能手机浏览器推出的JavaScript框架Zepto的一些可选功能专门原创 2021-02-04 16:57:55 · 784 阅读 · 3 评论 -
数据结构(JS实现)——双向链表的实现
文章目录一、什么是双链表?二、双向链表的特点三、 双向链表的封装四、双链表常见的操作(增删改查)4.1 append(element):向链表尾部添加一个新的项4.2 insert(position,element):向链表的特定位置插入一个新的项4.3 get(position):获取对应位置的元素4.4 indexOf(element):返回元素在列表上的索引。如果链表上没有该元素则返回-14.5 updata(position,element):更新某个元素4.6 removeAt(pos原创 2021-01-28 22:50:02 · 342 阅读 · 1 评论 -
数据结构(JS实现)——栈的封装与应用
文章目录一.什么是栈二.栈的封装三、栈的常见的操作3.1 push(element):添加一个新元素到栈顶位置3.2 pop():移除栈顶元素,同时返回被移除的元素3.3 peek():返回栈顶元素,不对栈做任何修改(这个方法不会移除栈顶元素,仅仅返回它)3.4 isEmpty():判空3.5 size():返回长度3.6 tostring():输出四、栈的应用(十进制转二进制)一.什么是栈栈是一种先进后出(LIFO)的有序集合,新添加的元素在栈顶,旧元素在栈底。二.栈的封装我们封装栈的常见方式原创 2021-01-28 22:37:34 · 252 阅读 · 1 评论 -
数据结构(JS实现)——队列与优先级队列
文章目录一.什么是队列二.队列的封装三、队列的常见的操作3.1 enqueue(element):向队列尾部添加一个新的项3.2 dequeue():移除队列的第一项,并返回被移除的3.3 front():返回队列中的第一个元素——最先被添加,也将是最先被移除的元素。队列不做任何变动3.4 isEmpty():判空3.5 size():返回长度3.6 tostring():输出四. 面试题:击鼓传花五. 优先级队列的封装5.1概念5.2 封装5.3 添加方法一.什么是队列只允许在一端插入数据操作,在另一原创 2021-01-28 22:32:56 · 358 阅读 · 2 评论 -
Javascript-关于闭包的理解
在了解闭包之前我们可能还需要了解变量的作用域、IIFE立即执行函数表达式1.变量作用域1.1 全局作用域在函数外部定义的变量或函数,叫全局变量或全局函数。它们可以在当前程序的任意位置使用。在全局中定义变量可以用var,也可以直接添加window的属性。生命周期:它们会一直占用内存,只能在当前文件中使用。如果想在多个文件中使用变量,需要用到cookie或本地存储。1.2 局部作用域在函数内部定义的变量或函数,叫局部变量或局部函数。它们只能在函数内部使用。在函数内部用var定义局部变.原创 2021-01-26 15:17:06 · 158 阅读 · 0 评论 -
Javascript优化-懒加载和预加载
一.懒加载懒加载就是延迟加载。当访问一个页面时,先把img元素或是其他元素的背景图片路径替换成一张大小为1*1图片的路径(这样就只需要请求一次,俗称占位图),只有当图片出现在浏览器中的可视区域内时,才设置图片真正路径,让图片显示出来,这就是图片的懒加载1.1使用场景当网站的图片比较大时,基于网站性能和用户体验考虑,这时需要用到懒加载。1.2原理初始时,img中的src不赋值(或者赋以一个占位图片),而是将真正的图片地址存在用户自定义属性data-src,当鼠标滚动到可视区时,这.原创 2021-01-23 14:39:53 · 197 阅读 · 0 评论 -
Javascript内存和性能之事件委托
定义:对事件处理程序过多问题的解决档案就是事件委托。每当将事件处理程序制定给元素时,运行中的浏览器代码与支持页面交互的JS代码之间就会建立一个连接,而 这种连接越多,页面执行起来就越慢。考虑内存和性能问题,为了解决事件处理程序过多的问题,采用事件委托变 得很有必要。(考虑到内存,也应该尽量减少不必要的事件处理程序,对于内存中过时不用的’空事件处理程序’, 也是很有必要将其移除的;)原理:利用事件冒泡,只指定一个事件处理程序,就可以管理某一相同类型的事件。因为冒泡机制,比如既然点击子原创 2021-01-22 17:13:46 · 122 阅读 · 0 评论