ECMAScript 6簡介

時間  2019-11-16
標籤 ecmascript 簡介 欄目 JavaScript 简体版
原文   原文鏈接

1、起步

一、紮實的HTML/CSS/Javascript基本功，這是前置條件。javascript

二、不要用任何的構建項目工具，只用最簡單的<script>，把教程裏的例子模仿一遍，理解用法。不推薦上來就直接用 vue-cli 構建項目，尤爲是若是沒有 Node/Webpack 基礎。css

三、學習瞭解ES6的語法。vue

2、ECMAScript介紹

1997年 ECMAScript 1.0 誕生java

1999年12月 ECMAScript 3.0誕生，它 是一個巨大的成功，在業界獲得了普遍的支持，它奠基了JS的基本語法，被其後版本徹底繼承。直到今天，咱們一開始學習JS，其實就是在學3.0版的語法python

2000年的ECMAScript4.0是當下ES6的前身，但因爲這個版本太過激烈，對ES3作了完全升級，因此暫時被「和諧」了jquery

2009年12月，ECMAScript5.0版正式發佈。ECMA專家組預計ECMAScript的第五個版本會在2013年中期到2018年做爲主流的開發標準。2011年6月，ES5.1版發佈，而且成爲ISO國際標準git

2013年，ES6草案凍結，再也不添加新的功能，新的功能將被放到ES7中；2015年6月，ES6正式經過，成爲國際標準程序員

簡單來學幾個es6的語法，僅僅的只是爲了vue的課程作課前準備。更多背景知識能夠查看http://es6.ruanyifeng.com/es6

谷歌瀏覽器是徹底能夠適配ES6的，可是有些瀏覽器沒法識別（IE等）。github

3、es6語法：聲明變量 let和const

一、傳統聲明變量的var方法

　　es5中聲明變量使用的是var，var命令聲明全局變量存在的問題：

<script type="text/javascript">
    // es5中聲明變量使用var
    // 1.由於變量提高致使var聲明的變量屬於全局做用域
    console.log(a);  // undefined
    var a;
    a = 14;
    console.log(a);  // 14
    // 2.var聲明變量存在覆蓋現象
    {
        var c = 20;
        var c = 30;
    }
    console.log(c);  // 30
</script>

　　var聲明的變量屬於全局做用域，循環會出現以下問題：

<script type="text/javascript">
    // es5中聲明變量使用var
    var d = [];
    for (var i = 0; i < 20; i++) {
        d[i] = function () {
            console.log(i);
        };
    }
    d[4]();   //20
    d[6]();   //20
</script>

　　上面代碼中，變量i是var命令聲明的，在全局範圍內都有效，因此全局只有一個變量i。每一次循環，變量i的值都會發生改變，而循環內被賦給數組a的函數內部的console.log(i)，裏面的i指向的就是全局的i。也就是說，全部數組a的成員裏面的i，指向的都是同一個i，致使運行時輸出的是最後一輪的i的值，也就是 10。 

二、let聲明局部變量

　　若是使用let，聲明的變量僅在塊級做用域內有效，最後輸出的是 6。變量i是let聲明的，當前的i只在本輪循環有效，因此每一次循環的i其實都是一個新的變量，因此最後輸出的是6。你可能會問，若是每一輪循環的變量i都是從新聲明的，那它怎麼知道上一輪循環的值，從而計算出本輪循環的值？這是由於 JavaScript 引擎內部會記住上一輪循環的值，初始化本輪的變量i時，就在上一輪循環的基礎上進行計算。

<script type="text/javascript">
    // 循環
    var d = [];
    for (let i = 0; i < 20; i++) {
        d[i] = function () {
            console.log(i);
        }
    };
    d[4]();   // 4
    d[6]();   // 6
</script>

（1）let不存在變量提高

　　var命令會發生」變量提高「現象，即變量能夠在聲明以前使用，值爲undefined。這種現象多多少少是有些奇怪的，按照通常的邏輯，變量應該在聲明語句以後纔可使用。

// var 的狀況
console.log(foo); // 輸出undefined
var foo = 2;

// 等價於下面的寫法,所以是變量提高
var foo;
console.log(foo); // 輸出undefined
foo = 2

