讓我們面對現實：作為開發人員，我們一直在尋找簡化工作流程並節省寶貴的編碼時間的方法。
當一個時尚而高效的解決方案即將出現時，誰願意花幾個小時來處理笨重的程式碼？
今天，我將分享 10 個 JavaScript 技巧——有些是內建的，有些是自訂的——這會讓你想知道如果沒有它們你會如何生活。
太棒了！ 讓我們繼續第一部分。我們將從一個簡單但非常有用的 JavaScript 功能開始。
問題：您正在嘗試存取物件深處的屬性，但不確定鏈中的所有屬性是否都存在。這可能會導致可怕的“無法讀取未定義的屬性”錯誤。
const user = {
// address: { street: "123 Main St" }
};
let street = user.address.street;
console.log(street); // Uncaught TypeError: Cannot read properties of undefined (reading 'street')
古老的痛苦解決方案：在嘗試存取每個屬性之前，您必須編寫一堆嵌套的 if 語句來檢查每個屬性是否存在。
const user = {
// address: { street: "123 Main St" }
};
// The old, painful way:
let street = user && user.address && user.address.street;
console.log(street); // undefined
新的現代解決方案：可選鏈來救援！使用 ?. 時，如果缺少屬性，表達式會短路為未定義，從而防止錯誤。
const user = {
// address: { street: "123 Main St" }
};
// The elegant, modern way:
let street = user?.address?.street;
console.log(street); // undefined:
使用可選連結 (?.)，如果鏈中的任何屬性為 null 或未定義，則表達式會短路並簡單地傳回 undefined，而不是拋出可怕的 TypeError。不再有笨重的 if 語句讓您的程式碼變得混亂！
現實世界範例：
假設您正在從 API 取得數據，並且回應結構可能會有所不同。可選鏈不是編寫多個巢狀檢查，而是提供了一種乾淨簡潔的方式來存取可能存在或不存在的資料。
問題：如果變數為空或未定義，您希望為其指派預設值，但您不想意外覆寫程式碼中可能有效的虛假值，例如 0 或空字串。
舊的痛苦解決方案：使用邏輯或運算符 (||) 設定預設值可能會導致這些意想不到的後果。
const user = { name: 0 };
// The old way (potentially problematic):
let postCount = user.name || "No posts yet!";
console.log(postCount); // Outputs "No posts yet!", even though 0 might be a valid post count.
新的現代解決方案： 無效合併運算子 (??) 拯救了世界！僅當左側操作數嚴格為 null 或未定義時，它才提供預設值。
const user = { name: 0 };
// The new, improved way:
let postCount = user.name ?? "No posts yet!";
console.log(postCount); // Outputs 0, respecting the actual value of user.name
我們值得信賴的??僅當左側運算元為 null 或未定義時才介入，確保僅在需要時使用預設值。
現實世界範例：
想像一個使用者個人資料，其中 0 是「貼文數量」的有效輸入。使用||設定預設值會錯誤地將 0 替換為預設值。這 ？ ？運算符避免了這個陷阱，在這種情況下尊重 0 的真正含義。
問題：您有一個對象，並且您希望確保其屬性在創建後不會被意外更改。這對於應保持不變的配置物件或資料尤其重要。
const colors = {
primary: "blue",
secondary: "green"
};
colors.primary = "red"; // Accidental modification is too easy!
console.log(colors.primary); // Outputs "red" - the object was modified
解： Object.freeze() 讓你的物件堅如磐石！它可以防止對其屬性進行任何進一步修改。
const colors = {
primary: "blue",
secondary: "green"
};
Object.freeze(colors);
colors.primary = "red"; // This will silently fail
console.log(colors.primary); // Still outputs "blue"
Object.freeze() 取得一個物件並使其不可變。任何更改其屬性的嘗試都將被默默忽略。這就像將您的物品放入展示櫃中 – 您可以看，但不能觸摸！
現實世界範例：
假設您將組態設定儲存在一個物件中。使用 Object.freeze() 可確保這些設定在整個應用程式中保持不變，從而防止可能導致意外行為的意外修改。
問題：您需要從陣列中提取特定值並將它們指派給各個變數。使用索引的傳統數組存取可能會感覺有點笨拙，尤其是對於較長的數組。
舊的痛苦解決方案：您最終會透過索引存取元素，這可能會降低可讀性並且更容易出錯，尤其是當陣列變得更大時。
const rgb = [255, 128, 0]; const red = rgb[0]; const green = rgb[1]; const blue = rgb[2]; console.log(red, green, blue); // 255 128 0
新的現代解決方案：陣列解構提供了一種優雅且可讀的方式將數組元素「解壓縮」為不同的變數。
const rgb = [255, 128, 0]; const [red, green, blue] = rgb; console.log(red, green, blue); // 255 128 0
透過在賦值的左側使用方括號 []，我們創建了一個反映數組結構的模式。然後 JavaScript 巧妙地將陣列中的對應值指派給變數。
現實範例：
Imagine you have an array representing a user’s information: [name, age, city]. With destructuring, you can easily extract these values into separate variables for more readable and maintainable code.
Problem: You’re writing a function, and you want to provide default values for parameters in case the caller doesn’t supply them.
Old Painful Solution: You’d have to check if the arguments were undefined within the function body and assign default values manually.
function greet(name, message) {
const userName = name || "Stranger";
const greeting = message || "Hello there!";
console.log(`${greeting}, ${userName}!`);
}
greet(); // Hello there!, Stranger!
greet("Alice"); // Hello there!, Alice!
greet("Bob", "Good morning"); // Good morning, Bob!
New Modern Solution: Default parameters let you specify default values for function parameters directly within the function definition.
By assigning values to parameters in the function signature (name = "Stranger"), we tell JavaScript to use those values if the corresponding arguments are not provided when the function is called.
Real-World Example:
Consider a function that calculates the area of a rectangle. You could set default values for width and height to 1, so if the function is called without arguments, it returns the area of a unit square.
Problem: You want to create more powerful and flexible string formatting capabilities beyond what’s offered by basic template literals. You might need custom parsing, escaping, or data transformations within your string construction.
Old Painful Solution: You’d rely on a combination of string concatenation, helper functions, and potentially complex logic to achieve the desired results.
function highlight(text, name) {
// Find the index of the placeholder within the text
const placeholderIndex = text.indexOf("%name%");
if (placeholderIndex !== -1) {
// Replace the placeholder with the actual name
return text.substring(0, placeholderIndex) + name + text.substring(placeholderIndex + 6);
} else {
return text;
}
}
const name = "Alice";
const message = highlight("Welcome, %name%!", name);
console.log(message); // "Welcome, Alice!"
New Modern Solution: Tagged template literals allow you to define custom functions (called “tag functions”) that can process template literal strings before they’re interpolated.
function highlight(strings, ...values) {
let result = '';
for (let i = 0; i < strings.length; i++) {
result += strings[I];
if (values[i]) {
result += `<span class="highlight">${values[i]}</span>`;
}
}
return result;
}
const name = "Alice";
const message = highlight`Welcome, ${name}!`;
console.log(message); // "Welcome, <span class="highlight">Alice</span>!"
Old Solution: We relied on a separate function (highlight) that took the text and the value to be inserted as separate arguments. We manually searched for a placeholder (%name%) and replaced it. This approach is less flexible, more error-prone (what if the placeholder is wrong?), and doesn't scale well for more complex formatting.
New Solution: With tagged template literals, the highlight function receives the string parts and the interpolated values as separate arguments. This allows for much cleaner manipulation and transformation of the string based on its structure and the provided values.
Real-World Example:
Creating Domain-Specific Languages (DSLs): Build custom templating engines, query builders, or even mini-languages within your JavaScript code.
Internationalization (i18n): Handle translations and localized string formatting based on user preferences.
Security: Implement robust sanitization and escaping mechanisms for user-generated content within strings.
Problem: You need fine-grained control over object operations, such as property access, assignment, function calls, or even object construction. You might want to implement custom validation, logging, or even modify the behavior of existing objects without directly changing their code.
Old Painful Solution: You’d often resort to:
Wrapper Functions: Creating functions that encapsulate object interactions, adding overhead and potentially obscuring the underlying object’s interface.
Overriding Methods: Modifying object prototypes, which can lead to unexpected side effects and conflicts, especially in larger codebases.
const user = {
name: "Alice",
age: 30,
};
function validateAge(age) {
if (age < 0 || age > 120) {
throw new Error("Invalid age value!");
}
return age;
}
// Using a wrapper function to enforce validation
function setUserAge(user, newAge) {
user.age = validateAge(newAge);
}
setUserAge(user, 35); // Works
setUserAge(user, -5); // Throws an error
New Modern Solution: Proxy objects act as intermediaries, intercepting fundamental operations on an object and giving you the power to customize how those operations are handled.
const user = {
name: "Alice",
age: 30,
};
const userProxy = new Proxy(user, {
set: function (target, property, value) {
if (property === "age") {
if (value < 0 || value > 120) {
throw new Error("Invalid age value!");
}
}
// Update the original object's property
target[property] = value;
return true; // Indicate success
},
});
userProxy.age = 35; // Works
userProxy.age = -5; // Throws an error
We create a Proxy object, passing in the target object (user) and a handler object.
The handler object defines “traps” for various operations. In this case, we use the set trap to intercept property assignments.
Inside the set trap, we perform custom validation for the age property.
If the validation passes, we update the original object’s property using target[property] = value.
Real-World Example:
Data Validation and Sanitization: Enforce data integrity rules before saving objects to a database or sending them over a network.
Change Tracking: Log or react to changes made to an object’s properties.
Lazy Loading: Defer loading expensive object properties until they are actually accessed.
Problem: You need to perform sophisticated transformations or calculations on arrays, going beyond simple aggregation like finding the sum or maximum value.
Old Painful Solution: You might resort to:
Imperative Loops: Writing verbose for or while loops, often with nested logic and temporary variables, making the code harder to read and maintain.
Specialized Functions: Creating separate functions for each specific array transformation, leading to code duplication.
const orders = [
{ product: "Shirt", quantity: 2, price: 15 },
{ product: "Shoes", quantity: 1, price: 50 },
{ product: "Hat", quantity: 3, price: 10 },
];
// Calculate the total value of all orders (imperative approach)
let totalValue = 0;
for (let i = 0; i < orders.length; i++) {
totalValue += orders[i].quantity * orders[i].price;
}
console.log(totalValue); // Output: 110
New Modern Solution: The reduce() method provides a versatile way to iterate over an array and "reduce" it to a single value, applying a callback function to each element and accumulating a result.
const orders = [
{ product: "Shirt", quantity: 2, price: 15 },
{ product: "Shoes", quantity: 1, price: 50 },
{ product: "Hat", quantity: 3, price: 10 },
];
// Calculate the total value of all orders using reduce
const totalValue = orders.reduce((accumulator, order) => {
return accumulator + order.quantity * order.price;
}, 0); // Initial value of the accumulator
console.log(totalValue); // Output: 110
reduce() takes two arguments: a callback function and an optional initial value for the accumulator.
The callback function receives the accumulator (which starts with the initial value or the first element) and the current element.
In each iteration, the callback returns the updated accumulator, which is then passed to the next iteration.
The final value returned by reduce() is the accumulated result.
Real-World Example:
const products = [
{ name: "Apple", category: "Fruit" },
{ name: "Banana", category: "Fruit" },
{ name: "Carrot", category: "Vegetable" },
];
const groupedProducts = products.reduce((groups, product) => {
const category = product.category;
if (!groups[category]) {
groups[category] = [];
}
groups[category].push(product);
return groups;
}, {});
console.log(groupedProducts);
// Output: { Fruit: [{...}, {...}], Vegetable: [{...}] }
const nestedArray = [1, [2, 3], [4, [5, 6]]];
const flatArray = nestedArray.reduce(
(acc, current) => acc.concat(Array.isArray(current) ? current.flat() : current),[]);
console.log(flatArray); // Output: [1, 2, 3, 4, 5, 6]
const numbers = [1, 2, 2, 3, 4, 4, 5];
const uniqueNumbers = numbers.reduce((unique, number) => {
return unique.includes(number) ? unique : [...unique, number];
}, []);
console.log(uniqueNumbers); // Output: [1, 2, 3, 4, 5]
Mastering reduce() unlocks a higher level of array manipulation, allowing you to express complex transformations concisely and elegantly.
Problem: You need to copy arrays, combine them, or insert elements at specific positions. Similarly, you might want to create copies of objects with modified properties. Doing this manually can be tedious and involve loops or multiple lines of code.
Old Painful Solution: You’d use combinations of slice(), concat(), or Object.assign() for these tasks:
Arrays:
const numbers1 = [1, 2, 3]; const numbers2 = [4, 5, 6]; // Concatenating arrays const combinedArray = numbers1.concat(numbers2); // Inserting the number 0 at index 2 (the old way) const newArray = numbers1.slice(0, 2).concat([0], numbers1.slice(2));
Objects:
const product = {
name: "Phone",
price: 499,
};
// Creating a modified copy
const updatedProduct = Object.assign({}, product, { price: 599 });
New Modern Solution: The spread syntax (...) provides a more concise and flexible way to work with arrays and objects:
Arrays:
const numbers1 = [1, 2, 3]; const numbers2 = [4, 5, 6]; // Concatenating arrays const combinedArray = [...numbers1, ...numbers2]; // Inserting an element const newArray = [...numbers1.slice(0, 2), 0, ...numbers1.slice(2)];
Objects:
const product = {
name: "Phone",
price: 499,
};
// Creating a modified copy
const updatedProduct = { ...product, price: 599 };
Spread Syntax with Arrays: When used with arrays, ... expands the elements of an array in place.
Spread Syntax with Objects: When used with objects, ... expands the key-value pairs of an object.
Why It’s Easier:
Conciseness: Spread syntax significantly reduces the code required for common array and object operations.
Readability: The code becomes more declarative and easier to understand.
Real-World Example:
// Example in a React component
this.setState(prevState => ({
...prevState,
cartItems: [...prevState.cartItems, newItem],
}));
Spread syntax is a versatile tool that simplifies array and object manipulation, making your code more concise, readable, and maintainable.
Problem: You often need to write short, anonymous functions for event handlers, callbacks, or array methods, but the traditional function syntax can feel a bit verbose in these cases.
Old Painful Solution: You’d use the function keyword to define anonymous functions:
// Example with an array method
const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map(function(number) {
return number * 2;
});
console.log(doubledNumbers); // Output: [2, 4, 6, 8, 10]
New Modern Solution: Arrow functions (=>) provide a more compact syntax for writing functions, especially for short function bodies:
const numbers = [1, 2, 3, 4, 5]; const doubledNumbers = numbers.map((number) => number * 2); console.log(doubledNumbers); // Output: [2, 4, 6, 8, 10]
Syntax: An arrow function is defined with parentheses for parameters (or a single parameter without parentheses), followed by the arrow (=>), and then the function body.
Implicit Return: If the function body contains a single expression, the result of that expression is implicitly returned without needing the return keyword.
Lexical this Binding: Arrow functions don't have their own this binding. They inherit this from the surrounding scope, which can be very useful in certain situations (we'll explore this in a later example).
Why It’s Easier:
Shorter Syntax: Arrow functions significantly reduce the code required to define simple functions.
Improved Readability: The code becomes more concise and easier to follow, especially when used with array methods.
Real-World Example:
const button = document.getElementById("myButton");
button.addEventListener("click", () => {
console.log("Button clicked!");
});
This is just the beginning! The world of JavaScript is vast. ?
Keep experimenting, keep learning, and never be afraid to break things (in a safe coding environment, of course! ?).
Want to stay connected? Follow me on Instagram @codingwithjd for more coding tips, tricks, and even some bad programming jokes. ?
以上是JavaScript 駭客會讓你說「我這輩子你去哪了？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
