JS-ES6新特性

前言

ES6 (ECMAScript 2015) 的发布是现代 JavaScript 开发的分水岭。它不仅修复了 var 带来的历史遗留问题，还引入了更高效的数据结构。本文将带你系统复习 let/const、解构赋值、Map/Set 以及独一无二的 Symbol。

一、 变量声明的"进化"：let 与 const

在 ES6 之前，我们只有 varm但 var 带来的变量提升和全局污染常常让人头疼，ES6则新增了let、const。

1. let 特点

• 禁止重复声明：同一作用域内不可重复定义同名变量。
• 块级作用域 ：仅在 {} 内部有效（如 if、for 块）。
• 无变量提升 ：存在"暂时性死区"（TDZ），必须先定义后使用，否则抛出 ReferenceError。

2. const 特点

• 必须赋初值：声明时必须立即初始化。

• 值不可变 ：一旦声明，其指向的内存地址不可修改。

  注意： 修改对象或数组内部的属性是允许的，因为这并没有改变引用地址。

• 具备块级作用域，同样不存在提升。

3. 三者对比速查表

特性	var	let	const
作用域	函数作用域	块级作用域	块级作用域
变量提升	是 (显示 undefined)	否 (报错)	否 (报错)
重复声明	允许	不允许	不允许
必须赋初值	否	否	是

---

二、 解构赋值：代码瘦身的艺术

解构赋值允许我们按照一定模式，从数组和对象中提取值。

1. 数组解构

数组解构是位置对应的。

JavaScript

let [a, [b, c]] = [1, [2, 3]]; // 支持嵌套解构

• 注意： 如果等号右边不是可遍历结构（Iterator），将会报错。

2. 对象解构

对象解构是属性名对应的，不强调顺序。

JavaScript

let obj = { first: 'hello', last: 'world' };

// 别名用法：{ 原属性名: 新变量名 }
let { first: f, last: l } = obj; 

console.log(f); // 'hello'

3. 函数参数解构

这是开发中最常用的场景，通过设定默认值可以增强代码的健壮性。

JavaScript

function connect({ host = '127.0.0.1', port = 3000 } = {}) {
    console.log(host, port);
}

4. 妙用场景

• 快速交换变量 ：[x, y] = [y, x]
• 提取 JSON 数据：从复杂的接口返回对象中精准拿取字段。
• 接收多个返回值：函数返回数组或对象后直接解构。

---

三、 键值对的新选择：Map

Map 是一组键值对结构，其查找时间复杂度为 <math xmlns="http://www.w3.org/1998/Math/MathML"> O ( 1 ) O(1) </math>O(1)。

1. Map 的常用 API

• set(key, value)：添加元素。
• get(key)：获取元素。
• has(key)：检查是否存在。
• delete(key)：删除指定元素。
• size：属性，返回元素个数。
• clear()：清空所有。

2. 核心特性

• Key 的多样性 ：对象的 key 只能是字符串或 Symbol，而 Map 的 key 可以是任意类型（包括对象、函数）。
• 覆盖性：同一个 key 放入多个 value，后面的会覆盖前面的。

JavaScript

const m = new Map();
m.set('Bob', 59);
m.forEach((val, key) => {
    console.log(`${key}: ${val}`);
});

---

四、 唯一值的容器：Set

Set 类似于数组，但其成员的值都是唯一的。

1. 数组去重的神技

在 ES6 中，一行代码即可搞定数组去重：

JavaScript

let arr = [1, 2, 2, 3];
let uniqueArr = Array.from(new Set(arr)); 
// 或者使用扩展运算符
let uniqueArr2 = [...new Set(arr)];
console.log(uniqueArr,uniqueArr2) //[1, 2, 3],[1, 2, 3]

2. 常用操作

• add(value)：添加新成员。
• delete(value)：删除。
• has(value)：判断是否存在。
• size：获取长度。

3. 遍历演示

JavaScript

let set = new Set([123, 456, 789]);

for (let item of set) {
   console.log(item); 
}

// 过滤小数值
set.forEach(e => {
    if(e < 500) set.delete(e);
});
console.log(set); // Set { 789 }

五、 独一无二的 Symbol

Symbol 是 ES6 引入的一种原始数据类型，表示独一无二的值。

1. 为什么需要 Symbol？

为了防止对象属性名冲突。如果你给一个他人提供的对象添加属性，使用 Symbol 可以确保不会覆盖原有属性。

2. 基本使用

JavaScript

let s1 = Symbol('desc');
let s2 = Symbol('desc');

console.log(s1 === s2); // false (即使描述相同，值也是唯一的)

// 作为对象属性
let obj = {
    [s1]: 'Hello Symbol'
};

注意 ：Symbol 作为属性名时，通过 for...in 或 Object.keys() 是遍历不到的，需要使用 Object.getOwnPropertySymbols()。