JavaScript 不僅僅是一門編程語言，更是一門需要精湛技藝的手藝。就像任何一門武術(shù)一樣，新手與大師的區(qū)別在于你所掌握的技巧。任何人都能寫出能運(yùn)行的代碼，但寫出干凈、強(qiáng)大且優(yōu)雅表達(dá)的代碼才是真正的 JavaScript 功夫的開始。

讓我們深入探討這些高級 JavaScript 技巧，它們能讓你的代碼脫穎而出。無論你是在構(gòu)建企業(yè)級軟件還是僅僅磨練技能，這些模式都將幫助你寫出更干凈、更快且更易維護(hù)的代碼——那種能讓未來的你（和團(tuán)隊成員）肅然起敬的代碼。

我們將涵蓋以下內(nèi)容：

• 超越基礎(chǔ)的高級 console.log 實踐
• 使用ES6特性如模板字符串、解構(gòu)和展開運(yùn)算符來編寫更清晰直觀的邏輯
• 通過短路求值編寫更具表達(dá)力的條件語句
• 使用console.table()和console.time()等工具進(jìn)行調(diào)試和性能分析
• 像專家一樣合并數(shù)組，即使有重復(fù)元素

把這看作你掌握現(xiàn)代 JavaScript的道場。你已經(jīng)掌握了基礎(chǔ)，現(xiàn)在準(zhǔn)備更上一層樓。

讓我們像大師一樣編寫代碼。

1. Console.log技巧：專業(yè)級的日志記錄

在 JavaScript 開發(fā)的早期階段，許多開發(fā)者嚴(yán)重依賴基本的console.log()語句。雖然它能完成任務(wù)，但高級開發(fā)者知道有更強(qiáng)大、更干凈的日志記錄方式，特別是在處理結(jié)構(gòu)化對象、調(diào)試或分析性能時。考慮這個簡單例子：

const student = { name: 'Ray', age: 20 };
const tutor = { name: 'Peter', age: 40 };

基礎(chǔ)日志記錄（難以閱讀）

console.log(student);
console.log(tutor);

雖然這樣可行，但在處理多個變量時很難區(qū)分日志。現(xiàn)在，讓我們探索更干凈的替代方案。

2. 計算屬性日志記錄

與其逐個記錄變量，不如使用對象屬性簡寫將日志分組到一個對象中，使其更易讀：

console.log({ student, tutor });

// 輸出：
{ student: { name: 'Ray', age: 20 }, tutor: { name: 'Peter', age: 40 } }

現(xiàn)在日志一目了然，清晰易讀——非常適合調(diào)試或檢查嵌套數(shù)據(jù)結(jié)構(gòu)。

3. 使用%c自定義樣式

對于面向UI的日志或當(dāng)你想在控制臺中突出顯示特定內(nèi)容時，可以使用%c指令配合CSS樣式：

console.log('%c student', 'color: orange; font-weight: bold');

這在大型應(yīng)用中特別有用，當(dāng)你需要從視覺上區(qū)分不同日志時，比如高亮警告、步驟或關(guān)鍵狀態(tài)更新。

4. 使用console.table()以表格形式顯示對象

當(dāng)處理對象數(shù)組（或具有多個相似鍵的單個對象）時，console.table()是一個視覺上更優(yōu)的選擇：

console.table([student, tutor]);

這會記錄一個結(jié)構(gòu)化的表格，包含行和列，便于掃描和比較值。當(dāng)你處理API響應(yīng)、用戶列表或狀態(tài)對象等數(shù)據(jù)集時，這非常理想。

5. 使用console.time()和console.timeEnd()進(jìn)行基準(zhǔn)測試

性能分析在JavaScript中至關(guān)重要，特別是當(dāng)循環(huán)或操作可能影響響應(yīng)速度時。使用console.time()和console.timeEnd()來測量執(zhí)行時間：

console.time('loop');

let i = 0;
while (i < 1000000) {
i++;
}

console.timeEnd('loop');

// 輸出類似：
loop: 5.384ms

這讓你了解你的邏輯執(zhí)行需要多長時間，有助于優(yōu)化決策或發(fā)現(xiàn)代碼中的瓶頸。

通過掌握這些增強(qiáng)的日志記錄技巧，你不僅僅是打印數(shù)據(jù)——你是在傳達(dá)意圖，提高可讀性，更智能地進(jìn)行調(diào)試。這些工具是你JavaScript工具帶的一部分，幫助你在開發(fā)工作流程中變得更高效、更有組織和更有效。

模板字符串：擁有超能力的字符串編寫

