js代码

js中的变量提升和函数提升

↘锁芯ラ 提交于 2020-01-14 11:51:43
1、在js中只有两种作用域 a:全局作用域 b:函数作用域 在ES6之前,js是没有块级作用域。 首先来解释一下什么是 没有块级作用 域? 所以此时 是可以打印输出变量a的值。 2、什么是变量提升? 在我们的js中,代码的执行时分两步走的(1、预解析 2、一步一步执行): 1.预解析阶段:首先会在 全局作用域 内,js解析器会找所有的 var 、function 、参数 ,并提前到当前作用域的最顶上去( 变量的赋值操作不会提前,还在原来的地方 ),此时并没有执行代码。 2.一步一步执行代码。在一步一步执行代码的阶段遇到了函数调用,于是进入到函数作用域内,又开始分两步骤走(1、预解析 2、一步一步执行)。以此类推。 那么变量提升就是变量声明会被提升到作用域的最顶上去 ,也就是该变量不管是在作用域的哪个地方声明的,都会提升到作作用域的最顶上去。 即变量可以在声明之前使用,值为 undefined 。 那么上面这种写法其实等价于下面这种写法: 看几个例子: A:全局作用域和函数作用域都定义某变量 B:把上面的例子稍作改动(全局作用域定义某变量,函数作用域不定义只使用该变量),结果就会大不一样: C:再看一个例子(全局作用域和块级作用域都定义某变量,实际上ES6前没有块级作用域): 3、什么是函数提升? 3.1、函数声明式定义函数: 输出的结果是: 注意:函数声明式

JS 之 引擎运行原理

一个人想着一个人 提交于 2020-01-14 11:06:13
今天跟大家分享下JS 之 引擎运行原理的知识。 1 一些名词 JS引擎 — 一个读取代码并运行的引擎,没有单一的“JS引擎”;,每个浏览器都有自己的引擎,如谷歌有V。 作用域 — 可以从中访问变量的“区域”。 词法作用域— 在词法阶段的作用域,换句话说,词法作用域是由你在写代码时将变量和块作用域写在哪里来决定的,因此当词法分析器处理代码时会保持作用域不变。 块作用域 — 由花括号{}创建的范围 作用域链 — 函数可以上升到它的外部环境(词法上)来搜索一个变量,它可以一直向上查找,直到它到达全局作用域。 同步 — 一次执行一件事, “同步”引擎一次只执行一行,JavaScript是同步的。 异步 — 同时做多个事,JS通过浏览器API模拟异步行为 事件循环(Event Loop) - 浏览器API完成函数调用的过程,将回调函数推送到回调队列(callback queue),然后当堆栈为空时,它将回调函数推送到调用堆栈。 堆栈 —一种数据结构,只能将元素推入并弹出顶部元素。 想想堆叠一个字形的塔楼; 你不能删除中间块,后进先出。 堆 — 变量存储在内存中。 调用堆栈 — 函数调用的队列,它实现了堆栈数据类型,这意味着一次可以运行一个函数。调用函数将其推入堆栈并从函数返回将其弹出堆栈。 执行上下文 — 当函数放入到调用堆栈时由JS创建的环境。 闭包 — 当在另一个函数内创建一个函数时,它

深入理解JS函数中this指针的指向

爱⌒轻易说出口 提交于 2020-01-14 08:52:40
函数在执行时,会在函数体内部自动生成一个this指针。谁 直接调用 产生这个this指针的函数 ,this就指向谁。 怎么理解指向呢,我认为指向就是等于。例如直接在js中输入下面的等式: console.log(this===window);//true 情况不同,this指向的对象也不同。例如: 1. 函数声明的情况 var bj=10; function add(){ var bj=20; console.log(this);//window console.log(this.bj);//10 console.log(bj);//20 console.log(this.bj+bj);//30 } add(); window.add(); (1) 执行了add()之后,此时的this指向的是window对象,为什么呢?因为这时候add是全局函数,是通过window 直接调用 的。所以下面我专门写了个window.add()就是为了说明,全局函数的this都是指向的window。 (2) 就像alert()自带的警告弹窗一样,window.alert()执行之后也是一样的效果。所以只要是 window点 这种调用方式都可以省略掉,因此警告弹窗可以直接使用alert()。 2. 函数表达式 var bj=10; var zjj=function(){ var bj=30;

