JavaScript变量

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
相关推荐
小羊没烦恼!3 天前
初探性能优化——2个月到4小时的性能提升
java·开发语言·windows·算法·c#
三十而立洋3 天前
Cookie 详解:从产生到安全,一次讲透
前端·javascript
伞伞悦读3 天前
【第38期】Python 模块与包详解:import、from、模块搜索路径、包结构和 __init__
开发语言·python
卡布鲁3 天前
把一个 Vite + Vue3 应用塞进 qiankun (React + Umi3) 主站:十个坑的复盘
前端·javascript·react.js
C语言小火车3 天前
C/C++ 为什么需要编译器?
开发语言·c++
李少兄3 天前
JavaScript 隐式全局变量解析
javascript
霍霍的袁3 天前
【C++】map 和 set 的使用 | 从用法到底层
开发语言·c++·学习·visual studio
孙启超3 天前
【AI开发之Rust】第 11 课:智能指针与内部可变性
开发语言·后端·rust
此生决int3 天前
深入理解C++系列(20)——C++11(下)
开发语言·c++
沙蒿同学3 天前
我用 Go 搭了一条 AI Agent 流水线:从 1 张商品图到一整套淘宝详情页
前端·javascript·后端