使用+運(yùn)算符進(jìn)行字符串拼接的混亂日子已經(jīng)一去不復(fù)返了。隨著ES6引入的模板字符串，JavaScript為你提供了一種更干凈、更具表現(xiàn)力的方式來構(gòu)建字符串，特別是當(dāng)涉及變量和表達(dá)式時。模板字符串用反引號而不是單引號或雙引號括起來，它們支持插值、多行字符串甚至嵌入表達(dá)式。

讓我們分解一下：

// 基本字符串插值
const name = 'Ray';
const age = 20;

console.log(`My name is ${name} and I am ${age} years old.`);

而不是這樣寫：

'My name is ' + name + ' and I am ' + age + ' years old.'

模板字符串讓你使用${}直接將變量注入字符串。這不僅減少了混亂，還提高了可讀性和可維護(hù)性。

// 多行字符串（不需要\n！）
const message = `Hello,
This is a multiline message,
Neatly written with template literals.`;

console.log(message);

以前，你必須使用\n或笨拙地連接行。使用反引號，你可以自然地跨行書寫。

// 模板字符串中的表達(dá)式和函數(shù)調(diào)用
const price = 100;
const discount = 0.2;

console.log(`Final price after discount: ${price - (price * discount)} UGX`);

你甚至可以在里面調(diào)用函數(shù)：

function greet(name) {
return `Hello, ${name.toUpperCase()}!`;
}

console.log(`${greet('ray')}`);

模板字符串讓你的代碼更具表現(xiàn)力和更干凈，特別是在涉及動態(tài)數(shù)據(jù)、API響應(yīng)或日志輸出的場景中。無論你是制作UI消息、生成報告還是調(diào)試輸出，這個特性都為你的字符串增添了優(yōu)雅和力量。

使用reduce()獲取總計：從笨拙循環(huán)到干凈邏輯

當(dāng)處理數(shù)字或?qū)ο髷?shù)組時，計算總數(shù)（無論是價格、分?jǐn)?shù)還是物品數(shù)量）是很常見的。許多開發(fā)者陷入了使用冗長的for循環(huán)或forEach()來完成這一任務(wù)的陷阱。雖然這些方法可行，但它們通常表現(xiàn)力較差且更難維護(hù)。reduce()方法提供了一個強(qiáng)大而優(yōu)雅的替代方案，不僅能精簡你的代碼，還能增強(qiáng)其可讀性和意圖。

// 糟糕的代碼——使用forEach()計算總計
const cart = [
{ item: 'Book', price: 15 },
{ item: 'Pen', price: 5 },
{ item: 'Notebook', price: 10 },
];

let total = 0;

cart.forEach(product => {
total += product.price;
});

console.log(`Total price: ${total} UGX`);

這種方法可行，但在大型代碼庫中顯得冗長。你手動管理總數(shù)，這可能導(dǎo)致錯誤和副作用。

const cart = [
{ item: 'Book', price: 15 },
{ item: 'Pen', price: 5 },
{ item: 'Notebook', price: 10 },
];

const total = cart.reduce((acc, curr) => acc + curr.price, 0);

console.log(`Total price: ${total} UGX`);

以下是reduce()更優(yōu)越的原因：

• acc（累加器）從0開始（reduce()的第二個參數(shù)）。
• 每次迭代時，它將curr.price加到acc上。
• 循環(huán)結(jié)束后，你得到最終總數(shù)——干凈、函數(shù)式且聲明式。

你甚至可以使用箭頭函數(shù)和默認(rèn)值使其更具表現(xiàn)力：

const total = cart.reduce((sum, { price }) => sum + price, 0);

這個版本使用解構(gòu)直接訪問每個物品的價格，使代碼更具可讀性。

所以下次你在數(shù)組中求和時，放棄循環(huán)，改用reduce()。這是一種函數(shù)式編寫邏輯的方式，不僅正確，而且干凈強(qiáng)大。

理解展開運(yùn)算符和數(shù)組合并

展開運(yùn)算符（...）是ES6引入的最優(yōu)雅和多功能特性之一。它允許你將可迭代對象（如數(shù)組或?qū)ο螅┑脑?展開"為單獨(dú)的元素。這在合并數(shù)組、克隆或在函數(shù)調(diào)用中傳遞多個值時特別有用。

基礎(chǔ)數(shù)組合并（干凈現(xiàn)代的方式）

假設(shè)你有兩個數(shù)組：

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

這是使用concat()的老派方法：

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

這可行，但與現(xiàn)代語法相比有點冗長且可讀性較差。

這是使用展開運(yùn)算符的現(xiàn)代方法：

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

新方法更干凈、更具表現(xiàn)力且更容易理解。你實際上是在說："將arr1和arr2的值展開到一個新數(shù)組中。"

在有重復(fù)值的情況下，使用Set和展開運(yùn)算符合并。

假設(shè)數(shù)組有重復(fù)值：

const arr1 = [1, 2, 3, 3];
const arr2 = [3, 4, 5, 6, 6];

