JavaScript 变量与数据类型

Hi，我是布兰妮甜 ！ JavaScript作为一种动态类型语言，其灵活性使得它在Web开发中占据重要地位。下面将详细地探讨JavaScript中的变量声明、数据类型以及类型转换。

文章目录

- 一、变量声明
- 二、数据类型
- 三、类型转换
- 四、总结

一、变量声明

在JavaScript中，变量是用来存储信息的容器。变量可以保存各种类型的数据，并且可以在程序执行期间改变其值。JavaScript提供了三种不同的关键字来声明变量：

var

var是最早的用于声明变量的关键字，具有函数作用域或全局作用域，并存在变量提升的现象。

javascript">var myVar = "Hello";
console.log(myVar); // 输出: Hello

let

let提供了块级作用域，避免了var带来的变量泄露问题。

javascript">let myLet = "World";
if (true) {let myLet = "Universe"; // 这个myLet仅在这个if块内可见console.log(myLet); // 输出: Universe
}
console.log(myLet); // 输出: World

const

const用于声明常量，一旦赋值就不能再改变，但如果是对象或数组，则可以修改它们的内容。

javascript">const PI = 3.14;
const arr = [1, 2, 3];
arr.push(4); // 可以这样做，因为没有改变arr的引用
console.log(arr); // 输出: [1, 2, 3, 4]

二、数据类型

JavaScript有七种原始数据类型和一种复合数据类型——对象，以及特殊值null。

原始数据类型（Primitive Types）

String：表示文本字符串。

javascript">let str1 = 'Single quotes';
let str2 = "Double quotes";
let str3 = `Template literals`;
console.log(str1, str2, str3);

Number：用来表示整数或浮点数。

javascript">let num1 = 42;
let num2 = 3.14;
console.log(num1, num2);

BigInt：表示任意长度的整数。

javascript">let bigInt = 9007199254740991n;
console.log(bigInt);

Boolean：表示逻辑值true或false。

javascript">let isTrue = true;
console.log(isTrue);

Undefined：当声明一个变量但未对其赋值时，该变量的值即为undefined。
```
javascript">let x;
console.log(x); // 输出: undefined
```

Null：是一个表示有意不存在的对象的值。

javascript">let obj = null;
console.log(obj); // 输出: null

Symbol：创建唯一的标识符。

javascript">let sym = Symbol('description');
console.log(sym);

复合数据类型（Object Type）

Object：复杂数据结构的基础，包括普通对象、数组、日期、正则表达式等。

javascript">let person = {name: "Alice",age: 25,greet: function() { return "Hello"; }
};
console.log(person.greet()); // 输出: Hello

三、类型转换

类型转换是指将一个类型的值转换为另一个类型的值。JavaScript支持两种类型的转换：隐式转换（自动类型转换）和显式转换（强制类型转换）。

隐式转换

隐式转换发生在某些操作符自动将一个类型转换为另一个类型时。例如，在使用比较运算符==时，如果两个值不是同一类型，JavaScript会尝试将它们转换为相同类型再进行比较。

javascript">console.log("42" == 42); // true, 因为发生了隐式转换
console.log("42" === 42); // false, 因为没有发生类型转换

显示转换

显式转换则是明确指定要进行的转换。以下是几种常见的显式转换方法：

转换为字符串

javascript">let num = 123;
let str = String(num); // 或者 `${num}`
console.log(typeof str, str); // string 123

转换为数字

parseInt：用于解析一个字符串并返回一个整数。它会忽略前导空格，并读取直到遇到非数字字符为止。如果字符串以’0x’开头，则被解释为十六进制数；如果以’0’开头（在旧版本浏览器上），可能被解释为八进制数。可以传递第二个参数来指定基数。

javascript">console.log(parseInt("10"));         // 输出: 10 (十进制)
console.log(parseInt("10", 16));     // 输出: 16 (十六进制)
console.log(parseInt("10.33"));      // 输出: 10 (停止于小数点)
console.log(parseInt("34 56 78"));   // 输出: 34 (停止于空格)
console.log(parseInt("111", 2));     // 输出: 7 (二进制)

parseFloat：类似于parseInt，但它会解析字符串并返回一个浮点数。它也会忽略前导空格，并读取直到遇到非数字字符为止，但它能够处理小数点。

javascript">console.log(parseFloat("10"));       // 输出: 10
console.log(parseFloat("10.33"));    // 输出: 10.33
console.log(parseFloat("34 56 78")); // 输出: 34 (停止于空格)
console.log(parseFloat("3.14e+2"));  // 输出: 314

Number 构造函数：可以将任何值转换为数值。对于字符串，它会尝试解析整个字符串为一个数值，如果字符串不能被完全解析为数值，则返回NaN（Not-a-Number）。此外，Number构造函数还可以直接应用于布尔值、null和undefined。

javascript">console.log(Number("10"));           // 输出: 10
console.log(Number("10.33"));        // 输出: 10.33
console.log(Number("10.33.55"));     // 输出: NaN (无法解析)
console.log(Number(""));             // 输出: 0
console.log(Number(true));           // 输出: 1
console.log(Number(false));          // 输出: 0
console.log(Number(null));           // 输出: 0
console.log(Number(undefined));      // 输出: NaN

parseInt和parseFloat主要用于从字符串中提取数值，而Number构造函数则更加通用，可以将各种类型的值转换为数值，并且对于无效输入返回NaN。选择哪种方法取决于你需要如何处理输入字符串以及你期望的结果类型。

转换为布尔值

javascript">let val = "";
let bool = Boolean(val); // 或者 !!val
console.log(typeof bool, bool); // boolean false

转换为对象

javascript">let primitive = "hello";
let obj = Object(primitive);
console.log(typeof obj, obj); // object [String: 'hello']

数组转换为字符串

javascript">let arr = [1, 2, 3];
let strArr = arr.join('-'); // 使用连字符作为分隔符
console.log(strArr); // 输出: 1-2-3

对象转换为JSON字符串

javascript">let jsonObj = { name: "John", age: 30 };
let jsonString = JSON.stringify(jsonObj);
console.log(jsonString); // 输出: {"name":"John","age":30}