ECMAScript
可乐雪碧薄荷糖
这个作者很懒,什么都没留下…
展开
-
【Vue温故】es6深拷贝
这里两个重点1.同过hashMap记录该对象是否已经被拷贝,从而避免对象循环赋值报错2.通过origin.constructor即可拿到原型构造方法,不需要去toString判断对象是数组还是对象类型 function deepClone(origin,hashMap = new WeakMap()){ if(origin == undefined || typeof origin !=='object'){ return origin; }原创 2022-01-24 18:07:08 · 404 阅读 · 0 评论 -
网络-6【http版本、关闭TCP、四次挥手、同源策略】
一.HTTP协议版本(1).HTTP/0.9仅支持GET请求方式仅能请求访问HTML格式的资源(2).HTTP/1.0增加POST和HEAD请求方式支持多种数据格式的请求与访问支持cache缓存功能新增状态码,多字符集支持,内容编码等早期HTTP/1.0不支持keep-alive长连接,只支持串行连接后期HTTP/1.0增加Connection:keep-alive字段(非标准字段),开始支持长连接(3).HTTP/1.1增加持久连接(默认开启Connecti原创 2020-11-24 10:19:22 · 190 阅读 · 0 评论 -
ECMAScript扩展 -18 【浅谈从DOM操作到虚拟DOM】
一.虚拟DOM(1).原理通过JS去模拟DOM结构(2).结构{ tag: 'ul',//标签 attrs:{//属性 id: 'list' }, children:[//子元素 { tag: 'li', attrs: {className: 'list-item'}, children: ['first item'] }, { tag: 'li',原创 2020-11-23 08:49:26 · 115 阅读 · 0 评论 -
ECMAScript扩展 -17 【从头探究this关键字】
一.this指向总结非严格模式下函数内部this指向window 严格模式下指向本身 对象中this指向对象本身 构造函数this指向实例化对象 原型中的this指向实例化对象 事件中的this指向绑定了该事件的元素二.Timeout更改this指向setTimeout/setIntalval默认指向都是window可以这么改this指向setTimeout(function(){ }.bind(this), 2000)...原创 2020-11-23 08:46:09 · 62 阅读 · 0 评论 -
ECMAScript扩展 -16 【函数防抖、函数节流、防抖和节流的应用】
一.函数防抖(1).特性1.对于在事件被触发n秒后再执行的回调(延迟执行)2.如果在这n秒内再触发事件,重新开始计时(无效触发)(2).简单说明var oBox = document.getElementsByClassName('box')[0];var t = null;oBox.onmouseover = function(){ clearTimeout(t);//如果不清除函数会一直延迟全部执行,违背第二特性 //实现第一条特性 t = setT原创 2020-11-23 08:44:39 · 85 阅读 · 0 评论 -
ECMAScript扩展 -15 【图片的预加载与懒加载】
一.虚拟DOM(1).原理通过JS去模拟DOM结构(2).结构{ tag: 'ul',//标签 attrs:{//属性 id: 'list' }, children:[//子元素 { tag: 'li', attrs: {className: 'list-item'}, children: ['first item'] }, { tag: 'li',原创 2020-11-20 09:57:01 · 154 阅读 · 0 评论 -
ECMAScript扩展 -14 【从头探究this关键字】
一.this指向总结非严格模式下函数内部this指向window 严格模式下指向本身 对象中this指向对象本身 构造函数this指向实例化对象 原型中的this指向实例化对象 事件中的this指向绑定了该事件的元素二.Timeout更改this指向setTimeout/setIntalval默认指向都是window可以这么改this指向setTimeout(function(){ }.bind(this), 2000)...原创 2020-11-20 09:53:12 · 102 阅读 · 0 评论 -
ECMAScript扩展 -13 【函数防抖、函数节流、防抖和节流的应用】
一.函数防抖(1).特性1.对于在事件被触发n秒后再执行的回调(延迟执行)2.如果在这n秒内再触发事件,重新开始计时(无效触发)(2).简单说明var oBox = document.getElementsByClassName('box')[0];var t = null;oBox.onmouseover = function(){ clearTimeout(t);//如果不清除函数会一直延迟全部执行,违背第二特性 //实现第一条特性 t = setT原创 2020-11-20 09:52:27 · 171 阅读 · 0 评论 -
ECMAScript扩展 -12 【图片的预加载与懒加载】
一.图片预加载(1).多张图片通过实例化Image对象 调用onload方法来实现(onload之后)var oDiv = document.getElementsByClassName('div')[0], img = ['https://zza.jpg', 'https://zzb.jpg']; img.forEach(function(elem){ var oImg = new Image(); oImg.src = elem;原创 2020-11-20 09:48:55 · 225 阅读 · 0 评论 -
ECMAScript扩展 -11 【封装byClassName、断点测试】
一.封装byClassName要考虑Class中有很多类名的情况Document.prototype.getElementsByClassName =Element.prototype.getElementsByClassName =document.getElementsByClassName || function(className){ var allDoms = this.getElementsByTagName(*), allDomsLen = allDo原创 2020-11-20 09:46:49 · 98 阅读 · 0 评论 -
ECMAScript扩展 -10 【标签的属性与特性、Math方法】
一.标签的属性与特性定义<input type="text" id="username" value="张三" data-name="zza"/>标签原本就有的属性可以叫做特性而没有的就叫做属性input type id value ->特性 属性data-name 属性.语法访问读写用.语法可以取出特性的值,但是取不出非特性的值,并不是标签原有的非特性属性也是无法通过.语法修改的getAttribure访问读写oInput.原创 2020-11-19 09:43:24 · 91 阅读 · 0 评论 -
ECMAScript扩展 -9 【重写bind方法】
一.重写bind方法bind定义与call区别p1.play.call(p2, '男'); // call会改变this指向并立即执行p1.play.bind(p2, ['男', 20]); //bind会改变this指向后返回一个新的函数,不执行bind挂载在Function.prototype上无参的重写Function.prototype.bindy = function(context){ var _self = this; return funct原创 2020-11-19 09:41:49 · 188 阅读 · 0 评论 -
ECMAScript扩展 -8 【放大模式-宽放大模式】
一.放大模式(augmentation)用注入的方式实现模块间的继承也叫做模块化的发大模式var mod2 = (function(mod){ var test4 = function(){ mod.test1(); }, test5 = function(){ mod.test2(); }, test6 = function(){ mod.test3(); } return{原创 2020-11-19 09:39:05 · 185 阅读 · 0 评论 -
ECMAScript扩展 -7 【工具函数写法-同步-异步加载的三种方法-企业级异步加载】
一.工具函数写法一个对象赋值给了一个变量,这个变量就是这个对象的命名空间写工具函数的方法:var utils = { test: function(){ console.log('test'); }, demo: function(){ console.log('demo'); }}Element.prototype = { elemChildren: function(){ }}..原创 2020-11-19 09:37:13 · 145 阅读 · 0 评论 -
ECMAScript扩展 -6 【前端缓存数据设计、前端缓存池】
一.重点代码实现缓存池思路声明对象缓存池变量,在ajax请求时以page页数作为键名存储,再在click事件中判断需要ajax还是缓存池function getAjaxData(){ $.ajax({ url: 'http://study.jsplusplus.com/Lfcourses/getCourses', type: 'POST', dataType: 'JSON', ..原创 2020-11-19 09:35:11 · 265 阅读 · 2 评论 -
ECMAScript扩展 -5 模板渲染、缓存数据
模板<script type="text/html" id="js-tpl"> <li class="photolist-item"> <div class="item-shade"> <div class="item-shade-post" >{{post}}</div> <div c原创 2020-11-18 11:24:43 · 115 阅读 · 0 评论 -
ECMAScript扩展 -4 【JSON入门】
一.JSON基础(1)基础说明javaScript Object Notation用于数据交互 是轻量的var jsonData ={ "a": 1, "b": 2, "c": 3}(2).三大数据类型scalar标量: 字符串和数字 sequence序列: 数组和列表 mapping映射: 键值对(3).声明方式键名一定要用双引号映射用冒号隔开"name": "张三"并列映射用逗号隔开"name": "张三",原创 2020-11-18 11:20:15 · 124 阅读 · 0 评论 -
ECMAScript扩展 -3 【实战】带搜索功能的课程选项卡
一.模板的替换<script type="text/html" id="J_cardItemTpl"> <li class="card-item"> <a class="img-lk"> <img src="img/{{img}}" alt=""> </a>原创 2020-11-18 11:18:20 · 119 阅读 · 0 评论 -
ECMAScript扩展 -2 【every-some-reduce-reduceRight使用与重写】
一.every(1).every如果有一个不满足条件就停止遍历,条件就是return后面的表达式 返回一个boolvar res = data.every(function(elem, index, array){ return elem.isfree =='0';},{name: 'test'})(2).every重写Array.prototype.myEvery = function(fn){ var arr = this, len =原创 2020-11-18 11:16:31 · 141 阅读 · 0 评论 -
ECMAScript扩展 -1 【数组扩展方法 forEach-filter-map使用与重写】
一.forEach(1).JSONJSON对象var JSON = { "id" : "1", "name" : "zza"}Json对象集合/数据集合var JSON = [ { "id" : "1", "name" : "zza" }, { "id" : "2", "name" : "zza" },]Json转换字符串 -> 对象 JSON.parse对象 -> 字原创 2020-11-18 11:12:39 · 133 阅读 · 0 评论 -
DOM-5 【滚动距离与高度-可视尺寸-兼容模式】
一.滚动距离与高度(1).查看滚动条的距离常规window.pageXOffset/pageYOffsetIE9/IE8及以下怪异:document.body.scrollLeft/scrollTop标准:document.documentElement.scrollLeft/scrollTop两者只能存其一不常见window.scrollx/scrolly二.可视尺寸(窗口的宽高)(1).可视窗口尺寸常规window.innerWid原创 2020-11-16 10:42:53 · 343 阅读 · 0 评论 -
ECMAScript-20 总结 【ECMA算法笔试汇总】
打印0-100的数(()只能有一句,不能写比较 {}不能出现)var i=100;for(;i--;){ consle.log(i);}n的乘阶var n = 4;var sum =1;for( var i=1; i<=n;i++){ sum*=i }console.log(sum);n的阶乘递归var mony=window.prompt();function salc(mony){ if(mony<1){ re.原创 2020-11-15 13:27:16 · 122 阅读 · 0 评论 -
ECMAScript-19 总结 【ECMA理论面试汇总】
undefined==null?var a1= undefined ==0;//falsevar a2 = null==0;//falsevar a3 = undefined == null//true下面的代码输出是什么?解释其原理。var a = [1, 2];var b = [3, 4];console.log(a + b); //输出?输出结果是“1,23,4”原理:a + b运算操作中,a和b用“+”连接,使得a和b都要先进行隐式强制类型转换,再做“..原创 2020-11-15 13:20:24 · 186 阅读 · 0 评论 -
ECMAScript-18 【错误信息-trycatch-严格模式-垃圾回收原理】
一.错误信息(1).SyntaxError语法错误//变量命名不规范var 1 = 1;var 1ab = 1;//关键字赋值new = 5;function = 1;//基本语法错误var a = 5:(2).ReferenceError引用错误//变量或者函数未被声明test();console.log(a);//给无法被赋值的对象赋值的时候var a = 1 = 2;var a = 1;console.log(a) = 1; (原创 2020-11-15 13:11:39 · 560 阅读 · 0 评论 -
ECMAScript-17 【去重-封装typeof()】
一.去重(1).数组,对象方法var arrs=[1, 1, 2, 2, 3, 4, 6, 3, 6,'a','a'];Array.prototype.unique=function(){ var obj={ // 'splice':Array.prototype.splice, // 'push':Array.prototype.push } var arr=[]; for(var i=0;i<this.length;i++){ if(obj[this[i]]===u原创 2020-11-15 13:03:00 · 110 阅读 · 0 评论 -
ECMAScript-16 【数组方法-类数组】
一.数组方法(1).concat()var arr1=['a', 'b', 'c'];console.log(arr1);//(3) ["a", "b", "c"]var arr2=['d', 'e', 'f'];console.log(arr2);//(3) ["d", "e", "f"]var arr3=arr1.concat(arr2);//(6) ["a", "b", "c", "d", "e", "f"]console.log(arr3);两个数组合并(2).toStr原创 2020-11-15 13:00:06 · 151 阅读 · 0 评论 -
ECMAScript-15 【数组基础-数组方法-数组排序】
一.数组基础(1).数组的声明var arr1=[];//数组字面量var arr2=new Array();//不推荐//通过系统内置的Array构造函数声明赋值var arr3 = Array();//不使用(2).数组的继承所有数组都继承于Array.prototype,数组就是对象的另一种形式(3).emptyvar arr=[,,]console.log(arr);console.log(arr.length)//2结果:(4).稀松数组va原创 2020-11-15 12:50:59 · 193 阅读 · 0 评论 -
ECMAScript-14 【三目运算-对象克隆-浅拷贝、深拷贝】
一.三目运算(1).基本结构a > 0 ? console.log('大于0') //这里可以写注释 :console.log('小于等于0');这么写整洁一点也好写注释,也记住?后面的语句就不要加上分号了(2).接收结果可以直接接收结果var str = a > 0 ? '大于0' :'小于0'(3).嵌套str = a > 0 ?( a > 3 ? '大于3'原创 2020-11-15 12:38:25 · 220 阅读 · 0 评论 -
ECMAScript-13 【对象遍历属性-this-caller_callee】
一.对象遍历属性(1).链式操作var sched={ wakeup:function(){ console.log('a'); return this; }, wakeupa:function(){ console.log('za'); return this; }, wakeupb:function(){ console.log('zza'); return原创 2020-11-15 12:32:33 · 260 阅读 · 0 评论 -
ECMAScript-12 【继承深入-call-apply-圣杯模式-模块化-常见继承方式】
一.继承深入(1).继承概念function Person(){ }Person.prototype.name='Lucy';var p=new Person();p的name属性是继承于Pearson的,一个构造函数的原型属性是他这个构造函数构造出来的所有对象的公共祖先(2).继承原型Professor.prototype={ name:'ZZa', tSkill:'JAVA'}function Professor(){}var professo原创 2020-11-15 12:17:57 · 225 阅读 · 0 评论 -
ECMAScript-11 【原型原型链深入-对象继承-call-apply】
一.原型原型链深入(1).定义所有的对象都有原型,包括原型本身(2).原型链代码解释Professor.prototype.tSkill='Java'function Professor(){}var professor=new Professor();Teacher.prototype=professorfunction Teacher(){ this.mSkill='JS/JQ';}var teacher=new Teacher();Student.pr..原创 2020-11-15 12:04:49 · 266 阅读 · 0 评论 -
ECMAScript-10 【原型-原型链-闭包立即执行函数-插件开发】
一.原型(1).prototype定义console.log(Handphone.prototype);原型prototype是函数中的一个属性,打印出来其实也是对象这个prototype是定义构造函数构造出的每个对象的公共祖先所有被该构造函数构造出的对象都可以继承原型上的属性和方法function Handphone(color,brand){ this.color=color; this.brand=brand; this.screen='18:9'; this.s原创 2020-11-13 11:16:08 · 252 阅读 · 0 评论 -
ECMAScript-9 【构造函数原理-实例化原理-包装类】
一.构造函数原理、实例化原理(1).this指向说明没有被实例化之前this指向的是window,实例化过后指向的是对象而不是构造函数本身而对象中的this是指向自己的function Car(color,brand){ this.color=color; this.brand=brand;}var car1=new Car('red','Benz');var car2=new Car('black','Mazda');console.log(car1.color)//re..原创 2020-11-13 11:10:20 · 260 阅读 · 0 评论 -
ECMAScript-8 【对象-构造函数-实例化】
一.对象(1).对象的创建与属性的增删改查var teacher={ name:'张三', age:32, sex:'male', height:176, weight:130, teach:function(){ console.log('I am teaching Java') }, smoke:function(){ console.log('I am smoking') }, e原创 2020-11-13 11:04:59 · 330 阅读 · 0 评论 -
ECMAScript-7 【立即执行函数-闭包深入-逗号运算符】
一.立即执行函数(1).定义//常用方式(function(){})();//w3c建议(function(){}())立即执行函数中写函数名没有用,访问会报错因为执行完就销毁了(2).立即执行函数传参(function(a,b){ console.log(a+b);}(2,4));(3).接收参数var num=(function(a,b){ return a+b;}(2,4));这样就可以接收立即执行函数的返回值了(4)...原创 2020-11-13 11:01:56 · 313 阅读 · 0 评论 -
ECMAScript-6 【作用域-作用域链-预编译-闭包基础】
一.作用域,作用域链,预编译(1).示例function test(a,b){ }console.log(test.length)//输出2 参数的长度说明 其实函数也是一种引用类型 对象类型 引用值但是有些属性是我们无法访问的js引擎内部固有的隐式属性(2).[[scope]]作用域链1.函数创建时,生成的一个js内部隐式属性2.函数存储作用域链的容器,作用域链存储AO/GO函数执行完成后,AO都是要销毁的AO是一个即时的存储容器(3).流原创 2020-11-13 10:54:16 · 174 阅读 · 0 评论 -
ECMAScript-5 【参数默认值-递归-预编译-暗示全局变量】
一.参数默认值(1).形参默认值//1.第一种情况function test(a=1,b){ console.log(a); console.log(b);}test(undefined,3); //输出1,3//1.第二种情况function test(a=3,b){ console.log(a); console.log(b);}test(4,3);//输出4,3这种赋值方式只在es6中生效,现在先不考虑为什么赋值默认值后arguments不生效会原创 2020-11-12 11:25:20 · 238 阅读 · 0 评论 -
ECMAScript-4 【函数基础与种类-形实参及映射-变量类型】
一.函数基础与种类(1).函数命名规则不能以数字开头 字母 _$ 开头 可以包含数字 建议小驼峰命名法(2).表达式,字面量var test =function test1(){ var a=1, b=2; console.log(a,b)}test1();这时会报错referencevar test =function test1(){ var a=1, b=2; console.log(a,b)}test();正原创 2020-11-12 11:19:37 · 200 阅读 · 0 评论 -
ECMAScript-3 【循环-引用值初识-显示及隐式类型转换】
一.循环(1).特殊书写方式var i = 1;for(;i;){ console.log(i); i++; if(i==11){ i=0; }}循环时只去判断i等于true(1)时才循环为0是不循环的示例1:打印0-100的数(()只能有一句,不能写比较 {}不能出现)var i=100; for(;i--;){ consle.log(i); }示例2:n的阶乘var n=5; var num =1; for..原创 2020-11-12 11:12:17 · 812 阅读 · 1 评论 -
ECMAScript-2 【错误-运算符-判断分支-注释】
一.错误(1).语法错误(SyntaxError)整个代码不执行(2).通用错误(ReferenceError)执行错误之前的代码代码块中的错误不影响其他代码块执行二.运算符(1).运算符优先级括号运算>普通运算>赋值(2).+运算符任何数据类型+字符串=字符串var c='c'+undefined;//cundefined(3)./运算符 0/0=NaN>Not a Number 非数 NaN 数字类型 infinity 数..原创 2020-11-12 10:27:39 · 248 阅读 · 0 评论