ES6排名前十位的最佳特性列表

心已赠人 2022-03-18 08:46 172阅读 0赞

ES6排名前十位的最佳特性列表：  
1.默认参数  
2.模板文本  
3.多行字符串  
4.解构赋值  
5.增强的对象文本  
6.箭头函数  
7.Promise  
8.块作用域构造Let和Const  
9.Class类  
10.Modules模块

**1.默认参数**

在ES6中，可以直接把默认值放在函数声明里：

// 新的JavaScript定义方式
    var link = function(height = 50, color = 'red', url = 'http://baidu.com ')
    {
        ...
    }

**2.模板文本**

在其他语言中，使用模板和插入值是在字符串里输出变量的一种方式。因此在ES5中，开发者可以这样组合一个字符串：

// ES6之前方式只能使用组合字符串方式
    var name = 'Your name is ' + first + ' ' + last + '.';
    var url = 'http://localhost:3000/api/messages/' + id;

在ES6中，可以使用新的语法$ \{NAME\}，并将其放在反引号里：

// 支持模板文本
    var name = `Your name is ${first} ${last}. `;
    var url = `http://localhost:3000/api/messages/${id}`;

**3.多行字符串**

ES6的多行字符串是一个非常实用的功能。在ES5中，我们不得不使用以下方法来表示多行字符串：

// 多行字符串
            var roadPoem = ’江南好，风景旧曾谙。'
                + ’日出江花红胜火，'
                + ’春来江水绿如蓝。'
                + ’能不忆江南？'
                + ’忆江南·江南好’;

然而在ES6中，仅仅用反引号就可以解决了：

// 支持多行文本的字符串
            var roadPoem = `江南好，风景旧曾谙。
                日出江花红胜火，
                春来江水绿如蓝。
                能不忆江南？
                忆江南·江南好`;

**4.解构赋值**

解构可能是一个比较难以掌握的概念。我们先从一个简单的赋值讲起，其中house和mouse是key，同时house和mouse也是一个变量，在ES5中是这样的：

var data = $('body').data();        // data拥有两个属性house和mouse
    house = data.house;
    mouse = data.mouse;

在Node.js中用ES5是这样的：

var jsonMiddleware = require('body-parser').jsonMiddleware ;
    var body = req.body;                  // body两个属性username和password
    username = body.username;
    password = body.password;

在ES6中，可以使用以下语句来代替上面的ES5代码：

var { house, mouse} = $('body').data();
    var {jsonMiddleware} = require('body-parser');
    var {username, password} = req.body;

这个同样也适用于数组，是非常赞的用法：

var [col1, col2]  = $('.column'),
    [line1, line2, line3, , line5] = file.split('n');

**5.增强的对象文本**

使用对象文本可以做许多让人意想不到的事情！通过ES6，我们可以把ES5中的JSON变得更加接近于一个类。

下面是一个典型的ES5对象文本，里面有一些方法和属性：

// 文本对象
    var serviceBase = {port: 3000, url: 'baidu.com'},
        getAccounts = function(){return [1,2,3]};
    var accountServiceES 5 = {
      port: serviceBase.port,
      url: serviceBase.url,
      getAccounts: getAccounts,
      toString: function() {
          return JSON.stringify(this.valueOf());
      },
      getUrl: function()
    {return "http://" + this.url + ':' + this.port},
      valueOf_1_2_3: getAccounts()
    }

如果开发者想让它更有意思，可以用Object.create从ServiceBase继承原型的方法：

var accountServiceES 5ObjectCreate = Object.create(serviceBase)
    var accountServiceES 5ObjectCreate = {
        getAccounts: getAccounts,
        toString: function() {
          return JSON.stringify(this.valueOf());
        },
        getUrl: function() {return "http://" + this.url + ':' + this.port},
        valueOf_1_2_3: getAccounts()
      }

其实对于以上两种accountServiceES 5ObjectCreate和accountServiceES5并不是完全一致的。Object.Create()方法创建一个新对象，其是使用现有的对象来继承创建一个新的对象，而accountSerivce ES5并且继承现有对象。

为了方便举例，我们只考虑它们的相似处。所以在ES6的对象文本中，既可以直接分配getAccounts: getAccounts，也可以只需用一个getAccounts。此外，可以通过`__proto__`（并不是通过proto）设置属性：

var serviceBase = {port: 3000, url: 'baidu.com'},
    getAccounts = function(){return [1,2,3]};
    var accountService = {
        __proto__: serviceBase,
        getAccounts,

另外，可以调用super防范，以及使用动态key值（valueOf\_1\_2\_3）：

toString() {
        return JSON.stringify((super.valueOf()));
        },
        getUrl() {return "http://" + this.url + ':' + this.port},
        [ 'valueOf_' + getAccounts().join('_') ]: getAccounts()
    };
    console.log(accountService)

对于旧版的对象来说，ES6的对象文本是一个很大的进步。

**6.箭头函数**

CoffeeScript就是因为有丰富的箭头函数所以让很多开发者所喜爱。在ES6中，也有丰富的箭头函数。比如，以前我们使用闭包，this总是预期之外地产生改变，而箭头函数的好处在于，现在this可以按照你的预期使用了，身处箭头函数里面，this还是原来的this。

有了箭头函数，我们就不必用that = this或self = this、\_this = this、.bind(this)那么麻烦了。例如，下面的代码用ES5就不是很优雅：