js刷新页面方法

纵饮孤独 提交于 2020-01-14 04:17:54
1.刷新方法列表   最近常遇到js刷新页面的需求,就搜集了一些资料来整理一下常用的方法当做我的学习笔记和大家分享!   1、history.go(0)   2、location.reload()   3、location.replace(location)   4、location.assign(location)   5、window.navigate(location)   6、document.URL=location.href   7、document.execCommand('Refresh') 2.刷新方法解析 1, reload 方法,该方法强迫浏览器刷新当前页面。 语法:location.reload([bForceGet]) 参数: bForceGet, 可选参数, 默认为 false,从客户端缓存里取当前页。true, 则以 GET 方式,从服务端取最新的页面, 相当于客户端点击 F5("刷新") 2, replace 方法,该方法通过指定URL替换当前缓存在历史里(客户端)的项目,因此当使用replace方法之后,你不能通过“前进”和“后退”来访问已经被替换的URL。 语法: location.replace(URL) 通常使用: location.reload() 或者是 history.go(0) 来做。 此方法类似客户端点F5刷新页面

filter函数(JS)

我与影子孤独终老i 提交于 2020-01-14 03:34:27
filter函数 filter也是一个常用的操作,它用于把Array的某些元素过滤掉,然后返回剩下的元素。 和map()类似,Array的filter()也接收一个函数。和map()不同的是,filter()把传入的函数依次作用于每个元素,然后根据返回值是true还是false决定保留还是丢弃该元素。 例如,在一个Array中,删掉偶数,只保留奇数,可以这么写: var arr = [1, 2, 4, 5, 6, 9, 10, 15]; var r = arr.filter(function (x) { return x % 2 !== 0; }); r; // [1, 5, 9, 15] 把一个Array中的空字符串删掉,可以这么写: var arr = ['A', '', 'B', null, undefined, 'C', ' ']; var r = arr.filter(function (s) { return s && s.trim(); // 注意:IE9以下的版本没有trim()方法 }); arr; // ['A', 'B', 'C'] 可见用filter()这个高阶函数,关键在于正确实现一个“筛选”函数。 回调函数 filter()接收的回调函数,其实可以有多个参数。通常我们仅使用第一个参数,表示Array的某个元素。回调函数还可以接收另外两个参数

HTML与CSS学习基础总结

