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的基础配置见下篇。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JS和jQuery的区别

    一、本质上的区别 1.JavaScript 是通过标签插入到HTML页面,可由所有的现代浏览器执行的一种轻量级的编程语言。

    葆宁
  • mysql8+mybatis-plus3.1自动生成带lombok和swagger和增删改查接口

    完美集成lombok,swagger的代码生成工具,让你不再为繁琐的注释和简单的接口实现而烦恼:entity集成,格式校验,swagger; dao自动加@ m...

    边鹏 [进阶者]
  • Flutter 可以缩放拖拽的图片

    在pub上面找了下,没有发现一个效果跟微信一样的支持缩放拖拽效果的image,所以就自己撸了一个,之前写过Flutter 什么功能都有的Image,于是就在这个...

    Android技术干货分享
  • 基于three.js的3D粒子动效实现 顶

    粒子特效是为模拟现实中的水、火、雾、气等效果由各种三维软件开发的制作模块,原理是将无数的单个粒子组合使其呈现出固定形态,借由控制器、脚本来控制其整体或单个的运动...

    个推君
  • 使用 Vue CLI 3 封装组件

    在时不时遇到”似曾相识“的 UI 模块时,我们下意识的反应一定是”不然把它抽成一个组件吧“。Element-UI 就是这样想法的集大成者。

    kmokidd
  • 为 Spring Boot 应用添加 Redis Caching

    中大型应用开发中,缓存的重要性不言而喻,早期常用的进程式类的缓存,像 EhCache 或者是 ConcurrentHashMap 这样的容器,发展到如今,更流行...

    happyJared
  • 2019面试题:简单介绍下Ajax

    首先Ajax是Asynchronous JavaScript and XML的全称,Asynchronous是异步的意思,这跟传统的web不同。Ajax是Web...

    葆宁
  • Dart代码生成器PART ONE

    在开发Flutter的过程中,会发现:json解析怎么这么麻烦,数据库存储怎么这么多步骤,当你在重复编写这一个又一个步骤时,会发现,复制粘贴过程中因为某一个变量...

    rhyme_lph
  • Java抽象類實例

    葆宁
  • 聊一聊C# 8.0中的await foreach

    很开心今天能与大家一起聊聊C# 8.0中的新特性-Async Streams,一般人通常看到这个词表情是这样.

    码农阿宇

扫码关注云+社区

领取腾讯云代金券