var _this = this;
    $('.btn').click(function(event){
      _this.sendData();
    })

在ES6中则不需要用\_this = this：

$('.btn').click((event) =>{
         this.sendData();
    })

但并不是完全否定之前的方案，ES6委员会决定，以前的function的传递方式也是一个很好的方案，所以它们仍然保留了以前的功能。  
下面是另一个例子，通过call传递文本给logUpperCase()函数，在ES5中：

而在ES6中并不需要用\_this浪费时间：

var logUpperCase = function() {
      this.string = this.string.toUpperCase();
      return () => console.log(this.string);
    }
    logUpperCase.call({ string: 'ES 6 rocks' })();

注意：在ES6中，“=>”可以混合和匹配老的函数一起使用。当在一行代码中用了箭头函数后，它就变成了一个表达式，其将暗中返回单个语句的结果。如果结果超过一行，将需要明确使用return。  
在箭头函数中，对于单个参数，括号()是可省略的，但当参数超过一个时就需要括号()了。  
在ES5代码中有明确的返回功能：

var ids = ['5632953c4e345e145fdf2df8', '563295464e345e145fdf2df9'];
    var messages = ids.map(function (value, index, list) {
      return 'ID of ' + index + ' element is ' + value + ' ';
    });

在ES6中有更加严谨的版本，参数需要被包含在括号里并且是隐式地返回：

var ids = ['5632953c4e345e145fdf2df8', '563295464e345e145fdf2df9'];
    var messages = ids.map((value, index, list) => `ID of ${index} element
    is ${value} `);                             // 隐式返回

**7.Promise**

Promise是一个有争议的话题，有人说我们不需要Promise，仅仅使用异步、生成器、回调等就够了，但是许多人尝试在写多个嵌套的回调函数时基本上会在超过三层之后产生“回调地狱”。令人高兴的是，在ES6中有标准的Promise实现。

下面是一个简单地用setTimeout()函数实现的异步延迟加载函数：

setTimeout(function(){
      console.log('Yay! ');
    }, 1000);

在ES6中，可以用Promise重写，虽然在此实例中并不能减少大量的代码，甚至多写了数行，但是逻辑却清晰了不少：

var wait1000 =  new Promise((resolve, reject)=> {
      setTimeout(resolve, 1000);
    }).then(()=> {
      console.log('Yay! ');
    });

**8.块作用域构造Let和Const**

在ES6里，let并不是一个“花哨”的特性，是更复杂的。let是一种新的变量声明方式，允许我们把变量作用域控制在块级里面，用大括号定义代码块，在ES5中，块级作用域起不了任何作用：

以上代码结果将返回1000，这真是一个bug。在ES6中，用let限制块级作用域，而var限制函数作用域。

程序结果将会是0，因为块作用域中有了let，如果(amount=1)，那么这个表达式将返回1。本例是一个演示，这里有一堆常量，它们互不影响，因为它们属于不同的块级作用域。

**9.Class类**

如果读者了解面向对象编程（OOP），将会更喜爱这个特性，以后写一个类和继承将变得在微博上写一个评论那么容易。

在之前的JavaScript版本中，对于类的创建和使用是令人非常头疼的一件事。不同于直接使用class命名一个类的语言（在JavaScript中class关键字被保留，但是没有任何作用），因为没有官方的类功能，加上大量继承模型的出现（pseudo classical、classical、functional等），造成了JavaScript类使用的困难和不规范。

用ES5写一个类有很多种方法，这里就先不说了，现在就来看看如何用ES6写一个类吧。ES6没有用函数，而是使用原型实现类，我们创建一个类baseModel，并且在这个类里定义一个constructor()和一个getName()方法：

class baseModel {
      constructor(options, data) { // class constructor, Node.js 5.6暂时不支持
      options = {}, data = []这样传参
        this.name = 'Base';
        this.url = 'http://baidu.com/api';
        this.data = data;
        this.options = options;
      }
        getName() {                                   //类的方法
          console.log(`Class name: ${this.name}`);
        }
    }

注意：这里对options和data使用了默认参数值，方法名也不需要加function关键字，而且冒号“:”也不需要了；另一个大的区别就是不需要分配属性this。现在设置一个属性的值，只需简单地在构造函数中分配即可。

**10.Modules模块**

众所周知，在ES 6以前JavaScript并不支持本地的模块，于是人们想出了AMD、RequireJS、CommonJS及其他解决方法。现在ES 6中可以用模块import和export操作了。

在ES5中，可以在`<script>`中直接写可以运行的代码（简称IIFE），或一些库，如AMD。然而在ES6中，可以用export导入类。下面举个例子，在ES5中，module.js有port变量和getAccounts()方法：

module.exports = {
      port: 3000,
      getAccounts: function() {
        ...
      }
    }

在ES 5中，main.js需要依赖require(‘module’)导入module.js：

var service = require('module.js');
    console.log(service.port);                        // 3000

但在ES6中，将用export and import进行一个模块的引入和抛出。例如，以下是用ES6写的module.js文件库：

export var port = 3000;
    export function getAccounts(url) {
      ...
    }

如果用ES6将上述的module.js导入到文件main.js中，就变得非常简单了，只需用import \{name\} from 'my-module’语法，例如：

import {port, getAccounts} from 'module';
    console.log(port);                                    // 3000

或者可以在main.js中导入整个模块，并命名为service：