跳到主要内容
极客日志极客日志面向AI+效率的开发者社区
首页博客我的书AI学习GitHub 精选镜像AI 生图工具UI配色美学关于
搜索内容 / 工具 / 仓库 / 镜像...⌘K搜索
注册
博客列表
JavaScript大前端

ES6 基础语法:变量声明与解构

ES6 的基础语法,重点讲解了变量声明(let、var、const)的区别及作用域规则,以及解构赋值语法。内容包括数组、对象和字符串的解构方式,如完全解构、部分解构、嵌套解构、剩余运算符和解构默认值,并提供了相应的代码示例和使用场景说明。

路由之心发布于 2026/3/26更新于 2026/9/457 浏览
ES6 基础语法:变量声明与解构

ECMAScript 是 JavaScript 的标准化版本,由 ECMA 国际组织制定。它定义了 JavaScript 的语法、类型、语句、关键字和保留字等。

ES6 是 ECMAScript 的第六个版本,于 2015 年发布,引入了许多重要的新特性,使 JavaScript 更加现代化。

变量声明

作用域分为块作用域、函数作用域和全局作用域,优先级为:全局作用域 > 函数作用域 > 块作用域。

let 声明

使用 let 声明的变量仅在其定义的块(用 { } 包围的代码块)内有效。这意味着变量在块外不可访问。

{ 
  let x = 10; 
  console.log(x); // 输出 10 
} 
console.log(x); // ReferenceError: x is not defined

var 声明

使用 var 声明的变量的作用范围是整个函数体。如果在函数外部声明,变量将是全局的。

function myFunction() { 
  var x = 10; // 函数作用域 
  console.log(x); // 输出 10 
} 
myFunction(); 
console.log(x); // ReferenceError: x is not defined

const 声明

const 用于声明常量,其特点和语法与 let 相同,但有以下区别:

  1. 常量不允许修改值。
  2. 常量必须赋初始值。
  3. const 与 let 相同,同样有块作用域(没有预解析,存在变量提升问题)。
  4. const 定义的引用类型值内容可以修改,但内存地址不能变。
const PI = 3.1415926; 
// PI = 3.14; // 报错,常量不允许修改值
// const numA; // 报错,常量必须赋初始值
// numA = 10;

const obj = { a: 1 }; 
console.log(obj); 
obj.a = 20; // 不报错,没有修改到内存地址
obj = { b: 1 }; // 报错,修改了内存地址
console.log(obj);

// 如果存储的是一个数值,存的就是一个值
// 如果存储的是一个对象,存的就是一个内存地址

解构(数组,对象,字符串)

解构是指左边一种结构,右边一种结构,左右一一对应。主要方式包括完全解构、不完全解构、忽略方式解构、嵌套解构、剩余运算符方式解构和解构默认值。

数组解构

1. 完全解构
let a, b; 
[a, b] = [1, 2]; 
console.log(a, b);
2. 不完全解构 (部分解构)
let [a] = [1, 2, 3]; 
console.log(a); 
let [b, c] = [1]; 
console.log(b, c); // 如果解构不成功,变量值就默认等于 undefined
3. 忽略方式解构
let [, , a] = [1, 2, 3]; 
console.log(a);
4. 嵌套解构
let [a, b, [c]] = ["a", "b", ["c"]]; 
console.log(a, b, c);
5. 剩余运算符方式解构
let [a, ...b] = [1, 2, 3, 4, 5, 6, 7]; 
console.log(a, b); // a 只取第一个,剩下的都赋值给 b
6. 解构默认值
let [a, b = 100] = [90]; 
console.log(a, b); // 如果设置了默认值,当没有第二个参数值时就取默认值 100

使用场景:

  • 场景 1:使用解构方式实现两数交换
  • 场景 2:使用函数返回值

目录

  1. 变量声明
  2. let 声明
  3. var 声明
  4. const 声明
  5. 解构(数组,对象,字符串)
  6. 数组解构
  7. 1. 完全解构
  8. 2. 不完全解构 (部分解构)
  9. 3. 忽略方式解构
  10. 4. 嵌套解构
  11. 5. 剩余运算符方式解构
  12. 6. 解构默认值

更多推荐文章

查看全部
  • Java SPI 核心机制与实现原理
  • Spring Cloud Feign 入门实战:声明式 HTTP 客户端详解
  • 自进化医疗智能体:动态记忆与持续运行 Python 架构编程(下)
  • RabbitMQ 常见工作模式及发布确认实现
  • Stable Diffusion 与 AI 智能体联动云端设计工作流教程
  • 程序员核心竞争力构建与 Android Framework 源码解析
  • Stable Diffusion 3.5 FP8 量化技术解析:精度、性能与架构变革
  • 基于 DeepSeek 与 Cursor 构建智能代码审查工具实战
  • PyInstaller 打包 Python 程序及包依赖问题解决方案
  • OpenClaw 国内 AI 大模型配置教程
  • SRC 漏洞挖掘思路与手法详解:从信息搜集到批量测试
  • 大语言模型架构:LLM MoE 与 Switch Transformers
  • Spring Boot 集成 MyBatis 操作数据库详解
  • OpenClaw 汉化版部署与常见问题排查指南
  • ASP.NET Core 主机模型详解:Host、WebHost 与 WebApplication 对比与实践
  • OpenClaw 多智能体路由实战:飞书多机器人配置
  • WebAssembly 逆向分析:反编译 Wasm 二进制并修改游戏数据
  • 《Agent Runtime 工程化》一次 Agent 任务为什么能烧掉几十次 LLM 调用?
  • Python 量化金融实战:技术架构与性能优化
  • UV Python 环境管理:解析器路径详解

相关免费在线工具

  • Keycode 信息

    查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具,Keycode 信息在线工具,online

  • Escape 与 Native 编解码

    JavaScript 字符串转义/反转义;Java 风格 \uXXXX(Native2Ascii)编码与解码。 在线工具,Escape 与 Native 编解码在线工具,online

  • JavaScript / HTML 格式化

    使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具,JavaScript / HTML 格式化在线工具,online

  • JavaScript 压缩与混淆

    Terser 压缩、变量名混淆,或 javascript-obfuscator 高强度混淆(体积会增大)。 在线工具,JavaScript 压缩与混淆在线工具,online

  • Base64 字符串编码/解码

    将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具,Base64 字符串编码/解码在线工具,online

  • Base64 文件转换器

    将字符串、文件或图像转换为其 Base64 表示形式。 在线工具,Base64 文件转换器在线工具,online