棋牌通比牛牛输了多少

書名： Vue.js 3應(yīng)用開發(fā)與核心源碼解析
作者名：呂鳴
本章字?jǐn)?shù)： 1255字
更新時(shí)間： 2023-08-31 19:30:31

1.5.1　變量聲明

1．let、var和const

在ES 6語法中，新增了let和const來聲明變量，在ES 6之前，ES 5中只有全局作用域和函數(shù)作用域，代碼如下：

     if(true) {
        var a = 'Tom'
     }
     console.log('a',a) // Tom

作用域是一個(gè)獨(dú)立的地盤，讓變量不外泄出去，但是上面的代碼中的變量a就作為全局作用域外泄了出去，所以此時(shí)JavaScript沒有區(qū)塊作用域（或稱為塊級(jí)作用域）的概念。

在ES 6中加入?yún)^(qū)塊作用域之后，代碼如下：

     if(true) {
        let a = 'Tom'
     }
     console.log('a',a) // Uncaught ReferenceError: a is not defined

let和var都可以用來聲明變量，但是在ES 6中，有下面一些區(qū)別：

·　使用var聲明的變量沒有區(qū)塊的概念，可以跨塊訪問。

·　使用let聲明的變量只能在區(qū)塊作用域中訪問，不能跨塊訪問。

在相同的作用域下，使用var和let具有相同的效果，建議在ES 6語法中使用let來聲明變量，這樣可以更加明確該變量所處的作用域。

const表示聲明常量，一般用于一旦聲明就不再修改的值，并且const聲明的常量必須經(jīng)過初始化，代碼如下：

     const a = 1
     a = 2 // Uncaught TypeError: Assignment to constant variable
     const b // Uncaught SyntaxError: Missing initializer in const declaration

總結(jié)一下，如果在ES 5中習(xí)慣了使用var來聲明變量，在切換到ES 6時(shí)，就需要思考一下變量的用途和類型，選擇合適的let和const來使代碼更加規(guī)范和語義化。

2．箭頭函數(shù)

ES 6新增了使用“箭頭”（=>）聲明函數(shù)，代碼如下：

     let f = v => v
     // 等同于
     var f = function (v) {
       return v
     }

如果箭頭函數(shù)不需要參數(shù)或需要多個(gè)參數(shù)，就使用一個(gè)圓括號(hào)代表參數(shù)部分，當(dāng)函數(shù)的內(nèi)容只有返回語句時(shí)，可以省去大括號(hào)和return指令，代碼如下：

     let f = () => 5
     // 等同于
     var f = function () { return 5 }
     
     let sum = (num1, num2) => num1 + num2;
     // 等同于
     var sum = function(num1, num2) {
       return num1 + num2
     }

如果箭頭數(shù)的內(nèi)容部分多于一條語句，就要用大括號(hào)將它們括起來，并且使用return語句返回，代碼如下：

     let sum = (num1, num2) => {
       let num = 0
       return num1 + num2 + num;
     }

箭頭函數(shù)會(huì)默認(rèn)綁定外層的上下文對(duì)象this的值，因此在箭頭函數(shù)中，this的值和外層的this是一樣的，不需要使用bind或者call的方法來改變函數(shù)中的上下文對(duì)象，例如下面的代碼：

     mounted () {
       this.foo = 1
       setTimeout(function(){
         console.log(this.foo)  // 打印出1
       }.bind(this),200)
     }
     //相當(dāng)于
     mounted () {
       this.foo = 1
       setTimeout(() => {
         console.log(this.foo)  // 同樣打印出1
       },200)
     }

上面的代碼中，在Vue.js的mounted方法中，this指向當(dāng)前的Vue組件的上下文對(duì)象，如果想要在setTimeout的方法中使用this來獲取當(dāng)前Vue組件的上下文對(duì)象，那么非箭頭函數(shù)需要使用bind，箭頭函數(shù)則不需要。

箭頭函數(shù)是實(shí)戰(zhàn)項(xiàng)目中使用最多的ES 6語法，所以掌握好其規(guī)則和用法是非常重要的。

3．對(duì)象屬性和方法的簡寫

ES 6允許在大括號(hào)中直接寫入變量和函數(shù)，作為對(duì)象的屬性和方法，這樣的書寫更加簡潔，代碼如下：

     const foo = 'bar'
     const baz = {foo}
     
     // 等同于
     const baz = {foo: foo}
     console.log(baz) // {foo: "bar"}

對(duì)象中如果含有方法，也可以將function關(guān)鍵字省去，代碼如下：

     {
       name: 'item',
       data () {
         return {
            name:'bar'
         }
       }
       mounted () {
     
       },
       methods: {
         clearSearch () {
     
         }
       }
     }
     // 相當(dāng)于
     {
       name: 'item',
       data :function() {
         return {
            name:'bar'
         }
       }
       mounted :function() {
     
       },
       methods: {
         clearSearch :function() {
     
         }
       }
     }

在上面的代碼中，展示了采用ES 6語法來創(chuàng)建Vue組件所需的方法和屬性，包括name屬性、mounted方法、data方法等，是后面實(shí)戰(zhàn)項(xiàng)目中經(jīng)常使用的寫法。

4．對(duì)象解構(gòu)

在ES 6中，可以使用解構(gòu)從數(shù)組和對(duì)象中提取值并賦給獨(dú)特的變量，代碼如下：

     // 數(shù)組
     const input = [1, 2];
     const [first, second] = input;
     
     console.log(first,second) // 1 , 2
     // 對(duì)象
     const o = {
       a: "foo",
       b: 30,
       c: "Johnson"
     };
     const {a, b, c} = o;
     
     console.log(a,b,c) // foo , 30 , Johnson

在上面的代碼中，花括號(hào)“{ }”表示被解構(gòu)的對(duì)象，a、b和c表示要將對(duì)象中的屬性存儲(chǔ)到其中的變量中。

官术网_书友最值得收藏!

Vue.js 3應(yīng)用開發(fā)與核心源碼解析

1.5.1 變量聲明

1．let、var和const

2．箭頭函數(shù)

3．對(duì)象屬性和方法的簡寫

4．對(duì)象解構(gòu)

1.5.1　變量聲明