ES6/ES2015核心内容

时间  2019-12-08
标签 es6 es2015 核心 内容 栏目 JavaScript 繁體版
原文   原文链接
ECMAScript定义了：
JS语言语法 – 语法解析规则、关键字、语句、声明、运算符等。
类型 – 布尔型、数字、字符串、对象等。
原型和继承
内建对象和函数的标准库 – JSON、Math、数组方法、对象自省方法等。
ECMAScript标准不定义HTML或CSS的相关功能，也不定义相似DOM（文档对象模型）的Web API，这些都在独立的标准中进行定义。ECMAScript涵盖了各类环境中JS的使用场景，不管是浏览器环境仍是相似node.js的非浏览器环境。
ECMAScript标准的历史版本分别是一、二、三、5。 2009年发布的改进版本ES5，引入了Object.create()、Object.defineProperty()、getters和setters、严格模式以及JSON对象。
通过持续几年的磨砺，它已成为JS有史以来最实质的升级，新的语言和库特性就像无主之宝，等待有识之士的发掘。新的语言特性涵盖范围甚广，小到受欢迎的语法糖，例如箭头函数（arrow functions）和简单的字符串插值（string interpolation），大到烧脑的新概念，例如代理（proxies）和生成器（generators）。
下面转载一篇很不错的文章：30分钟掌握ES6/ES2015核心内容

ECMAScript 6（如下简称ES6）是JavaScript语言的下一代标准。由于当前版本的ES6是在2015年发布的，因此又称ECMAScript 2015。javascript

也就是说，ES6就是ES2015。php

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

在咱们正式讲解ES6语法以前，咱们得先了解下Babel。
Babeljava

Babel是一个普遍使用的ES6转码器，能够将ES6代码转为ES5代码，从而在现有环境执行。你们能够选择本身习惯的工具来使用使用Babel，具体过程可直接在Babel官网查看：
node

最经常使用的ES6特性

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

let, const

这两个的用途与var相似，都是用来声明变量的，但在实际运用中他俩都有各自的特殊用途。
首先来看下面这个例子：webpack

  
  
  
  
  

   
   
   
   
   
  
   

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

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

  
  
  
  
  

   
   
   
   
   
  
   

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

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

  
  
  
  
  

   
   
   
   
   
  
   

  
  
  
  
  
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(self.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。

import export

这两个家伙对应的就是es6本身的module功能。

咱们以前写的Javascript一直都没有模块化的体系，没法将一个庞大的js工程拆分红一个个功能相对独立但相互依赖的小工程，再用一种简单的方法把这些小工程链接在一块儿。

这有可能致使两个问题：

  1. 一方面js代码变得很臃肿，难以维护;

  2. 另外一方面咱们经常得很注意每一个script标签在html中的位置，由于它们一般有依赖关系，顺序错了可能就会出bug;

在es6以前为解决上面提到的问题，咱们得利用第三方提供的一些方案，主要有两种CommonJS(服务器端)和AMD（浏览器端，如require.js）。

若是想了解更多AMD，尤为是require.js，能够参看这个教程
why modules on the web are useful and the mechanisms that can be used on the web today to enable them

而如今咱们有了es6的module功能，它实现很是简单，能够成为服务器和浏览器通用的模块解决方案。

ES6模块的设计思想，是尽可能的静态化，使得编译时就能肯定模块的依赖关系，以及输入和输出的变量。CommonJS和AMD模块，都只能在运行时肯定这些东西。

上面的设计思想看不懂也不要紧，咱先学会怎么用，等之后用多了、熟练了再去研究它背后的设计思想也不迟！好，那咱们就上代码...

传统的写法

首先咱们回顾下require.js的写法。假设咱们有两个js文件: index.js和content.js,如今咱们想要在index.js中使用content.js返回的结果，咱们要怎么作呢？

首先定义:

  
  
  
  
  

   
   
   
   
   
  
   

  
  
  
  
  
//content.js define('content.js', function(){ return 'A cat'; })

而后require:

  
  
  
  
  

   
   
   
   
   
  
   

  
  
  
  
  
//index.jsrequire(['./content.js'], function(animal){ console.log(animal); //A cat })

那CommonJS是怎么写的呢？

  
  
  
  
  

   
   
   
   
   
  
   

  
  
  
  
  
//index.jsvar animal = require('./content.js') //content.jsmodule.exports = 'A cat'

ES6的写法

  
  
  
  
  

   
   
   
   
   
  
   

  
  
  
  
  
//index.js import animal from './content'//content.js export default 'A cat'

以上我把三者都列出来了，妈妈不再用担忧我写混淆了...

ES6 module的其余高级用法

输出\输入多个变量

  
  
  
  
  

   
   
   
   
   
  
   

  
  
  
  
  
//content.js export default 'A cat'export function say(){ return 'Hello!' } export const type = 'dog'

上面能够看出，export命令除了输出变量，还能够输出函数，甚至是类（react的模块基本都是输出类）

  
  
  
  
  

   
   
   
   
   
  
   

  
  
  
  
  
//index.js import { say, type } from './content' let says = say() console.log(`The ${type} says ${says}`) //The dog says Hello

这里输入的时候要注意：大括号里面的变量名，必须与被导入模块（content.js）对外接口的名称相同。

若是还但愿输入content.js中输出的默认值(default), 能够写在大括号外面。

  
  
  
  
  

   
   
   
   
   
  
   

  
  
  
  
  
//index.js import animal, { say, type } from './content'let says = say() console.log(`The ${type} says ${says} to ${animal}`) //The dog says Hello to A cat

修改变量名

此时咱们不喜欢type这个变量名，由于它有可能重名，因此咱们须要修改一下它的变量名。在es6中能够用as实现一键换名。

  
  
  
  
  

   
   
   
   
   
  
   

  
  
  
  
  
//index.js import animal, { say, type as animalType } from './content'let says = say() console.log(`The ${animalType} says ${says} to ${animal}`) //The dog says Hello to A cat

模块的总体加载

除了指定加载某个输出值，还可使用总体加载，即用星号（*）指定一个对象，全部输出值都加载在这个对象上面。

  
  
  
  
  

   
   
   
   
   
  
   

  
  
  
  
  
//index.js import animal, * as content from './content'let says = content.say() console.log(`The ${content.type} says ${says} to ${animal}`) //The dog says Hello to A cat

一般星号*结合as一块儿使用比较合适。

终极秘籍

考虑下面的场景：
上面的content.js一共输出了三个变量（default, say, type）,假如咱们的实际项目当中只须要用到type这一个变量，其他两个咱们暂时不须要。咱们能够只输入一个变量：

  
  
  
  
  

   
   
   
   
   
  
   

  
  
  
  
  
import { type } from './content'

因为其余两个变量没有被使用，咱们但愿代码打包的时候也忽略它们，抛弃它们，这样在大项目中能够显著减小文件的体积。

ES6帮咱们实现了！

不过，目前不管是webpack仍是browserify都还不支持这一功能...

若是你如今就想实现这一功能的话，能够尝试使用rollup.js

他们把这个功能叫作Tree-shaking，哈哈哈，意思就是打包前让整个文档树抖一抖，把那些并未被依赖或使用的东西通通抖落下去。。。

看看他们官方的解释吧：

Normally if you require a module, you import the whole thing. ES2015 lets you just import the bits you need, without mucking around with custom builds. It's a revolution in how we use libraries in JavaScript, and it's happening right now.

但愿更全面了解es6伙伴们能够去看阮一峰所著的电子书ECMAScript 6入门


来源：


相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程