ES6

目前不使用Es7的主要原因是大量浏览器仅支持ES 6或者ES5版本。

1、为什么要使用Es6 ,是一次重大的版本升级,它秉承着最大化兼容已有代码的设计理念。过去编写的JS代码还能正常运行。。可以更加方便的实现很多复杂的操作,提高开发人员的效率

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

  • Default Parametes (默认参数)
  • Template Literals (模板文本)
  • Multi-line Strings(多行字符串)
  • Destructuring Assignment (解构赋值)
  • Enhanced Object Literals (增强的对象文本)
  • Arrow Functions (箭头函数)
  • Promises in ES 6
  • Block-Scoped Constructs Let and Const (块作用域构造)
  • Classes(类)
  • Modules(模块)

2.简单用法:

1、可以把默认值放在函数声明里
var link = function(height = 50, color = 'red', url='http://baidu.com'){
.....
}
2、

    ES6之前方式只能使用组合字符串方法
     var name = 'Your name is' + first + ' '+ last + ' . ';
     ES6中,可以使用新的语法 ${name} ,并将其放在反引号里;
    var name = `Your name is ${first} ${last}`;

3、用反引号解决多行字符串

Es5多行字符串表达
var roadPoem = '李悝,'
+ '关关雎鸠。'
+ '春来江水绿如蓝。'
+ '能不忆江南?

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、增强的对象文本
下面是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 = {
      getAccoutns: getAccounts,
      toString: function() {
          return JSON.stringify(this.valueOf());
      },
      getUrl: function(){
          return "http://" + this.url + ':' + this.port
      },
      valueOf_1_2_3: getAccounts();
}

其实对于以上两种并不是完全一致的。Object.Create()方法创建一个新对象,其是使用现有的对象来继承创建一个新的对象,而accountService ES 5 并且继承现有对象。
所以在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)

6、箭头函数
在ES6中,有丰富的箭头函数。比如,以前我们使用闭包,this总是预期之外的改变,而箭头函数的好处在于,现在this可以按照你的预期使用了,深处箭头函数里,this还是原来的this。
有了箭头函数,我们就不必用that=this或self=this、_this=this那么麻烦了。
下面是ES5

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

在ES6中则不需要用_this = this;

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

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

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

而在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 = ['5687868csdfsfisoduf', 'jsdlksjdk234234lk42jk34'];
var messages = ids.map(function (value, index, list){
    return 'ID of' + index + 'elment is' + value+ ' ';
})

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

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

7、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
在ES6中,let并不是一个“花哨”的特性,是更复杂的。let是一种新的变量声明方式,允许我们把变量作用域控制在块级里面,用大括号定义代码块,在ES5中,块级作用域起步了任何作用:

 function calculateTotalAmount (vip) {
    //只能使用var方式定义变量
    var amount = 0;
        if(vip) {
            //在此定义会覆盖
             var amount = 1;
        }
        {
            //在此定义会覆盖
            var amount = 1000;
            {
                   //在此定义会覆盖
                      var amount = 10000;
            }
        }
      return amount;
}
//打印输出内容
console.log(calculateTotalAmount(true));
以上代码结果将返回1000,这真是一个bug。在ES6中,用let限制块级作用域,而var限制函数作用域。
function calculateTotalAmount (vip) {
      //使用var方式定义变量
      var amount = 0;
      if (vip) {
          //使用let定义的局部变量
          let amount = 1;  //第1个let
       }
       {
            let amount = 100; //第2个let
            {
                let amount = 1000; //第3个let
             }
        }
    return amount;
}
console.log(calculateTotalAmount(true));
程序结果将会是0.因为块作用域中有了let,如果(amount=1),那么这个表达式将返回1。

9、类
在之前的javascript版本中,对于类的创建和使用时令人非常头疼的一件事。不同于直接使用class命名一个类的语言(在javascript中class关键字被保留,但是没有任何作用),因为没有官方的类功能,加上大量继承模型的出现,造成了jaascript类使用的困难和不规范。
用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、模块
ES6中可以用模块import和export操作了。
在ES5中,可以在

你可能感兴趣的:(ES6)