JS怎么定義變量，三種方法，三種作用域

S怎么定義變量，三種方法，三種作用域

JavaScript定義變量的三種方法

在JavaScript中定義變量大致有三種方法，分別是使用var、let關(guān)鍵詞，以及不使用關(guān)鍵詞。這三種聲明的變量的作用域有所區(qū)別，下面將通過實(shí)例逐一進(jìn)行介紹。

var關(guān)鍵詞定義JS變量

通過關(guān)鍵詞var聲明的變量擁有函數(shù)級作用域：

<script>
  {var b=1}
  function addone(a){
    return a+b
  }
  alert(addone(1))
</script>

let關(guān)鍵詞定義JS變量

通過let定義的變量通常只在聲明它的代碼塊（以及任何包含此代碼塊的代碼塊）中可見【點(diǎn)擊試一試按鈕進(jìn)入在線編輯器，然后點(diǎn)擊運(yùn)行（會沒有反應(yīng)，不會像上面的實(shí)例一樣有窗口彈出），可觀察let和var的區(qū)別】：

<script>
  {let b=1}
  
  function addtwo(a){
    return a+b
  }
  alert(addtwo(2))
 
</script>

不加關(guān)鍵詞聲明的變量

不加任何關(guān)鍵詞聲明的變量，將自動轉(zhuǎn)變?yōu)槿肿兞浚路降膶?shí)例中，在函數(shù)內(nèi)部聲明了一個全局變量，然后將在函數(shù)外部訪問此變量：

<script>
  function addthree(a){
    b=3
    return a+b
  }
  c=addthree(2)
  alert(b)
 
</script>

原文：JS怎么定義變量，三種方法，三種作用域 | JavaScript語法

免責(zé)聲明：內(nèi)容僅供參考。

這里是云端源想IT，幫你輕松學(xué)IT”

嗨~ 今天的你過得還好嗎？

來日方長

熱愛和眾望終會殊途同歸

- 2024.04.19 -

在編程的世界里，數(shù)據(jù)是構(gòu)建一切的基礎(chǔ)。而在JavaScript中，變量就是存儲數(shù)據(jù)的容器。它們就像是我們生活中的盒子，可以裝下各種物品，讓我們在需要的時候隨時取用。

今天，就讓我們一起揭開變量的神秘面紗，探索它們的概念、使用規(guī)則，以及那些令人頭疼的錯誤。

一、變量的概念和作用

變量，顧名思義，是可以變化的量。在JavaScript中，變量是用來存儲數(shù)據(jù)的，這些數(shù)據(jù)可以是數(shù)字、字符串、對象等等。想象一下，如果沒有變量，我們的程序就會變得非常死板，無法靈活地處理和交換信息。

注意：變量不是數(shù)據(jù)本身，它們僅僅是一個用于存儲數(shù)值的容器。可以理解為是一個個用來裝東西的紙箱子。

二、變量的基本使用

1）聲明變量

要想使用變量，首先需要創(chuàng)建變量（也稱為聲明變量或者定義變量），JavaScript中通常使用var關(guān)鍵字或者let關(guān)鍵字進(jìn)行變量的聲明操作。

語法：

var age; //聲明一個名為age的變量
let name; //聲明一個名為name的變量

聲明變量有兩部分構(gòu)成：聲明關(guān)鍵字、變量名（標(biāo)識符）
let 即聲明關(guān)鍵字，所謂關(guān)鍵字是在JavaScript中有特殊意義的詞匯，比如let、var、function、if、else、switch、case、break等。

舉例：

let age

我們聲明了一個age變量
age 即變量的名稱，也叫標(biāo)識符

2）變量賦值

聲明出來后的變量是沒有值的，我們需要對聲明出來的變量進(jìn)行賦值操作。

變量賦值的語法為：

var age; //聲明一個名為age的變量
age=18; //為該個age變量賦值為18

定義了一個變量后，你就能夠初始化它（賦值）。在變量名之后跟上一個“=”，然后是數(shù)值。

注意：是通過變量名來獲得變量里面的數(shù)據(jù)。

3）變量初始化

變量初始化就相當(dāng)于聲明變量和變量賦值操作的結(jié)合，聲明變量并為其初始化。

變量初始化語法為：

