在 JavaScript 中,我們會需要暫時儲存資料以便之後提供給前端的元素使用或進行邏輯運算,這時候就會需要用變數來存放這些 data。簡而言之,變數有點像數學的代數,我們會先將某代數 x 賦予一個值,以便後續做運算,只不過在 JS 程式中有固定的特殊賦值規則。
在 JS 中,我們可以隨意使用英文+數字來當做變數的名稱 ( 某些具有特定意義的單字不行 )。
test
與 Test
代表不同的變數變數名本身是由一串無規則得文字字串組成的,為了讓程式知道我要將這組文字設為變數名,所以我們要先宣告他,在 JS 中主要有兩種宣告變數的方式 —— let
和 var
。
宣告:
利用 let 變數名;
或 var 變數名;
(不推薦) 讓這串字符成為一個變數的名稱。
var abc;
let firstData;
賦值:
在宣告後我們還需要將某個值指定到變數中 (賦值),語法為 變數 = 值
。
abc = 222;
firstData = 123;
同時宣告和賦值
為了方便,也可以將宣告和賦值簡寫為同一行。
let x = 100;
完整範例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript 小練習</title>
</head>
<body>
<script>
// 先宣告後賦值
let a; // 宣告
a = 10; // 賦值
console.log(a); // 輸出 a 的值到 console 中
// 同時進行宣告和賦值
let x = 5; // 宣告 x 這個變數等於 5
let y = 4; // 宣告 y 這個變數等於 4
console.log(x); // 輸出 x 的值到 console 中
console.log(y); // 輸出 y 的值到 console 中
</script>
</body>
</html>
變數既然稱之為變數,那就一定是可以被改變的,變數就像一個容器 (或代數),裡面乘載著我們賦予他的值,那要怎麼將變數的值更新呢?其實與賦值的語法相同,只需要 變數 = 新的值
就可以了。
範例
let age = 18; // 將 age 宣告為 18
let year = 2023; // 將 year 宣告為 2023
console.log(age); // 輸出 18
console.log(year); // 輸出 2023
age = 19; // 將 age 改為 19
console.log(age); // 輸出 19
console.log(year); // 輸出 2023
除了可以指定更新變數的值之外,也可以設定 變數A = 變數B
,變數B的值會被賦予到變數A。
範例
let age = 18; // 將 age 宣告為 18
let year = 2023; // 將 year 宣告為 2023
console.log(age); // 輸出 18
console.log(year); // 輸出 2023
age = year; // 將 year 的值放到 age 中
console.log(age); // 輸出 2023
console.log(year); // 輸出 2023
常數與變數都是儲存值的容器,常數利用 const 宣告,兩者的差別在於常數宣告後就無法被修改。
範例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript 小練習</title>
</head>
<body>
<script>
const age = 18; // 將 age 宣告為 18
age = 2023; // 會發生錯誤
</script>
</body>
</html>
上一篇:[快速入門前端 36] 初探 JavaScript
下一篇:[快速入門前端 38] JavaScript:資料型態 (1) 基本資料型態和複合資料型態
系列文章列表:[快速入門前端] 系列文章索引列表