![](https://img-blog.csdnimg.cn/20201014180756918.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
JS基础
文章平均质量分 86
搞前端的小菜
热爱前端的小菜,低代码方向的爱好者
展开
-
一篇搞定JS的位运算(公式+力扣真题)--- 持续更新
位操作(Bit Manipulation)是程序设计中对位模式或二进制数的一元和二元操作。在许多古老的微处理器上,位运算比加减运算略快,通常位运算比乘除法运算要快很多。在现代编程语言中,情况并非如此,很多编程语言的解释器都会基本的运算进行了优化,因此我们在实际开发中可以不必做一些编译器已经帮我们做好的优化,而就写出代码本身所要表现的意思。在对位运算的学习过程中,可以锻炼写代码的思路,同时在面试过程中,如果使用位运算来对问题进行解决,也会很加分。原创 2023-01-13 16:04:47 · 1761 阅读 · 1 评论 -
原生JS的拖拽属性draggable(详解)
作为h5新增的属性draggable,它能够给与一切的html元素拖动的效果。而在这个属性之下,也有着关于拖动效果的各个方法。而这一篇文章,主要就是说一下关于draggable属性的使用以及工作场景。原创 2022-12-02 16:38:55 · 12796 阅读 · 2 评论 -
原生JS实现call,apply,bind方法(详解)
摘要我们知道如果想改变this的指向,我们有三种方法可以实现。call和apply是直接调用,而bind是返回一个方法,不会直接调用。如果我们想了解它更深的话,那么就自己实现出来吧。首先我们想一下,这三个方法的调用者是方法,是任何方法。那既然是这样,所有的方法都可以再次调用这三个方法,所以我们自己写出来的这三个方法一定是写在Function的原型下的。有了这个思路我们就可以进行实现了:call方法首先我们来回顾一下call方法是如何调用的:let p1 = { name: 'lisi'原创 2021-08-17 10:02:30 · 759 阅读 · 0 评论 -
原生JS实现Promise(详解)
摘要首先呢,Promise是异步中比较重要的知识点,学习的最好方法就是掌握它的基本原理。所以这一篇主要说一下如何用JS来实现一个自己的promise。构造函数首先我们来看一下我们是如何使用promise的,我们在实例化对象是这么使用的: let p1 = new Promise((resolve, reject) => { let random = Math.floor(Math.random() * 10); if (random > 4) {原创 2021-08-16 14:41:08 · 3509 阅读 · 3 评论 -
JS的事件类型(详解)
摘要Web浏览器可能发生的事件有很多种类型,而这一篇我们针对于不同的浏览器的事件类型来说明一下,我们从DOM3级事件中总结了一下几种类型的事件:事件 类型作用意义UI事件当用户在页面上的元素进行交互时触发焦点事件当元素获得或失去焦点时触发鼠标事件当用户通过鼠标在页面上执行操作时触发滚轮事件当使用鼠标滚轮时触发文本事件当在文档中输入文本时触发键盘事件当用户通过键盘在页面上执行操作时触发当然除了这些类型我们还有一些其他类型的事件,不过在这里原创 2021-06-02 20:59:24 · 2366 阅读 · 0 评论 -
详解onclick和addEventListener的区别
摘要当我们想要给某个DOM元素绑定事件的时候,最常用的方法是通过on + 事件名字的方式。而在DOM2级事件定义了两个方法,用于处理指定和删除事件处理程序的操作:addEventListener()和removeEventListener().并且它们都接受三个参数:要处理的事件名,作为事件处理的一个函数,一个布尔值。最后的布尔值如果为false,表示在冒泡阶段调用事件处理函数,如果是true,表示在捕获阶段调用事件处理程序。区别1:同时绑定多个事件我们来想一个问题,我们使用onclick方法可原创 2021-05-25 12:10:08 · 2273 阅读 · 3 评论 -
一篇文章搞懂JS的事件流
摘要当浏览器发展到第四代时,浏览器开发团队遇到了一个很有意思的问题:页面的那一部分会拥有某一个特定的事件。要明白这个问题是什么意思,我们来看一个例子。当我们点击内部的蓝色圆圈的时候,我们点击的不是一个圆圈,而是页面中的所有圆圈。而事件流描述的就是从页面接收事件的顺序。现在我们来介绍一下三种事件流的情况。1.事件冒泡IE的事件流叫做事件冒泡,即事件开始时由最具体的元素(文档中嵌套最深的那个节点)接收,然后逐级向上传播到较为不具体的节点。 <div id="div1">原创 2021-05-25 11:39:27 · 288 阅读 · 0 评论 -
DOM扩展(详解)
摘要尽管DOM作为API已经非常完善了,但为了实现更多的功能,仍然会有一些标准或专有的扩展。这一篇主要来说一下对于DOM1的不足之处的扩展。1.选择符API虽然DOM已经在docement类型下有了几个选择元素的方法,但似乎还是不能满足我们的需求,所以就延伸除了JavaScript库中最常用的一项功能,就是根据CSS选择符选择与某个模式匹配的DOM元素。(1) querySelector()方法该方法接收一个CSS选择符作为参数,返回与该模式匹配的第一个元素,如果没有找到匹配的元素,则返回nul原创 2021-05-10 21:45:01 · 527 阅读 · 0 评论 -
DOM(文档对象模型详解)
摘要DOM是针对于HTML和XML文档的一个API(应用程序编程接口)。DOM描绘了一个层次化的节点树,允许开发人员添加,移出和修改页面的某一部分。尽管现在我们可以应用各种框架来实现需求,但对于原生的DOM操作还是有必要好好掌握的,这一篇主要就来说一下DOM的重点。1.Node类型DOM1级定义了一个Node接口,该接口将由DOM中所有节点类型实现。这个接口在Javascript中是以Node类型实现的。也就是说,在文档中任何一个部分都可以看成一个节点。(1) 属性nodeType : 用于表原创 2021-05-09 19:13:21 · 423 阅读 · 0 评论 -
BOM(浏览器对象模型详解)
摘要如果想在Web中使用JavaScript,那么BOM无疑是真正的核心。BOM提供了许多对象用于访问浏览器的功能,这些功能与任何网页内容无关。这一篇就来说一下BOM对象的核心内容。1.Window 对象BOM的核心对象是window,它表示浏览器的一个实例。在浏览器中,window对象有双重角色,它既是通过JavaScript访问浏览器窗口的一个接口,又是ECMAscript规定的Global对象。(1)全局作用域这意味着在网页中定义的任何变量,方法和对象,都是在以window为Global对原创 2021-05-07 21:26:08 · 989 阅读 · 5 评论 -
JS实现类的继承
OK,有了上一节的基础,我们就可以用ES5来实现一个手写的继承了。这里继承的实现方法也是面试中比较常见的问题,我们从写一个最简单的模式,然后通过分析问题所在从而进行改善,最终实现一个比较完美的继承。1.创建一个父类我们如果想创建一个父类,用方法的模式来写,给类添加成员变量和方法,最简的就是这样写。function People(name,age){ this.name = name; this.age = age; this.sayHello = function(){原创 2021-04-24 13:16:57 · 341 阅读 · 0 评论 -
JS中的原型对象
OK,这一篇我们来说一下原型的这个问题。1.理解原型对象也是面试中比较常见的问题,我们结合实际来说一下,JS中的原型到底是做什么的。无论什么时候,只要创建了一个新函数,就会根据一组特定的规则为该函数创建一个prototype属性,这个属性指向函数的原型对象。在默认情况下,所有原型对象会自动获得一个constructor属性,这个属性指向prototype属性所在函数的指针。当用构造函数创建一个新实例后,该实例的内部包含一个属性(__proto __),指向该构造函数的原型对象。那我们来举个例原创 2021-04-23 21:28:28 · 2318 阅读 · 0 评论 -
Object.defineProperty方法(详解)
OK,这一篇主要想说一下Object.defineProperty这个方法。这个方法也是Vue数据双向绑定原理的常见面试题所以也是有必要好好掌握的哦首先我们知道JS中是支持面向对象编程的,也是有着对象和类这样的概念。我们常见创建对象的方法应该是这样:var p1 ={ name:"lisi",}那我们Object.defineProperty这个方法有什么用呢?这个方法接收三个参数:1.属性所在的对象2.属性的名字3.一个描述符对象这个描述符对象是个什么东西呢?他可以原创 2021-04-20 18:15:06 · 72816 阅读 · 31 评论 -
JS中的任务队列(详解)
说起任务队列的话,首先我们要回顾一下JS语言的特点。我们知道,Javascript 这门脚本语言诞生的使命就是为处理页面中用户的交互,以及操作 DOM 而诞生的。所以JS的设计就是单线程的,总不能多线程来操作DOM结构吧(那不就乱套了吗)。那么什么是单线程,其实就是任务一个接着一个做,不能同时处理多个任务。那这样就会导致一个问题,如果 JS 执行的时间过长,这样就会造成页面的渲染不连贯,导致页面渲染加载阻塞的感觉。那JS是如何解决这个问题呢?我用一张图来说一下:有一说一我这个图画的是真的好!原创 2020-10-21 19:56:45 · 4560 阅读 · 8 评论 -
JS闭包的深入理解---函数防抖(详解4)
在上一篇中,我们知道了函数节流的实现方式,用原始的方法和闭包的方法,阐述二者之间的差异。那现在说到函数防抖也容易理解的多.我们可以来先看一下什么是函数防抖:一个需要频繁触发的函数,规定时间内只让最后一次生效,前面的不生效(例如搜索功能)什么意思呢,就是比如有个按钮,我kuku一直点击它,那么在一定时间内(时间是我自己设置的)只有最后一次生效。OK,似乎就是和函数节流反过来,现在我们用原来的方法实现一下他:<button id="btn1">原始方法</button>原创 2020-10-19 21:00:27 · 645 阅读 · 0 评论 -
JS闭包的深入理解---函数节流(详解3)
有了上两篇关于闭包的理解,我们就可以用闭包来实现一些功能。而函数节流就是一个很经典的例子:首先我们来解释一下什么是函数节流:一次函数执行后,只有大于设定的执行周期才执行第2次。有个需要频繁触发的函数,处于优化的性能考虑,在规定时间内,只让函数触发第一次生效,后面的不生效。意思就是,比如有个按钮,你kuku一直点,我设置成两秒内只有第一次生效,后面的不会生效,哎这就是函数节流。我先用传统的方法实现一下:首先有一个按钮,再来一个方法: var f1 = function () {原创 2020-10-19 14:58:13 · 478 阅读 · 0 评论 -
JS闭包的深入理解(详解2)
OK,通过上一篇文章,我们理解了闭包是怎么实现的后,我们就可以看一个比较经典的小例子了。如图,如果我在网页上显示了一个ul,里面有3个li,然后我给这三个li绑定点击事件,所实现出的效果是点击第一个li就打印1,点击第二个li就打印2,点击第三个li就打印3。OK,似乎并不是很难,如果我们用之前固有的理解方法似乎可以这么写: var oul1=document.getElementById('ul1'); var oli1= oul1.getElementsByTagName('li原创 2020-10-19 09:33:24 · 140 阅读 · 0 评论 -
JS闭包的深入理解(详解1)
OK,如果说到JS中的闭包,给我的感觉就是它能很好地体现出JS函数式编程的特点。它不同于我们之前学的C,C++,JAVA中,函数只能被声明,调用,或者是类的成员方法。在JS中,函数可以赋值给一个变量,而JS又是弱类型语言,所以在JS中函数就可以作为参数或者是返回值(这一点就是蛮好玩的)。OK,了解了上面,我们就来看一下什么是闭包?定义:函数嵌套函数,并且内层函数作为返回值,引用外部函数的参数或变量。乍一看似乎不好理解,emmm,我们就通过例子来一步步理解闭包的概念。例子一function f1原创 2020-10-19 08:56:46 · 198 阅读 · 1 评论 -
JavaScript 让你意外的瞬间(函数2)
这一篇呢,是对之前的函数那一篇的补充,因为又找到好玩的了,所以自然要给与补充。再附上上一篇函数的文章:https://blog.csdn.net/weixin_46726346/article/details/107911551上一篇忘记说了JS中函数最有趣的特点了。根源就是,JS的函数是一个对象,是Function类型的对象。那,由于函数是一个对象,那么函数名就是一个指向函数对象的指针。就像一个变量名指向一个对象的地址一样。。。那这就有趣了,我完全可以这么做。 <script>原创 2020-08-10 19:01:23 · 109 阅读 · 0 评论 -
JavaScript 让你意外的瞬间(Array类型)
除了Object类型,Array类型应该是JS中最常用的引用类型了。并且JS的数组和其他的语言,像JAVA,C有着很大的区别,具体体现在:JS数组中的每一项可以保存任何数据类型的数据。JS的数组大小是可以动态调整的。这两个特点在JAVA或者C中的定长数组是不可行的。所以在我看来,JS的数组,更像其他语言封装好的一个比较强大的类。。。。我们来看一下JS中数组是怎么创建的。 <script> var arr1=new Array(); var ar原创 2020-08-10 18:39:25 · 130 阅读 · 0 评论 -
JavaScript 让你意外的瞬间(变量和对象)
我们知道定义变量的时候,可以给变量赋值。包括基本数据类型和引用类型。这一篇主要简单的说一下二者的区别(引用类型以对象为例)在哪里。也是,挺有意思的。首先第一点呢,就是对象可以自定义属性,什么意思呢。 <script> var person=new Object(); person.name="wangwu"; console.log(person.name); </script>就像这样,打印出来也是wangw原创 2020-08-10 14:50:46 · 119 阅读 · 1 评论 -
JavaScript 让你意外的瞬间(函数)
函数呢,对于任何一门语言都是一个核心的概念。在C或者JAVA中,我们定义函数,要么是Void无返回类型的,要么是有返回值类型的。那在JS中呢,定义一个函数没有那么多条条框框。。。。。又是很特别的。我们来看一下JS中的函数怎么写: <script> function f1(name,age){ console.log(name+age); } f1("wangwu ",13); </script&g原创 2020-08-10 14:20:00 · 115 阅读 · 0 评论 -
JavaScript 让你意外的瞬间(关系操作符)
继上一篇说完逻辑运算符,这里又要说关系操作符了,也是今天最后一篇了。。。。加油,奥利给。。。先说比较运算符,我们知道如果比较两个数字的话,就很简单的比较就好了,那如果两个操作数不是数字呢。自然是有一套转换规则的,我这里就不打出来了,只是举几个好玩的例子。。。 <script> console.log("ABC">"abc"); </script>这行代码的输出结果是什么呢?是false,也就是“ABC”<“abc”.因为这个原创 2020-08-09 21:12:01 · 104 阅读 · 1 评论 -
JavaScript 让你意外的瞬间(逻辑运算符)
JS中的逻辑运算符呢,emmm,是很让我惊讶的。。。因为是真的踩到过坑。。。这里不说“!”非运算,因为它和C或者JAVA应该不会差别很大,这里主要说另外两个。1、在之前的学习中,我觉得不管哪门语言,&&运算符的返回值,应该一定为boolean吧。但在JS中,不这么认为,这个时候JS变得高大上起来了。。。。那,如果&&的两个操作数都为boolean值得话,那他和JAVA是没有区别的。但如果,如果!有一个操作数,不为布尔值,那么它的返回结果就不一定是布尔值。我们原创 2020-08-09 20:48:28 · 157 阅读 · 0 评论 -
JavaScript 让你意外的瞬间(数据类型)
在JS中有5中基本数据类型和一种复杂数据类型,这一篇直说前五个基本数据类型,因为,后面还没复习到(hhhhhhh)。1、OK,先说第一个Undefined,这个类型只有一个值:undefined。我们上一篇说过,没有初始化的变量会默认赋值为undefined。这里我们要区别一个问题。没有初始化和没有定义是两码事。 <script> var x; console.log(x); console.log(y); </sc原创 2020-08-09 20:06:44 · 417 阅读 · 1 评论 -
JavaScript 让你意外的瞬间(变量Var)
emmm,于我而言呢,我是先学习C,然后C++,再到JAVA,到现在的JS,所以在学习JS的过程中,遇到了一些,很意外,很惊喜,很无奈的一些知识点。所以自己想以这种方式复习一下JS,并且进行一个知识的汇总整理。OK,现在开始,就从这一篇开始。我们知道JS中的变量是松散类型的,所谓松散类型就是可以用来保存任何数据类型的数据。换句话说:每个变量仅仅是一个用于保存值得占位符而已。 <script> var a1; var a2=5; v原创 2020-08-09 19:32:31 · 165 阅读 · 0 评论