1,var let const对比 1,箭头函数的总结 /** * 1,箭头函数没有this,箭头函数this没有被箭头的函数,所以不能使用call,apply,bind改变this指向 * 2,箭头函数没有arguments,但是可以访问外围 * 3,不能通过new关键字调用,会报错 * 4,没有new.所有就没有prototype,还有super */…

问题背景 最近做了一个webapp项目,qa用手机测试功能时,在iphone6plus上表现是白屏,其他手机目测是ok的:因为之前在测试其他项目时也发现在这个iphone6上表现与其他手机不太一样.于是当时以为这个手机出了什么问题,或者其版本过低:就不放在心上. 然而这次白屏的影响还是要加以重视,于是在空闲的时候主动看了下,用VSCosole查看了日志信息,控制台报了一个警告信息: unexception token const ... 然后看了加载的js源码,竟然发现一个大坑: 代码没有压缩…

最近在学习es6的Promise,其中涉及到了Promsie的事件执行机制,因此总结了关于Promise的执行机制,若有错误,欢迎纠错和讨论. 在阮一峰老师的书中<es6 标准入门>对Promise的基础知识做出了详细的介绍,在此就不一一介绍了,直接开始整体,将Promsie中关于事件执行机制的问题与大家分享. 1.Promsie对象的创建以及执行顺序 创建方式:new Promise(function(resolve,reject){ //...} 这种方式在阮老师的书中指出该函数一旦创建,…

0.导言 ES6中新增了不少的新特性,来点测试题热热身.具体题目来源请看:http://perfectionkills.com/javascript-quiz-es6/. 以下将一题一题来解析what和why. 1.题目一 (function(x, f = () => x) { var x; var y = x; x = 2; return [x, y, f()]; })(1) A. [2, 1, 1] B. [2, undefined, 1] C. [2, 1, 2] D. [2, undef…

近期ES6标准如火如荼的发展,其中主要还是各大浏览器的支持,最重要厂商支付宝,微信的支持,使得国内的发展也很迅猛. 这里主要是对yield关键字的,yield实际上可以看作是一种新的中断机制,大家都知道javascript函数执行是顺序的,中途没有暂停,等待消息只能通过回调或者settimeout等延迟检查来完成. 有些示例说yield和线程有关系,不过我在官方示例中没看出来,好了进入主题,先来看看官方示例. function *foo(x){ var y=2*(yield(x+1)); var…

块级作用域声明let.constES6中const 和let的功能,转换为ES5之后,我们会发现实质就是在块级作用改变一下变量名,使之与外层不同.ES6转换前: let a1 = 1; let a2 = 6; { let a1 = 2; let a2 = 5; { let a1 = 4; let a2 = 5; } } a1 = 3; 转换ES5后: let a1 = 1; let a2 = 6; { let a1 = 2; let a2 = 5; { let a1 = 4; let a2 =…

原文链接:http://damobing.com/?p=589 前言 箭头函数作为es6重点的语法内容之一,很多开发者对其爱不释手,当也要注意其可能存在的问题,其正确的使用场景,否则会引起不必要的bug. 语法 //场景1 没有参数,空的小括号,返回值不用加 return,也就是说支持单一表达式,如果加return 需要构成语句 var demo=()=>5675; //场景2 :只有一个参数 ,小括号省略 var demo=num1=>5675; //场景3:有多个参数 var demo=(…

箭头函数=>无疑是ES6中最受关注的一个新特性了,通过它可以简写 function 函数表达式,你也可以在各种提及箭头函数的地方看到这样的观点——“=> 就是一个新的 function”. 箭头函数的句法规则甚至早已延伸到各项标准和技术文档中去了,虽然它早已不稀奇,却给我们一种刚刚发现的新鲜感.  粉我的人都知道俺因为某些原因不怎么喜欢 => 的语法,不过别担心,本文并非讲述我为何不喜欢它,如果你对这个观点感兴趣,可以查看我<YDKJS:ES6 & Beyonf>一书…

React无疑是今年最火的前端框架,github上的star直逼30,000,基于React的React Native的star也直逼20,000.有了React,组件化似乎不再步履蹒跚,有了React Native,前端的边界似乎广阔无边.而Webpack凭借它异步加载和可分离打包等优秀的特性,走在取代Grunt和Gulp的路上.而面向未来的ES6,模块化的支持似乎已成定局. 我们现在就可以打造自己的Webpack+React+ES6环境并且开始探索起来. 这篇文章就给还没走在这条路上的前端一…

form 转化为真正的数组 先说一下使用场景,在Js中,我们要经常操作DOM,比如获取全部页面的input标签,并且找到类型为button的元素,然后给这个按钮注册一个点击事件,我们可能会这样操作: var inputObjs=document.getElementsByTagName('input'); for(var i=0;i<inputObjs.length;i++){ if(inputObjs[i].type==='button'){ inputObjs[i].onclick=func…

什么是JavaScript JavaScript一种动态类型.弱类型.基于原型的客户端脚本语言,用来给HTML网页增加动态功能.(好吧,概念什么最讨厌了) 动态: 在运行时确定数据类型.变量使用之前不需要类型声明,通常变量的类型是被赋值的那个值的类型. 弱类: 计算时可以不同类型之间对使用者透明地隐式转换,即使类型不正确,也能通过隐式转换来得到正确的类型. 原型: 新对象继承对象(作为模版),将自身的属性共享给新对象,模版对象称为原型.这样新对象实例化后不但可以享有自己创建时和运行时定义的属性,…

前言 用 React + Redux 已经一段时间了,记得刚开始用Redux 的时候感觉非常绕,总搞不起里面的关系,如果大家用一段时间Redux又看了它的源码话,对你的理解会有很大的帮助.看完后,在回来看Redux,有一种 柳暗花明又一村 的感觉 . 源码 我分析的是用 es6 语法的源码,大家看目录结构,一共有 6 个问件.先说下各个文件大概功能. applyMiddlewar.js 使用自定义的 middleware 来扩展 Redux bindActionCreators.js 把 act…

一.前言       第一次看koajs的示例时,发现该语句 function *(next){...............} ,这是啥啊?于是搜索一下,原来这是就是ES6的新特性Generator Function(生成器函数). 那什么是生成器函数呢?其实就相当于C#2.0中通过yield关键字实现的迭代器的生成器(细节有所不同),那么理解的关键就在迭代器和yield关键字两部分了.下面将尝试从表象出发,逐步对生成器函数及利用它进行异步编程进行浅层的分析理解. 二.表象——语法及基本使用…

原文:http://ariya.ofilabs.com/2013/07/es6-and-proxy.html 能够拦截在一个对象上的指定操作的能力是非常有用的,尤其是在故障调试的时候.通过ECMAScript 6中的新特性——代理(proxy),这种能力才最终得以实现. 在目前最新的ES6规范草案中(2013年5月14日发布,第15次修订版),第15.18小节——代理对象(Proxy Objects)这部分的文档仍然是空的.不过随着规范的日趋稳定,这里会补充上完整的参考文档的.目前,可以在ES…

angular代码分析之异常日志设计 错误异常是面向对象开发中的记录提示程序执行问题的一种重要机制,在程序执行发生问题的条件下,异常会在中断程序执行,同时会沿着代码的执行路径一步一步的向上抛出异常,最终会由顶层抛出异常信息.而与异常同时出现的往往是日志,而日志往往需要记录具体发生异常的模块.编码.详细的错误信息.执行堆栈等,方便问题的快速定位分析.angularjs作为前端的框架,其对异常信息的处理是怎样的呢? 一.定义模块和异常类型 首先每个模块的日志模块编码是一样的,只需要本模块负责初始化一…

0.导言 最近从coffee切换到js,代码量一下子变大了不少,也多了些许陌生感.为了在JS代码中,更合理的使用ES6的新特性,特在此对ES6的特性做一个简单的总览. 1.模块(Module) --Chrome测试不可用 在ES6中,有class的概念,不过这只是语法糖,并没有解决模块化问题.Module功能则是为了解决模块化问题而提出的. 我们可以使用如下方式定义模块: 11_lib.js文件内容 // 导出属性和方法 export var PI = 3.1415926; export fun…

原文来自我的前端博客: http://www.hacke2.cn/arrow-functions-and-their-scope/ 在ES6很多很棒的新特性中, 箭头函数 (或者大箭头函数)就是其中值得关注的一个! 它不仅仅是很棒很酷, 它很好的利用了作用域, 快捷方便的在现在使用以前我们用的技术, 减少了很多代码……但是如果你不了解箭头函数原理的话可能就有点难以理解. 所以,让我们来看下箭头函数, 就是现在! 执行环境 你可以自己去学习和尝试下, 你可以简单的把示例程序代码复制到你的浏览器控制…

这节主要讲解真正项目用用到的 webpack配置问题,项目实战篇 就像我们不会完全做一个项目,不用别人的轮子一样.这个配置我们借用 vue-cli 搭建的配置来研究,因为它已经足够优秀. 有了前面的基础,这节快速切入主题. 文章目录 1. 用 vue-cli脚手架 初始化项目 2. 学习分析vue-cli的配置 2.1. 目录结构 2.2. config目录 2.3. build目录,webpack配置精华 2.3.1. webpack.base.conf.js 2.3.2. webpack.d…

普通函数: $scope.$on('$stateChangeSuccess',function(){this.list = this.getList();}); 箭头函数: $scope.$on('$stateChangeSuccess',()=>{this.list = this.getList();}); 上面的代码是在es6中class的constructor体中的语句.函数的作用是调用该模块中的getList函数,将函数的返回值赋值给class中的list值.从写法上来看两种不同的写法表…

对于javascript来说,类是一种可选(而不是必须)的设计模式,而且在JavaScript这样的[[Prototype]] 语言中实现类是很蹩脚的. 这种蹩脚的感觉不只是来源于语法,虽然语法是很重要的原因.js里面有许多语法的缺点:繁琐杂乱的.prototype 引用.试图调用原型链上层同名函数时的显式伪多态以及不可靠.不美观而且容易被误解成“构造函数”的.constructor. 除此之外,类设计其实还存在更进一步的问题.传统面向类的语言中父类和子类.子类和实例之间其实是复制操作,但是在[…

前言 这一篇与上一篇 JS几种变量交换方式以及性能分析对比 属于同一个系列,本文继续分析JS中几种常用的数组遍历方式以及各自的性能对比 起由 在上一次分析了JS几种常用变量交换方式以及各自性能后,觉得这种方式挺好的,于是抽取了核心逻辑,封装成了模板,打算拓展成一个系列,本文则是系列中的第二篇,JS数组遍历方式的分析对比 JS数组遍历的几种方式 JS数组遍历,基本就是for,forin,foreach,forof,map等等一些方法,以下介绍几种本文分析用到的数组遍历方式以及进行性能分析对比 第一…

原文地址 本文内容 ECMAScript 发生了什么变化? 新标准 版本号6 兑现承诺 迭代器和for-of循环 生成器 Generators 模板字符串 不定参数和默认参数 解构 Destructuring 箭头函数 Arrow Functions Symbols 集合 学习Babel和Broccoli,马上就用ES6 代理 Proxies ES6 说自己的宗旨是"凡是新加入的特性,势必已在其它语言中得到强有力的实用性证明."--TRUE!如果你大概浏览下 ES6 的新特性,事实上它…

basket.js 源码分析 一.前言 basket.js 可以用来加载js脚本并且保存到 LocalStorage 上,使我们可以更加精准地控制缓存,即使是在 http 缓存过期之后也可以使用.因此可以使我们防止不必要的重新请求 js 脚本,提升网站加载速度. 可以到 basket.js 的 Github 上查看更多的相关信息. 由于之前在工作中使用过 basket.js ,好奇它的实现原理,因此就有了这篇分析 basket.js 源码的文章. 二.简单的使用说明 basket.js 的使用非…

React无疑是今年最火的前端框架,github上的star直逼30,000,基于React的React Native的star也直逼20,000.有了React,组件化似乎不再步履蹒跚,有了React Native,前端的边界似乎广阔无边.而Webpack凭借它异步加载和可分离打包等优秀的特性,走在取代Grunt和Gulp的路上.而面向未来的ES6,模块化的支持似乎已成定局. 我们现在就可以打造自己的Webpack+React+ES6环境并且开始探索起来. 这篇文章就给还没走在这条路上的前端一…

作者:寸志链接:https://zhuanlan.zhihu.com/p/19569085来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 总的说来就是按照将来的标准书写,现在使用工具来适配. 我们已经有了服务端的依赖管理方案 安装并声明依赖: 在代码中获取(require)依赖: 将通用的代码打包并发布到同一个地方.(npm.gems等等) 浏览器端的依赖管理远远没有完成,并且现在情况看上去很糟糕 有各种各样的模块规范: 有很多包管理工具: 通用的代码被打包,到处…

作者:Sequoia McDowell 2016年01月16日 ES6来啦!随着越来越多的代码库和思潮引领者开始在他们的代码中使用ES6,以往被认为是"仅需了解"的ES6特性变成了必需的代码常识.这不仅仅是新的语法学习 - 在许多范例中, ES6中新的语言特性可以让在ES5中写起来非常麻烦的表达变得更加简单,进而鼓励了新表达方式的使用.下面我们将关注一个这样简洁表达的使用范例:ES6中的箭头函数如何使高阶函数的书写更加简便. 高阶函数是至少具有以下两种功能之一的函数: 使用一个或多个函…

OneHeap 关注于运行中的 JavaScript 内存信息的展示,用可视化的方式还原了 HeapGraph,有助于理解 v8 内存管理. 背景 JavaScript 运行过程中的大部分数据都保存在堆 (Heap) 中,所以 JavaScript 性能分析另一个比较重要的方面是内存,也就是堆的分析. 利用 Chrome Dev Tools 可以生成应用程序某个时刻的堆快照 (HeapSnapshot),它较完整地记录了各种对象和引用的情况,堪称查找内存泄露问题的神器. 和 Profile 结果…

作者 Jason Orendorff  github主页  https://github.com/jorendorff 反撇号(`)基础知识 ES6引入了一种新型的字符串字面量语法,我们称之为模板字符串(template strings).除了使用反撇号字符 ` 代替普通字符串的引号 ' 或 " 外,它们看起来与普通字符串并无二致.在最简单的情况下,它们与普通字符串的表现一致: context.fillText(`Ceci n'est pas une chaîne.`, x, y); 但是我们并…

1.概述 ES5的对象属性名都是字符串,这容易造成属性名的冲突.比如,你使用了一个他人提供的对象,但又想为这个对象添加新的方法(mixin模式),新方法的名字就有可能与现有方法产生冲突.如果有一种机制,保证每个属性的名字都是独一无二的就好了,这样就从根本上防止属性名的冲突.这就是ES6引入Symbol的原因. ES6引入了一种新的原始数据类型Symbol,表示独一无二的值.它是JavaScript语言的第七种数据类型,前六种是:Undefined.Null.布尔值(Boolean).字符串(St…

深入浅出 ES6指的是添加在 ECMASript 标准第六版中的 JavaScript 编程语言的新特性,简称为 ES6. 虽然 ES6 刚刚到来,但是人们已经开始谈论 ES7 了,它未来的样子,以及新标准能提供哪些光鲜亮丽的特性.作为网络开发者,我们想的则是如何将这些特性都用上.在之前的深入浅出 ES6 贴文中,我们曾多次鼓励读者朋友使用 ES6 在一些小工具的帮助下编写代码.并这样调戏你们: 如果你想在网络上使用这个新语法,你可以使用 Babel (一款 JS 编译器)或谷歌的 Traceu…