ES6 核心新特性详解：let/const、模板字符串、Set/Map 与函数参数优化

结果与目标

理解并应用 ES6 的新语法，以解决传统 ES5 在变量作用域管理、字符串拼接便利性、集合数据处理及函数参数健壮性方面的痛点，实现更规范、高效的代码编写。

准备条件

• 开发环境：支持 ES6 的浏览器（如 Chrome、Firefox 最新版的）或 Node.js 环境。
• 工具辅助：虽然现代环境已原生支持，但在需要兼容老旧浏览器的场景中，配置 Babel 进行编译转换是必要的准备工作。

真实操作顺序

第 1 步：使用 let 和 const 声明变量

目的：解决 ES5 中 var 缺乏块级作用域限制以及无法真正定义常量的缺陷。

动作：将原有的 var 替换为 let 用于块级变量声明，使用 const 用于不可变常量引用。

重要参数：let 限作用于当前代码块（{}），const 赋值后不可重新指向其他内存地址。

操作演示：

在 ES5 中，if 块内声明的 var 变量会泄漏到外部：

var a = 1;
if (true) {
  var b = 2;
}
console.log(a); // 1
console.log(b); // 2 (变量泄漏)

在 ES6 中使用 let 限定作用域：

let a = 1;
if (true) {
  let b = 2;
}
console.log(a); // 1
console.log(b); // ReferenceError: b is not defined (正确报错)

循环中的闭包陷阱修正：

使用 var 声明循环变量时，由于共享同一个引用，常见代码如下：

var a = [];
for (var i=0; i < 5; i++) {
  a.push(function() {
    console.log(i);
  });
}
a.forEach(function(value) { value(); }); // 输出: 5, 5, 5, 5, 5

改用 let 声明循环变量，每次迭代创建新的绑定：

var b = [];
for (let i=0; i < 5; i++) {
  b.push(function() {
    console.log(i);
  });
}
b.forEach(function(value) { value(); }); // 输出: 0, 1, 2, 3, 4

常量定义：

ES5 只能靠约定大写命名来模拟常量，而 ES6 的 const 会强制拦截赋值行为：

const MY_CONSTANT = true;
MY_CONSTANT = false; // Uncaught TypeError: Assignment to constant variable

第 2 步：使用模板字符串

目的：简化多行文本插入和变量拼接，提高可读性。

动作：使用反引号 (`) 包裹字符串，并在内部使用 ${expression} 插入变量。

完成状态：无需使用加号 (+) 连接字符串和变量，结构清晰。

操作对比：

ES5 拼接方式：

var url = 'http://www.' + domain + '.com/' + path + '?' + queryParams;

ES6 模板字符串方式：

let url = `http://www.${domain}.com/${path}?${queryParams}`;

第 3 步：使用新的 Set 和 Map 对象

目的：获得内置的去重集合支持和更健壮的键值对数据结构。

入口：通过 new Set() 和 new Map() 构造函数实例化。

3.1 Set 处理重复数据

ES5 中需手动判断去重，逻辑繁琐：

var collection = [];
collection.push(1, 2, 1);
// 需额外逻辑去除重复的 1

ES6 Set 自动去重：

let collection = new Set();
collection.add(1);
collection.add(2);
collection.add(1);
console.log(collection); // Set { 1, 2 }

3.2 Map 存储键值对

ES5 使用 Object 存储键值对存在原型污染或非字符串 key 转换问题：

var collection = {};
collection.a = 'abc';
collection.b = 'xyz';

ES6 Map 提供更原生的体验：

let collection = new Map();
collection.set('a', 'abc');
collection.set('b', 'xyz');

遍历 Map：

collection.forEach(function(value, key) {
  console.log(key + ":" + value);
});
console.log(collection.size); // 获取元素数量

第 4 步：优化函数参数

目的：减少防御性编程代码量，使函数签名更直观。

动作 1：参数默认值

替代传统的 undefined 检查：

// ES5 写法
function doSomething(someObject) {
  if (someObject === undefined) {
    someObject = {};
  }
  console.log(someObject);
}

ES6 简写：

function doSomething(someObject = {}) {
  console.log(someObject);
}

动作 2：对象解构

直接从传入的对象参数中提取属性，避免重复调用 somenObject.propName：

// ES5 写法
function doSomething(someObject) {
  var one = someObject.propOne;
  var two = someObject.propTwo;
  console.log(one, two);
}

ES6 解构写法：

function doSomething({ propOne, propTwo }) {
  console.log(propOne); // 直接可用
  console.log(propTwo);
}

完成判断

当代码能够正确使用块级作用域变量而不发生泄漏，字符串拼接不再依赖复杂的加号连接，容器类数据使用 Set/Map 获得天然特性，且函数签名简洁无多余校验代码时，即表示已成功应用这些 ES6 核心语法。

简要总结

以上就是 ES6 核心新特性的详细内容，更多关于 JavaScript 进阶学习的资料请关注本站其它相关文章！