版权声明:署名,允许他人基于本文进行创作,且必须基于与原先许可协议相同的许可协议分发本文 (Creative Commons

可能有些小伙伴不知道ES6的写法,这儿先填写一个小例子


let connter = (res => {
for(var count = 1; ; count++){
console.log(count+'A');
if(count ===5){
return;
}
console.log(count+'B');
}
})(0)
    <div class="hljs-button {2}" data-title="复制"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li></ul></pre>
<p>注意:这儿采用了箭头函数。</p>
<p>下面我们正式找出不一样:</p>
<pre class="prettyprint"><code class="has-numbering" onclick="mdcp.copyCode(event)">
// ES6闭包
let makeAdder =(x =&gt;{
return (y=&gt;{
return x+y;
})
}) var add5 = makeAdder(5);
console.log(add5(2));//7 var add6 = makeAdder(10);
console.log(add10(2));//12
<div class="hljs-button {2}" data-title="复制"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li><li style="color: rgb(153, 153, 153);">12</li><li style="color: rgb(153, 153, 153);">13</li><li style="color: rgb(153, 153, 153);">14</li></ul></pre>
<p>下面是ES5的闭包</p>
<pre class="prettyprint"><code class="has-numbering" onclick="mdcp.copyCode(event)">
//es5语法闭包
function makeAdder2(x) {
return function(y) {
return x + y;
};
} var add8 = makeAdder2(8);
console.log(add8(2));//10 var add9 = makeAdder2(10);
console.log(add8(2));//12 <div class="hljs-button {2}" data-title="复制"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li><li style="color: rgb(153, 153, 153);">12</li><li style="color: rgb(153, 153, 153);">13</li><li style="color: rgb(153, 153, 153);">14</li><li style="color: rgb(153, 153, 153);">15</li><li style="color: rgb(153, 153, 153);">16</li><li style="color: rgb(153, 153, 153);">17</li></ul></pre>
<p>从上面可以看出,输出的过值都是一样的,但ES6使代码更简洁,更具有高效性,在性能上超过ES5。</p> </div>
<link href="https://csdnimg.cn/release/phoenix/mdeditor/markdown_views-e44c3c0e64.css" rel="stylesheet">
</div>

posted on
2019-08-03 22:26 
xsDao 
阅读(...) 
评论(...) 
编辑 
收藏

JavaScript ES6和ES5闭包的小demo的更多相关文章

  1. 一个基于ES5的vue小demo

    由于现在很多vue项目都是基于ES6开发的,而我学vue的时候大多是看vue官网的API,是基于ES5的,所以对于刚接触项目的我来说要转变为项目的模块化写法确实有些挑战.因此,我打算先做一个基于ES5 ...

  2. 一个基于ES6+webpack的vue小demo

    上一篇文章<一个基于ES5的vue小demo>我们讲了如何用ES5,vue-router做一个小demo,接下来我们来把它变成基于ES6+webpack的demo. 一.环境搭建及代码转换 ...

  3. JavaScript Learning Paths(ES5/ES6/ES-Next)

    JavaScript Learning Paths(ES5/ES6/ES-Next) JavaScript Expert refs https://developer.mozilla.org/en-U ...

  4. es6转es5

    一.在没有IDE情况下的转换 在"我的电脑->D盘”新建个文件夹es6,文件夹里新建一个文件es6.js. 打开命令行窗口 1.先全局安装babel-cli,输入命令 npm inst ...

  5. [转]JavaScript ES6 class指南

    [转]JavaScript ES6 class指南 前言 EcmaScript 2015 (又称ES6)通过一些新的关键字,使类成为了JS中一个新的一等公民.但是目前为止,这些关于类的新关键字仅仅是建 ...

  6. 一周一个小demo — 前端后台的交互实例

    这一周呢,本K在大神的指导下,完成了一个利用ajax与php文件上传处理相结合的一个留言板功能的小实例,下面就让本K来带大家瞅瞅如何实现这一种功能. 一.界面概览 首先我们来看一下这个小demo的具体 ...

  7. JavaScript ES6 新特性详解

    JavaScript ES6 带来了新的语法和新的强大功能,使您的代码更现代,更易读 const ,  let and var 的区别: const , let 是 ES6 中用于声明变量的新关键字. ...

  8. 我认知的javascript之作用域和闭包

    说到javascript,就不得不说javascript的作用域和闭包:当然,还是那句老话,javascript在网上都说得很透彻了,我也就不过多的强调了: 作用域:javascript并没有像其他的 ...

  9. JavaScript ES6 核心功能一览

    JavaScript 在过去几年里发生了很大的变化.这里介绍 12 个你马上就能用的新功能. JavaScript 历史 新的语言规范被称作 ECMAScript 6.也称为 ES6 或 ES2015 ...

随机推荐

  1. 【Linux杂记】Linux配置静态IP地址,修改主机名、host

    博主使用的系统是:乌班图16.04 1.设置静态IP方法如下: #sudo vim /etc/network/interfaces #修改如下部分: auto eth0//ipconfig命令查看网卡 ...

  2. 编译php扩展

    在php编译安装好的情况下php扩展编译 php的很多模块都是以php的扩展形式来进行的.所以在php安装好的环境下需要用到之前安装时没有编译安装的php扩展的时候,这个时候编译安装php扩展就显得尤 ...

  3. 你需要知道的c# Timer 的垃圾回收机制。

    通常我们需要定时执行一段任务的时候,我们就需要定时器,这时我们就可以使用c# System.Threading空间中的 Timer定时器;他是个异步定时器,时间到时每次都是在线程池中分配一个线程去执行 ...

  4. Jquery实现搜索功能

    <script> //搜索功能 (function ($) { jQuery.expr[':'].Contains = function (a, i, m) { return (a.tex ...

  5. JS 数据类型分析及字符串的方法

    1.js数据类型分析 (1)基础类型:string.number.boolean.null.undefined (2)引用类型:object-->json.array... 2.点运算  xxx ...

  6. 03-Spring profile实用精简版介绍

    为什么说是实用精简版,没办法,工作太忙压力大啊,菜是原罪啊,所以接下来写的一些博客可能都是更偏实用性,精简点,方便自己回顾,快速上手使用即可,毕竟感觉不详细还有书不是吗. profile是用来干什么的 ...

  7. mac 添加new file.md

    1. 打开mac自带的"Automator",文稿类型选择应用程序:   2. 选择:实用工具 -> 运行 AppleScript  3. 黏贴如下代码到上图的右侧,c ...

  8. 并发编程-concurrent指南-原子操作类-AtomicInteger

    在java并发编程中,会出现++,--等操作,但是这些不是原子性操作,这在线程安全上面就会出现相应的问题.因此java提供了相应类的原子性操作类. 1.AtomicInteger

  9. flink window实例分析

    window是处理数据的核心.按需选择你需要的窗口类型后,它会将传入的原始数据流切分成多个buckets,所有计算都在window中进行. flink本身提供的实例程序TopSpeedWindowin ...

  10. 记一次linux服务器入侵应急响应

    近日接到客户求助,他们收到托管电信机房的信息,通知检测到他们的一台服务器有对外发送攻击流量的行为.希望我们能协助排查问题. 一.确认安全事件 情况紧急,首先要确认安全事件的真实性.经过和服务器运维人员 ...