您现在的位置是：网站首页 > 变量与数据类型文章详情
变量与数据类型
陈川
【
JavaScript
】
36578人已围观
5108字
变量
变量是存储数据的容器。在JavaScript中，使用var、let或const关键字声明变量。var是ES5的声明方式，存在变量提升问题；let和const是ES6新增的块级作用域声明方式。
var name = "张三"; // 函数作用域
let age = 25; // 块级作用域
const PI = 3.14; // 块级作用域，不可重新赋值
变量命名规则：
- 必须以字母、下划线(_)或美元符号($)开头
- 后续字符可以是字母、数字、下划线或美元符号
- 区分大小写
- 不能使用保留字
let _private = "私有";
let $element = document.getElementById("demo");
let user1 = "李四"; // 合法
// let 1user = "王五"; // 非法
数据类型
JavaScript是弱类型语言，数据类型分为两大类：原始类型和引用类型。
原始类型(基本类型)
-
Number：整数和浮点数
let integer = 42; let float = 3.14159; let infinity = Infinity; let nan = NaN; // 特殊数值 -
String：文本数据
let single = '单引号'; let double = "双引号"; let backtick = `模板字符串 ${single}`; // ES6 -
Boolean：逻辑值true/false
let isTrue = true; let isFalse = false; -
Null：表示空值
let empty = null; -
Undefined：未定义的值
let notDefined; console.log(notDefined); // undefined -
Symbol：唯一且不可变的值(ES6新增)
let sym1 = Symbol("key"); let sym2 = Symbol("key"); console.log(sym1 === sym2); // false -
BigInt：大整数(ES2020新增)
const bigNum = 9007199254740991n;
引用类型
-
Object：键值对集合
let person = { name: "王五", age: 30, isStudent: false }; -
Array：有序列表
let colors = ["red", "green", "blue"]; -
Function：可执行代码块
function greet(name) { return `Hello, ${name}!`; } -
Date：日期时间
let now = new Date(); -
RegExp：正则表达式
let pattern = /test/i;
类型检测
JavaScript提供了多种检测数据类型的方法：
-
typeof 操作符
console.log(typeof 42); // "number" console.log(typeof "text"); // "string" console.log(typeof true); // "boolean" console.log(typeof undefined); // "undefined" console.log(typeof null); // "object" (历史遗留问题) console.log(typeof {}); // "object" console.log(typeof []); // "object" console.log(typeof function(){}); // "function" -
instanceof 操作符(检测对象类型)
console.log([] instanceof Array); // true console.log({} instanceof Object); // true console.log(function(){} instanceof Function); // true -
Object.prototype.toString 方法
console.log(Object.prototype.toString.call(42)); // "[object Number]" console.log(Object.prototype.toString.call("text")); // "[object String]" console.log(Object.prototype.toString.call([])); // "[object Array]"
类型转换
JavaScript会自动进行隐式类型转换，也可以显式转换：
显式转换
-
转换为字符串
let num = 123; let str = String(num); // "123" let str2 = num.toString(); // "123" -
转换为数字
let str = "3.14"; let num = Number(str); // 3.14 let int = parseInt(str); // 3 let float = parseFloat(str); // 3.14 -
转换为布尔值
let val1 = Boolean(""); // false let val2 = Boolean(0); // false let val3 = Boolean(null); // false let val4 = Boolean(undefined); // false let val5 = Boolean("text"); // true let val6 = Boolean(1); // true
隐式转换
let result1 = "3" + 2; // "32" (字符串拼接)
let result2 = "3" - 2; // 1 (数字运算)
let result3 = "3" * "2"; // 6 (数字运算)
let result4 = "3" == 3; // true (值相等)
let result5 = "3" === 3; // false (值和类型都相等)
变量作用域
-
全局作用域：在任何地方都可访问
let globalVar = "全局"; function test() { console.log(globalVar); // "全局" } -
函数作用域：
var声明的变量function test() { var localVar = "局部"; if (true) { var anotherVar = "另一个"; } console.log(anotherVar); // "另一个" (var没有块级作用域) } -
块级作用域：
let和const声明的变量function test() { let localVar = "局部"; if (true) { let blockVar = "块级"; console.log(localVar); // "局部" } // console.log(blockVar); // 报错 }
变量提升
var声明的变量会提升到作用域顶部，但赋值不会提升：
console.log(hoisted); // undefined (不会报错)
var hoisted = "被提升";
// 相当于：
var hoisted;
console.log(hoisted);
hoisted = "被提升";
let和const存在暂时性死区(TDZ)，不会提升：
// console.log(notHoisted); // 报错
let notHoisted = "不被提升";
常量
const声明的是常量，必须初始化且不能重新赋值：
const MAX_SIZE = 100;
// MAX_SIZE = 200; // 报错
// 但对象属性可以修改
const person = { name: "赵六" };
person.name = "钱七"; // 允许
// person = {}; // 报错
解构赋值
ES6新增的解构赋值语法可以方便地从数组或对象中提取值：
// 数组解构
let [a, b, c] = [1, 2, 3];
console.log(a); // 1
// 对象解构
let {name, age} = {name: "孙八", age: 35};
console.log(name); // "孙八"
// 函数参数解构
function greet({name, age}) {
return `${name}今年${age}岁`;
}
模板字符串
ES6的模板字符串提供更强大的字符串处理能力：
let name = "周九";
let age = 40;
let message = `姓名：${name}
年龄：${age}
明年：${age + 1}岁`;
console.log(message);
/*
姓名：周九
年龄：40
明年：41岁
*/
