![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
JavaScript
瓜冬瓜
我想找份实习,额啊~
展开
-
转义字符
转义字符含义\0空格\'单引号\"双引号\\反斜杠\n换行\r回车\v垂直制表符\t水平制表符\b退格\f换页\uXXXXunicode码\u{X} ... \u{XXXXXX}unicode码...原创 2019-10-24 01:11:06 · 523 阅读 · 0 评论 -
如何判断一个变量是数组还是对象
这里的对象指的是纯粹对象,所谓"纯粹的对象",就是该对象是通过"{}“或”new Object"创建的。instanceofinstanceof运算符用于测试构造函数的prototype属性是否出现在对象的原型链中的任何位置。var obj = {},arr = [];obj instanceof Array //falseobj instanceof Object //truea...原创 2019-08-09 02:45:11 · 170 阅读 · 0 评论 -
ES7新特性
ES7(ECMAScript 2016)ES7在ES6的基础上主要添加了两项内容:Array.prototype.includes()方法includes() 方法用来判断一个数组是否包含一个指定的值,根据情况,如果包含则返回 true,否则返回false。var array1 = [1, 2, 3];console.log(array1.includes(2)); //true...原创 2019-08-07 19:22:15 · 2441 阅读 · 0 评论 -
ES6——Class 笔记
通过class关键字,可以定义类。class Point { constructor(x, y) { this.x = x; this.y = y; } toString() { return '(' + this.x + ', ' + this.y + ')'; }}//等同于function Point(x, y) { this.x =...转载 2019-08-10 01:21:38 · 119 阅读 · 0 评论 -
JS实现继承的七种方法
原型链function Parent(){ this.age = 23; }Parent.prototype.getAge = function(){ return this.age; }; function Child(){ this.name = "xd"; } //继承了 Parent Child.prototype = new Parent(...原创 2019-08-10 16:02:47 · 158 阅读 · 0 评论 -
JS十大排序算法
冒泡排序function maopao(arr){ var length = arr.length, num; for(var i = 0; i < length; i++){ for(var j = 0; j < length - i - 1; j++){ if(arr[j] > arr[j + 1])...转载 2019-08-11 14:21:37 · 215 阅读 · 0 评论 -
Babel下的ES6兼容性与规范
ES6标准发布后,前端人员也开发渐渐了解到了es6,但是由于兼容性的问题,仍然没有得到广泛的推广,不过业界也用了一些折中性的方案来解决兼容性和开发体系问题,但大家仍很疑惑,使用ES6会有哪些兼容性问题。兼容性问题现状针对ES6的新特性兼容性问题,目前解决的方案是使用语法解析转换工具将es6语法转化为大部分浏览器识别的es5语法,通用的转化方案有babel,traceur,jsx,typescr...转载 2019-08-11 14:52:54 · 801 阅读 · 0 评论 -
前端性能优化之缓存技术
缓存一直以来都是用来提高性能的一项必不可少的技术 , 利用这项技术可以很好地提高web的性能。 缓存可以很有效地降低网络的时延,同时也会减少大量请求对于服务器的压力。 接下来这篇文章将会详细地介绍在web领域中缓存的一些知识点和应用。从HTTP协议开始说起由于整个网络服务都是基于http协议 的,因此先来介绍一下HTTP协议当中定义的缓存机制。HTTP协议主要是通过请求头当中的一些字段来和服务...转载 2019-08-11 16:55:25 · 226 阅读 · 0 评论 -
cookie、localStorage和sessionStorage区别
特性CookielocalStoragesessionStorage数据的生命期一般由服务器生成,可设置失效时间,如果在浏览器端生成Cookie,默认是关闭浏览器后失效除非被清除,否则永久保存仅在当前会话下有效,关闭页面或浏览器后被清除存放数据大小4K左右一般为5MB一般为5MB与服务器端通信每次都会携带在HTTP头中,如果使用cookie保存过多...转载 2019-08-12 12:12:51 · 117 阅读 · 0 评论 -
一个axios的简单教程
axios是什么Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。axios作用axios主要是用于向后台发起请求的,还有在请求中做更多可控功能。从浏览器中创建 XMLHttpRequests从 node.js 创建 http 请求支持 Promise API拦截请求和响应转换请求数据和响应数据取消请求自动转换 JSON 数据客...转载 2019-08-12 12:37:34 · 180 阅读 · 0 评论 -
如何通过JS获取元素宽高
方法一:DOM节点.offsetWidth/offsetHeight作用:获取到的是内容区域(content) + 内边距(padding) + 边框(border)的值,输出一个数字。 <style type="text/css"> div{ width: 100px; height: 100px; ...原创 2019-08-22 03:19:31 · 2050 阅读 · 0 评论 -
try-catch语句
try-catch 语句,作为 JavaScript 中处理异常的一种标准方式。基本的语法如下所示:try{ // 可能会导致错误的代码} catch(error){ // 在错误发生时怎么处理} 如果 try 块中的任何代码发生了错误,就会立即退出代码执行过程,然后接着执行 catch 块。此时,catch 块会接收到一个包含错误信息的对象。即使你不想使用这个错误对象,也要给它...原创 2019-08-17 01:15:40 · 73416 阅读 · 2 评论 -
正则表达式
//语法一let reg = new RegExp("正则表达式", "匹配模式");//语法二let reg = /正则表达式/匹配模式;匹配模式含义g全局匹配模式i忽略大小写m允许多行匹配元字符含义\d匹配数字\D匹配任意非数字的字符\s匹配空格\S匹配任意非空格的字符\w匹配字母或数字...原创 2019-08-26 21:15:17 · 133 阅读 · 0 评论 -
数组常用方法
Array.from(arrayLike[, mapFun[, thisArg]]) 方法从一个类似数组或可迭代对象中创建一个新的,浅拷贝的数组实例。Array.from('foo') // ["f", "o", "o"]Array.from([1, 2, 3], x => x + x) // [2, 4, 6]Array.isArray(obj) 用于确定传递的值是否是一个 Arr...原创 2019-09-03 20:03:13 · 169 阅读 · 0 评论 -
JavaScript 详说事件流(冒泡、捕获、传播、委托)
事件流事件流描述的是从页面中接收事件的顺序。标准DOM事件流存在三个阶段:事件捕获阶段、处于目标阶段和事件冒泡阶段。事件捕获:当触发事件时,浏览器会从根节点开始由外到内进行事件传播,即点击了子元素,如果父元素也绑定了对应事件的话,会先触发父元素绑定的事件。事件冒泡:与事件捕获恰恰相反,事件冒泡的顺序是由内到外进行事件传播,直到根节点。无论是事件捕获还是事件冒泡,它们都有一个共同的行为,就...原创 2019-09-11 16:26:24 · 214 阅读 · 0 评论 -
JS类型转换
首先我们要知道,在JS中类型转换只有三种情况,分别是:转换为布尔值转换为数字转换为字符串原始值转换目标结果null、undefined布尔值falsestring布尔值除了空串''其他都转为truenumber布尔值除了NaN、-0、0其他都转为truesymbol布尔值true引用数据类型布尔值truenull、...原创 2019-09-23 15:29:16 · 113 阅读 · 0 评论 -
onload、DOMContentLoaded、$(document).ready(fn)、$(document).load(fn)
特性onloadDOMContentLoaded$(document).ready(fn)$(document).load(fn)执行时机页面全部加载完才会执行DOM结构加载完毕就能执行DOM结构加载完毕就能执行页面全部加载完才会执行简写无无$(fn)或$().ready(fn)无执行次数可以使用addEventListener定义多个函数...原创 2019-10-04 18:30:17 · 391 阅读 · 1 评论 -
JS怎么判断一个变量的类型
typeoftypeof undefined //"undefined"typeof null //"object"typeof 123 //"number"typeof true //"boolean"typeof "hello" //"string"typeof Symbol() //"symbol"function fun(){};typeof fun //"functio...原创 2019-08-09 01:41:37 · 158 阅读 · 0 评论 -
JS中的==和===的区别
简单来说: == 代表相同, ===代表严格相同。这么理解: 当==进行比较时候: 先检查两个操作数数据类型,如果相同, 则进行===比较, 如果不同, 则进行一次类型转换, 转换成相同类型后再进行比较, 而===比较时, 如果类型不同,直接就是false。双等号==的比较过程:如果两个值类型相同,再进行三个等号(===)的比较;在转换不同的数据类型时,相等和不相等操作符遵循下列基...原创 2019-08-06 01:33:14 · 107 阅读 · 0 评论 -
JQuery的$.extend()的源码
jQuery.extend = jQuery.fn.extend = function() { //target 被扩展的对象 //length 参数的数量 //deep 是否深度操作 var options, name, src, copy, copyIsArray, clone, target = arguments[0] || {}, i = 1, leng...原创 2019-08-08 05:22:12 · 297 阅读 · 0 评论 -
HTML、CSS、JS对unicode编码字符的规则
HTML、CSS、JS对unicode编码字符的规则HTML、CSS和JS对unicode编码字符的规则是不同的,下面通过一个例子来说明有什么不同代码<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>例子</title> <scri...原创 2019-04-07 15:32:21 · 823 阅读 · 0 评论 -
关于数据属性特性configurable设置为false后的限制
对象属性有两种,一种是数据属性,另一种是访问器属性。数据属性有四个描述其行为的特性,分别为[[Configurable]]、[[Enumerable]]、[[Writable]]和[[Value]]。访问器属性有四个特性,分别为[[Configurable]]、[[Enumerable]]、[[Get]]和[[Set]]。var obj = { name : "XD"};像上面例子中...原创 2019-05-10 23:54:14 · 2648 阅读 · 1 评论 -
数据属性和访问器属性
JavaScript里面的对象是由属性和方法构成的。var obj = { name : "XD", //属性 sayName : function(){ //方法 alert("My name is " + this.name); }};而对象的属性有两种类型,一种是数据属性,一种是访问器属性。属性在创建时都带有一些特征值,JavaScript 通过这些特...原创 2019-05-15 23:00:26 · 1259 阅读 · 0 评论 -
apply()、call()与bind()的用法与区别
JavaScript中的 call() , apply() 和 bind() 都是Function.prototype下的方法,因此所有Function的实例对象(也就是函数)都可以使用这三个方法,这三个方法都是用于改变函数运行时上下文对象。...原创 2019-05-25 01:24:03 · 575 阅读 · 0 评论 -
JavaScript 中判断一个函数的 this 绑定
this 是一个很特别的关键字,被自动定义在所有函数的作用域中。this 实际上是在函数被调用时发生的绑定,它指向什么完全取决于函数在哪里被调用。this 有四种绑定规则,分别为:默认绑定、显式绑定、隐式绑定、new绑定。默认绑定:是没有应用其他绑定规则时使用的规则,通常是独立函数调用。这时 this 指向的是全局对象,在浏览器中是 window。严格模式下,不能将全局对象用于默认绑定,否则...原创 2019-05-26 22:21:37 · 205 阅读 · 0 评论 -
通过 JavaScript 获取/设置元素样式的方法
方法一:DOM节点.style.width / height作用:获取内联样式的width和height缺点:获取不到嵌入样式和外部样式的width和height。 <body> <div id="box1" style="width:200px;"></div> </body> <script> co...原创 2019-05-29 18:48:09 · 2749 阅读 · 0 评论 -
执行环境及作用域链
执行环境每个函数都有自己的执行环境。执行环境定义了变量或函数有权访问的其他数据,决定了它们各自的行为。每个执行环境都有一个与之关联的变量对象,环境中定义的所有变量和函数都保存在这个对象中。全局执行环境是最外围的一个执行环境。在 Web 浏览器中,全局执行环境被认为是 window 对象,因此所有全局变量和函数都是作为window 对象的属性和方法创建的。某个执行环境中的所有代码执行完毕...原创 2019-05-31 14:57:27 · 84 阅读 · 0 评论 -
闭包的理解、缺点以及应用场景
闭包是指有权访问另一个函数作用域中的变量的函数。创建闭包的常见方式,就是在一个函数内部创建另一个函数。当某个函数被调用时,会创建一个执行环境及相应的作用域链。然后,使用 arguments 和其他命名参数的值来初始化函数的活动对象。但在作用域链中,外部函数的活动对象始终处于第二位,外部函数的外部函数的活动对象处于第三位,……直至作为作用域链终点的全局执行环境。function fun(n...原创 2019-06-03 01:44:42 · 691 阅读 · 0 评论 -
函数中的 arguments
每个函数(非箭头)在被调用时都会自动取得两个特殊变量:this 和 arguments。内部函数在搜索这两个变量时,只会搜索到其活动对象为止。arguments 是一个类数组对象,里面保存着调用函数时传入的实参,第一个参数索引为0。(function(age,name){ console.log(arguments); //[23,"XD"] console.log(arguments....原创 2019-06-04 20:43:39 · 4097 阅读 · 1 评论 -
Array.prototype.slice.apply(arguments)和[].slice.apply(arguments)解析
我们知道,函数内部 arguments 是一个类数组对象,不是真正的数组,因此也无法使用数组的各种方法。想详细了解 argument 对象可以前往函数中的 arguments。(function fun(){ console.log(arguments.reverse()); //报错})();Array.prototype.slice.apply(arguments)和[].slic...原创 2019-06-09 22:04:54 · 2090 阅读 · 0 评论 -
JavaScript的垃圾回收机制
JavaScript 具有自动垃圾收集机制,执行环境会负责管理代码执行过程中使用的内存。在编写 JavaScript 程序时,开发人员不用再关心内存使用问题,所需内存的分配以及无用内存的回收完全实现了自动管理。这种垃圾收集机制的原理其实很简单:找出那些不再继续使用的变量,然后释放其占用的内存。垃圾收集器会按照固定的时间间隔(或代码执行中预定的收集时间),周期性地执行这一操作。具体到浏览器中的...原创 2019-07-06 13:59:37 · 86 阅读 · 0 评论 -
JavaScript数组去重的常用方法
方法一创建一个数组arr2,遍历需要去重的数组arr,如果arr2里面没有这个元素就push进去。 var arr = [1,2,3,1,2], arr2 = []; arr.forEach(element => { if(arr2.indexOf(element) === -1){ arr2.push(element)...原创 2019-07-02 20:10:00 · 164 阅读 · 0 评论 -
跨域
什么是跨域跨域是指一个域下的文档或脚本试图去请求另一个域下的资源。为什么要跨域因为所有浏览器都实行同源策略。什么是同源呢?两个页面地址中的协议、域名和端口号一致,则表示同源。而同源策略限制不同源页面的以下几种行为:Cookie、LocalStorage 和 IndexDB 无法读取DOM 和 Js对象无法获得AJAX 请求不能发送怎么跨域JSONP(JSON with Pad...原创 2019-07-20 15:23:39 · 156 阅读 · 0 评论 -
AJAX(异步的 JavaScript 和 XML)
AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。原创 2019-07-16 12:04:11 · 335 阅读 · 0 评论 -
JavaScript内存泄漏的几种情况
不再用到的内存,没有及时释放,就叫做内存泄漏(memory leak)。意外的全局变量原因:全局变量,不会被回收。解决:使用严格模式避免。函数中不使用var声明变量,则会将变量作为全局变量创建,因此也会作为window对象的属性保存。function fun(){ age = 18;}fun();console.log(window.age); //18直接调用函数,...原创 2019-07-20 17:02:41 · 279 阅读 · 0 评论 -
深浅拷贝
JS的数据类型分为两种,一种是基本数据类型,另一种是引用数据类型。基本数据类型有6种:undefined,null,number,boolean,string,symbol(ES6)。引用数据类型只有1种:object。JS中的变量都保存在栈内存中,对于基本数据类型,变量值保存的是基本数据类型的值;对于引用数据类型,浏览器会在堆内存中分配一块内存给它,而栈内存中的变量值保存的是这块内存的地址...原创 2019-07-31 22:33:16 · 215 阅读 · 0 评论 -
如何排查内存泄漏
工具:Chrome[kroʊm]任务管理器用来粗略地查看内存使用情况。入口在右上角三个点 -> 更多工具 -> 任务管理器,然后右键表头 -> 勾选JS使用的内存,主要关注两列:内存占用空间。表示原生内存,DOM节点存储在原生内存中,如果此值正在增大,则说明正在创建DOM节点;JS使用的内存。表示JS堆,此列包含两个值,需要关注的是实时值(括号中的数值)。实时数值...原创 2019-08-08 03:15:24 · 1230 阅读 · 0 评论 -
script标签中的defer和async属性
<script>标签中的defer属性和async属性的区别无论<script>标签是嵌入代码还是引用外部文件,只要不包含defer属性和async属性(这两个属性只对外部文件有效),浏览器会按照<script>的出现顺序对他们依次进行解析,也就是说,只有在第一个<script>中的代码执行完成之后,浏览器才会执行第二个<script>...原创 2019-01-20 18:52:51 · 6388 阅读 · 5 评论