如果我們直接合并它們：

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

現(xiàn)在我們有了重復(fù)值。在許多情況下（如ID、標(biāo)簽等），我們想要唯一值。

所以為了移除重復(fù)值，我們可以使用Set和展開運(yùn)算符。

const uniqueMerge = [...new Set([...arr1, ...arr2])];
console.log(uniqueMerge); // [1, 2, 3, 4, 5, 6]

給你一些背景，Set是一個內(nèi)置對象，只存儲唯一值。我們首先使用[...]合并數(shù)組。然后我們用new Set(...)包裝它來過濾掉重復(fù)項，最后，我們將其展開回一個新數(shù)組。

使用展開運(yùn)算符克隆數(shù)組

如果你想復(fù)制一個數(shù)組而不修改原始數(shù)組，使用展開運(yùn)算符：

const original = [10, 20, 30];
const copy = [...original];

copy.push(40);
console.log(original); // [10, 20, 30] ? 未改變
console.log(copy); // [10, 20, 30, 40]

理解剩余運(yùn)算符的相關(guān)性

剩余運(yùn)算符（...）看起來與展開運(yùn)算符完全一樣，但它的工作方式相反。展開運(yùn)算符展開項目，而剩余運(yùn)算符將項目收集到單個數(shù)組或?qū)ο笾小?/p>

它主要用于：

• 函數(shù)參數(shù)
• 數(shù)組解構(gòu)
• 對象解構(gòu)

1. 函數(shù)參數(shù)中的剩余運(yùn)算符

有時，你不知道函數(shù)會接收多少個參數(shù)。與其手動列出它們，不如使用剩余運(yùn)算符將它們打包起來。

function sum(...numbers) {
return numbers.reduce((total, num) => total + num, 0);
}

console.log(sum(1, 2, 3)); // 6
console.log(sum(5, 10, 15, 20)); // 50

解釋：

• ...numbers將所有傳遞的參數(shù)收集到一個數(shù)組中。
• 然后你可以像操作普通數(shù)組一樣操作它（比如使用.reduce()將它們相加）。

2. 數(shù)組解構(gòu)中的剩余運(yùn)算符

當(dāng)你想要單獨(dú)獲取一些值并收集其余值時，剩余運(yùn)算符很方便。

const colors = ['red', 'green', 'blue', 'yellow'];

const [primary, secondary, ...others] = colors;

console.log(primary); // red
console.log(secondary); // green
console.log(others); // ['blue', 'yellow']

解釋：

• 前兩個值被提取出來。
• 剩余運(yùn)算符將其他所有內(nèi)容收集到一個新數(shù)組others中。

3. 對象解構(gòu)中的剩余運(yùn)算符

你也可以從對象中提取特定屬性并收集剩余的屬性。

const user = {
id: 1,
name: 'Ray',
age: 25,
role: 'developer'
};

const { name, ...rest } = user;
console.log(name); // 'Ray'
console.log(rest); // { id: 1, age: 25, role: 'developer' }

解釋： 我們提取出name屬性。 剩余運(yùn)算符將剩余的鍵值對收集到rest中。

雖然剩余（...）和展開（...）運(yùn)算符在語法上看起來相同，但它們的行為和目的根本不同。展開運(yùn)算符用于將數(shù)組或?qū)ο笳归_為單獨(dú)的元素或?qū)傩浴Ｄ阃ǔ谙蚝瘮?shù)傳遞參數(shù)或組合數(shù)組和對象時看到它。相比之下，剩余運(yùn)算符做相反的事情。它用于將多個值收集到單個數(shù)組或?qū)ο笾小Ｋǔ?yīng)用于函數(shù)參數(shù)中以接受不定數(shù)量的參數(shù)，或在解構(gòu)中收集剩余值。可以這樣想：展開向外擴(kuò)展，將結(jié)構(gòu)分開，而剩余向內(nèi)收集，將它們捆綁在一起。這種微妙但強(qiáng)大的區(qū)別是編寫靈活且干凈的JavaScript代碼的關(guān)鍵。

理解JavaScript中的對象數(shù)據(jù)提取

在JavaScript中，對象解構(gòu)是一種簡寫語法，允許你從對象（或數(shù)組中的元素）中提取屬性到獨(dú)立的變量中。這使你的代碼更干凈并減少冗余。

讓我們看一個基本對象：

const me = {
name: 'Ray',
age: 20,
likes: ['football', 'racing']
};

傳統(tǒng)方式（不夠優(yōu)雅）

如果你想訪問值，通常會這樣做：

console.log(me.age); // 20
console.log(me.likes[0]); // 'football'

雖然這完全沒問題，但它可能變得冗長或重復(fù)，特別是當(dāng)你需要多次引用同一屬性時。