var age=18; //聲明變量age并賦值為18

案例如下：

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>變量的使用</title>
</head>

<body>
<script>
// 1. 聲明一個年齡變量
let age
// 2. 賦值
age=18
console.log(age)
// 3. 聲明的同時直接賦值 變量的初始化
let age2=18

// 小案例
let num=20
let uname='pink老師'
console.log(num)
console.log(uname)
</script>
</body>

</html>

4）更新變量

變量賦值后，還可以通過簡單地給它一個不同的值來更新它。

注意： let 不允許多次聲明一個變量。

案例如下：

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>變量的使用更新</title>
</head>

<body>
<script>
// 1 聲明的同時直接賦值 變量的初始化
// let age=18
// age=19
// // let age=19
// console.log(age)
// 2. 聲明多個變量
// let age=18, uname='迪麗熱巴'
// console.log(age, uname)
</script>
</body>

</html>

5）聲明多個變量

語法：多個變量中間用逗號隔開。

let age=18,uname='pink'

說明：看上去代碼長度更短，但并不推薦這樣。為了更好的可讀性，請一行只聲明一個變量。

輸入用戶名案例：

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>輸入用戶名案例</title>
</head>

<body>
<script>
// 輸出用戶名案例
// 1. 用戶輸入
// prompt('請輸入姓名')
// 2. 內(nèi)部處理保存數(shù)據(jù)
let uname=prompt('請輸入姓名')
// 3. 打印輸出
document.write(uname)
</script>
</body>

</html>

三、let 和var區(qū)別

1、var聲明的特點(diǎn)：

變量可以先使用再聲明(不合理)。
var聲明過的變量可以重復(fù)聲明(不合理)。
比如變量提升、全局變量、沒有塊級作用域等等

2、let 聲明的特點(diǎn)：

let聲明的變量不會被提升，即在聲明之前引用let聲明的變量系統(tǒng)會直接報錯，直接阻斷程序的運(yùn)行。

let不可以在同一個作用域下重復(fù)聲明同一個變量，如果用let重復(fù)聲明同一個變量，那么這時候就會報錯。

用let聲明的變量支持塊級作用域，在es6提出塊級作用域的概念之前，作用域只存在函數(shù)里面，或者全局。而es6提出的塊級作用域則是一個大括號就是一個塊級作用域，該變量只能在塊級作用域里使用，否則就會報錯。

注意：

var 在現(xiàn)代開發(fā)中一般不再使用它，只是我們可能在老版程序中看到它。
let 是為了解決 var 的一些問題而出現(xiàn)的，以后聲明變量我們統(tǒng)一使用 let。

案例如下：

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>let和var的區(qū)別</title>
</head>

<body>
<script>
// var可以重復(fù)聲明，后面聲明的覆蓋前面的
var num1
var num1=10
var num1=20
console.log(num1)
// let不能重復(fù)聲明，直接編譯不通過
// let num
// let num=20
// let num=10
// console.log(num)
</script>
</body>

</html>

四、變量命名規(guī)則與規(guī)范

規(guī)則：必須遵守，不遵守報錯 (法律層面)

不能用關(guān)鍵字（有特殊含義的字符，JavaScript 內(nèi)置的一些英語詞匯，例如：let、var、if、for等）

只能用下劃線、字母、數(shù)字、$組成，且數(shù)字不能開頭
字母嚴(yán)格區(qū)分大小寫，如 Age 和 age 是不同的變量

規(guī)范：建議，不遵守不會報錯，但不符合業(yè)內(nèi)通識（道德層面）

起名要有意義
遵守小駝峰命名法：第一個單詞首字母小寫，后面每個單詞首字母大寫。例：userName。

案例如下：

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>變量的命名規(guī)范</title>
</head>

<body>
<script>
// let if=10
let num1$_=11
// let nav-bar=11
// let 1num=10
//嚴(yán)格區(qū)分大小寫
let pink='老師'
let Pink='演員'
console.log(pink, Pink)
</script>
</body>

</html>

五、Strict（嚴(yán)格）模式

嚴(yán)格模式是一種限制性更強(qiáng)的JavaScript運(yùn)行環(huán)境。在嚴(yán)格模式下，一些不安全或容易出錯的行為會被禁止。

