JavaScript中var，let與const之間的區(qū)別有哪些

JavaScript中var，let與const之間的區(qū)別有哪些？這個問題可能是我們?nèi)粘W習或工作經(jīng)常見到的。希望通過這個問題能讓你收獲頗深。下面是小編給大家?guī)淼膮⒖純?nèi)容，讓我們一起來看看吧！

var，let和const的區(qū)別在于：var的變量聲明在代碼執(zhí)行前且工作范圍在當前執(zhí)行的上下文中，let是允許創(chuàng)建一個變量但只作用在它的塊里，const與let什么相似唯一的差別是const定義的變量不可更改

var VS let

var和let之間的主要區(qū)別不是使用函數(shù)作用域，而是使用塊作用域。 這意味著使用let關(guān)鍵字創(chuàng)建的變量在創(chuàng)建它的“塊”內(nèi)以及任何嵌套塊中都可用。

例

function discountPrices (prices, discount) {
  var a = []
  for (var i = 0; i < prices.length; i++) {
    var discountedPrice = prices[i] * (1 - discount)
    var finalPrice = Math.round(discountedPrice * 100) / 100
    a.push(finalPrice)
  }  console.log(i) // 3  console.log(discountedPrice) // 150 
  console.log(finalPrice) // 150
  return a
  }

在上面的例子中之所以能夠在for循環(huán)之外使用i，discountedPrice和finalPrice，是因為它們是用var聲明的，而var是函數(shù)作用域。如果我們將var換成let會發(fā)生什么情況呢？

function discountPrices (prices, discount) {
  let a = []
  for (let i = 0; i < prices.length; i++) {
    let discountedPrice = prices[i] * (1 - discount)
    let finalPrice = Math.round(discountedPrice * 100) / 100
    a.push(finalPrice)
  }  
  console.log(i) // 3  
  console.log(discountedPrice) // 150  
  console.log(finalPrice) // 150
  return a
  }
  discountPrices([100, 200, 300], .5) // 這兒會報錯i未定義

這個案例告訴我們的是，使用let聲明的變量是塊作用域，而不是函數(shù)作用域。 因此在“塊”之外訪問i（或discountedPrice或finalPrice）都會報錯

下一個區(qū)別與變量提升有關(guān)。提升的定義是“JavaScript解釋器會在所謂的'創(chuàng)建'階段將變量聲明賦值為undefined的默認值。

例：

function discountPrices (prices, discount) {  
console.log(discounted) // undefined
  var a = []
  for (var i = 0; i < prices.length; i++) {
    var discountedPrice = prices[i] * (1 - discount)
    var finalPrice = Math.round(discountedPrice * 100) / 100
    a.push(finalPrice)
  }
  console.log(i) // 3
  console.log(discountedPrice) // 150
  console.log(finalPrice) // 150
  return a}

如果想要在聲明變量之前使用let聲明的變量，而不是未定義（如使用var聲明的那些變量），程序?qū)箦e

function discountPrices (prices, discount) {  
console.log(discounted) // 錯誤
  let a = []
  for (let i = 0; i < prices.length; i++) {
    let discountedPrice = prices[i] * (1 - discount)
    let finalPrice = Math.round(discountedPrice * 100) / 100
    a.push(finalPrice)
  }
  console.log(i) // 3
  console.log(discountedPrice) // 150
  console.log(finalPrice) // 150
  return a}

結(jié)論是

var：變量聲明在代碼執(zhí)行之前被處理，它的作用范圍在其當前執(zhí)行的上下文中

let：let語句允許我們創(chuàng)建一個變量，其范圍僅限于使用它的塊里。

let VS const

既然已經(jīng)理解了var和let之間的區(qū)別，那么const呢？ 事實證明，const與let幾乎完全相同。 但是唯一的區(qū)別是，一旦使用const為變量賦值，就無法將其重新賦值給新值。

let name = 'Tyler'
const handle = 'tylermcginnis'
name = 'Tyler McGinnis' //正確
handle = '@tylermcginnis' //錯誤

從上面的內(nèi)容可以看出用let聲明的變量可以重新賦值，但用const聲明的變量不能。所以只要你想要一個變量是不可變的，你可以用const聲明它。但是用const聲明變量并不意味著它是不可變的，只是無法重新賦值，例：

const person = {
  name: 'Kim Kardashian'
  }
person.name = 'Kim Kardashian West' // 正確
person = {} // 錯誤

因此即使使用const聲明對象，也不意味著不能改變其任何屬性。 它只表示無法將其重新分配給新值

感謝各位的閱讀！看完上述內(nèi)容，你們對JavaScript中var，let與const之間的區(qū)別有哪些大概了解了嗎？希望文章內(nèi)容對大家有所幫助。如果想了解更多相關(guān)文章內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道。