Nicole99618-优快云博客

原创什么是深拷贝？什么是浅拷贝？如何实现深拷贝？

在了解浅拷贝和深拷贝之前，我们先了解一下js的数据类型js的数据类型分为两种一种是基本数据类型：字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）一种是引用数据类型：对象(Object)、数组(Array)、函数(Function)基本类型的变量是存放在栈内存，引用数据类型是放在堆内存中的，基本数据类型保存的是值，而引用数据类型一般保存的是对象的地址。如果我们单纯的复制的话，可能就只是复制对象的地址，那么这就是浅拷贝，如果是克隆了对

2021-03-29 18:16:23 889

原创什么是防抖和节流？如何实现防抖和节流？

防抖（Debounce）和节流（Throttle）都是用来控制某个函数在一定时间内触发次数，两者都是为了减少触发频率，以便提高性能或者说避免资源浪费。毕竟JS操作DOM对象的代价还是十分昂贵的。应用场景：处理一些频繁触发的事件，例如mousedown、mousemove、keyup、keydown等，不然的话，页面很可能会十分卡顿哦~防抖防抖就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。举个例子吧：例如，你是一个肯德基外卖配送员，每天专门

2021-03-28 21:37:22 26986 7

原创什么是虚拟DOM？以及diff算法

真实DOM和虚拟DOM的区别虚拟DOM是当下两个主流框架vue和react使用到的技术，它到底有什么优缺点可以让两大主流框架所青睐呢？在了解虚拟DOM之前，我们先了解什么是DOMDOM（Document Object Model——文档对象模型）是用来呈现以及与任意 HTML 或 XML文档交互的API。DOM 是载入到浏览器中的文档模型，以节点树的形式来表现文档，每个节点代表文档的构成部分（例如:页面元素、字符串或注释等等）。上面的解释来源于mdn，看起来很高大上，也很难懂？嗯，官方文档嘛，总

2021-03-14 20:13:29 409

原创如何在 vue 中使用 svg symbols

使用require提示 require不属于import语句ESLint: Require statement not part of import statement.(@typescript-eslint/no-var-requires)解决办法在.eslintrc.js中的rules属性中加入rules: { '@typescript-eslint/no-var-requires': 0 },...

2021-03-08 18:46:37 428 1

原创 React类组件中常见钩子函数

constructor用于初始化state，如果不用初始化state，则可以省略constructorclass App extends React.PureComponent{ constructor(props) { super(props); this.state={x:1} } }render用于渲染视图

2021-03-03 21:59:54 1676 1

原创如何使用Vue 中的 .sync 修饰符

众所周知vue最大特点就是双向绑定，这样就可以做到属性更新，页面也随之更新，但是这个特点好用是好用，但是却不适合在父子组件之间，例如子组件无法更改prop，但是有时候，我们却不得不更改prop，怎么办呢？.sync修饰符就完美的解决了这个问题。举个例子：父元素传一个值n给子元素，子元素点击一个n-100的按钮，怎样才能使得父元素的值n也随之更改？（子组件无法修改父组件的值，不使用引用）解决思路：子元素通过$emit(‘update:n’, n - 100)触发事件update:n，并传参n-100

2021-03-02 10:53:48 176

原创 Vue中computed和watch的区别