現(xiàn)在讓我們使用解構(gòu)來編寫更干凈的代碼

與其重復(fù)寫me.age，你可以這樣解構(gòu)：

const { age } = me;
console.log(age); // 20

你也可以一次提取多個屬性：

const { name, likes } = me;
console.log(name); // 'Ray'
console.log(likes); // ['football', 'racing']

解構(gòu)對象中的數(shù)組

因為likes是一個數(shù)組，我們也可以解構(gòu)它：

const { likes: [first, second] } = me;

console.log(first); // 'football'
console.log(second); // 'racing'

注意我們?nèi)绾问褂脛e名。我們沒有提取likes數(shù)組本身，而是直接將其元素解包到first和second中。

空值合并運(yùn)算符（??）

空值合并運(yùn)算符（??）用于在變量為null或undefined時提供默認(rèn)值。當(dāng)你只想為真正的"空"值回退，而不是為0、''或false等假值時，它特別有用。

沒有空值合并：

const age = 0;
const result = age || 18;
console.log(result); // 18 ? (0是假值，所以回退)

使用空值合并：

const age = 0;
const result = age ?? 18;
console.log(result); // 0 ?

解釋：

• || 對任何假值（0、false、''、null、undefined）都會回退。
• ?? 只對null或undefined回退。

使用+號將字符串轉(zhuǎn)換為整數(shù)

在JavaScript中，一元加號（+）運(yùn)算符可用于快速將字符串轉(zhuǎn)換為數(shù)字。

傳統(tǒng)方法：

const numStr = '42';
const num = parseInt(numStr);
console.log(num); // 42

使用+的簡寫：

const numStr = '42';
const num = +numStr;
console.log(num); // 42

當(dāng)你確定字符串包含有效數(shù)字時，這是一個快速且可讀的技巧。如果不包含，結(jié)果將是NaN。

看下面的代碼：

console.log(+'hello'); // NaN

可選鏈?zhǔn)秸{(diào)用（?.）

可選鏈?zhǔn)秸{(diào)用讓你可以安全地訪問深層嵌套的對象屬性，而不必檢查每一級是否存在。如果引用是null或undefined，它會返回undefined而不是拋出錯誤。

沒有可選鏈?zhǔn)秸{(diào)用：

const user = {};
console.log(user.profile.name); // ? 錯誤：無法讀取未定義的屬性'name'

使用可選鏈?zhǔn)秸{(diào)用：

const user = {};
console.log(user.profile?.name); // ? undefined

你也可以在函數(shù)中使用它：

user.sayHi?.(); // 僅當(dāng)sayHi存在時調(diào)用

這對于處理API數(shù)據(jù)非常有用，其中某些字段可能缺失。

三元運(yùn)算符

三元運(yùn)算符是if/else的簡寫。它遵循以下語法：

condition ? valueIfTrue : valueIfFalse;

給你一些背景，看下面的代碼：

const age = 20;
const canVote = age >= 18 ? 'Yes' : 'No';
console.log(canVote); // "Yes"

這等同于：

let canVote;
if (age >= 18) {
canVote = 'Yes';
} else {
canVote = 'No';
}

使用||設(shè)置默認(rèn)值

邏輯或（||）運(yùn)算符可用于在左側(cè)為假值時分配默認(rèn)值：

const name = userInput || 'Guest';

如果userInput是假值（如null、undefined或''），name將是'Guest'。

邏輯短路

JavaScript還允許你使用&&運(yùn)算符編寫沒有else的簡短if語句。

condition && expression;

例如：

const isLoggedIn = true;
isLoggedIn && console.log('User is logged in');

只有當(dāng)isLoggedIn為true時才會打印。等同于：

if (isLoggedIn) {
console.log('User is logged in');
}

結(jié)論

掌握J(rèn)avaScript的關(guān)鍵在于編寫優(yōu)雅、高效且富有表現(xiàn)力的代碼。這些技巧，從更智能的console.log()實踐和模板字符串，到解構(gòu)、展開/剩余運(yùn)算符的微妙力量以及簡短的條件邏輯，都將幫助你將代碼從功能性提升到強(qiáng)大。

把這些模式看作你武術(shù)腰帶上的工具，每一個都能磨礪你編寫更干凈、更快且更易維護(hù)代碼的能力。無論你是像專業(yè)人士一樣使用console.table()和console.time()進(jìn)行調(diào)試，還是以手術(shù)般的精度合并數(shù)組，你構(gòu)建的每一項技能都會讓你的JavaScript功夫更強(qiáng)大。

現(xiàn)在，像大師一樣去編寫代碼吧。未來的你和你的團(tuán)隊成員會為此感謝你。

想更深入地探索JavaScript的可能性嗎？閱讀Andela的完整指南"掌握J(rèn)avaScript代理和反射的實際應(yīng)用"。