一些关于es6简单的介绍与了解。初始认知有限,循序完善。

ES6:

又叫ES2015,是2015年推出的JavaScript新版本。

相应的,后边推出的ES7、8、9、10等都依次是上一版本发出后一年的新迭代版本。不过很多仍是提案,并不被浏览器支持。

现在普遍使用es6、7,但仍然需要工具进行编译转换成es5的语法。这个工具就是babel(后表)。

ES6及后边版本的语言进行迭代的目的:

让JavaScript越来越好用、越来越强大,逐渐完善到成为企业级的开发语言。

我们为什么要学习ES6:【优点】

语言迭代自然是弥补之前语言的不足,或者让原有语言更加规范、更加简便易用。

所以ES6在原有基础上增加了一些语法糖,引入了一些新特性。使得es更加规范、易操作,简化了项目的复杂程度,降低出错率,提高开发效率。

以let出现来说,就是因为js没有块级作用域的概念,新人使用经常遇到的一个出错点就像下边这样的代码:

【也是面试高频的埋雷题】

请问点击每一个li,打印的是什么?

如果想点击li输出对应的索引要怎么改?

这个问题对于学到这里的我们应该很easy了,因为i是全局的,所以打印i的时候会取window上的i,此时for循环完i就是li.length的值。即无论点击哪个li,得到的结果都是同一个数。

平时我们解决时,可能会创建一个立即执行函数包裹住click事件的绑定,存储不同的i值到不同的函数作用域中,最后利用闭包的原理输出不同的i值以实现打印索引的需求。

这也就暴露了var声明变量的弱点。所以就有了let的出现。

使用let我们轻松修改,就能达到上边的需求:

相对上边的代码只改了一个单词,不可以说es6不好用。

不足:

因为低版本浏览器的不支持,就需要Babel工具进行转换。

感受一下:同样是上边那段使用let的代码(图三),

经过babel编译成es5语言后,实现了我们需要的功能。但是我们开发的时候只需要写let就可以了,还是灰常方便的。

可以看出编译后的原理还是利用了函数作用域和闭包[/偷笑]

babel的基础配置见下篇。

ES6 - 开篇的更多相关文章

  1. React与ES6(一)开篇介绍

    React与ES6系列: React与ES6(一)开篇介绍 React和ES6(二)ES6的类和ES7的property initializer React与ES6(三)ES6类和方法绑定 React ...

  2. React与ES6(四)ES6如何处理React mixins

    React与ES6系列: React与ES6(一)开篇介绍 React和ES6(二)ES6的类和ES7的property initializer React与ES6(三)ES6类和方法绑定 React ...

  3. React与ES6(三)ES6类和方法绑定

    React与ES6系列: React与ES6(一)开篇介绍 React和ES6(二)ES6的类和ES7的property initializer React与ES6(三)ES6类和方法绑定 React ...

  4. React和ES6(二)ES6的类和ES7的property initializer

    React与ES6系列: React与ES6(一)开篇介绍 React和ES6(二)ES6的类和ES7的property initializer React与ES6(三)ES6类和方法绑定 React ...

  5. 最新的JavaScript核心语言标准——ES6,彻底改变你编写JS代码的方式!【转载+整理】

    原文地址 本文内容 ECMAScript 发生了什么变化? 新标准 版本号6 兑现承诺 迭代器和for-of循环 生成器 Generators 模板字符串 不定参数和默认参数 解构 Destructu ...

  6. 深入浅出ES6(十):集合

    作者 Jason Orendorff  github主页  https://github.com/jorendorff 前段时间,官方名为“ECMA-262,第六版,ECMAScript 2015语言 ...

  7. ES6躬行记(19)——生成器

    根据ES6制订的标准自定义迭代器实现起来比较复杂,因此ES6又引入了生成器的概念,生成器(Generator)是一个能直接创建并返回迭代器的特殊函数,可将其赋给可迭代对象的Symbol.iterato ...

  8. ES6躬行记(17)——Map

    一.Map Map类似于Object(对象),可用来存储键值对,但需要通过SameValueZero算法保持键的唯一性.与Set一样,在使用之前也得要实例化,如下代码所示,构造函数Map()中的参数也 ...

  9. 最新的JavaScript核心语言标准——ES6,彻底改变你编写JS代码的方式!

    原文地址 迁移到:http://www.bdata-cap.com/newsinfo/1741515.html 本文内容 ECMAScript 发生了什么变化? 新标准 版本号6 兑现承诺 迭代器和f ...

随机推荐

  1. Java判断两个时间相差的天数

    1.实现目标 输入:两个日期 输出:两个日期相差的天数 2.代码实现 方法1: 通过Calendar类的日期比较.注意:这里需要考虑一下: 日期是跨年份的,如一个是2012年,一个是2015年的   ...

  2. jQuery选择器与过滤器(二)

    一.jQuery选择器1.基本选择器:所有选择器    *标签选择器    标签名ID选择器    #ID类选择器    .className组合选择器    selector1,selector2 ...

  3. Javascript/js 的浅拷贝与深拷贝(复制)学习随笔

    js变量的数据类型值分基本类型值和引用类型值. 在ES6(ECMAScript6)以前,基本数据类型包括String.Number.Boolean.Undefined.Null. 基本类型值的复制(拷 ...

  4. Linux配置swap

    根据自己的物理内存分配合适的swap大小 下面是合适的配置 物理内存 交换分区(swap) <=4G 至少2G 4-16G 至少4G 16G-64 至少8G 下面是操作步骤 1.首先查看我们的内 ...

  5. Python 迭代器,错误、异常处理

    迭代器 迭代器可以用来遍历字符串.列表.元组.集合.字典. myString="hello" myIter=iter(myString) ##iter()函数可以获取元素集的一个迭 ...

  6. AOP的动态实现cglib和jdk

    动态代理的两种实现以:cglib和jdk,spring的aop(切面)的实现原理就是采用的动态代理技术. 看完代码.动态代理的作用是什么: Proxy类的代码量被固定下来,不会因为业务的逐渐庞大而庞大 ...

  7. JS判断是否是数组的四种做法(转载)

    转载来源 https://www.cnblogs.com/echolun/p/10287616.html 一.前言 如何判断一个对象或一个值是否是一个数组,在面试或工作中我们常常会遇到这个问题,既然出 ...

  8. Windows Server 2008 R2 忘记密码的处理方法

    这篇文章主要介绍了Windows Server 2008 R2 忘记密码的处理方法,一般两种方法,一种是软件方法一种是通过系统安装盘实现的,这里久违大家分享一下需要的朋友可以参考下 遗忘Windows ...

  9. 蓝桥杯如何训练?(附VIP题库)

    https://www.dotcpp.com/ 给大家介绍下蓝桥杯,是近几年可以说国内名气最大的程序设计类比赛了 相比国际赛事ACM,蓝桥杯入门简单.中文答题.拿奖率高,更适合国内大众化参加,近几年不 ...

  10. Linux不管上一条命令成功还是失败都执行下一个命令的方法

    转载请注明来源https://www.cnblogs.com/sogeisetsu/p/11407830.html Linux不管上一条命令成功还是失败都执行下一个命令的方法 Linux不管上一条命令 ...