1. 程式人生 > >Vue基礎之es6

Vue基礎之es6

ref 興趣 字符串 覆蓋 targe 奇怪 5.1 5.0 存在

什麽是ECMAScript,以及es6的誕生?

1997年 ECMAScript 1.0 誕生

1999年12月 ECMAScript 3.0誕生,它 是一個巨大的成功,在業界得到了廣泛的支持,它奠定了JS的基本語法,被其後版本完全繼承。直到今天,我們一開始學習JS,其實就是在學3.0版的語法

2000年的ECMAScript4.0是當下ES6的前身,但由於這個版本太過激烈,對ES3做了徹底升級,所以暫時被“和諧”了

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

2013年,ES6草案凍結,不再添加新的功能,新的功能將被放到ES7中;2015年6月,ES6正式通過,成為國際標準

好的,介紹es6的誕生,我們簡單來學幾個es6的語法,僅僅的只是為了後面咱們vue的課程做課前準備。如果感興趣的同學可以查看

http://es6.ruanyifeng.com/

es6語法

es6語法:let和const

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

1. let聲明的變量 是塊級作用域, 不能重復聲明

<script type="text/javascript">
        // 1. let聲明的變量 是塊級作用域, 不能重復聲明
{ var a = 12; let b = 12; } console.log(a); console.log(b); </script>

技術分享圖片

上面代碼在代碼塊之中,分別用letvar聲明了兩個變量。然後在代碼塊之外調用這兩個變量,結果let聲明的變量報錯,var聲明的變量返回了正確的值。這表明,let聲明的變量只在它所在的代碼塊有效

for循環相信大家都玩過。下面這種現象扭曲了我們塊級作用域的思想!如果將var改成let就可以了!

       var a = [];
        
for (var i=0;i<10;i++){ a[i] = function () { console.log(i) }; } a[6]();

技術分享圖片

上面代碼中,變量ilet聲明的,當前的i只在本輪循環有效,所以每一次循環的i其實都是一個新的變量,所以最後輸出的是6。你可能會問,如果每一輪循環的變量i都是重新聲明的,那它怎麽知道上一輪循環的值,從而計算出本輪循環的值?這是因為 JavaScript 引擎內部會記住上一輪循環的值,初始化本輪的變量i時,就在上一輪循環的基礎上進行計算

        var a = [];
        for (let i=0;i<10;i++){
            a[i] = function () {
                console.log(i)
            };
        }
        a[6]();

技術分享圖片

2.不存在變量提升

var命令會發生”變量提升“現象,即變量可以在聲明之前使用,值為undefined。這種現象多多少少是有些奇怪的,按照一般的邏輯,變量應該在聲明語句之後才可以使用。

為了糾正這種現象,let命令改變了語法行為,它所聲明的變量一定要在聲明後使用,否則報錯。

技術分享圖片
// var 的情況
console.log(foo); // 輸出undefined
var foo = 2;

// let 的情況
console.log(bar); // 報錯ReferenceError
let bar = 2;
技術分享圖片

上面代碼中,變量foovar命令聲明,會發生變量提升,即腳本開始運行時,變量foo已經存在了,但是沒有值,所以會輸出undefined。變量barlet命令聲明,不會發生變量提升。這表示在聲明它之前,變量bar是不存在的,這時如果用到它,就會拋出一個錯誤。

3.不允許重復聲明

let不允許在相同作用域內,重復聲明同一個變量。

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

因此,不能在函數內部重新聲明參數

function func(arg) {
        let arg; // 報錯
    }
    func(1)
    function func(arg) {
        {
            let arg; // 不報錯
         }
    }
    func(1)

為什麽需要塊級作用域?

ES5 只有全局作用域和函數作用域,沒有塊級作用域,這帶來很多不合理的場景。

第一種場景,內層變量可能會覆蓋外層變量。

技術分享圖片
var tmp = new Date();

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

f(); // undefined
技術分享圖片

上面代碼的原意是,if代碼塊的外部使用外層的tmp變量,內部使用內層的tmp變量。但是,函數f執行後,輸出結果為undefined,原因在於變量提升,導致內層的tmp變量覆蓋了外層的tmp變量。

第二種場景,用來計數的循環變量泄露為全局變量。

技術分享圖片
var s = ‘hello‘;

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

console.log(i); // 5
技術分享圖片

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

const命令

基本語法

const聲明一個只讀的常量。一旦聲明,常量的值就不能改變。

const PI = 3.1415;
PI // 3.1415

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

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

const聲明的變量不得改變值,這意味著,const一旦聲明變量,就必須立即初始化,不能留到以後賦值

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

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

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

if (true) {
  const MAX = 5;
}

MAX // Uncaught ReferenceError: MAX is not defined

模板字符串

傳統的JavaScript語言,輸出模板通常是這樣的寫的。

    <div id="cid"></div>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script>
        var a = 1;
        var b = 2;

        var str = "哈哈哈哈" + a + "嘿嘿嘿" + b;
        $(‘#cid‘).append(str);
    </script>

上面這種寫法相當繁瑣不方便,ES6 引入了模板字符串解決這個問題。

    <div id="cid"></div>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script>
        var a = 1;
        var b = 2;
        var str = `哈哈哈哈${a}嘿嘿嘿${b}`;
        $(‘#cid‘).append(str);
    </script>

模板字符串(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}?`
技術分享圖片

上面代碼中的模板字符串,都是用反引號表示。如果在模板字符串中需要使用反引號,則前面要用反斜杠轉義。

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

輸入結果:`Yo` World!

如果使用模板字符串表示多行字符串,所有的空格和縮進都會被保留在輸出之中。

技術分享圖片
$(‘#list‘).html(`
<ul>
  <li>first</li>
  <li>second</li>
</ul>
`);
技術分享圖片

Vue基礎之es6