30分钟快速入门掌握ES6/ES2015的核心内容(上)


Posted in Javascript onApril 18, 2018

前言

ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准。因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015。

也就是说,ES6就是ES2015。

虽然目前并不是所有浏览器都能兼容ES6全部特性,但越来越多的程序员在实际项目当中已经开始使用ES6了。所以就算你现在不打算使用ES6,但为了看懂别人的你也该懂点ES6的语法了...

在我们正式讲解ES6语法之前,我们得先了解下Babel。

Babel

Babel是一个广泛使用的ES6转码器,可以将ES6代码转为ES5代码,从而在现有环境执行。大家可以选择自己习惯的工具来使用使用Babel,具体过程可直接在Babel官网查看:

30分钟快速入门掌握ES6/ES2015的核心内容(上)

最常用的ES6特性

let, const, class, extends, super, arrow functions, template string, destructuring, default, rest arguments
这些是ES6最常用的几个语法,基本上学会它们,我们就可以走遍天下都不怕啦!我会用最通俗易懂的语言和例子来讲解它们,保证一看就懂,一学就会。

let, const

这两个的用途与var类似,都是用来声明变量的,但在实际运用中他俩都有各自的特殊用途。

首先来看下面这个例子:

var name = 'zach'
while (true) {
 var name = 'obama'
 console.log(name) //obama
 break
}
console.log(name) //obama

使用var 两次输出都是obama,这是因为ES5只有全局作用域和函数作用域,没有块级作用域,这带来很多不合理的场景。第一种场景就是你现在看到的内层变量覆盖外层变量。而let则实际上为JavaScript新增了块级作用域。用它所声明的变量,只在let命令所在的代码块内有效。

let name = 'zach'
while (true) {
 let name = 'obama'
 console.log(name) //obama
 break
}
console.log(name) //zach

另外一个var带来的不合理场景就是用来计数的循环变量泄露为全局变量,看下面的例子:

var a = [];
for (var i = 0; i < 10; i++) {
 a[i] = function () {
 console.log(i);
 };
}
a[6](); // 10

上面代码中,变量i是var声明的,在全局范围内都有效。所以每一次循环,新的i值都会覆盖旧值,导致最后输出的是最后一轮的i的值。而使用let则不会出现这个问题。

var a = [];
for (let i = 0; i < 10; i++) {
 a[i] = function () {
 console.log(i);
 };
}
a[6](); // 6

再来看一个更常见的例子,了解下如果不用ES6,而用闭包如何解决这个问题。

var clickBoxs = document.querySelectorAll('.clickBox')
for (var i = 0; i < clickBoxs.length; i++){
 clickBoxs[i].onclick = function(){
  console.log(i)
 }
}

我们本来希望的是点击不同的clickBox,显示不同的i,但事实是无论我们点击哪个clickBox,输出的都是5。下面我们来看下,如何用闭包搞定它。

function iteratorFactory(i){
 var onclick = function(e){
  console.log(i)
 }
 return onclick;
}
var clickBoxs = document.querySelectorAll('.clickBox')
for (var i = 0; i < clickBoxs.length; i++){
 clickBoxs[i].onclick = iteratorFactory(i)
}

const也用来声明变量,但是声明的是常量。一旦声明,常量的值就不能改变。

const PI = Math.PI
PI = 23 //Module build failed: SyntaxError: /es6/app.js: "PI" is read-only

当我们尝试去改变用const声明的常量时,浏览器就会报错。

const有一个很好的应用场景,就是当我们引用第三方库的时声明的变量,用const来声明可以避免未来不小心重命名而导致出现bug:

const monent = require('moment')

class, extends, super

这三个特性涉及了ES5中最令人头疼的的几个部分:原型、构造函数,继承...你还在为它们复杂难懂的语法而烦恼吗?你还在为指针到底指向哪里而纠结万分吗?

有了ES6我们不再烦恼!

ES6提供了更接近传统语言的写法,引入了Class(类)这个概念。新的class写法让对象原型的写法更加清晰、更像面向对象编程的语法,也更加通俗易懂。

class Animal {
 constructor(){
  this.type = 'animal'
 }
 says(say){
  console.log(this.type + ' says ' + say)
 }
}

let animal = new Animal()
animal.says('hello') //animal says hello
class Cat extends Animal {
 constructor(){
  super()
  this.type = 'cat'
 }
}

let cat = new Cat()
cat.says('hello') //cat says hello

上面代码首先用class定义了一个“类”,可以看到里面有一个constructor方法,这就是构造方法,而this关键字则代表实例对象。简单地说,constructor内定义的方法和属性是实例对象自己的,而constructor外定义的方法和属性则是所有实例对象可以共享的。

