腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

JavaScript如何正確聲明和使用變量詳細代碼實例

更新時間：2024年07月02日 11:19:53 作者：云端源想

變量是程序在內(nèi)存中申請的一塊用來存放數(shù)據(jù)的空間,下面這篇文章主要給大家介紹了關(guān)于JavaScript如何正確聲明和使用變量的相關(guān)資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下

前言

在編程的世界里，數(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)鍵字進行變量的聲明操作。

語法：

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）變量賦值

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

變量賦值的語法為：

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聲明的特點：

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

2、let 聲明的特點：

let聲明的變量不會被提升，即在聲明之前引用let聲明的變量系統(tǒng)會直接報錯，直接阻斷程序的運行。
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ù)字不能開頭
字母嚴格區(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
        //嚴格區(qū)分大小寫
        let pink = '老師'
        let Pink = '演員'
        console.log(pink, Pink)
</script>
</body>

</html>

五、Strict（嚴格）模式

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

JavaScript在設(shè)計之初，并不強制要求申明變量，如果一個變量沒有申明就被使用，那么該變量就自動被聲明為全局變量。
在同一個頁面的不同的JavaScript文件中，如果都不聲明，將造成變量污染。
ECMA在后續(xù)規(guī)范中推出了strict模式，在strict模式下運行的JavaScript代碼，強制要求申明變量，否則報錯。啟用strict模式的方法是在JavaScript代碼的第一行寫上：

'use strict';

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

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

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

六、常量const的概念和使用

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

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

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

案例如下：

<!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)聲明。
很大概率是因為重復(fù)聲明了一個變量。
注意let 或者const 不允許多次聲明同一個變量。

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

總結(jié)

到此這篇關(guān)于JavaScript如何正確聲明和使用變量的文章就介紹到這了,更多相關(guān)JS正確聲明和使用變量內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript如何正確聲明和使用變量詳細代碼實例

目錄

前言

一、變量的概念和作用

二、變量的基本使用

1）聲明變量

2）變量賦值

3）變量初始化

4）更新變量

5）聲明多個變量

三、let 和var區(qū)別

1、var聲明的特點：

2、let 聲明的特點：

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

五、Strict（嚴格）模式

六、常量const的概念和使用

七、常見錯誤

1、常量必須要賦值

2、常量被重新賦值

3、變量未定義

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

總結(jié)

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript如何正確聲明和使用變量詳細代碼實例

目錄

前言

一、變量的概念和作用

二、變量的基本使用

1）聲明變量

2） 變量賦值

3）變量初始化

4）更新變量

5）聲明多個變量

三、let 和var區(qū)別

1、var聲明的特點：

2、let 聲明的特點：

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

五、Strict（嚴格）模式

六、常量const的概念和使用

七、常見錯誤

1、常量必須要賦值

2、常量被重新賦值

3、變量未定義

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

總結(jié)

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

一、變量的概念和作用

二、變量的基本使用

2）變量賦值

三、let 和var區(qū)別

1、var聲明的特點：

2、let 聲明的特點：

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

五、Strict（嚴格）模式

六、常量const的概念和使用

1、常量必須要賦值

3、變量未定義

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