JavaScript在設(shè)計之初，并不強(qiáng)制要求申明變量，如果一個變量沒有申明就被使用，那么該變量就自動被聲明為全局變量。
在同一個頁面的不同的JavaScript文件中，如果都不聲明，將造成變量污染。

ECMA在后續(xù)規(guī)范中推出了strict模式，在strict模式下運(yùn)行的JavaScript代碼，強(qiáng)制要求申明變量，否則報錯。啟用strict模式的方法是在JavaScript代碼的第一行寫上：

'use strict';

這是一個字符串，不支持strict模式的瀏覽器會把它當(dāng)做一個字符串語句執(zhí)行，支持strict模式的瀏覽器將開啟strict模式運(yùn)行JavaScript。

如果瀏覽器不報錯，說明你的瀏覽器太古老了，需要盡快升級。

'use strict';
// 如果瀏覽器支持strict模式，下面的代碼將報ReferenceError錯誤:
abc='Hello, world';
console.log(abc);

六、常量const的概念和使用

有時候，我們希望某些變量的值在程序運(yùn)行過程中保持不變。這時，可以使用const關(guān)鍵字來聲明一個常量。

const是ES6引入的一個新特性，用于聲明常量。常量一旦被聲明并賦值后，其值就不能被改變。這為我們提供了一種保護(hù)機(jī)制，確保某些值不會被意外修改。

使用場景：當(dāng)某個變量永遠(yuǎn)不會改變的時候，就可以使用 const 來聲明，而不是let。
命名規(guī)范：和變量一致
注意： 常量不允許重新賦值,聲明的時候必須賦值（初始化）

想要快速入門前端開發(fā)嗎？推薦一個前端開發(fā)基礎(chǔ)課程，這個老師講的特別好，零基礎(chǔ)學(xué)習(xí)無壓力，知識點(diǎn)結(jié)合代碼，邊學(xué)邊練，可以免費(fèi)試看試學(xué)，還有各種輔助工具和資料，非常適合新手！點(diǎn)這里前往學(xué)習(xí)哦！云端源想-程序員必看的精品課程

案例如下：

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>常量</title>
</head>

<body>
<script>
// 1.聲明常量，使用常量
const PI=3.14
console.log(PI)
//不允許更改值
//PI=3.15
// 2. 常量聲明的時候必須賦值
//const G
</script>
</body>

</html>

七、常見錯誤

1、常量必須要賦值

2、常量被重新賦值

3、變量未定義

分析：

提示 age變量沒有定義過。
很可能 age 變量沒有聲明和賦值。
或者我們輸出變量名和聲明的變量不一致引起的（簡單說寫錯變量名了）。

4、重復(fù)聲明變量

分析：

提示 “age”已經(jīng)聲明。
很大概率是因?yàn)橹貜?fù)聲明了一個變量。
注意let 或者const 不允許多次聲明同一個變量。

變量是JavaScript編程的基礎(chǔ)，掌握了變量的聲明和使用，就能更好地理解和編寫代碼。希望這篇文章能幫助你更好地理解和使用變量，讓你的編程之路更加順暢。

記住，實(shí)踐是最好的老師，多寫代碼，多嘗試，你會發(fā)現(xiàn)，原來變量的世界，也可以如此精彩！

如果覺得本文對你有所幫助，別忘了點(diǎn)贊和分享哦！

今天就先講到這里了，

更多前端開發(fā)基礎(chǔ)知識點(diǎn)擊文末閱讀原文查看哦！

記得關(guān)注【云端源想IT】一起學(xué)編程！

我們下期再見！

END

文案編輯|云端學(xué)長

文案配圖|云端學(xué)長

內(nèi)容由：云端源想分享

量與常量是存儲數(shù)據(jù)的容器。

變量可以更換內(nèi)容，重復(fù)使用。

常量裝下一個值后就不能再改變這個值了。

一、變量

1.1 簡單介紹一下變量定義的語法

初中的時候，學(xué)習(xí)了一個學(xué)科“代數(shù)”，x、y、z、a、b、c。計算機(jī)的程序中，也是有這樣的量，就是用字母來表示數(shù)字，即為“變量”。

 //定義變量的語法
var a=100;   //注意：var后面必須加一個空格

