风间由美在线视频播放,污污内射一区二区日韩

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

1、為什么要使用Es6 ，是一次重大的版本升級，它秉承著最大化兼容已有代碼的設(shè)計理念。過去編寫的JS代碼還能正常運行。?？梢愿臃奖愕膶崿F(xiàn)很多復(fù)雜的操作，提高開發(fā)人員的效率

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

Default Parametes （默認參數(shù)）
Template Literals （模板文本）
Multi-line Strings（多行字符串）
Destructuring Assignment （解構(gòu)賦值）
Enhanced Object Literals （增強的對象文本）
Arrow Functions （箭頭函數(shù)）
Promises in ES 6
Block-Scoped Constructs Let and Const （塊作用域構(gòu)造）
Classes（類）
Modules（模塊）

2.簡單用法：

1、可以把默認值放在函數(shù)聲明里
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 = '李悝，'
+ '關(guān)關(guān)雎鳩。'
+ '春來江水綠如藍。'
+ '能不憶江南？

var roadPoem = `李悝，
關(guān)關(guān)雎鳩。
春來江水綠如藍。
能不憶江南？
`

4、解構(gòu)賦值
解構(gòu)可能是一個比較難以掌握的概念，先從簡單的賦值講起，其中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;

這個也同樣適用于數(shù)組：

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()
}

如果開發(fā)者想讓它更有意思，可以用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()方法創(chuàng)建一個新對象，其是使用現(xiàn)有的對象來繼承創(chuàng)建一個新的對象，而accountService ES 5 并且繼承現(xiàn)有對象。
所以在Es6 的對象文本中，既可以直接分配getAccounts:getAccounts,也可以只需用一個getAccounts。此外，可以通過_ proto_并不是通過（proto）設(shè)置屬性：

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

     //另外，可以調(diào)用super防范，以及使用動態(tài)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、箭頭函數(shù)
在ES6中，有豐富的箭頭函數(shù)。比如，以前我們使用閉包，this總是預(yù)期之外的改變，而箭頭函數(shù)的好處在于，現(xiàn)在this可以按照你的預(yù)期使用了，深處箭頭函數(shù)里，this還是原來的this。
有了箭頭函數(shù)，我們就不必用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的傳遞方式也是一個很好的方案，所以它們?nèi)匀槐Ａ袅艘郧暗墓δ堋?br> 下面是另一個例子，通過call傳遞文本給logUpperCase()函數(shù)，在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'})();

注意?。?em>在ES6中，=>可以混合和匹配老的函數(shù)一起使用。當在一行代碼中用了箭頭函數(shù)后，它就變成了一個表達式，其將暗中返回單個語句的結(jié)果。如果結(jié)果超過一行，將需要明確使用return

在箭頭函數(shù)中，對于單個參數(shù)，括號是可省略的，但當參數(shù)超過一個時就需要括號了。在ES5代碼中有明確的返回功能：

var ids = ['5687868csdfsfisoduf', 'jsdlksjdk234234lk42jk34'];
var messages = ids.map(function (value, index, list){
    return 'ID of' + index + 'elment is' + value+ ' ';
})

在ES6中有更加嚴謹?shù)陌姹荆瑓?shù)需要被包含在括號里并且是隱式地返回：

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

7、Promise實現(xiàn)
下面是一個簡單的用setTimeout()函數(shù)實現(xiàn)的異步延遲加載函數(shù)：

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

在ES6中，可以用Promise重寫，雖然在此實例中并不能減少大量的代碼。甚至多些了數(shù)行，但是邏輯卻清晰了不少：

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

8、塊作用域let
在ES6中，let并不是一個“花哨”的特性，是更復(fù)雜的。let是一種新的變量聲明方式，允許我們把變量作用域控制在塊級里面，用大括號定義代碼塊，在ES5中，塊級作用域起步了任何作用：

 function calculateTotalAmount (vip) {
    //只能使用var方式定義變量
    var amount = 0;
        if(vip) {
            //在此定義會覆蓋
             var amount = 1；
        }
        {
            //在此定義會覆蓋
            var amount = 1000;
            {
                   //在此定義會覆蓋
                      var amount = 10000;
            }
        }
      return amount;
}
//打印輸出內(nèi)容
console.log(calculateTotalAmount(true));
以上代碼結(jié)果將返回1000，這真是一個bug。在ES6中，用let限制塊級作用域，而var限制函數(shù)作用域。

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));
程序結(jié)果將會是0.因為塊作用域中有了let,如果（amount=1）,那么這個表達式將返回1。

9、類
在之前的javascript版本中，對于類的創(chuàng)建和使用時令人非常頭疼的一件事。不同于直接使用class命名一個類的語言（在javascript中class關(guān)鍵字被保留，但是沒有任何作用），因為沒有官方的類功能，加上大量繼承模型的出現(xiàn)，造成了jaascript類使用的困難和不規(guī)范。
用ES6寫一個類，ES6沒有用函數(shù)，而是使用原型實現(xiàn)類，我們創(chuàng)建一個類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使用了默認參數(shù)值，方法名也不需要加function關(guān)鍵字，而且冒號“：”也不需要了；另一個大的區(qū)別就是不需要分配屬性this?，F(xiàn)在設(shè)置一個屬性的值，只需簡單的在構(gòu)造函數(shù)中分配即可。
10、模塊
ES6中可以用模塊import和export操作了。
在ES5中，可以在<script>中直接寫可以運行的代碼（簡稱IIFE），或一些庫，如AMD。然而在ES6中，可以用export導(dǎo)入類。下面舉個例子，在ES5中，module.js有port變量和getAccounts()方法：

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

在ES5中，main.js需要依賴require('module')導(dǎo)入module.js:

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

但在ES6中，將用export and import進行一個模塊的引入和拋出。例如，以下是用ES6寫的module.js文件庫：

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

如果用ES6將上述的module.js導(dǎo)入到文件main.js中，就變得非常簡單了，只需要用import { port,getAccounts} from 'module';
console.log(port); //3000
或者可以在main.js中導(dǎo)入整個模塊，并命名為service:
import * as service from 'module';
console.log(service.port); //3000

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

ES6

ES6

2.簡單用法：

注意?。?em>在ES6中，=>可以混合和匹配老的函數(shù)一起使用。當在一行代碼中用了箭頭函數(shù)后，它就變成了一個表達式，其將暗中返回單個語句的結(jié)果。如果結(jié)果超過一行，將需要明確使用return

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

ES6

2.簡單用法：

注意?。?em>在ES6中，=>可以混合和匹配老的函數(shù)一起使用。當在一行代碼中用了箭頭函數(shù)后，它就變成了一個表達式，其將暗中返回單個語句的結(jié)果。如果結(jié)果超過一行，將需要明確使用return

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

注意?。?em>在ES6中，=>可以混合和匹配老的函數(shù)一起使用。當在一行代碼中用了箭頭函數(shù)后，它就變成了一個表達式，其將暗中返回單個語句的結(jié)果。如果結(jié)果超過一行，將需要明確使用return