只谈情不闲聊 提交于 2020-01-14 01:55:13
HTML与CSS学习基础总结 先了解学习的知识点有哪些: HTML HTML指的是超文本标记语言(Hyper Text Markip Language),它不是一种编程语言而是一种标记语言,通过使用标签来描述网页。 CSS CSS (Cascading Style Sheets)是层叠样式表用来定义网页的显示效果。 可以解决html代码对样式定义的重复,提高了后期样式代码的可维护性,并增强了网页的显示效果功能。 简单一句话:CSS将网页内容和显示样式进行分离,提高了显示功能。 JS JS 全称(javascript)中文是java脚本的意思 。 它的由来(在互联网刚兴起的时候,网络速度比较慢,而体验又是放在服务器端的,所以用户体验度非常差,为了了解这一难题,网景公司发明了livescript liverscript主要把表单验证功能从后台提升到了前端,因为不依赖网络,所以用户体验比较好。 但是由于知名度比较差,知道的人很少,后来由于sum公司的java语言一飞冲天,爆红编程世界,为了跟风,博取知名度,网景公司把livescript 改成javascript. 后来微软眼红网景公司的成就,就发明了jscript。但是正因为此,导致了js的标准不同,所以给个大浏览器厂家带来了很大的麻烦。 为了有一个统一的标准,js被提交到一个ecma组织,也正因为此,后来的js都是采用ecma标准

JS技巧

有些话、适合烂在心里 提交于 2020-01-13 21:06:49
一 判断移动终端类型 1. 判断是否是IE浏览系统 isIE: function() { return (/msie/i).test(navigator.userAgent); } 2. 判断是否是Android浏览系统 isAndroid: function() { var isAndroid = false, androidVersion; if(navigator.userAgent.indexOf("Android") >= 0 ) { androidVersion = parseFloat(navigator.userAgent.slice(navigator.userAgent.indexOf("Android")+8)); if (androidVersion <= 2.4) { isAndroid = true; } } return isAndroid; } 3. 判断是否是Windows Phone 7浏览系统 fontFaceCheck: function() { if (/Windows Phone OS 7/.test(navigator.userAgent)) { Modernizr.fontface = false; $("html").removeClass("fontface").addClass("no-fontface"); } } 二 URL

冷门JS技巧

喜你入骨 提交于 2020-01-13 21:04:44
前端已经被玩儿坏了!像 console.log()可以向控制台输出图片 等炫酷的玩意已经不是什么新闻了,像用||操作符给变量赋默认值也是人尽皆知的旧闻了,今天看到Quora上一个 帖子 ,瞬间又GET了好多前端技能,一些属于技巧,一些则是闻所未闻的冷知识,一时间还消化不过来。现分类整理出来分享给大家,也补充了一些平时的积累和扩展了一些内容。 HTML篇 浏览器地址栏运行JavaScript代码 这个很多人应该还是知道的,在浏览器地址栏可以直接运行JavaScript代码,做法是以javascript:开头后跟要执行的语句。比如: javascript:alert('hello from address bar :)'); 将以上代码贴到浏览器地址栏回车后alert正常执行,一个弹窗神现。 需要注意的是如果是通过copy paste代码到浏览器地址栏的话,IE及Chrome会自动去掉代码开头的javascript:,所以需要手动添加起来才能正确执行,而Firefox中虽然不会自动去掉,但它根本就不支持在地址栏运行JS代码,sigh~ 这一技术在我的另一篇博文《 让Chrome 接管邮件连接,收发邮件更方便了 》中有使用到,利用在浏览器地址栏中执行JavaScript代码将Gmail设置为系统的邮件接管程序。 浏览器地址栏运行HTML代码 如果说上面那条小秘密知道的人还算多的话

js获取url参数值的几种方式

こ雲淡風輕ζ 提交于 2020-01-13 18:55:15
示例URL:https://editor.csdn.net/?a=1&b=2&c=3 方法一:采用正则表达式获取地址栏参数 (代码简洁,重点正则) function getQueryString ( name ) { let reg = new RegExp ( "(^|&)" + name + "=([^&]*)(&|$)" , "i" ) ; let r = window . location . search . substr ( 1 ) . match ( reg ) ; if ( r != null ) { return unescape ( r [ 2 ] ) ; } ; return null ; } console . log ( getQueryString ( 'a ) ) ; // 1 console . log ( getQueryString ( 'b ) ) ; // 2 方法二:split拆分法 (代码较复杂,较易理解) function getRequest ( ) { const url = location . search ; //获取url中"?"符后的字串 let theRequest = new Object ( ) ; if ( url . indexOf ( "?" ) != - 1 ) { let str = url .

求超大文件上传方案( js )

白昼怎懂夜的黑 提交于 2020-01-13 18:15:40
文件夹上传:从前端到后端 文件上传是 Web 开发肯定会碰到的问题,而文件夹上传则更加难缠。网上关于文件夹上传的资料多集中在前端,缺少对于后端的关注,然后讲某个后端框架文件上传的文章又不会涉及文件夹。今天研究了一下这个问题,在此记录。 先说两个问题: 是否所有后端框架都支持文件夹上传? 是否所有浏览器都支持文件夹上传? 第一个问题:YES,第二个问题:NO 只要后端框架对于表单的支持是完整的,那么必然支持文件夹上传。至于浏览器,截至目前,只有 Chrome 支持。 如果需要其它的浏览器支持则需要借助于插件,比如泽优大文件上传控件: www.webuploader.net 关于WebUploader的功能说明: 大文件上传续传 支持超大文件上传(100G+)和续传,可以关闭浏览器,重启系统后仍然继续上传。 开源 提供ASP.NET,JSP,PHP示例和源代码,其中JSP提供MySQL,Oracle,SQL Server数据库的配置和示例代码。 分片、并发 分片与并发结合,将一个大文件分割成多块,并发上传,极大地提高大文件的上传速度。 当网络问题导致传输错误时,只需要重传出错分片,而不是整个文件。另外分片传输能够更加实时的跟踪上传进度。 预览、压缩 支持常用图片格式jpg,jpeg,gif,bmp,png预览与压缩,节省网络数据传输。 解析jpeg中的meta信息