蒲公英芽的博客

判断一个变量是否为数组ES6中提供了 isArray ( arr ) 方法，返回 true 或者 false。ES5中可以使用 arr.constructor = = = Array 或者 Object.prototype.toString.call(arr) = = ="[object Array]"来判断。 //ES6 console.log(Array.isArray(arr));...

为什么要使用路由现在的网络应用程序越来越多的使用AJAX异步请求完成页面的无缝刷新，导致浏览器的URL不会发生任何变化而完成了请求，从而破换了用户浏览体验。同时本次浏览的页面内容在用户下次使用URL访问时将无法重新呈现，使用路由可以很好地解决这个问题。单页面应用利用了JavaScript动态变换网页内容，避免了页面重载；路由则提供了浏览器地址变化，网页内容也跟随变化，两者结合起来则为我们提供了...

偏移量（offset dimension）是javascript中一个重要的概念。javascript中涉及到偏移的有offsetWidth、offsetHeight、offsetLeft、offsetTop这四个值，offsetLeft 和 offsetTop 都是以 offsetParent 的内边距为参照的。console.dir(元素)，可以看到下面会有offsetParent这个属性。...

什么是模块化模块化其实是一种规范，一种约束，这种约束会大大提升开发效率。将每个js文件看作是一个模块，每个模块通过固定的方式引入，并且通过固定的方式向外暴露指定的内容。按照js模块化的设想，一个个模块按照其依赖关系组合，最终插入到主程序中。模块化的方法普通方法优点：可以直接调用。缺点：变量可能会出现重复造成的污染，并且无法进行结构性分类。function a() { cons...

前言原生 js 中没有设计模式，它是模仿 java 语言中的设计模式来实现。设计模式分为三种类型，共23种。创建型模式：单例模式、抽象工厂模式、建造者模式、工厂模式、原型模式。结构型模式：适配器模式、桥接模式、装饰模式、组合模式、外观模式、享元模式、代理模式。行为型模式：模版方法模式、命令模式、迭代器模式、观察者模式、中介者模式、备忘录模式、解释器模式（Interpreter模式）、状...

关于原型相关属性的含义：- prototype：原型，只有构造函数才有的属性，指向该构造函数的原型对象。- \_\_proto\_\_：原型链，只有实例对象才有的属性，指向new这个实例的构造函数的原型对象 。- constructor：原型对象中的属性，指向该原型对象的构造函数。关于原型方面的几句话：- 当 new 一个函数的时候会创建出一个对象，所以【被创建对象.\_\_proto\_\_】等于【函数.prototype】。- 一切函数都是由 Function 这个函数创建的，所以【被创建

前言Class 是ES6 引入的最重要的特性之一，在没有class之前，我们只能通过原型链来模拟类。点击查看ES6 类的详细内容：https://blog.youkuaiyun.com/Charissa2017/article/details/103939865在ES5中，如果函数要作为构造函数使用，也就是要通过new实例化，就需要将函数的首字母大写。function Box(){ //...这里相...

前言先来看看我们为什么要使用函数：函数对任何一门语言来说都是核心的概念。通过函数可以封装任意多条语句，而且可以在任何地方、任何时候调用执行。在javascript里，函数即对象，程序可以随意操控它们。函数可以嵌套在其他函数中定义，这样它们就可以访问它们被定义时所处的作用域中的任何变量，它给javascript带来了非常强劲的编程能力。函数的声明：1、命名函数。通常来说函数的声明会有一个返...

什么是闭包闭包是指有权访问另一个函数作用域中的变量的函数，创建闭包的最常见的方式就是在一个函数内创建另一个函数，通过另一个函数访问这个函数的局部变量。通俗来讲满足以下三点的函数就叫做闭包：函数内声明了一个函数，并且将内部函数返回到全局；将函数内的函数返回并且存储在全局变量中；内部的函数调用了外部函数中的局部变量；闭包的写法：function fn1(){ // 默认情况，...

几个常用的数据结构：数组HTMLCollectionNodeList对象SetMap二叉树链表数组 Array数组的特点：数据必须按照索引顺序依次排列，数组是根据索引放入数据，同样可以根据索引值找到数据；数组是一个紧密型结构，如果要删除，添加，插入都需要重新排列每个元素，会涉及到时间复杂度；数组中的元素都是有关系的，可以从找到这个元素向上或者向下找到关联位置的元素 ...

前言刚开始学习对象时，我们知道对象有两个部分，第一个是属性，第二个是方法。属性对应的是一个值，只能存储值、获取值，不能执行多条语句；方法对应的是一个函数，不能存储值，只能执行多条语句。而 set 和 get 能够实现对象的属性特征和对象的方法特征，可以存储值，也可以执行多条语句。let obj={};obj.a=10; //属性 存储这个值，获取这个值，不能执行多条语句obj.a()...

call()表示立即执行函数；如果有一个参数，且该参数为对象类型，则表示将函数中 this 的指向改变为这里带入的参数；函数中如果没有this,call就没有任何意义了,和普通的执行函数概念一样；call() 在执行函数时，函数的参数从第二位开始依次写入；如果使用call() 或者apply() ，第一个参数是null，就意味着将函数中this重定向到window；语法：方法名.c...

对象的浅复制浅复制指的是源对象的属性如果有对象，该对象属性修改后，会引起复制后的对象各属性的改变，对象的浅复制有以下几种方式：for in，浅复制let obj1={a:1,b:2,c:{d:3}}let obj2={};for(var prop in obj1){ // 浅复制 obj2[prop]=obj1[prop];}obj1.c.d=10;consol...

前言什么是对象，其实就是一种类型，即引用类型。而对象的值就是引用类型的实例。在 ECMAScript 中引用类型是一种数据结构。用于将数据和功能组织在一起，它也常被称做为类，但 ECMAScript 中却没有这种东西。虽然 ECMAScript 是一门面向对象的语言。却不具备传统面向对象语言所拥有的类和接口等基本结构。万物皆对象，除了数字，字符，布尔这种绝对值以外的所有都是对象；对象是类...

什么是cookiecookie实际上就是一些信息，这些信息以文件的形式存储在客户端计算机上。当用户访问了某个网站，可以通过cookie向访问者电脑上存储数据。cookie的主要作用是在浏览器中进行数据的存储，并与服务器互动。比如：密码 cookie，访当问者首次登陆网站时，需要填写密码。密码可被存储于 cookie 中。当他们再次访问网站时，就会从 cookie 中取回密码。cookie可...

前言JSONP是JSON with padding(填充式JSON或参数式JSON)的简写，是应用JSON的一种新方法，常用于服务器与客户端跨源通信。JSONP的基本思想是，网页通过添加一个<script>标签，向服务器请求数据（对于所有src、href 属性都不考虑跨域），这种做法不受同源政策限制；服务器收到请求后，将数据放在一个指定名字的回调函数里传回来。jsonp 的写法：...

前言2005年Jesse James Garrett发表了一篇文章，标题为：“Ajax：A new Approach to Web Applications”。他在这篇文章里介绍了一种技术，用他的话说，就叫：Ajax，是Asynchronous JavaScript + XML的简写。这种技术能够向服务器请求额外的数据而无须卸载页面(即刷新)，会带来更好的用户体验。一时间，席卷全球。Ajax ...

asyncasync是一个函数。async函数执行以后返回一个promise对象。async函数中return 的结果需要通过这个函数返回的promise对象中then里面的函数参数获取。async function abc(){ console.log("aaa");//aaa return 10;}abc().then(function(value){ c...

前言在整个html中，加载有多种，js加载，css样式，img，音频、视频，但是只有js文件是阻塞式同步加载，其他全部是异步加载。同步：可以理解为，执行 javascript 代码过程中的主线程，主线程只有一个，按照代码顺序，从上往下执行。异步：不管主线程有没有在执行，重新启用了一个线程来操作；只要有一定时间去触发的都是异步过程（比如 setTimeout()、setInterval()、...

一、全局的this全局对象的 this 是windowconsole.log(this);//windowfunction abc(){ console.log(this);//window,严格模式下，会报错}abc();二、对象方法中的 this对象属性中使用 this，this 指向外层的 this 指向对象方法中使用 this，this 指向该对象本身可以理...

前言侦听事件和回调函数都可以实现对函数的执行，我们用图片预加载来分析 addEventListener 和 callback 的区别。需求：页面中需要加载大量图片，当图片按顺序加载完后执行对应的操作。分析：大量图片，肯定会涉及到数组遍历，但遍历是同步的，load加载事件是异步的，需要考虑每次遍历的时候加载一张图片避免出现回调地狱，尽可能少创建图片对象每张图片的大小不一样，加载时间也不...

前言正则表达式主要用来验证客户端的输入数据。用户填写完表单单击按钮之后，表单就会被发送到服务器，在服务器端通常会用PHP、ASP.NET等服务器脚本对其进行进一步处理。因为客户端验证，可以节约大量的服务器端的系统资源，并且提供更好的用户体验。正则表达式(regular expression)是一个描述字符模式的对象。ECMAScript的RegExp类表示正则表达式。而string和RegEx...

FocusEvent事件主要针对所有表单元素和超链接，当 input 聚焦时触发 focus 事件，失去焦点时触发 blue 事件。focus 获得焦距blue 失去焦距事件对象中 relatedTarget 为上一个失焦对象<input type="text" name="text" id="user"><script>var user=documen...

前言javascript 中事件分类有：MouseEvent（鼠标事件）、Event对象、FocusEvent对象、InputEvent （input事件）、KeyboardEvent（键盘事件）、WheelEvent （滚轮事件）。各个事件中具备自身独立的属性，比如clientX、clientY只属于mouseEvent；keyCode只属于KeyboardEvent等。Event称为事件...

MouseEvent的类别有以下：mousedown 鼠标按下mouseup 鼠标释放click 左键单击dblclick 左键双击mousemove 鼠标移动mouseover 鼠标经过mouseout 鼠标滑出mouseenter 鼠标进入mouseleave 鼠标离开contextmenu 右键菜单注意：执行顺序：mousedown —&g...

前言javascript是事件驱动型语言。当用户在网页中进行某种操作时，就产生了一个“事件”(Event)。事件几乎可以是任何事情：单击一个网页元素、拖动鼠标等均可视为事件。JavaScript是事件驱动的，当事件发生时，它可以对之做出响应。具体如何响应某个事件由编写的事件处理函数完成。事件基础事件分为系统派发事件和自定义派发事件。addEventListener();//事件侦听方法...

前言先来介绍一下history.pushState()和window.onpopstatehistory.pushState()，改变当前地址栏的路径，并不会更新页面内容用法：history.pushState(Object, title, url);第一个参数：是一个对象，通过pushState方法可以将该对象内容传递到新页面中。第二个参数，指标题，几乎没有浏览器支持该参数，传一个空...

clientWidth、clientHeight，指元素的width+padding-滚动条的宽度和高度来一张图说明一下：body的clientWidth为body的width+paddingbody的clientHeight是内容高度，如果没有内容，高度为0html的clientWidth为浏览器窗口的宽度，不包括滚动的宽度html的clientHeight为浏览器窗口的高度，不包...

DOM的常用属性document.body：body元素document.title：获取、设置文档的标题document.head：获取head标签document.styleSheets：获取css样式对象document.URL：获得完整的URLdocument.domain：获取域名console.log(document.body);//body标签console.l...

时间对象使用new Date获取一个时间对象：var date = new Date()var date=new Date();console.log(date); console.log(date.toUTCString());//获取格林尼治日期时间console.log(date.toLocaleString());//获取本地日期时间console.log(date.to...

String的创建方式字面量创建方式，存在栈中实例化创建方式，存在栈中构造函数创建方式，会创建一个字符型对象，存在堆中// 字面量创建方式var str="abc",str1='abd',str2=`abc`;//实例化创建方式var str4=String('abc');//存在栈中//构造函数创建方式var str5=new String('abc');//字符型对象...

前言Math全部都是静态属性和方法Math是一种静态类，该类别不能实例化Math的属性E 返回算术常量 e，即自然对数的底数（约等于2.718）。LN2 返回 2 的自然对数（约等于0.693）。LN10 返回 10 的自然对数（约等于2.302）。LOG2E 返回以 2 为底的 e 的对数（约等于 1.414）。LOG10E 返回以 10 为底的 e 的对数（约等于0.434）...

创建DOM元素document.createElement ( );所有的标签都可以使用这种方式来创建。document.createDocumentFragment();创建一个碎片容器，主要用于直接给body放入多个。document.createTextNode ( );创建文本节点。img 和 canvas 元素可以使用 new 来创建，例如： var img = new Ima...

获取页面中的元素可以通过以下几种途径：通过 id 名通过 标签名通过 class 名通过 name 的值querySelector对应的方法为：document.getElementById("")，根据id获取元素，只能获取唯一一个，只能使用document获取。document.getElementById("");//根据id获取元素，只能获取唯一一个//只能使用...

Document Object Model（文档对象模型）DOM是针对HTML和XML文档的一个API（Application Programming Interface应用程序编程接口）。DOM描绘了一个层次化的节点树，允许开发人员添加、移除和修改页面的某一部分。HTML DOM 定义了访问和操作HTML文档的标准方法。要改变页面的某个东西，JavaScript 就需要获得对 HTML 文...

前言任何文件都需要使用特定的方式打开，比如 .doc文件需要word、WPS来打开。虚拟机：任何语言编辑的程序都需要一个虚拟机来执行，如果脱离这个环境就不能执行。运行时（runtime）：百度解释为 虚拟机的一种，一般指进程级别的虚拟机。在运行过程中不断地处理程序。同一款浏览器在不同的系统中，属性值是不同的。在同一个系统中，不同的浏览器，属性都有不同。BOM是有兼容性问题，DOM也是...

先来打印一个二维数组var arr=[];for(var i=0;i<10;i++){ arr[i]=[]; for(var j=0;j<10;j++){ arr[i][j]=i*10+j; }}console.log(arr);打印出的结果如下图所示：每一行每一列都有唯一对应值。多维数组：var arr=[];for(var...

filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。filter() 不会对空数组进行检测。filter() 不会改变原始数组。fill ( ) 的用法：var arr=new Array(5);arr.fill(10);console.log(arr);//[ 10, 10, 10, 10, 10 ]//以上也可以写成var arr ...

some ( ) 遍历数组，查找是否有满足条件（返回的结果如果是true，）就直接跳出遍历，返回truevar list= [1, 2, 3, 4, 5, 6];var s = list.some(function (item,index,arr) { return item > 3; })console.log(s);//truesome ( ) 的实现...

在 ES5 中数组常用的遍历方法有 for 和 for in在 ES6 中可以使用 forEach ( ) 和 map ( ) 来对数组进行遍历for 和 for in 的区别：fo 循环可以遍历到数组中的空元素，但是不能遍历数组的可枚举属性for in 循环可以把数组的可枚举属性遍历到，但是它不能遍历到数组中的空元素var arr=[1,2,3,,4,5,6];arr.a=3;...