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

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

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

路由之心发布于 2026/3/26更新于 2026/5/2324 浏览
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. 解构默认值
  • 💰 8折买阿里云服务器限时8折了解详情
  • Magick API 一键接入全球大模型注册送1000万token查看
  • 🤖 一键搭建Deepseek满血版了解详情
  • 一键打造专属AI 智能体了解详情
极客日志微信公众号二维码

微信扫一扫,关注极客日志

微信公众号「极客日志V2」,在微信中扫描左侧二维码关注。展示文案:极客日志V2 zeeklog

更多推荐文章

查看全部
  • GitHub Copilot 同步 Claude Code 本地技能与 Agent 映射方案
  • C++ 内存管理:new/delete 操作自定义类型的构造与析构原理
  • ComfyUI 提示词助手实战:利用自动化流程提升 AI 绘画效率
  • C++11 左值右值引用区别与移动语义解决传值返回对象销毁问题
  • AI 前沿技术日更简报:2026-03-04
  • 自进化医疗智能体:动态记忆与持续运行的 Python 架构设计
  • LazyLLM 框架实战:构建代码专家智能体
  • ARM 架构盒子零依赖部署 Nullclaw 实践指南
  • Matlab 找不到编译器解决方案:MinGW-w64 C/C++环境配置
  • Python Pillow 图像处理与格式转换详解
  • 智能降重与 AIGC 检测功能解析:适配主流平台的合规解决方案
  • 数据结构:快速排序算法详解与实现
  • 前端精确数字运算:用 BigNumber.js 解决 JS Number 精度问题
  • 金仓 KingbaseES 融合架构实践:从多库并存到一库多能
  • AI 驱动的虚拟现实与增强现实开发
  • Linux 进程间通信:匿名管道原理与实现
  • 使用 Rokid 灵珠平台搭建旅游 AR 智能体实战指南
  • Python 爬虫实战:使用 Flet 构建移动端 App
  • C++中string的常用函数用法总结
  • 基于 Rokid 灵珠平台构建旅游 AR 智能体实践

相关免费在线工具

  • 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