（转载）20个JavaScript重点知识点（6）变量

变量基础概念

1.1 什么是变量

变量是存储信息的容器，本质是内存空间的命名引用。在JavaScript中，变量用于保存各种类型的数据值，其值可以在程序执行过程中被修改。

let message = "Hello";message = "World";  // 变量值被修改

1.2 变量作用

• 数据存储：临时保存程序运行时的数据

• 数据共享：在不同代码段之间传递数据

• 状态管理：记录程序运行时的各种状态

• 提高可读性：通过有意义的变量名提升代码可读性

•  

• 变量声明方式

•  

  2.1 声明发展史

  • ES5及之前：var

  • ES6（2015）：let、const

2.2 声明方式对比

特性	var	let	const
作用域	函数级	块级	块级
重复声明	允许	禁止	禁止
变量提升	是	否	否
暂时性死区	无	有	有
全局对象属性	是	否	否
初始值要求	无	无	必须

2.3 声明详解

2.3.1 var

function testVar() {  console.log(a); // undefined  var a = 10;  if (true) {    var a = 20;  }  console.log(a); // 20}

2.3.2 let（推荐）

function testLet() {  let b = 1;  if (true) {    let b = 2; // 不同的变量    console.log(b); // 2  }  console.log(b); // 1}

2.3.3 const

const PI = 3.1415;// PI = 3.14; // TypeError
const user = { name: 'John' };user.age = 30; // 允许修改对象属性

变量命名规范

3.1 标识符规则

• 首字符：字母、$、_

• 后续字符：字母、数字、$、_

• 区分大小写

• 不能使用保留字

3.2 命名最佳实践

• 使用camelCase命名法

• 体现变量内容/用途

• 避免缩写歧义

• 布尔值用is/has/can开头

// 好的示例let isLoading = true;const MAX_USERS = 100;function calculateTotalPrice() {}

变量数据类型

4.1 基本类型（Primitive）

 

类型	说明	示例
Number	整数和浮点数	let age = 25
String	文本数据	let name = "Alice"
Boolean	逻辑值	let isActive = true
Null	空值	let data = null
Undefined	未定义值	let value;
Symbol	唯一标识符（ES6）	const id = Symbol()
BigInt	大整数（ES2020）	const big = 9007199254740991n

 

4.2 引用类型（Reference）

• Object

• Array

• Function

• Date

• 其他内置对象

• 4.3 类型检测

  typeof 42;          // "number"typeof "text";      // "string"typeof true;        // "boolean"typeof undefined;   // "undefined"typeof null;        // "object"（历史遗留问题）typeof {};          // "object"typeof [];          // "object"typeof function(){};// "function"

   

• 作用域与生命周期

•  

  5.1 作用域类型

  • 全局作用域

  • 函数作用域（var）

  • 块级作用域（let/const）

  • // 全局变量let globalVar = '全局可见';
    function scopeDemo() {  // 函数作用域  var functionVar = '函数内可见';
      if (true) {    // 块级作用域    let blockVar = '块内可见';    console.log(functionVar); // 正常访问  }  console.log(blockVar); // ReferenceError}

    5.2 变量提升（Hoisting）

    var声明的变量会提升到作用域顶部，但赋值不会提升

    console.log(hoistedVar); // undefinedvar hoistedVar = 10;
    // 等价于var hoistedVar;console.log(hoistedVar);hoistedVar = 10;

  进阶特性

  6.1 解构赋值

  // 数组解构const [x, y] = [1, 2];
  // 对象解构const { name, age } = { name: 'John', age: 30 };
  // 函数参数解构function getUser({ id, name }) {  return `ID: ${id}, Name: ${name}`;}

  6.2 冻结对象

  const obj = Object.freeze({  key: 'value'});// obj.key = 'new'; // 严格模式下报错

常见问题与解决方案

7.1 闭包中的变量

for (var i = 0; i < 3; i++) {  setTimeout(() => {    console.log(i); // 输出3次3  }, 100);}
// 解决方案for (let i = 0; i < 3; i++) {  setTimeout(() => {    console.log(i); // 0,1,2  }, 100);}

7.2 暂时性死区（TDZ）

{  console.log(a); // ReferenceError  let a = 10;}

7个变量实用小技巧

1. 1.优先使用const，必要时使用let

2. 2.避免使用var

3. 3.使用严格模式（'use strict'）

4. 4.保持变量作用域最小化

5. 5.及时初始化变量

6. 6.避免隐式类型转换

7. 7.使用全大写命名常量

'use strict';
const API_KEY = 'SECRET_KEY';let requestCount = 0;
function processData(data) {  const MAX_SIZE = 1024;  if (data.size > MAX_SIZE) {    throw new Error('Data too large');  }  // 处理逻辑}