computed和watch都是用于观察data的数据变化的选项。那它们的主要区别是什么呢？computedcomputed用于计算属性值成员中可以只定义一个函数作为只读属性，也定义成一个get和set作为读写属性new Vue({ data: { a: 1 }, computed: { // 仅读取 aDouble: function () { return this.a * 2 }, // 读取和设置 aPlus: {

2021-03-02 10:14:18 340

原创什么是 Vue 数据响应式

什么是Vue数据响应式？首先我们要知道什么是响应，举个例子，西瓜和石头一起砸头，哪个会更疼？好家伙，那肯定是头呀，好了回归正题，头被砸了，那么疼就是你给的响应，那么什么是数据响应呢？那当然是修改数据后给出的回应。Vue就是利用了这么特点，在数据更新的时候，就进行视图更新。下面将用代码展示以下什么是数据响应式。<div id="app"> {{n}} <button @click="add">+1</button> </div>new

2021-02-26 20:22:48 817 2

原创 Vue完整版和非完整的区别

vue完整版和非完整版的区别就是有没有编译器（compiler）由于非完整版的没有编译器，所以体积要小30%左右非完整版没有编译器，代码不能直接转化为JavaScript，所以只能写在render函数中，有编译器的则可以直接写在html和template中//有编译器new Vue({ template: '<div>{{ hi }}</div>'})//无编译器new Vue({ render (h) { return h('div', this.

2021-02-25 10:46:37 519

原创 MVC是什么？为什么要使用MVC？

所谓事不过三，一个事情不应该重复做三遍以上，那么在追求简洁美的编程中更是体现的淋漓尽致，MVC 即 model view controller，一个以实现用户界面与业务逻辑分离，实现组件重用为目标的架构设计模式。model 数据层view 视图层controller 控制器层他们之前的关系如下图所示实线即方法调用，虚线即事件通知MVC将代码模块化，分为3个模块，每个模块负责每个模块的事情，使得代码相互独立，互不影响，却又紧密连接，模块之间不需要了解对方的内部构造，只需要对外提供一个接口

2021-02-24 12:16:28 1967

原创 Promise是什么？怎么使用? 如何实现一个简易版的Promise？

Promise 是什么？mdn：Promise 对象用于表示一个异步操作的最终完成 (或失败)及其结果值。既然Promise是为了表示异步的最终结果，那异步是什么呢？为啥要用Promise来表示异步的结果？而不用其他方式呢？什么是异步用一个例子来说明当你再餐厅吃饭，首先你的先去排队拿号，但是，你前面还有10桌需要等待，可能需要几十分钟，如果你在这里傻等，那就是同步操作，但正常人没那么傻，大部分人都是先拿票，然后去点其他事情，这就是异步操作那如何知道是否轮到自己？隔一会去拿票的地方问（轮

2021-02-20 12:36:28 476

原创 JS 的继承

什么是继承呢就是子类可以使用父类的所有功能，并对这些功能进行扩展。继承的方式原型链继承mdn：当谈到继承时，JavaScript 只有一种结构：对象。每个实例对象（ object ）都有一个私有属性（称之为 __ proto __ ）指向它的构造函数的原型对象（prototype ）。该原型对象也有一个自己的原型对象( __ proto __ ) ，层层向上直到一个对象的原型对象为 null。根据定义，null 没有原型，并作为这个原型链中的最后一个环节。由上可知，每个对象都会有__ proto

2021-02-20 09:51:49 152

原创浅析跨域

什么是跨域跨域，源A访问源B的对象，但是JavaScript出于安全考虑，不允许跨域调用，简单的来说就是同源策略，它不允许源A访问源B，它的存在可以保护用户隐私信息，防止身份伪造等什么是同源既然同源才可以访问资源，那么怎样才是同源呢?源 = 协议 + 域名 + 端口号同源即，协议、域名和端口号都一致怎么实现跨域由于不同源之间不能相互访问，但是我非要访问呢？方法一：CORS（跨资源共享）同源安全策略默认阻止“跨域”获取资源。但是 CORS 给了web服务器这样的权限，即服务器可以选择，允许

2021-02-19 22:04:54 274 2

原创数组排序

选择排序实现思路：不断的选出数组中的最小值，并移除最小值，直到数组长度小于2为止let selectSort = arr => { let minNum = arr => { if (arr.length < 2) return arr let min = arr[0] for (let i = 0; i < arr.length; i++) { if (arr[i] < min) min =

2021-02-19 19:31:42 148

原创如何实现数组去重

利用ES6 Set去重实现思路：使用ES6得Set函数去重缺点：代码兼容性不好，无法去除”{}“空对象function unique(arr) { return Array.from(new Set(arr))}indexOf去重实现思路：新建一个数组newArr存放结果，循环需去重的数组arr，当前值在newArr中不存在，就加入到newArr缺点：indexOf() 方法对大小写敏感function unique(arr) { let newArr = [] f

2021-02-19 16:52:32 253

原创 HTTP状态码

HTTP状态码(响应码)用来表明这个HTTP 请求是否已经成功完成。HTTP响应类型一共分五大类：消息响应、成功响应、重定向、客户端错误、服务器端错误。消息响应（100~199）状态码100：服务器已接受客户端发来的一部分请求，正在等待剩余请求状态码101：服务器已经理解了客户端的请求，并将通过Upgrade消息头通知客户端采用不同的协议来完成这个请求成功响应（200~299）状态码200：请求成功状态码201：请求成功，有一个新的资源已经依据请求的需要而建立状态码202：服务器已接受

2021-02-19 13:16:00 519

原创 call、apply、bind的用法详解

call、apply和bind都是为了改变函数运行中this的指向，那当中的this又是什么呢this的指向var value = '2';function thisValue(){ console.log(this.value);}var obj = { value:'1', thisValue:thisValue}var obj1 = { value:'2', obj:obj}obj.thisValue(); //值是1thisValue();

2021-02-19 12:37:28 413 1

原创什么是闭包，以及闭包的优缺点

什么是闭包闭包，在一个函数a的内部定义一个函数b，在函数b中访问函数a中的变量c，函数a再返回函数b，从而达到隐藏变量的作用function a(){ let c = 10 return function (){ return c++ }}const a1 = a()a1()const b1 = a()b1()闭包的特点函数内部嵌套一个函数内部函数使用了外部函数的变量返回内部函数闭包的用途封装对象（不能直接a.c来访问函数a中的变量c）实现面向对象中的

2021-02-19 10:13:45 930 2

原创 DOM事件和事件委托

DOM事件DOM(文档对象模型)结构是一个树型结构，当一个HTML元素产生一个事件时，该事件会在元素结点与根结点之间的路径传播，路径所经过的结点都会收到该事件，这个传播过程可称为DOM事件流。DOM事件模型分为捕获和冒泡，当一个DOM事件发生后会经过由外到内的捕获阶段（必须执行阶段，不可终止）处理DOM事件的目标阶段以及由内到外的冒泡阶段（所有冒泡都可以通过stopPagation函数来阻止冒泡）//html<div id='div1'> <div id='div2

2021-02-09 21:35:56 180

原创 jQuery学习之旅

jQuery的特点轻量级。采用UglifyJs压缩，大小只有30KB左右强大的选择器。兼容css几乎所有选择器出色的DOM封装。封装了大量的DOM操作可靠的事件处理机制。采用预留退路、循序渐进和非入侵式编程思想完善的Ajax。无需处理浏览器兼容性问题不污染顶级变量。使用闭包，绝对不会污染其他对象出色的浏览器兼容性。修复了一些浏览器之间的差异链式操作。jQuery操作返回的是jQuery对象，使其无需重复获取对象，直接进行下一步操作$('.test').addClass('.red').

2021-02-08 20:17:32 151

原创 JS 函数的执行时机

for循环内setTimeout顺序输出的解法let i = 0for(i = 0; i<6; i++){ setTimeout(()=>{ console.log(i) },0)}上面那段代码按常规理解会输出0,1,2,3,4,5，但实际输出6个5。主要原因是由于for循环在主线程内，setTimeout是异步方法，在任务队列里面，只有主线程执行完后，任务队列才执行，此时i的值已经是5，所以得到结果是个6个5，以下有几种解决方法第一种，将let i放在循环中进行创

2021-02-01 22:30:17 94

原创 JS 对象基本用法

Object是一种非常重要的复杂数据类型，是一些属性和方法构成的数据实体，它是包含无序数据（键值对）的集合，包含在对象里的数据可以通过两种形式访问，一是属性，二是方法。Object声明的写法let obj = { 'name': 'frank', 'age': 18 } //简洁写法let obj = new Object({'name': 'frank'}) //标准写法注意点：属性名只能是字符串和symbol，就算不是，也会自动变为字符串当使用变量进行命名时，需要用中括号（[]）括起来

2021-01-31 20:37:17 128

原创 JavaScript的基本语法

标识符的命名规则变量和其他语法的名字是区分大小写的不允许变量名中包含空格和标点符号（美元符号$除外）变量名中允许包含字母、数字、美元符号和下划线，但是第一个字符不允许为数字关键词不能当作变量名使用语句和表达式语句是由一系列指令构成的表达式由一个或多个运算符、操作数组成的运算式。表达式的功能是执行计算，并返回一个值。数据类型数据类型可以分为两类：一是原始类型，二是引用类型原始类型：String、Number、Null、Undefined、Boolean引用类型：Object字符串（

2021-01-30 20:00:46 99

原创 JavaScript的利与弊

JavaScript的诞生1995年，当时的网景公司正凭借其Navigator浏览器成为Web时代开启时最著名的第一代互联网公司，同时也遇到了一个特别严重的问题，就是浏览器不具备与访问者互动的能力，所以当时网景公司就雇用了JS之父Brendan Eich来设计一个脚本语言来实现这个功能，由于当时Brendan Eich对这个语言不是很感兴趣，所以只花了10天出了一个设计稿应付公司，也导致了很长一段时间内，JavaScript代码十分混乱，不够严谨。在1995年，Sun公司将Oak语言改名为Java，正式

2021-01-29 12:52:38 611

Nicole99618的博客