---

author: 专注前端开发，分享JavaScript干货
title: JavaScript入门⑦｜ES6核心知识速查，let_const_模板字符串_解构赋值
update: 2026-04-28
tags: JavaScript,ES6,模板字符串,解构赋值,展开运算符,对象简写,前端入门

作者：专注前端开发，分享JavaScript干货
更新时间：2026年4月
适合人群：有JS基础，想系统掌握ES6新特性的同学

---

前言：ES6是什么？

ES6（ECMAScript 2015）是JavaScript历史上最重要的一次更新，引入了大量新语法。

现代前端开发，ES6是必会技能。 这一篇把最核心的内容全部讲透。

---

一、let 与 const（复习加深）

// let：块级作用域
if (true) {
    let blockVar = "只在if块内有效";
}
console.log(blockVar); // ❌ ReferenceError

// const：声明常量（引用不可变）
const PI = 3.14159;
// PI = 3; // ❌ 报错

// 常见误区：const对象可以修改属性
const user = { name: "张三" };
user.name = "李四"; // ✅ 可以修改属性
// user = {}; // ❌ 不能重新赋值整个对象

// 冻结对象（完全不可变）
const frozen = Object.freeze({ name: "张三" });
frozen.name = "李四"; // 严格模式下报错，普通模式静默失败

---

二、模板字符串（Template Literals）

// 老式字符串拼接
const name = "张三";
const age = 25;
const msg = "我叫" + name + "，今年" + age + "岁。";

// 模板字符串
const msg2 = `我叫${name}，今年${age}岁。`;

// 支持表达式
const a = 10, b = 20;
console.log(`a + b = ${a + b}`); // a + b = 30

// 支持函数调用
function getTime() {
    return new Date().toLocaleTimeString();
}
console.log(`当前时间：${getTime()}`);

// 支持三目运算
const score = 85;
console.log(`成绩：${score >= 60 ? "及格 🎉" : "不及格 😢"}`);

// 多行字符串
const html = `
    <div class="card">
        <h1>${name}</h1>
        <p>${age}岁</p>
    </div>
`;

---

三、解构赋值（Destructuring）

3.1 数组解构

// 基本解构
const [a, b, c] = [1, 2, 3];
console.log(a, b, c); // 1, 2, 3

// 跳过一个元素
const [first, , third] = [1, 2, 3];
console.log(first, third); // 1, 3

// 剩余解构
const [head, ...rest] = [1, 2, 3, 4, 5];
console.log(head);  // 1
console.log(rest);  // [2, 3, 4, 5]

// 默认值
const [x = 0, y = 0] = [10];
console.log(x, y); // 10, 0

// 交换变量（不需要临时变量）
let m = 1, n = 2;
[m, n] = [n, m];
console.log(m, n); // 2, 1

3.2 对象解构

const person = { name: "张三", age: 25, city: "北京" };

// 基本解构
const { name, age } = person;
console.log(name, age); // "张三", 25

// 重命名变量名
const { name: userName, age: userAge } = person;
console.log(userName); // "张三"

// 默认值
const { name, gender = "未知" } = person;
console.log(gender); // "未知"

// 剩余解构
const { name, ...others } = person;
console.log(others); // { age: 25, city: "北京" }

// 函数参数解构
function greet({ name, age }) {
    return `你好，我是${name}，${age}岁`;
}
console.log(greet(person)); // "你好，我是张三，25岁"

3.3 嵌套解构

const config = {
    server: {
        host: "localhost",
        port: 3000
    },
    db: {
        host: "127.0.0.1",
        port: 3306
    }
};

const {
    server: { host, port },
    db: { host: dbHost }
} = config;

console.log(host, port);    // "localhost", 3000
console.log(dbHost);        // "127.0.0.1"

---

四、展开运算符（Spread & Rest）

4.1 展开（数组/对象）

// 数组展开
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const merged = [...arr1, ...arr2];
console.log(merged); // [1, 2, 3, 4, 5, 6]