　　上面代碼中，變量foo用var命令聲明，會發生變量提高，即腳本開始運行時，變量foo已經存在了，可是沒有值，因此會輸出undefined。爲了糾正這種現象，let命令改變了語法行爲，它所聲明的變量必定要在聲明後使用，不然報錯。

// let 的狀況
console.log(bar); // 報錯ReferenceError
let bar = 2;

　　變量bar用let命令聲明，不會發生變量提高。這表示在聲明它以前，變量bar是不存在的，這時若是用到它，就會拋出一個錯誤。

（2）let聲明的變量屬於局部做用域

　　es6新增了let命令，用來聲明變量。它的用法相似於var，可是所聲明的變量，只在let命令所在的代碼塊內有效。

<script>
    // let聲明的變量是塊級做用域
    {
        let a = 12;
        var b = 14;
        console.log(a);   // 12
        console.log(b);   // 14
    }
    console.log(b);   // 14
    console.log(a);   // Uncaught ReferenceError: a is not defined
</script>

　　分別用let和var聲明瞭兩個變量。而後在代碼塊以外調用這兩個變量，結果let聲明的變量報錯，var聲明的變量返回了正確的值。這代表，let聲明的變量只在它所在的代碼塊有效。

　　

（3） let不能重複聲明

　　let聲明的變量是塊級做用域，並且它不能重複聲明。

<script type="text/javascript">
    // let聲明的變量是 塊級做用域
    {
        let a = 12;
        let a = 14;  
    }
    console.log(a);   // 提示報錯：Uncaught SyntaxError: Identifier 'a' has already been declared 
</script>

　　let不容許在相同做用域內，重複聲明同一個變量。

// 報錯
function func() {
  let a = 10;
  var a = 1;
}

// 報錯
function func() {
  let a = 10;
  let a = 1;
}

　　所以，不能在函數內部從新聲明參數。

三、爲何須要塊級做用域？

　　ES5 只有全局做用域和函數做用域，沒有塊級做用域，這帶來不少不合理的場景。

（1）場景：內層變量可能會覆蓋外層變量

var tmp = new Date();

function f() {
  console.log(tmp);
  if (false) {
    var tmp = 'hello world';
  }
}

f(); // undefined

　　上面代碼的原意是，if代碼塊的外部使用外層的tmp變量，內部使用內層的tmp變量。可是，函數f執行後，輸出結果爲undefined，緣由在於var變量提高，致使內層的tmp變量覆蓋了外層的tmp變量。

（2）場景：用來計數的循環變量泄露爲全局變量

var s = 'hello';
for (var i = 0; i < s.length; i++) {
  console.log(s[i]);
}
console.log(i); // 5

　　上面代碼中，變量i只用來控制循環，可是循環結束後，它並無消失，泄露成了全局變量。

四、const聲明常量

　　const聲明一個只讀的常量（局部做用域）。一旦聲明不能修改。

（1）改變常量的值會報錯

const PI = 3.1415;
PI // 3.1415

PI = 3;
// TypeError: Assignment to constant variable.

　　上面代碼代表改變常量的值會報錯

（2）只聲明不賦值會報錯

　　const聲明的變量不得改變值，這意味着，const一旦聲明變量，就必須當即初始化，不能留到之後賦值

const foo;
// SyntaxError: Missing initializer in const declaration

　　上面代碼表示，對於const來講，只聲明不賦值，就會報錯。

（3）只在聲明所在的塊級做用域內有效

if (true) {
  const MAX = 5;
}

MAX // Uncaught ReferenceError: MAX is not defined

　　const的做用域與let命令相同：只在聲明所在的塊級做用域內有效。

4、模板字符串

一、傳統JavaScript語言(es5)，輸出模板

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

　　上面這種寫法至關繁瑣不方便，ES6 引入了模板字符串解決這個問題，若是要拼接一串字符串，再也不須要直接用「+」來拼接，拼接的變量使用${變量名}。

二、ES6的模板字符串改寫

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

　　模板字符串（template string）是加強版的字符串，用反引號（`）標識。它能夠看成普通字符串使用，也能夠用來定義多行字符串，或者在字符串中嵌入變量。

　　插變量的方法：$(變量名)。

// 普通字符串
`In JavaScript '\n' is a line-feed.`

// 多行字符串
`In JavaScript this is
 not legal.`

console.log(`string text line 1
string text line 2`);

// 字符串中嵌入變量
let name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`