Class之间可以通过extends关键字实现继承,这比ES5的通过修改原型链实现继承,要清晰和方便很多。上面定义了一个Cat类,该类通过extends关键字,继承了Animal类的所有属性和方法。

super关键字,它指代父类的实例(即父类的this对象)。子类必须在constructor方法中调用super方法,否则新建实例时会报错。这是因为子类没有自己的this对象,而是继承父类的this对象,然后对其进行加工。如果不调用super方法,子类就得不到this对象。

ES6的继承机制,实质是先创造父类的实例对象this(所以必须先调用super方法),然后再用子类的构造函数修改this。

P.S 如果你写react的话,就会发现以上三个东西在最新版React中出现得很多。创建的每个component都是一个继承React.Component的类。详见react文档

arrow function

这个恐怕是ES6最最常用的一个新特性了,用它来写function比原来的写法要简洁清晰很多:

function(i){ return i + 1; } //ES5
(i) => i + 1 //ES6

简直是简单的不像话对吧...

如果方程比较复杂,则需要用{}把代码包起来:

function(x, y) { 
 x++;
 y--;
 return x + y;
}
(x, y) => {x++; y--; return x+y}

除了看上去更简洁以外,arrow function还有一项超级无敌的功能!

长期以来,JavaScript语言的this对象一直是一个令人头痛的问题,在对象方法中使用this,必须非常小心。例如:

class Animal {
 constructor(){
  this.type = 'animal'
 }
 says(say){
  setTimeout(function(){
   console.log(this.type + ' says ' + say)
  }, 1000)
 }
}

 var animal = new Animal()
 animal.says('hi') //undefined says hi

运行上面的代码会报错,这是因为setTimeout中的this指向的是全局对象。所以为了让它能够正确的运行,传统的解决方法有两种:

1.第一种是将this传给self,再用self来指代this