我們使用關(guān)鍵字var來定義一個變量a，a的值是100。理解為：用變量a來存放數(shù)值100.

var就是英語“variant”變量的縮寫。var后面要加一個空格，空格后面的東西就是“變量名”。

等號表示賦值，會將等號右邊的值，賦給左邊的變量。

各語言定義變量的對比：

var a="測試"；        // javascript 弱變量類型的語言，變量只需要用var來聲明。
var a:string="測試";  //TypeScript 語法： var [變量名] : [類型]=值;
String a="測試";     // java      語法：[修飾符] 類型 變量名 [=默認(rèn)值];
a="測試";               // python

1.2 變量的命名規(guī)范

變量名的命名規(guī)范：

只能由英語字母、數(shù)字、下劃線、美元符號$構(gòu)成，且不能以數(shù)字開頭，并且不能是JavaScript保留字。

1.變量命名必須以字母或是下標(biāo)符號”_”或者”$”為開頭。

2.變量名長度不能超過255個字符。

3.變量名中不允許使用空格。

4.不用使用腳本語言中保留的關(guān)鍵字及保留符號作為變量名。

5.變量名區(qū)分大小寫。(javascript、Java、Python是區(qū)分大小寫的語言)

下列的單詞，叫做保留字，就是說不允許當(dāng)做變量名（了解就好，不用記）：

abstract、boolean、byte、char、class、const、debugger、double、enum、export、extends、final、float、goto

implements、import、int、interface、long、native、package、private、protected、public、short、static、super、synchronized、throws、transient、volatile

1.3 變量的定義和賦值

變量只有定義（聲明）之后，這個變量才能夠使用。

<script type="text/javascript">
   console.log(a);  //不定義變量，直接輸出該變量,則會報錯
</script>

正確示例：

var a;   // 定義，定義變量后它是空的（undefined），它里面沒有值。
a=100;  //賦值，賦值用等于號，表示等號右邊的值，賦給左邊的變量。
console.log(a);  //輸出100

也可以把定義和賦值寫在一起：

var a=100;    //定義，并且賦值100
console.log(a);  //輸出100

1.4 擴(kuò)展知識

靜態(tài)語言和動態(tài)語言

javaScript可以把任意數(shù)據(jù)類型賦值給變量，同一個變量可以反復(fù)賦值，而且可以是不同類型的變量。

這種變量本身類型不固定的語言稱之為動態(tài)語言，與之對應(yīng)的是靜態(tài)語言。

靜態(tài)語言在定義變量時必須指定變量類型，如果賦值的時候類型不匹配，就會報錯。

例如，Java是靜態(tài)語言，賦值語句如下：

  int a=123; // a是整數(shù)類型變量
  a="ABC"; // 錯誤：不能把字符串賦給整型變量

undefined的簡單介紹

在計算機(jī)程序中，經(jīng)常會聲明無值的變量。未使用值來聲明的變量，其值實(shí)際上是 undefined。

在執(zhí)行過以下語句后，變量 carname 的值將是 undefined：

var carname;

區(qū)分變量和字符串

 var a=100;console.log(a);console.log("a");    //輸出字母a

這個a在引號里面，所以就是一個字符串“a”了，而不是一個變量。換句話說，一個變量如果想輸出保存的內(nèi)容，那么就不能加引號。

#JavaScript# #前端#

在線咨詢

上一篇：wordpress網(wǎng)站模板開發(fā)中，怎樣創(chuàng)建自定義導(dǎo)航
下一篇：24 個 JavaScript 循環(huán)遍歷方法，你都知

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

JS怎么定義變量，三種方法，三種作用域

JavaScript定義變量的三種方法

var關(guān)鍵詞定義JS變量

let關(guān)鍵詞定義JS變量

不加關(guān)鍵詞聲明的變量

一、變量的概念和作用

二、變量的基本使用

三、let 和var區(qū)別

四、變量命名規(guī)則與規(guī)范

五、Strict（嚴(yán)格）模式

六、常量const的概念和使用

七、常見錯誤

一、變量

1.1 簡單介紹一下變量定義的語法

1.2 變量的命名規(guī)范

1.3 變量的定義和賦值

1.4 擴(kuò)展知識

您的項(xiàng)目需求