　　上面代碼中的模板字符串，都是用反引號表示。

（1）模板字符串反斜槓轉義

　　若是在模板字符串中須要使用反引號，則前面要用反斜槓轉義。

let greeting = `\`Yo\` World!`;

　　輸出結果：`Yo` World!

（2）用模板字符串表示多行字符串

　　若是使用模板字符串表示多行字符串，全部的空格和縮進都會被保留在輸出之中。

<body>
    <ul>
        <!--<li>-->
            <!--<a href="javascript:void(0);">-->
                <!--<img src="" alt="">-->
            <!--</a>-->
        <!--</li>-->
    </ul>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript">
        // es6模板字符串
        let name = 'alex';
        let age = 29;

        var desc = `${name}是一個大傻,今年${age}了，雞湯很是多！`;
        console.log(desc);  // alex是一個大傻,今年29了，雞湯很是多！
        var imgSrc = './1.jpg';
        $(function () {
            $('ul').append(`<li>
                <a href="javascript:void(0);">
                    <img src=${imgSrc} alt="">
                </a>
            </li>`);
        });
    </script>
</body> 

　　頁面顯示效果以下：

　　

5、箭頭函數

一、es5函數

<script type="text/javascript">
    // es5函數
    // 普通函數：
    function add(a, b) {
        return a+b;
    };
    alert(add(1,2));   // 3

    // 函數對象：
    var add = function (a, b) {
        return a+b;
    };
    alert(add(3,4));   // 7
</script>

二、箭頭函數語法

　　ES6能夠不使用function關鍵字，使用「箭頭」（=>）定義函數：

function(){} 等價於  ()=>{}

var f = a = > a
//等同於
var f = function(a){
   return a;  
} 

　　若是箭頭函數不須要參數或須要多個參數，就使用一個圓括號表明參數部分。

//一、無形參
var f = () => 5;
// 等同於
var f = function () { return 5 };

//二、多個形參
var sum = (num1, num2) => num1 + num2;
// 等同於
var sum = function(num1, num2) {
  return num1 + num2;
};

三、使用箭頭函數帶來的問題

（1）箭頭函數this的指向發生變化

　　函數體內的this對象，就是定義時所在的對象，而不是使用時所在的對象。

<script>
    // 字面量方式建立對象
    var person1 = {
        name: "日天",
        age: 30,
        fav:function () {
            // 這裏的this是使用時定義的對象 person1
            console.log(this);
            console.log(this.name);
        }
    };
    person1.fav();
    /*
    * {name: "日天", age: 30, fav: ƒ}
    * 日天
    */

    var person2 = {
        name: "滅天",
        age: 29,
        fav: () => {
            // 若是使用箭頭函數，this指的是定義時使用的對象，指向了window
            console.log(this);
            console.log(this.name);
        }
    };
    person2.fav();
    /*
    *  Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}
    *
    */
</script>

　　打印結果以下：

　　

　　若是使用箭頭函數，this表示定義時所在的對象window。

　　一個函數嵌套示例：

function foo() {
  setTimeout(() => {
    console.log('id:', this.id);
  }, 100);
}

var id = 21;

foo.call({ id: 42 });
// id: 42

　　上面代碼中，setTimeout的參數是一個箭頭函數，這個箭頭函數的定義生效是在foo函數生成時，而它的真正執行要等到 100 毫秒後。若是是普通函數，執行時this應該指向全局對象window，這時應該輸出21。可是，箭頭函數致使this老是指向函數定義生效時所在的對象（本例是{id: 42}），因此輸出的是42。

（2）箭頭函數 arguments 不能使用

　　不可使用arguments對象，該對象在函數體內不存在。若是要使用能夠用 rest 參數代替。

<script>
    var person3 = {
         name:'小馬哥',
         age:18,
         fav: function (content) {
             console.log(arguments[0]);
         }
     };
    person3.fav('哈哈哈');
    /*
    * 哈哈哈
    */

    var person4 = {
         name:'小馬哥',
         age:18,
         fav: (content)=>{
             console.log(arguments[0]);
         }
     };
    person4.fav('哈哈哈');
    /*
    * Uncaught ReferenceError: arguments is not defined
    */
</script>

　　報出以下錯誤：

　　

6、對象的單體模式

