ES6+ 核心新特性精讲：模板字符串、for...of、BigInt、指数运算与参数默认值

无敌的拖拉斯旋风
56 阅读4分钟

JavaScript 自 2015 年（ES6）起迎来爆发式进化，不仅补齐了现代语言应有的能力，更在可读性、安全性与表达力上实现飞跃。
本文聚焦五大高频实用特性：模板字符串、for...of 循环、BigInt 大整数、指数运算符 和 函数参数默认值，助你写出更优雅、健壮的现代 JS 代码。

一、模板字符串（Template Literals）：告别字符串拼接噩梦

传统痛点：

javascript
编辑
let myname = 'bailandi';
console.log('Hello, I am ' + myname + '!'); // 拼接繁琐，易出错

ES6 解法：反引号 + ${} 插值

javascript
编辑
console.log(`Hello, I am ${myname}!`); // ✅ 清晰直观

// 支持任意表达式
console.log(`Hello, I am ${myname.toUpperCase()}!`); // "Hello, I am BAILANDI!"

// 多行字符串天然支持
const html = `
  <div>
    <h1>Welcome, ${myname}</h1>
  </div>
`;

✅ 优势：

  • 支持多行文本（无需 \n）
  • 可嵌入任意 JavaScript 表达式
  • 提升可读性与维护性（尤其在 JSX、SQL 模板中）

二、for...of 循环：为“可迭代对象”而生

传统计数循环的局限：

javascript
编辑
for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}
// 冗长、易错（i++ 忘记？length 写错？）

for...of：语义清晰，专注“值”本身

javascript
编辑
const myname = 'bailandi';
for (let char of myname) {
  console.log(char); // 依次输出: b, a, i, l, ...
}

const users = ['Alice', 'Bob'];
for (let user of users) {
  console.log(user);
}

✅ 适用对象（实现了 Symbol.iterator 接口）：

  • 数组 Array
  • 字符串 String
  • Set / Map
  • NodeList（DOM 查询结果）
  • 自定义可迭代对象

⚠️ 注意：

  • 不适用于普通对象（用 for...in 或 Object.keys()）
  • 性能略低于传统 for（因涉及迭代器协议），但对大多数场景无感

三、BigInt：突破 Number 的安全整数限制

Number 的精度天花板：

javascript
编辑
console.log(Number.MAX_SAFE_INTEGER); // 9007199254740991 (≈ 2^53 - 1)
console.log(9007199254740991 + 1 === 9007199254740992 + 1); // true! 精度丢失

BigInt：任意精度整数

javascript
编辑
// 创建方式：数字字面量后加 n
let bigNum = 12332534653546n;
console.log(bigNum, typeof bigNum); // 12332534653546n "bigint"

// 或通过构造函数
let another = BigInt("123456789012345678901234567890");

✅ 使用场景：

  • 区块链（大额交易 ID）
  • 科学计算（超大整数）
  • 高精度时间戳（纳秒级）

⚠️ 注意事项：

  • 不能与 Number 混算：10n + 1 → 报错！需显式转换
  • Math 对象不支持 BigInt
  • 转换为 JSON 需自定义序列化（因 JSON 不原生支持）

四、指数运算符 **（ES2016 / ES7）

替代 Math.pow()

javascript
编辑
// 旧写法
console.log(Math.pow(2, 10)); // 1024

// ES7 新语法
console.log(2 ** 10); // 1024 ✅ 更直观

// 支持赋值
let x = 2;
x **= 3; // 等价于 x = x ** 3
console.log(x); // 8

💡 优先级：高于一元运算符，低于乘除
例：-2 ** 2 → -(2 ** 2) = -4（不是 (-2) ** 2）

五、函数参数默认值：告别 || 陷阱

传统写法的问题：

javascript
编辑
function foo(x, y) {
  x = x || 1; // ❌ 若 x = 0 或 false，会被错误替换！
  y = y || 1;
  return x * y;
}

ES6 默认参数：安全、简洁

javascript
编辑
function foo(x = 1, y = 1) {
  return x * y;
}

console.log(foo(3, 4)); // 12
console.log(foo(3));    // 3 （y 使用默认值 1）
console.log(foo(0, 5)); // 0 （x=0 是有效值，不会被覆盖！✅）

✅ 优势：

  • 避免 0、false、'' 等假值被误判

  • 参数意图一目了然

  • 支持表达式甚至函数调用作为默认值：

    js
编辑
function log(msg, time = new Date()) {
  console.log(`[${time}] ${msg}`);
}

六、大厂面试高频题

1. 以下代码输出什么？

js
编辑
console.log(`Result: ${10n + 5}`);

答：报错！BigInt 与 Number 不能直接运算。

2. for...of 能遍历普通对象吗？为什么？

答：不能。普通对象不是可迭代对象（未实现 Symbol.iterator）。需用 Object.keys(obj) 或 for...in。

3. 模板字符串中的 ${} 能放函数调用吗？

答：可以！${} 内是任意表达式，包括函数调用、三元运算等：

js
编辑
const name = 'Alice';
console.log(`Hello ${getName().toUpperCase()}`);

4. 参数默认值在函数体内修改会影响后续调用吗？

js
编辑
function add(item, list = []) {
  list.push(item);
  return list;
}
console.log(add(1)); // [1]
console.log(add(2)); // [1, 2] ❌ 意外共享！

答：会！默认参数是引用类型时，多次调用会共享同一对象。应避免默认值为 [] 或 {}。

七、总结：拥抱现代 JavaScript

特性价值
模板字符串让字符串操作如呼吸般自然
for...of专注数据本身，提升可读性
BigInt突破精度限制，应对大数据场景
** 运算符数学表达更直观
参数默认值安全初始化，减少边界 bug

🌟 核心思想：
用声明式代替命令式，用结构描述代替手动操作。
这些特性不仅是语法糖，更是 JavaScript 向工程化、可维护、高表达力演进的关键一步。

💬 行动建议：
从今天起，在你的项目中：

  • 用 `Hello ${name}` 替代 'Hello ' + name
  • 用 for (let item of list) 替代计数循环
  • 遇到大整数，果断使用 123n

让代码，从此优雅。

avatar
文章
阅读
粉丝