says(say){
  var self = this;
  setTimeout(function(){
   console.log(self.type + ' says ' + say)
  }, 1000)

2.第二种方法是用bind(this),即

says(say){
  setTimeout(function(){
   console.log(this.type + ' says ' + say)
  }.bind(this), 1000)

但现在我们有了箭头函数,就不需要这么麻烦了:

class Animal {
 constructor(){
  this.type = 'animal'
 }
 says(say){
  setTimeout( () => {
   console.log(this.type + ' says ' + say)
  }, 1000)
 }
}
 var animal = new Animal()
 animal.says('hi') //animal says hi

当我们使用箭头函数时,函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象。

并不是因为箭头函数内部有绑定this的机制,实际原因是箭头函数根本没有自己的this,它的this是继承外面的,因此内部的this就是外层代码块的this。

template string

这个东西也是非常有用,当我们要插入大段的html内容到文档中时,传统的写法非常麻烦,所以之前我们通常会引用一些模板工具库,比如mustache等等。

大家可以先看下面一段代码:

$("#result").append(
 "There are <b>" + basket.count + "</b> " +
 "items in your basket, " +
 "<em>" + basket.onSale +
 "</em> are on sale!"
);

我们要用一堆的'+'号来连接文本与变量,而使用ES6的新特性模板字符串``后,我们可以直接这么来写:

$("#result").append(`
 There are <b>${basket.count}</b> items
 in your basket, <em>${basket.onSale}</em>
 are on sale!
`);

用反引号(\)来标识起始,用${}`来引用变量,而且所有的空格和缩进都会被保留在输出之中,是不是非常爽?!

React Router从第1.0.3版开始也使用ES6语法了,比如这个例子:

<Link to={`/taco/${taco.name}`}>{taco.name}</Link>

React Router

destructuring

ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring)。

看下面的例子:

let cat = 'ken'
let dog = 'lili'
let zoo = {cat: cat, dog: dog}
console.log(zoo) //Object {cat: "ken", dog: "lili"}

用ES6完全可以像下面这么写:

let cat = 'ken'
let dog = 'lili'
let zoo = {cat, dog}
console.log(zoo) //Object {cat: "ken", dog: "lili"}

反过来可以这么写:

let dog = {type: 'animal', many: 2}
let { type, many} = dog
console.log(type, many) //animal 2

default, rest

default很简单,意思就是默认值。大家可以看下面的例子,调用animal()方法时忘了传参数,传统的做法就是加上这一句type = type || 'cat' 来指定默认值。

function animal(type){
 type = type || 'cat' 
 console.log(type)
}
animal()

如果用ES6我们而已直接这么写:

function animal(type = 'cat'){
 console.log(type)
}
animal()

最后一个rest语法也很简单,直接看例子:

function animals(...types){
 console.log(types)
}
animals('cat', 'dog', 'fish') //["cat", "dog", "fish"]

而如果不用ES6的话,我们则得使用ES5的arguments。

总结

以上就是ES6最常用的一些语法,可以说这20%的语法,在ES6的日常使用中占了80%...

好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
jquery 1.4.2发布!主要是性能与API
Feb 25 Javascript
JS.findElementById()使用介绍
Sep 21 Javascript
jQuery点击其他地方时菜单消失的实现方法
Apr 22 Javascript
JavaScript对象创建模式实例汇总
Oct 03 Javascript
JS经典正则表达式笔试题汇总
Dec 15 Javascript
JS 实现 ajax 异步浏览器兼容问题
Jan 21 Javascript
vue-router:嵌套路由的使用方法
Feb 21 Javascript
在JS中如何把毫秒转换成规定的日期时间格式实例
May 11 Javascript
写给小白看的JavaScript异步
Nov 29 Javascript
对vue里函数的调用顺序介绍
Mar 17 Javascript
JavaScript对象拷贝与Object.assign用法实例分析
Jun 20 Javascript
vant-ui组件调用Dialog弹窗异步关闭操作
Nov 04 Javascript
原生js实现拖拽功能基本思路详解
Apr 18 #Javascript
一个基于react的图片裁剪组件示例
Apr 18 #Javascript
JS实现对json对象排序并删除id相同项功能示例
Apr 18 #Javascript
Angular ng-animate和ng-cookies用法详解
Apr 18 #Javascript
JS实现的base64加密解密操作示例
Apr 18 #Javascript
JS实现简单获取最近7天和最近3天日期的方法
Apr 18 #Javascript
详解Node使用Puppeteer完成一次复杂的爬虫
Apr 18 #Javascript
You might like
mysql时区问题
2008/03/26 PHP
在php和MySql中计算时间差的方法详解
2015/03/27 PHP
php实现用手机关闭计算机(电脑)的方法
2015/04/22 PHP
javascript html 静态页面传参数
2009/04/10 Javascript
33种Javascript 表格排序控件收集
2009/12/03 Javascript
JQuery为textarea添加maxlength属性的代码
2010/04/07 Javascript
分享8款优秀的 jQuery 加载动画和进度条插件
2012/10/24 Javascript
利用JS延迟加载百度分享代码,提高网页速度
2013/07/01 Javascript
jquery ajax的success回调函数中实现按钮置灰倒计时
2013/11/19 Javascript
jQuery标签替换函数replaceWith()的使用例子
2014/08/28 Javascript
js实现单击图片放大图片的方法
2015/02/17 Javascript
javascript下拉列表菜单的实现方法
2015/11/18 Javascript
Javascript中的几种继承方式对比分析
2016/03/22 Javascript
jQuery实现右下角可缩放大小的层完整实例
2016/06/20 Javascript
手机端点击图片放大特效PhotoSwipe.js插件实现
2016/08/24 Javascript
解析javascript图片懒加载与预加载的分析总结
2016/10/27 Javascript
简单实现node.js图片上传
2016/12/18 Javascript
element-ui组件table实现自定义筛选功能的示例代码
2019/03/15 Javascript
Vue 组件注册全解析
2020/12/17 Vue.js
[02:25]DOTA2英雄基础教程 虚空假面
2014/01/02 DOTA
pandas数据分组和聚合操作方法
2018/04/11 Python
python网络应用开发知识点浅析
2019/05/28 Python
python实现通过队列完成进程间的多任务功能示例
2019/10/28 Python
python不到50行代码完成了多张excel合并的实现示例
2020/05/28 Python
pandas apply多线程实现代码
2020/08/17 Python
Python创建简单的神经网络实例讲解
2021/01/04 Python
python爬虫scrapy框架之增量式爬虫的示例代码
2021/02/26 Python
e路東瀛(JAPANiCAN)香港:日本旅游、日本酒店和温泉旅馆预订
2018/11/21 全球购物
材料物理专业大学毕业生求职信
2013/10/15 职场文书
中介公司区域经理岗位职责范本
2014/03/02 职场文书
全国优秀教师事迹材料
2014/08/26 职场文书
人与自然的观后感
2015/06/18 职场文书
领导欢送会主持词
2015/07/06 职场文书
2016年国庆节67周年活动总结
2016/04/01 职场文书
python 如何做一个识别率百分百的OCR
2021/05/29 Python
Win11怎么修改电源模式?Win11修改电源模式的方法
2022/04/05 数码科技