- Vue.js 3應用開發與核心源碼解析
- 呂鳴
- 1255字
- 2023-08-31 19:30:31
1.5.1 變量聲明
1．let、var和const
在ES 6語法中，新增了let和const來聲明變量，在ES 6之前，ES 5中只有全局作用域和函數作用域，代碼如下：
if(true) {
var a = 'Tom'
}
console.log('a',a) // Tom
作用域是一個獨立的地盤，讓變量不外泄出去，但是上面的代碼中的變量a就作為全局作用域外泄了出去，所以此時JavaScript沒有區塊作用域（或稱為塊級作用域）的概念。
在ES 6中加入區塊作用域之后，代碼如下：
if(true) {
let a = 'Tom'
}
console.log('a',a) // Uncaught ReferenceError: a is not defined
let和var都可以用來聲明變量，但是在ES 6中，有下面一些區別：
· 使用var聲明的變量沒有區塊的概念，可以跨塊訪問。
· 使用let聲明的變量只能在區塊作用域中訪問，不能跨塊訪問。
在相同的作用域下，使用var和let具有相同的效果，建議在ES 6語法中使用let來聲明變量，這樣可以更加明確該變量所處的作用域。
const表示聲明常量，一般用于一旦聲明就不再修改的值，并且const聲明的常量必須經過初始化，代碼如下：
const a = 1
a = 2 // Uncaught TypeError: Assignment to constant variable
const b // Uncaught SyntaxError: Missing initializer in const declaration
總結一下，如果在ES 5中習慣了使用var來聲明變量，在切換到ES 6時，就需要思考一下變量的用途和類型，選擇合適的let和const來使代碼更加規范和語義化。
2．箭頭函數
ES 6新增了使用“箭頭”（=>）聲明函數，代碼如下：
let f = v => v
// 等同于
var f = function (v) {
return v
}
如果箭頭函數不需要參數或需要多個參數，就使用一個圓括號代表參數部分，當函數的內容只有返回語句時，可以省去大括號和return指令，代碼如下：
let f = () => 5
// 等同于
var f = function () { return 5 }
let sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2) {
return num1 + num2
}
如果箭頭數的內容部分多于一條語句，就要用大括號將它們括起來，并且使用return語句返回，代碼如下：
let sum = (num1, num2) => {
let num = 0
return num1 + num2 + num;
}
箭頭函數會默認綁定外層的上下文對象this的值，因此在箭頭函數中，this的值和外層的this是一樣的，不需要使用bind或者call的方法來改變函數中的上下文對象，例如下面的代碼：
mounted () {
this.foo = 1
setTimeout(function(){
console.log(this.foo) // 打印出1
}.bind(this),200)
}
//相當于
mounted () {
this.foo = 1
setTimeout(() => {
console.log(this.foo) // 同樣打印出1
},200)
}
上面的代碼中，在Vue.js的mounted方法中，this指向當前的Vue組件的上下文對象，如果想要在setTimeout的方法中使用this來獲取當前Vue組件的上下文對象，那么非箭頭函數需要使用bind，箭頭函數則不需要。
箭頭函數是實戰項目中使用最多的ES 6語法，所以掌握好其規則和用法是非常重要的。
3．對象屬性和方法的簡寫
ES 6允許在大括號中直接寫入變量和函數，作為對象的屬性和方法，這樣的書寫更加簡潔，代碼如下：
const foo = 'bar'
const baz = {foo}
// 等同于
const baz = {foo: foo}
console.log(baz) // {foo: "bar"}
對象中如果含有方法，也可以將function關鍵字省去，代碼如下：
{
name: 'item',
data () {
return {
name:'bar'
}
}
mounted () {
},
methods: {
clearSearch () {
}
}
}
// 相當于
{
name: 'item',
data :function() {
return {
name:'bar'
}
}
mounted :function() {
},
methods: {
clearSearch :function() {
}
}
}
在上面的代碼中，展示了采用ES 6語法來創建Vue組件所需的方法和屬性，包括name屬性、mounted方法、data方法等，是后面實戰項目中經常使用的寫法。
4．對象解構
在ES 6中，可以使用解構從數組和對象中提取值并賦給獨特的變量，代碼如下：
// 數組
const input = [1, 2];
const [first, second] = input;
console.log(first,second) // 1 , 2
// 對象
const o = {
a: "foo",
b: 30,
c: "Johnson"
};
const {a, b, c} = o;
console.log(a,b,c) // foo , 30 , Johnson
在上面的代碼中，花括號“{ }”表示被解構的對象，a、b和c表示要將對象中的屬性存儲到其中的變量中。