　　對象的單體模式的幾種寫法：

<script>
    fav(){
        
    }
    // 等價於
    function fav() {
        
    }
    // 等價於
    var fav = function () {
        
    }
</script>

　　對象的單體模式，是爲了解決箭頭函數this指向的問題：

<script>
    // 自變量方式建立對象
    var person = {
        name: "張三",
        age: 18,
        fav(){  // 等價於fav: function(){}
            console.log(this.name,this.age);
            console.log(this);
            console.log(arguments);
        }
    };
    person.fav();
    /*
    張三 18
    Object
    Arguments(0)
     */
</script>

　　頁面控制檯輸出以下：

　　

7、ES6的面向對象——類

一、ES5構造函數方式建立對象

　　JavaScript 語言中，生成實例對象的傳統方法是經過構造函數。

<script>
    // 構造函數的方式建立對象
    function Animal(name, age) {   // 約定構造函數要首字母大寫
        this.name = name;
        this.age = age;
    }

    // 給對象添加方法
    Animal.prototype.showName = function () {   // prototype:調用原型的屬性
        console.log(this.name);
        console.log(this.age);
    };

    // 使用new關鍵字建立對象
    var dog = new Animal('日天', 19);
    dog.showName();
    /*
    日天
    18 19
     */
</script>

 

　　上面這種寫法跟傳統的面嚮對象語言（好比 C++ 和 Java）差別很大，很容易讓新學習這門語言的程序員感到困惑。

二、ES6用class關鍵字來定義類

　　ES6 提供了更接近傳統語言的寫法，引入了 Class（類）這個概念，做爲對象的模板。經過class關鍵字，能夠定義類。

<script>
    // ES6建立對象的方式：使用class
    class Person{
        constructor(){    // 初始化構造器

        }
    }
</script>

 

　　基本上，ES6 的class能夠看做只是一個語法糖，它的絕大部分功能，ES5 均可以作到，新的class寫法只是讓對象原型的寫法更加清晰、更像面向對象編程的語法。ES6 的class改寫ES5構造函數以下所示：

<script>
    // ES6建立對象的方式：使用class
    class Animal {
        // 構造器 當你建立實例以後 constructor()方法會馬上調用 一般這個方法初始化對象的屬性
        constructor(name, age) {   // 對象單例模式
            this.name = name;
            this.age = age;
        }
        showName() {    // 給當前對象添加方法
            console.log(this.name);
        }
    }
    // 使用new關鍵字建立對象
    var d = new Animal('張三', 19);
    d.showName();     // 張三
</script>

 

　　上面代碼定義了一個「類」，能夠看到裏面有一個constructor方法，這就是構造方法，而this關鍵字則表明實例對象。也就是說，ES5 的構造函數Animal，對應 ES6 的Animal類的構造方法。

三、class使用注意要點

（1）constructor方法

　　constructor方法是類的默認方法，經過new命令生成對象實例時，自動調用該方法。一個類必須有constructor方法，若是沒有顯式定義，一個空的constructor方法會被默認添加。

class Point {
}

// 等同於
class Point {
  constructor() {}
}

　　上面代碼中，定義了一個空的類Point，JavaScript 引擎會自動爲它添加一個空的constructor方法。

　　僅限class關鍵字寫法，constructor(){}後面必定不能添加逗號。

（2）類必須用new調用

　　類必須使用new調用，不然會報錯。這是它跟普通構造函數的一個主要區別，後者不用new也能夠執行。

class Foo {
  constructor() {
    return Object.create(null);
  }
}

Foo()
// TypeError: Class constructor Foo cannot be invoked without 'new'

（3）定義「類」的方法的時候，前面不須要加上function這個關鍵字

　　Animal類除了構造方法，還定義了一個showName方法。注意，定義「類」的方法的時候，前面不須要加上function這個關鍵字，直接把函數定義放進去了就能夠了。另外，方法之間不須要逗號分隔，加了會報錯。

（4）ES6 的類，徹底能夠看做構造函數的另外一種寫法

console.log(Animal2===Animal2.prototype.constructor);//true

　　上面代碼表示，類自己就指向了類的構造函數。

　　使用的時候，也是直接對類使用new命令，跟構造函數的用法徹底一致。

8、代碼地址

　　https://github.com/hqs2212586/ES6_demo

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程