// 复制数组（浅拷贝）
const original = [1, 2, 3];
const copy = [...original];
copy.push(4);
console.log(original); // [1, 2, 3]（原数组不变）

// 对象展开
const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };
const mergedObj = { ...obj1, ...obj2 };
console.log(mergedObj); // { a: 1, b: 2, c: 3, d: 4 }

// 复制对象（浅拷贝）
const user = { name: "张三", age: 25 };
const userCopy = { ...user };
userCopy.age = 30;
console.log(user.age); // 25（不改变原对象）

// 对象展开的特殊：后面覆盖前面
const defaults = { theme: "light", lang: "zh", fontSize: 14 };
const userPrefs = { theme: "dark", fontSize: 16 };
const final = { ...defaults, ...userPrefs };
console.log(final); // { theme: "dark", lang: "zh", fontSize: 16 }

4.2 剩余参数（Rest Parameters）

// 在函数参数中：收集剩余参数
function sum(...numbers) {
    return numbers.reduce((a, b) => a + b, 0);
}
console.log(sum(1, 2, 3, 4, 5)); // 15

// 在解构中：收集剩余元素/属性
const [first, ...remaining] = [1, 2, 3, 4];
console.log(remaining); // [2, 3, 4]

const { name, ...info } = { name: "张三", age: 25, city: "北京" };
console.log(info); // { age: 25, city: "北京" }

---

五、对象增强

5.1 属性简写

const name = "张三";
const age = 25;

// 老式
const user1 = { name: name, age: age };

// ES6简写（属性名和变量名相同时）
const user2 = { name, age };
console.log(user2); // { name: "张三", age: 25 }

5.2 方法简写

// 老式
const obj1 = {
    greet: function() {
        return "你好";
    }
};

// ES6方法简写
const obj2 = {
    greet() {
        return "你好";
    },
    // 计算属性名
    ["prop" + (1 + 1)]: 2 // → { prop2: 2 }
};

5.3 Symbol作为属性

const sym = Symbol("id");
const obj = {
    name: "张三",
    [sym]: 12345 // 用Symbol作为属性键
};
console.log(obj[sym]); // 12345

---

六、综合实战：用户配置合并

// 默认配置
const defaultConfig = {
    theme: "light",
    language: "zh-CN",
    fontSize: 14,
    autoSave: true,
    notifications: {
        email: true,
        sms: false
    }
};

// 用户自定义配置
const userConfig = {
    theme: "dark",
    fontSize: 16,
    notifications: {
        email: false
    }
};

// 深度合并配置
function mergeConfig(defaults, overrides) {
    const result = { ...defaults };

    for (const key in overrides) {
        if (
            typeof overrides[key] === "object" &&
            overrides[key] !== null &&
            !Array.isArray(overrides[key])
        ) {
            result[key] = mergeConfig(defaults[key] || {}, overrides[key]);
        } else {
            result[key] = overrides[key];
        }
    }

    return result;
}

const finalConfig = mergeConfig(defaultConfig, userConfig);
console.log(finalConfig);
// {
//   theme: "dark"（被覆盖）
//   language: "zh-CN"（保留）
//   fontSize: 16（被覆盖）
//   autoSave: true（保留）
//   notifications: {
//     email: false（被覆盖）
//     sms: false（保留）
//   }
// }

---

七、知识卡

特性	说明
模板字符串	`Hello ${name}`
数组解构	const [a, b] = arr
对象解构	const { name } = obj
重命名	const { name: n } = obj
展开运算符	...arr, ...obj
剩余参数	function f(...args)
属性简写	{ name, age }
方法简写	{ greet() {} }
计算属性名	{ [key]: value }

---

八、课后作业

1. 用解构赋值交换两个变量的值，不用临时变量
2. 合并两个对象，其中嵌套对象也要深度合并
3. 实现一个函数，接收任意数量参数，返回最大值（用剩余参数）

有问题欢迎评论区留言，大家一起讨论！

---

标签：JavaScript | ES6 | 模板字符串 | 解构赋值 | 展开运算符 | 对象简写 | 前端入门