![](https://img-blog.csdnimg.cn/20201014180756919.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
JS
文章平均质量分 81
js
°PJ想做前端攻城狮
始终相信不能更进一步不是因为困难,而是畏惧困难的自己。所以想做前端攻城狮的PJ正在将键盘敲烂的路上,一直敲
展开
-
JS手写深浅拷贝,不同实现方法,它们的优缺?
浅拷贝:只考虑对象类型。function shallowCopy(obj) { if (typeof obj !== 'object') return obj let newObj = obj instanceof Array ? [] : {} for (let key in obj) { if (obj.hasOwnProperty(key)) { newObj[key] = obj[key] } }原创 2021-04-12 23:57:04 · 376 阅读 · 0 评论 -
关于Proxy,这些你都知道么
什么是 Proxy?MDN上是这么描述的——Proxy对象用于定义基本操作的自定义行为(如属性查找,赋值,枚举,函数调用等)。官方的描述总是言简意赅,以至于不明觉厉…其实就是在对目标对象的操作之前提供了拦截,可以对外界的操作进行过滤和改写,修改某些操作的默认行为,这样我们可以不直接操作对象本身,而是通过操作对象的代理对象来间接来操作对象,达到预期的目的~什么?还没表述清楚?下面我们看个例子,就一目了然了~ let obj = { a : 1 } let prox原创 2021-04-12 11:02:59 · 807 阅读 · 0 评论 -
js中==和===的区别和使用
前言之前学js的时候,也没仔细的研究过和=两个操作符之间的具体区别,但是本着实事求是的态度,今天上网查了一下他们两个的区别,最后得出的结论是:`===` 严格相等,会比较两个`值的类型和值``==` 抽象相等,比较时,会`先进行类型转换,然后再比较值`然后我就更迷惑了,先类型转换,我擦,怎么转换,左边转换成右边类型还是右边转换成左边类型?先看几个例子:console.log([10] == 10); //trueconsole.log('10' == 10原创 2021-04-10 23:12:38 · 712 阅读 · 0 评论 -
10分钟理解ES6箭头函数
前言面试中,ES6 是一大考点,当被问到箭头函数时,我们都会说:箭头函数很好用,而且再也不用操心 this 的指向了。面试官:箭头函数是挺好用的,那有哪些不适合使用箭头函数的场景呢?箭头函数在大多数情况下,是很好用的,但是为什么在有些场景,使用箭头函数后会产生问题?是不是箭头函数还不够完善?又有哪些场景会发生问题?该如何解决呢?为了防止血案的产生,重新吧这一块拎出来整理巩固一下。概念ES6允许使用箭头(=>)定义函数,箭头函数提供了一种更加简洁的函数书写方式,箭头函数多用于匿名函数的定原创 2021-04-10 16:07:24 · 14516 阅读 · 23 评论 -
10分钟理解函数柯里化
前言最近,在准备面试,看到这样一道编程题,原题如下:// 写一个 sum 方法,当使用下面的语法调用时,能正常工作console.log(sum(2, 3)); // Outputs 5console.log(sum(2)(3)); // Outputs 5这道题要考察的,就是对函数柯里化的理解。让我们先来解析一下题目的要求:如果传递两个参数,我们只需将它们相加并返回。否则,我们假设它是以sum(2)(3)的形式被调用的,所以我们返回一个匿名函数,它将传递给sum()(在本例中为2)原创 2021-04-10 15:31:04 · 672 阅读 · 1 评论 -
细说call、apply以及bind的区别和用法
前言上一篇文章 this的指向问题及用法 中,提到了 call 和 apply。它们最主要的作用,是改变 this 的指向。在平时的开发中,除了在写一些基础类,或者公用库方法的时候会用到它们,其他时候 call 和 apply 的应用场景并不多。不过,突然遇到的时候,需要想一下才能转过弯来。所以今天,就让我们好好地探究一下,这两个方法的区别以及一些妙用。最后,还会介绍与之用法相似的 bind 的方法。call 和 apply 的共同点它们的共同点是,都能够改变函数执行时的上下文,将一个对象的方原创 2021-04-10 15:24:43 · 612 阅读 · 1 评论 -
this的指向问题及用法
前言最近,在准备面试,看到这样一道编程题,原题如下:// 写一个 sum 方法,当使用下面的语法调用时,能正常工作console.log(sum(2, 3)); // Outputs 5console.log(sum(2)(3)); // Outputs 5这道题要考察的,就是对函数柯里化的理解。让我们先来解析一下题目的要求:如果传递两个参数,我们只需将它们相加并返回。否则,我们假设它是以sum(2)(3)的形式被调用的,所以我们返回一个匿名函数,它将传递给sum()(在本例中为2)原创 2021-04-10 14:47:13 · 1684 阅读 · 5 评论 -
JS判断是苹果系统(ios)还是安卓系统(Android)或者PC端
前言今天看到一道面试题,JS判断是否是苹果系统(ios)和安卓系统(Android)客户端,一下就涉及到自己的知识盲区,赶紧亡羊补牢一下。顺便在拓展一下是pc还是移动端?pc端的话,又是在什么浏览器运行?JS判断是否是苹果系统(ios)和安卓系统(Android)客户端?<--!通过判断浏览器的userAgent,用正则来判断是否是ios和Android客户端。代码如下--> <script type="text/javascript"> var u = na原创 2021-04-07 23:38:57 · 14918 阅读 · 1 评论 -
js垃圾回收机制和内存泄漏
知识线什么是内存泄漏?=> 是什么导致的内存泄漏?=> 怎么解决内存泄漏?=> 垃圾回收机制的策略(两种) => 如何管理好内存?面试官:什么是内存泄漏?为什么会导致内存泄漏?什么是内存泄漏?不再用到的内存,没有及时释放,就叫做内存泄漏。为什么会导致内存泄漏?内存泄漏是指我们已经无法再通过 js 代码来引用到某个对象,但垃圾回收器却认为这个对象还在被引 用,因此在回收的时候不会释放它。导致了分配的这块内存永远也无法被释放出来。如果这样的情况越 来越多,会导致内存不原创 2021-04-07 20:02:09 · 721 阅读 · 3 评论 -
跨域的九种解决方案
前言前后端数据交互经常会碰到请求跨域,什么是跨域,以及有哪几种跨域方式,这是本文要探讨的内容。一、什么是跨域?1.什么是同源策略及其限制内容?同源策略是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,浏览器很容易受到XSS、CSRF等攻击。所谓同源是指"协议+域名+端口"三者相同,即便两个不同的域名指向同一个ip地址,也非同源。同源策略限制内容有:Cookie、LocalStorage、IndexedDB 等存储性内容DOM 节点AJAX 请求发送后,结果被浏览原创 2021-04-07 11:53:32 · 2790 阅读 · 0 评论 -
图片懒加载和预加载
懒加载1.什么是懒加载懒加载也叫延迟加载,指的是在长网页中延迟加载图像,是一种很好优化网页性能的方式。用户滚动到它们之前,可视区域外的图像不会加载。这与图像预加载相反,在长网页上使用延迟加载将使网页加载更快。在某些情况下,它还可以帮助减少服务器负载。常适用图片很多,页面很长的电商网站场景中。2.为什么要用懒加载能提升用户的体验,不妨设想下,用户打开像手机淘宝长页面的时候,如果页面上所有的图片都需要加载,由于图片数目较大,等待时间很长,用户难免会心生抱怨,这就严重影响用户体验。减少无效资源的加原创 2021-04-07 10:00:53 · 762 阅读 · 0 评论 -
10分钟快速理解JS的节流、防抖
前言今天看到阿里有一道面试题就是谈谈函数节流和函数防抖。 糟了,这可触碰到我的知识盲区了,好像听也没听过这2个东西,痛定思痛,赶紧学习学习。here we go![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Os3MsZDw-1617719777291)(js防抖和节流.assets/165a252b4b69aab5)]概念和例子函数防抖(debounce)函数防抖(debounce):当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次,如果设原创 2021-04-06 22:50:54 · 645 阅读 · 0 评论 -
JS异步编程
知识线JS 为什么是单线程? => 单线程带来的问题? => 如何实现异步编程?(同步和异步) => 异步代码的执行 顺序 => Event Loop 运行机制。JS 为什么是单线程?JS 单线程的特点就是同一时刻只能执行一个任务。这是由一些与用户的互动以及操作 DOM 等相关的操作决定了 JS 要使用单线程,否则使用多线程会带来 复杂的同步问题。如果是多线程,一个线程正在修改 DOM,另一个线程正在删除 DOM,那么以哪一 个为准呢?如果执行同步问题的话,多线程需原创 2021-04-06 15:37:22 · 572 阅读 · 0 评论 -
事件循环机制 => EventLoop详解
前言面试官:说说异步代码的执行顺序?Event Loop 的运行机制是如何的运行的?什么是 EventLoop ?先看这张图,先不管宏任务,微任务是什么,先看整个流程。分析:判断宏任务队列是否为空不空 --> 执行最早进入队列的任务 --> 执行下一步空 --> 执行下一步判断微任务队列是否为空不空 --> 执行最早进入队列的任务 --> 继续检查微任务队列空不空空 --> 执行下一步因为首次执行宏队列中会有 script原创 2021-04-06 15:30:57 · 1388 阅读 · 0 评论 -
Vue生命周期详解
前言首先,每个Vue实例在被创建之前都要经过一系列的初始化过程,这个过程就是vue的生命周期。首先看一张图吧~这是官方文档上的图片相信大家一定都会很熟悉,左边是官网的,右边是加了一定注解的。咱们从上图可以很明显的看出现在vue2.0都包括了哪些生命周期的函数了。这里有一份代码,先在浏览器里面跑一遍,然后F12,打开console。方面下面一一解读钩子函数。<!DOCTYPE html><html lang="en"><head> <meta原创 2021-04-06 01:08:23 · 641 阅读 · 0 评论 -
ES6 Promise用法小结
什么是Promise呢?ES6中一个非常重要和好用的特性就是Promise但是初次接触Promise会一脸懵逼,这TM是什么东西?看看官方或者一些文章对它的介绍和用法,也是一头雾水。Promise到底是做什么的呢?Promise是异步编程的一种解决方案。那什么时候我们会来处理异步事件呢?一种很常见的场景应该就是网络请求了。我们封装一个网络请求的函数,因为不能立即拿到结果,所以不能像简单的3+4=7一样将结果返回。所以往往我们会传入另外一个函数,在数据请求成功时,将数据通过传原创 2021-04-01 21:40:50 · 1249 阅读 · 1 评论 -
Vue 插槽slot的使用(具名插槽、作用域插槽)
编译作用域在理解插槽前,不得不先理解一个概念:编译作用域。官方对于编译的作用域解析比较简单,我们自己来通过一个例子来理解这个概念:我们来考虑下面的代码是否最终是可以渲染出来的:<my-cpn v-show="isShow"></my-cpn>中,我们使用了isShow属性。isShow属性包含在组件中,也包含在Vue实例中。答案:最终可以渲染出来,也就是使用的是Vue实例的属性。原因分析官方给出了一条准则:父组件模板的所有东西都会在父级作用域内编译;子组原创 2021-03-25 23:10:05 · 949 阅读 · 0 评论 -
Vue 组件化思想和实现步骤
什么是组件化?组件化思想组件化是Vue.js中的重要思想它提供了一种抽象,让我们可以开发出一个个独立可复用的小组件来构造我们的应用任何的应用都会被抽象成一颗组件树组件化思想的应用:有了组件化的思想,我们在之后的开发中就要充分的利用它。尽可能的将页面拆分成一个个小的、可复用的组件。这样让我们的代码更加方便组织和管理,并且扩展性也更强。注册组件步骤注册组件步骤解析1.Vue.extend():调用Vue.extend()创建的是一个组件构造器。通常在创建原创 2021-03-25 22:27:16 · 1136 阅读 · 0 评论 -
Vue 父子组件的通信传参(props、$emit)
简述我们知道子组件是不能引用父组件或者Vue实例的数据的。但是,在开发中,往往一些数据确实需要从上层传递到下层:比如在一个页面中,我们从服务器请求到了很多的数据。其中一部分数据,并非是我们整个页面的大组件来展示的,而是需要下面的子组件进行展示。这个时候,并不会让子组件再次发送一个网络请求,而是直接让大组件(父组件)将数据传递给小组件(子组件)。如何进行父子组件间的通信呢?Vue官方给出以下方法通过props向子组件传递数据通过事件向父组件发送消息真实的开发中,Vue实例原创 2021-03-25 22:24:17 · 921 阅读 · 0 评论 -
Vue 父子组件的相互访问 ($refs、$children)
简述有时候我们需要父组件直接访问子组件,子组件直接访问父组件,或者是子组件访问跟组件。父组件访问子组件:使用$children或$refs子组件访问父组件:使用$parent父访问子$children(不推荐)this.$children是一个数组类型,它包含所有子组件对象。我们这里通过一个遍历,取出所有子组件的message状态。$children的缺陷通过$children访问子组件时,是一个数组类型,访问其中的子组件必须通过索引值。但是当子组件过多,我们需要拿到其中原创 2021-03-25 22:21:41 · 2738 阅读 · 4 评论 -
数据双向绑定v-model的使用和原理
简述表单控件在实际开发中式非常常见的,特别是对于用户信息的提交,需要大量的表单Vue中使用v-model指令来实现表单元素和数据的双向绑定简单使用当我们在输入框输入内容时,因为input中的v-model绑定了message,所以会实时将输入的内容传递给message,message发生改变当message发生改变时,因为上面我们使用Mustache语法,将message的值插入到DOM中,所以会发生响应的改变所以,通过v-model实现双向绑定,我们也可以将v-model用原创 2021-03-25 20:36:16 · 6557 阅读 · 0 评论 -
ES新增数组方法--filter/map/reduce/forEach/some/every
前言本文对ES5新加的一些数组方法的使用做个简单演示1.forEach() :arr.forEach(function(vlaue, index, [array])) 分别对应数组的value(值)、index(索引号)、数组本身遍历数组的全部元素,即使return true也不会终止迭代,因为forEach本质是一个函数,参数是一个回调函数,回调函数的return只是终止了回调函数而已,不是终止forEach,而forEach内部应该是多次调用了那个函数 var arr = [1, 2,原创 2021-03-24 01:04:07 · 1241 阅读 · 0 评论 -
Vue里面数组哪些方法是响应式的
简述因为Vue是响应式的,所以当数据发生变化时,Vue会自动检测数据变化,视图会发生对应的更新。Vue中包含了一组观察数组编译的方法,使用它们改变数组也会触发视图的更新。尾部追加:push()尾部删除:pop()首部删除:shift()首部添加:unshift()删除/插入/替换元素:splice()排序:sort()反转数组:reverse()push() //1.push方法,最后一位添加元素,响应式,数据改变let letters=['A','B','C','D原创 2021-03-23 16:51:07 · 1455 阅读 · 0 评论 -
条件渲染 v-if和v-show
v-ifv-if、v-else-if、v-else这三个指令与JavaScript的条件语句if、else、else if类似。Vue的条件指令可以根据表达式的值在DOM中渲染或销毁元素或组件简单的案例演示v-if的原理:v-if后面的条件为false时,对应的元素以及其子元素不会渲染。也就是根本没有不会有对应的标签出现在DOM中。在 template 元素上使用 v-if 条件渲染分组因为 v-if 是一个指令,所以必须将它添加到一个元素上。但是如果想切换多个元素呢?此时可以把原创 2021-03-23 15:03:41 · 861 阅读 · 0 评论 -
Vue v-for对数据的遍历
场景当我们有一组数据需要进行渲染时,我们就可以使用v-for来完成。v-for的语法类似于JavaScript中的for循环。格式:v-for = “item in items”数组数据情况1: 不需要使用索引值格式:``v-for=" item in items "依次从items 中取出item,并且在元素的内容中,我们可以使用Mustache语法(插值{{item}}),来使用item<!-- 1.在遍历的过程中,没有使用索引值(下标值)--> <原创 2021-03-23 15:02:00 · 1808 阅读 · 0 评论 -
Vue 事件监听v-on(简单使用,参数问题,修饰符)
简述在前端开发中,我们需要经常和用户交互这个时候,我们就必须监听用户发生的事件,比如点击,拖拽,键盘事件等等在Vue中使用v-on监听事件v-on介绍作用:绑定事件监听器缩写:@预期:Function | Inline Statement | Object参数:event简单使用/*这里,我们用一个监听按钮的点击事件,来简单看看v-on的使用*/<div id="app"> <h2>当前计数器为:{{counter}}</h2>原创 2021-03-23 14:09:47 · 899 阅读 · 0 评论 -
Vue 条件渲染v-if和v-show
v-ifv-if、v-else-if、v-else这三个指令与JavaScript的条件语句if、else、else if类似。Vue的条件指令可以根据表达式的值在DOM中渲染或销毁元素或组件简单的案例演示v-if的原理:v-if后面的条件为false时,对应的元素以及其子元素不会渲染。也就是根本没有不会有对应的标签出现在DOM中。在 template 元素上使用 v-if 条件渲染分组因为 v-if 是一个指令,所以必须将它添加到一个元素上。但是如果想切换多个元素呢?此时可以把原创 2021-03-23 13:37:04 · 781 阅读 · 0 评论 -
ES6中块级作用域的横空出世(let、var、const)
let 关键字let 关键字用来声明变量,使用 let 声明的变量有几个特点:不允许重复声明;块儿级作用域(局部变量);不存在变量提升;不影响作用域链;let创建变量代码示例:// let关键字使用示例:let a; // 单个声明let b,c,d; // 批量声明let e = 100 ; // 单个声明并赋值let f = 521 , g = 'iloveyou', h = []; // 批量声明并赋值不允许重复声明:let dog = "狗";let dog = "原创 2021-03-21 23:57:41 · 880 阅读 · 1 评论 -
Vue 计算属性
前言人生如逆水行舟,不进则退简介在vue中一些数据经常依赖于别的数据做出改变,且改变的逻辑也较复杂,这个时候就需要用到计算属性computed。通俗来说就是当前数据不是确定的,要经常做出改变,而这个改变是其他数据改变导致的。简单使用<div id="app"> <h2>{{firstName}} {{lastName}}</h2> <h2>{{firstName+" "+lastName}}</h2> <h2>.原创 2021-03-21 22:52:39 · 941 阅读 · 0 评论 -
v-bind——Class 与 Style 绑定
前言本篇记录一下的v-bind指令,从简单使用到复杂应用。简述v-bind 主要用于动态地属性绑定,比方你的class属性,style属性,value属性,href属性等等,只要是属性,就可以用v-bind指令进行绑定.简单使用<div id="app"> //错误写法 <img src="{{imgURL}}" alt=""> //正确写法 <img v-bind:src="imgURL" alt=""> <原创 2021-03-21 16:40:43 · 1074 阅读 · 4 评论 -
Vue 快被大家遗忘的指令
前言本篇做了一些对不被常用的指令的汇总。了解即可,知道他们能做什么就好了v-once该指令后面不需要跟任何表达式该指令表示元素和组件只渲染一次,不会随着数据的改变而改变 <div id="app"> message只会渲染一次,数据改变后也不能更新 <h2 v-once>{{message}}</h2> </div>这个还是算没那么不常用的,还是有一定的应用的场景。v-html该指令原创 2021-03-21 15:00:45 · 801 阅读 · 0 评论 -
Vue MVVM模型
简介MVVM 是Model-View-ViewModel的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自动传递给 View,即所谓的数据双向绑定。 Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库,专注于View 层。它的核心是 MVVM 中的 VM,也就是 ViewModel。 ViewModel负责连接 View 和 Model,保证视图和数据的一致性,这种轻量级的原创 2021-03-21 12:28:47 · 976 阅读 · 0 评论 -
ES6学习笔记(二)
前言这是学习es6的一些新特性整理出来的笔记,有看不懂的地方推荐阮一峰的ES6,写的很详细。附上传送门阮一峰ES6,接上一集传送门ES6学习笔记(一)14 、Set集合ES6 提供了新的数据结构 Set(集合)。 它类似于数组,但成员的值都是唯一的 ,集合实现了 iterator接口,所以可以使用『扩展运算符』和『for…of…』进行遍历,集合的属性和方法size 返回集合的元素个数;add 增加一个新元素,返回当前集合;delete 删除元素,返回 boolean 值;has 检测集原创 2021-03-19 22:18:16 · 874 阅读 · 0 评论 -
ES6学习笔记(一)
一、概述1 、什么是 ECMAECMA(European Computer Manufacturers Association)中文名称为欧洲计算机制造商协会,这个组织的目标是评估、开发和认可电信和计算机标准。 1994 年后该组织改名为 Ecma 国际;2 、什么是 ECMAScriptECMAScript 是由 Ecma 国际通过 ECMA-262 标准化的脚本程序设计语言;百度百科:https://baike.baidu.com/history/ECMAScript/1889420/原创 2021-03-19 01:34:52 · 946 阅读 · 0 评论 -
JavaScript进阶之OOP(二)
3.构造函数和原型在ES6(ECMAScript6.0)之前,JavaScript没有类的概念,在ES6之前,对象不是基于类创建的,而是用一种称为构造函数的特殊函数来定义对象和他们的特征的。创建对象:(JavaScript基础也有做过笔记)对象字面量 var obj = {}new Object() var obj = new Object()自定义构造函数function name1(){ this.属性=值; this.方法=function (){}}let obj原创 2021-03-18 00:47:23 · 1027 阅读 · 0 评论 -
JavaScript基础之必会的DOM BOM操作
#mermaid-svg-Vcro16RtxaBJkA1K .label{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);fill:#333;color:#333}#mermaid-svg-Vcro16RtxaBJkA1K .label text{fill:#333}#mermaid-svg-Vcro16RtxaBJkA1K .node rect,#mermaid-svg-Vcro16Rtxa原创 2021-03-15 22:52:47 · 1089 阅读 · 0 评论 -
JavaScript基础
前言:这是之前假期复习js累计下来的笔记,以用来后续复习之用。由于当时没有定期整理发博客,一直在复习,所以内容可能有点多,这个也是特别基础的内容,也不打算拆分发了,源码和笔记内容来自b站pink老师。文章内容如有错误,欢迎指正批评✔️✔️教程传送门接下一篇学习目标:掌握编程的基本思维掌握编程的基本语法编程基础「计算机语言」分为机器语言,汇编语言,高级语言。计算机内部最终执行的都是机器语言,由0和1这样的二进制数构成。数据存储单位 加粗样式8bit(比特) = 1B(Byt.原创 2021-02-24 08:56:45 · 1099 阅读 · 0 评论 -
JavaScript进阶之OOP(一)
一、面向对象导读面向过程POP就是分析出解决问题所需要的步骤,然后用函数把这些步骤一步一步实现,使用的时候再一个一个的依次调用就可以了。面向对象OOP是把事务分解成为一个个对象,然后由对象之间分工与合作。两者比较面向过程优点:性能比面向对象高,适合跟硬件联系很紧密的东西,缺点:不易维护、不易复用、不易扩展。面向对象优点:易维护、易复用、易扩展,由于面向对象有封装、继承、多态性的特性,可以设计出低耦合的系统,使系统 更加灵活、更加易于维护,缺点:性能比面向过程低。面向对原创 2021-02-24 05:45:22 · 1304 阅读 · 0 评论