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

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

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

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

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

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

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

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

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

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

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

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

2. 計(jì)算屬性日志記錄

與其逐個(gè)記錄變量，不如使用對(duì)象屬性簡(jiǎn)寫將日志分組到一個(gè)對(duì)象中，使其更易讀：

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自定義樣式

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

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

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

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

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

console.table([student, tutor]);

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

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

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

console.time('loop');

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

console.timeEnd('loop');

// 輸出類似：
loop: 5.384ms

這讓你了解你的邏輯執(zhí)行需要多長(zhǎng)時(shí)間，有助于優(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á)式時(shí)。模板字符串用反引號(hào)而不是單引號(hào)或雙引號(hào)括起來，它們支持插值、多行字符串甚至嵌入表達(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或笨拙地連接行。使用反引號(hào)，你可以自然地跨行書寫。

// 模板字符串中的表達(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)力和更干凈，特別是在涉及動(dòng)態(tài)數(shù)據(jù)、API響應(yīng)或日志輸出的場(chǎng)景中。無論你是制作UI消息、生成報(bào)告還是調(diào)試輸出，這個(gè)特性都為你的字符串增添了優(yōu)雅和力量。

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

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

// 糟糕的代碼——使用forEach()計(jì)算總計(jì)
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`);

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

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()的第二個(gè)參數(shù)）。
• 每次迭代時(shí)，它將curr.price加到acc上。
• 循環(huán)結(jié)束后，你得到最終總數(shù)——干凈、函數(shù)式且聲明式。

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

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

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

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

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

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

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

假設(shè)你有兩個(gè)數(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ǔ)法相比有點(diǎn)冗長(zhǎng)且可讀性較差。

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

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

新方法更干凈、更具表現(xiàn)力且更容易理解。你實(shí)際上是在說："將arr1和arr2的值展開到一個(gè)新數(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是一個(gè)內(nèi)置對(duì)象，只存儲(chǔ)唯一值。我們首先使用[...]合并數(shù)組。然后我們用new Set(...)包裝它來過濾掉重復(fù)項(xiàng)，最后，我們將其展開回一個(gè)新數(shù)組。

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

如果你想復(fù)制一個(gè)數(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)算符展開項(xiàng)目，而剩余運(yùn)算符將項(xiàng)目收集到單個(gè)數(shù)組或?qū)ο笾小?/p>

它主要用于：

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

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

有時(shí)，你不知道函數(shù)會(huì)接收多少個(gè)參數(shù)。與其手動(dòng)列出它們，不如使用剩余運(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ù)收集到一個(gè)數(shù)組中。
• 然后你可以像操作普通數(shù)組一樣操作它（比如使用.reduce()將它們相加）。

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

當(dāng)你想要單獨(dú)獲取一些值并收集其余值時(shí)，剩余運(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']

解釋：

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

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

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

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)算符將剩余的鍵值對(duì)收集到rest中。

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

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

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

讓我們看一個(gè)基本對(duì)象：

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

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

如果你想訪問值，通常會(huì)這樣做：

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

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

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

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

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

你也可以一次提取多個(gè)屬性：

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

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

因?yàn)閘ikes是一個(gè)數(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時(shí)提供默認(rèn)值。當(dāng)你只想為真正的"空"值回退，而不是為0、''或false等假值時(shí)，它特別有用。

沒有空值合并：

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

使用空值合并：

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

解釋：

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

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

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

傳統(tǒng)方法：

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

使用+的簡(jiǎn)寫：

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

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

看下面的代碼：

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

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

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

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

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

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

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

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

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

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

三元運(yùn)算符

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

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è)為假值時(shí)分配默認(rèn)值：

const name = userInput || 'Guest';

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

邏輯短路

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

condition && expression;

例如：

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

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

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

結(jié)論

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

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

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

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