手把手教你Javascript （2）-變量

天來說一下Javascript的變量。

第一節里面可以看到這樣的語句：

var a=1;
var b=5;
var c=10;
console.log(c-b+a);

在這個里面，a、b、c就是變量。

在JavaScript里面定義一個變量非常簡單，就是：

var 變量名稱=變量值

有的童靴可能會問，為什么需要定義變量呢？

因為程序是需要實現一定功能的，而實現功能就必須使用變量。

譬如你寫了一個程序，來提示還房貸的日期到了，這個日期是每月10號。

那么程序大概是這樣的：

var 提示消息=“還款日期到了，注意卡里面有沒有錢”
if(今天日期==10）
{
console.log(提示消息) //輸入提示信息
}

在這個程序里面，“今天日期”肯定不是一個固定的值，因為可能對于5月10號來說，它的值是5-10，到了5月20號，它的值就變了。

這就是我們要定義一個變量的原因。

在JavaScript里面，每一個變量都是有類型的！

JS變量的類型主要有下面6種：

1、string--字符串
2、number-數值
3、boolean-true或者false，真還是假
4、null-空，懸空的值
5、undefined-沒有定義的值
6、object-對象

為什么變量會存在不同的類型？

因為對不同類型來講，它對應的不同的東西。

譬如一個加法操作，不同類型對應的操作可能如下：

number：對應顯示中的數字，銀行存款、車里程數等等，兩個number，譬如5和10，相加就是2個數字的和，結果是15
string：字符串（譬如“hello”和“world”），兩個字符串相加就是把他們連起來，結果是“helloworld”
boolean：是對應真假，譬如先進行“戰場上那個人是不是敵人”這個判定，然后再采取進一步的動作。如果是就開槍，如果不是就過去集合
null、undefined判定是否變量是否定義過了或者當前狀態是懸空狀態。
object：對應顯示中的物體。你在JS可以一個car的object，這個car表示一輛車，然后這輛車有型號、價格、行駛總里程數等屬性，還有方法-把你從一個地方送到另外一個地方，它的總行駛里程數會會自動增加。總之object可以讓你對應現實中的一個具體物體，來進行程序操作。

最后還是說一下那個變量輸出的方法:

console.log(變量名）

這個方法的含義相信大家應該都懂了，就是在瀏覽器的Console（英文，終端的意思）里面輸出變量的值。

另外呢，在Js里面，“//"表示后面的內容都是注釋，代碼運行的時候會直接省略，但是對于我們看代碼有幫助。

最后還是來3個例子，大家可以去課程1里面提到的在線JS運行網站：

http://jsrun.net/new

去實際運行一下。

例子1：

var a=1000; //定義一個number變量，名稱為a，數值為1000
var b=50;
console.log(a+b); //求他們的和

例子2：

var str1="Hello "; //定義string字符串變量
var str2="World!";
console.log(a+b); //求他們的和

例子3：

var num1=1000
var num2=900
var is_big=num1>num2; //這是個boolean變量
if(is_big){
console.log("num1 比num2 大“);
}
num3=9000
var is_little=num1<num3
if(is_little){
console.log("num1小于num3");
}

其它類型，以后會遇到的時候再說。

好了，今天就到這里！

這里是云端源想IT，幫你輕松學IT”

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

來日方長

熱愛和眾望終會殊途同歸

- 2024.04.19 -

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

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

一、變量的概念和作用

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

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

二、變量的基本使用

1）聲明變量

要想使用變量，首先需要創建變量（也稱為聲明變量或者定義變量），JavaScript中通常使用var關鍵字或者let關鍵字進行變量的聲明操作。

語法：

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

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

舉例：

let age

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

2）變量賦值

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

變量賦值的語法為：

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

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

注意：是通過變量名來獲得變量里面的數據。

3）變量初始化

變量初始化就相當于聲明變量和變量賦值操作的結合，聲明變量并為其初始化。

變量初始化語法為：

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. 內部處理保存數據
let uname = prompt('請輸入姓名')
// 3. 打印輸出
document.write(uname)
</script>
</body>

</html>

三、let 和var區別

1、var聲明的特點：

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

2、let 聲明的特點：

let聲明的變量不會被提升，即在聲明之前引用let聲明的變量系統會直接報錯，直接阻斷程序的運行。

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

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

注意：

var 在現代開發中一般不再使用它，只是我們可能在老版程序中看到它。
let 是為了解決 var 的一些問題而出現的，以后聲明變量我們統一使用 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的區別</title>
</head>

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

</html>

四、變量命名規則與規范

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

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

只能用下劃線、字母、數字、$組成，且數字不能開頭
字母嚴格區分大小寫，如 Age 和 age 是不同的變量

規范：建議，不遵守不會報錯，但不符合業內通識（道德層面）

起名要有意義
遵守小駝峰命名法：第一個單詞首字母小寫，后面每個單詞首字母大寫。例：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>變量的命名規范</title>
</head>

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

</html>

五、Strict（嚴格）模式

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

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

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

'use strict';

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

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

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

六、常量const的概念和使用

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

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

使用場景：當某個變量永遠不會改變的時候，就可以使用 const 來聲明，而不是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.聲明常量，使用常量
const PI = 3.14
console.log(PI)
//不允許更改值
//PI = 3.15
// 2. 常量聲明的時候必須賦值
//const G
</script>
</body>

</html>

七、常見錯誤

1、常量必須要賦值

2、常量被重新賦值

3、變量未定義

分析：

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

4、重復聲明變量

分析：

提示 “age”已經聲明。
很大概率是因為重復聲明了一個變量。
注意let 或者const 不允許多次聲明同一個變量。

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

記住，實踐是最好的老師，多寫代碼，多嘗試，你會發現，原來變量的世界，也可以如此精彩！

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

今天就先講到這里了，

更多前端開發基礎知識點擊文末閱讀原文查看哦！

記得關注【云端源想IT】一起學編程！

我們下期再見！

END

文案編輯|云端學長

文案配圖|云端學長

內容由：云端源想分享

JavaScript 中，函數及變量的聲明都將被提升到函數的最頂部。

JavaScript 中，變量可以在使用后聲明，也就是變量可以先使用再聲明。

以下兩個實例將獲得相同的結果：

實例 1

x = 5; // 變量 x 設置為 5

elem = document.getElementById("demo"); // 查找元素

elem.innerHTML = x; // 在元素中顯示 x

var x; // 聲明 x

實例 2

var x; // 聲明 x

x = 5; // 變量 x 設置為 5

elem = document.getElementById("demo"); // 查找元素

elem.innerHTML = x; // 在元素中顯示 x

要理解以上實例就需要理解 "hoisting(變量提升)"。

變量提升：函數聲明和變量聲明總是會被解釋器悄悄地被"提升"到方法體的最頂部。

JavaScript 初始化不會提升

JavaScript 只有聲明的變量會提升，初始化的不會。

以下兩個實例結果結果不相同：

實例 1

var x = 5; // 初始化 x

var y = 7; // 初始化 y

elem = document.getElementById("demo"); // 查找元素

elem.innerHTML = x + " " + y; // 顯示 x 和 y

實例 2

var x = 5; // 初始化 x

elem = document.getElementById("demo"); // 查找元素

elem.innerHTML = x + " " + y; // 顯示 x 和 y

var y = 7; // 初始化 y

實例 2 的 y 輸出了 undefined，這是因為變量聲明 (var y) 提升了，但是初始化(y = 7) 并不會提升，所以 y 變量是一個未定義的變量。

實例 2 類似以下代碼:

var x = 5; // 初始化 xvar y; // 聲明 yelem = document.getElementById("demo"); // 查找元素elem.innerHTML = x + " " + y; // 顯示 x 和 yy = 7; // 設置 y 為 7

在頭部聲明你的變量

對于大多數程序員來說并不知道 JavaScript 變量提升。

如果程序員不能很好的理解變量提升，他們寫的程序就容易出現一些問題。

為了避免這些問題，通常我們在每個作用域開始前聲明這些變量，這也是正常的 JavaScript 解析步驟，易于我們理解。

	JavaScript 嚴格模式(strict mode)不允許使用未聲明的變量。在下一個章節中我們將會學習到 "嚴格模式(strict mode)" 。

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

在線咨詢

上一篇：十分全面！作為前端應當了解的那些Web緩存知識
下一篇：網頁前端開發中常用的html控件(二)button和select「208」