掌握JavaScript數組方法：``map`，`filt filter''和`reste''

JavaScript的數組方法map、filter和reduce用於編寫清晰、函數式的代碼。 1. map用於轉換數組中的每個元素並返回新數組，如將攝氏溫度轉為華氏溫度；2. filter用於根據條件篩選元素並返回符合條件的新數組，如獲取偶數或活躍用戶；3. reduce用於累積結果，如求和或統計頻次，需提供初始值並返回累加器；三者均不修改原數組，可鍊式調用，適用於數據處理與轉換，提升代碼可讀性與功能性。

JavaScript's array methods like map , filter , and reduce are essential tools for writing clean, functional, and readable code. Once you understand how they work and when to use them, you'll find yourself reaching for for loops much less often. Let's break down each method with practical examples and clear explanations.

map : Transform Every Element in an Array

Use map when you want to transform each item in an array and return a new array with the updated values.

It doesn't change the original array — it creates a new one.

Example: Convert temperatures from Celsius to Fahrenheit

 const celsius = [0, 10, 20, 30, 40];

const fahrenheit = celsius.map(temp => (temp * 9/5) 32);

console.log(fahrenheit); // [32, 50, 68, 86, 104]

Key points:

• Always returns a new array of the same length .
• Great for formatting data (eg, transforming API responses).
• Common in React for rendering lists.

? Think of map as a factory line: each item goes in, gets processed, and comes out changed.

filter : Keep Only What You Need

Use filter when you want to select a subset of items based on a condition.

It returns a new array with only the elements that pass the test.

Example: Get only even numbers

 const numbers = [1, 2, 3, 4, 5, 6, 7, 8];

const evens = numbers.filter(num => num % 2 === 0);

console.log(evens); // [2, 4, 6, 8]

Example: Find active users

 const users = [
  { name: 'Alice', active: true },
  { name: 'Bob', active: false },
  { name: 'Charlie', active: true }
];

const activeUsers = users.filter(user => user.active);

console.log(activeUsers);
// [{ name: 'Alice', active: true }, { name: 'Charlie', active: true }]

Key points:

• The returned array can be shorter than the original.
• The callback must return true or false .
• You can chain it with other methods.

?️ filter is perfect when you're searching, cleaning data, or applying user filters in UIs.

reduce : Build Up a Single Value

Use reduce when you want to accumulate a result — like a sum, object, or nested structure — from an array.

It's the most powerful but also the most misunderstood.

Example: Sum all numbers

 const nums = [1, 2, 3, 4];

const sum = nums.reduce((accumulator, current) => accumulator current, 0);

console.log(sum); // 10

How it works:

• accumulator holds the result so far.
• current is the current element.
• The second argument ( 0 ) is the initial value of the accumulator.

Example: Count occurrences (grouping)

 const fruits = ['apple', 'banana', 'apple', 'orange', 'banana', 'apple'];

const count = fruits.reduce((acc, fruit) => {
  acc[fruit] = (acc[fruit] || 0) 1;
  return acc;
}, {});

console.log(count);
// { apple: 3, banana: 2, orange: 1 }

Key points:

• You can return any type: number, object, array, etc.
• Always return the accumulator (or updated state) in the callback.
• Initial value is optional but highly recommended to avoid bugs.

? reduce is like folding a list into a single value — imagine gathering scattered papers into one stack.

Bonus: Chaining Methods Together

One of the best parts? You can chain these methods for powerful data processing.

Example: Get total price of expensive books

 const books = [
  { title: 'JS Guide', price: 25 },
  { title: 'React Tips', price: 30 },
  { title: 'CSS Tricks', price: 15 },
  { title: 'Node Handbook', price: 35 }
];

const total = books
  .filter(book => book.price > 20) // Keep expensive books
  .map(book => book.price) // Extract prices
  .reduce((sum, price) => sum price, 0); // Sum them

console.log(total); // 90

This is readable, functional, and avoids manual loops.

These three methods — map , filter , and reduce — are the building blocks of functional programming in JavaScript. Use them to write clearer, more predictable code. They might feel awkward at first, but once they click, you'll wonder how you ever coded without them.

Basically, just remember:

• map → change each item
• filter → pick some items
• reduce → boil it all down

And don't forget: they all return new arrays (or values), so keep things immutable and safe.

以上是掌握JavaScript數組方法：``map`，`filt filter''和`reste''的詳細內容。更多資訊請關注PHP中文網其他相關文章！