在前兩篇，我們升級了變量和函數。今天，我們要給 JavaScript 中最常用的兩種數據類型——字符串（String）和對象（Object）——裝備上 ES6 帶來的強大魔法。
準備好告別丑陋的 + 號拼接和重復的對象屬性賦值了嗎？
一、回憶殺：令人抓狂的字符串拼接
在項目中，我們經常需要動態地將變量和 HTML 組合起來。在 ES5 時代，這通常是一場災難。
【過去我們這么寫 (ES5)】
var user = {name: '小明',age: 18,website: 'https://example.com'
};var profileCard ='<div class="card">' +'<h2>' + user.name + '</h2>' +'<p>年齡：' + user.age + '</p>' +'<p>個人主頁：<a href="' + user.website + '">' + user.website + '</a></p>' +'</div>';console.log(profileCard);
這種寫法不僅丑陋，而且非常容易出錯：
- 大量的
+號和引號，很容易漏掉一個。 - 不能自由換行，否則會報語法錯誤。
- 變量和字符串混在一起，難以閱讀。
二、進化時刻：模板字符串 (Template Literals) 登場
ES6 引入了模板字符串，它徹底改變了我們處理字符串的方式。
【現在我們這么寫 (ES6+)】
const user = {name: '小明',age: 18,website: 'https://example.com'
};const profileCard = `<div class="card"><h2>${user.name}</h2><p>年齡：${user.age}</p><p>個人主頁：<a href="${user.website}">${user.website}</a></p></div>
`;console.log(profileCard);
魔法揭秘：
- 使用反引號
`：模板字符串使用反引號（鍵盤左上角，數字1左邊的那個鍵）包裹，而不是單引號或雙引號。 - 自由換行：在反引號內，你可以隨意換行，所有空格和縮進都會被保留。
- 嵌入變量
${}：使用${...}語法，你可以輕松地將任何變量或表達式嵌入到字符串中。{}里面甚至可以進行計算，比如${user.age + 1}。
現在，代碼的可讀性和可維護性都得到了質的飛躍！
三、回憶殺：繁瑣的對象操作
處理對象是日常開發的核心任務之一。在 ES5 中，從對象里取值或者創建新對象，往往伴隨著大量的重復代碼。
【過去我們這么寫 (ES5)】
var person = { name: '張三', age: 30, city: '北京' };// 1. 從對象取值
var name = person.name;
var age = person.age;console.log('你好，我叫' + name + '，今年' + age + '歲。');// 2. 創建新對象
var newName = '李四';
var newAge = 25;var newPerson = {name: newName,age: newAge,city: '上海'
};
四、進化時刻：解構與簡寫
ES6 為對象和數組帶來了“解構賦值”和一系列簡寫語法，讓代碼變得極其精煉。
1. 解構賦值 (Destructuring Assignment)
解構賦值允許你從對象或數組中“提取”值，并直接賦給變量。
【現在我們這么寫 (ES6+)】
const person = { name: '張三', age: 30, city: '北京' };// 從對象中解構出 name 和 age 兩個變量
const { name, age } = person;console.log(`你好，我叫${name}，今年${age}歲。`); // 使用了模板字符串！
一行代碼 const { name, age } = person; 就等同于 ES5 的兩行賦值語句。變量名必須和對象屬性名相同。你也可以給變量起別名：const { name: personName } = person;。
2. 對象屬性簡寫
當你要創建的對象屬性名和你手中的變量名相同時，可以進行簡寫。
【現在我們這么寫 (ES6+)】
const newName = '李四';
const newAge = 25;// 因為變量名和屬性名相同，可以簡寫
const newPerson = {name: newName, // 可簡寫為 nameage: newAge, // 可簡寫為 agecity: '上海'
};// 最終簡寫形式
const simplifiedPerson = {name: newName,age: newAge,city: '上海'
};
3. 展開運算符 (...)
展開運算符像一個魔法棒，可以“展開”一個對象或數組，常用于合并或克隆。
const baseConfig = { host: 'localhost', port: 8080 };
const userConfig = { port: 3000, user: 'admin' };// 合并對象，userConfig 會覆蓋 baseConfig 中的同名屬性
const finalConfig = { ...baseConfig, ...userConfig };
// finalConfig 的結果是: { host: 'localhost', port: 3000, user: 'admin' }// 淺克隆一個對象
const clonedPerson = { ...person };
總結
- 模板字符串用
`和${}，徹底解決了字符串拼接的痛點，讓代碼更清晰。 - 解構賦值讓從復雜數據結構中提取信息變得無比簡單。
- 對象屬性簡寫和展開運算符讓創建和合并對象的操作大大簡化。
掌握了這些“魔法”，你的代碼不僅會寫得更快，也會讓同事對你刮目相看。
在下一篇，我們將把目光投向數組，學習 map、filter 等強大的高階函數，看看如何用更聲明式、更優雅的方式來處理集合數據。敬請期待！
)
