JavaScript 变量我们可以把它理解为:
变量 = 一个带名字的盒子,用来存放数据。
1. 什么是变量
例如:
javascript
let name = "Tom";
相当于:
name ──► "Tom"
这里:
name是变量名"Tom"是变量值
以后需要这个值时:
javascript
console.log(name);
输出:
javascript
Tom
2. 声明变量
JS 有三种声明变量的方法:
javascript
var
let
const
let(最常用)
javascript
let age = 18;
修改:
javascript
let age = 18;
age = 20;
console.log(age);
结果:
javascript
20
const(常量)
声明后不能重新赋值:
javascript
const PI = 3.14;
错误:
javascript
const PI = 3.14;
PI = 3.14159;
会报错:
javascript
TypeError
3. 变量命名规则
可以
javascript
let age;
let userName;
let score1;
let _name;
let $price;
不可以
数字开头:
javascript
let 123abc;
错误
包含空格:
javascript
let user name;
错误
使用关键字:
javascript
let let;
let const;
let if;
错误
4. 变量赋值
声明时赋值
javascript
let age = 18;
先声明后赋值
javascript
let age;
age = 18;
修改变量
javascript
let age = 18;
age = 20;
结果:
javascript
20
5. 变量的数据类型
JS 是动态类型语言。
意思:
javascript
let x = 10;
后面可以改成:
javascript
x = "hello";
完全合法。
Number
数字:
javascript
let age = 18;
let price = 99.9;
String
字符串:
javascript
let name = "Tom";
或者:
javascript
let name = 'Tom';
Boolean
布尔值:
javascript
let isLogin = true;
let isAdmin = false;
Undefined
声明但没赋值:
javascript
let age;
console.log(age);
结果:
javascript
undefined
Null
表示空值:
javascript
let user = null;
Object(对象)
最重要的数据类型之一。
javascript
let person = {
name: "Tom",
age: 18
};
typeof person;
结果:
javascript
"object"
数组其实也是对象:
javascript
let arr = [1, 2, 3];
typeof arr;
结果:
javascript
"object"
Symbol(符号)
用于创建唯一值:
javascript
let id = Symbol();
typeof id;
结果:
javascript
"symbol"
例如:
javascript
let s1 = Symbol();
let s2 = Symbol();
console.log(s1 === s2);
结果:
javascript
false
即使长得一样,也永远不相等。
BigInt(大整数)
用于超大整数计算。
普通 Number 最大安全整数:
javascript
Number.MAX_SAFE_INTEGER
约等于:
9007199254740991
超过后可能不准确。
javascript
BigInt:
let n = 123456789012345678901234567890n;
注意后面的:
javascript
n
表示 BigInt。
javascript
typeof n;
结果:
"bigint"
6. typeof 查看类型
javascript
let age = 18;
console.log(typeof age);
结果:
javascript
number
例子:
javascript
console.log(typeof 123);
javascript
number
javascript
console.log(typeof "hello");
javascript
string
javascript
console.log(typeof true);
javascript
boolean
javascript
console.log(typeof undefined);
javascript
undefined
7. 字符串拼接
传统写法:
javascript
let name = "Tom";
console.log("你好 " + name);
结果:
javascript
你好 Tom
推荐写法(模板字符串)
javascript
let name = "Tom";
console.log(`你好 ${name}`);
结果:
javascript
你好 Tom
多个变量:
javascript
let name = "Tom";
let age = 18;
console.log(`我叫${name},今年${age}岁`);
结果:
javascript
我叫Tom,今年18岁
8. 变量作用域
作用域:
变量在哪里能访问。
全局变量
javascript
let name = "Tom";
function test() {
console.log(name);
}
输出:
javascript
Tom
整个程序都能访问。
局部变量
javascript
function test() {
let age = 18;
}
console.log(age);
报错:
javascript
ReferenceError
因为:
javascript
age
只在函数内部存在。
块级作用域
let 和 const 有块级作用域。
javascript
{
let age = 18;
}
console.log(age);
报错:
javascript
ReferenceError
9. var、let、const 对比
| 特性 | var | let | const |
|---|---|---|---|
| 可修改 | ✅ | ✅ | ❌ |
| 可重复声明 | ✅ | ❌ | ❌ |
| 块级作用域 | ❌ | ✅ | ✅ |
| 推荐程度 | ❌ | ✅ | ✅ |
例子:
javascript
var a = 1;
var a = 2;
合法。
javascript
let a = 1;
let a = 2;
报错。
10. 解构赋值
数组:
javascript
let arr = [10, 20];
let [a, b] = arr;
console.log(a);
console.log(b);
结果:
javascript
10
20
对象:
javascript
let user = {
name: "Tom",
age: 18
};
let { name, age } = user;
console.log(name);
console.log(age);
结果:
javascript
Tom
18