本指南探討了十四種不可或缺的 JavaScript 陣列方法。 我們將概述每種方法並以範例說明其用法。
map()：轉換每個陣列元素並傳回一個包含結果的 new 陣列。原始數組保持不變。 <code class="language-javascript">const numbers = [1, 2, 3];
const doubled = numbers.map(x => x * 2); // [2, 4, 6]
const users = [{ name: 'John' }, { name: 'Jane' }];
const names = users.map(user => user.name); // ['John', 'Jane']</code>filter()：建立一個 new 數組，僅包含透過提供的測試函數的元素。原始數組未受影響。 <code class="language-javascript">const nums = [1, 2, 3, 4, 5, 6];
const evenNums = nums.filter(n => n % 2 === 0); // [2, 4, 6]
const products = [{ price: 10 }, { price: 20 }];
const expensive = products.filter(p => p.price > 15); // [{ price: 20 }]</code>reduce()：將函數累積地應用於陣列元素，以將它們減少到單一值。 將其視為迭代組合元素。 <code class="language-javascript">const sum = [1, 2, 3].reduce((acc, curr) => acc + curr, 0); // 6
const cart = [{ price: 10 }, { price: 20 }];
const total = cart.reduce((sum, item) => sum + item.price, 0); // 30</code>forEach()：為每個陣列元素執行一次提供的函數。 它不傳回值（傳回undefined）。 <code class="language-javascript">[1, 2, 3].forEach(n => console.log(n));
['a', 'b'].forEach((item, index) => console.log(`${index}: ${item}`));</code>find()：傳回滿足所提供的測試函數的第一個元素。 如果沒有元素滿足條件，則回傳undefined.<code class="language-javascript">const users2 = [{ id: 1, name: 'John' }, { id: 2, name: 'Jane' }];
const john = users2.find(user => user.name === 'John'); // { id: 1, name: 'John' }
const nums2 = [1, 2, 3, 4];
const firstEven = nums2.find(n => n % 2 === 0); // 2</code>findIndex()：傳回滿足所提供的測試函數的 first 元素的索引。如果沒有元素滿足條件，則傳回 -1。 <code class="language-javascript">const fruits = ['apple', 'banana', 'cherry']; const bananaIndex = fruits.findIndex(f => f === 'banana'); // 1 const userIndex = users2.findIndex(u => u.id === 2); // 1</code>
some()：測試數組中至少一個元素是否透過所提供函數實現的測試。如果至少有一個元素通過，則回傳 true，否則回傳 false.<code class="language-javascript">const hasEven = [1, 2, 3].some(n => n % 2 === 0); // true const hasExpensive = products.some(p => p.price > 15); // true</code>
every()：測試數組中的所有元素是否透過所提供函數實現的測試。只有在所有元素都通過時才回傳 true，否則回傳 false.<code class="language-javascript">const allPositive = [1, 2, 3].every(n => n > 0); // true</code>
includes()：決定數組的條目中是否包含某個值，並根據情況回傳 true 或 false。 <code class="language-javascript">const numbers2 = [1, 2, 3]; const hasTwo = numbers2.includes(2); // true const hasZero = numbers2.includes(0); // false</code>
indexOf()：傳回在陣列中可以找到給定元素的第一個索引，如果不存在則傳回 -1。 <code class="language-javascript">const colors = ['red', 'blue', 'green'];
const blueIndex = colors.indexOf('blue'); // 1
const yellowIndex = colors.indexOf('yellow'); // -1</code>slice()：提取數組的一部分並將其作為 新 數組返回，而不修改原始數組。 <code class="language-javascript">const arr = [1, 2, 3, 4, 5]; const middle = arr.slice(1, 4); // [2, 3, 4] const last = arr.slice(-2); // [4, 5]</code>
splice()：透過刪除或取代現有元素和/或新增元素來變更陣列的內容。 修改原始陣列.<code class="language-javascript">const months = ['Jan', 'March', 'April']; months.splice(1, 0, 'Feb'); // ['Jan', 'Feb', 'March', 'April'] months.splice(2, 1); // ['Jan', 'Feb', 'April']</code>
sort()：將陣列元素就地進行排序。 預設情況下，它按字串排序；對於數字排序，需要比較函數。 <code class="language-javascript">const numbers = [1, 2, 3];
const doubled = numbers.map(x => x * 2); // [2, 4, 6]
const users = [{ name: 'John' }, { name: 'Jane' }];
const names = users.map(user => user.name); // ['John', 'Jane']</code>join()：透過連接陣列中的所有元素（由指定的分隔符號字串分隔）來建立並傳回一個新字串。 <code class="language-javascript">const nums = [1, 2, 3, 4, 5, 6];
const evenNums = nums.filter(n => n % 2 === 0); // [2, 4, 6]
const products = [{ price: 10 }, { price: 20 }];
const expensive = products.filter(p => p.price > 15); // [{ price: 20 }]</code>掌握這些方法可以顯著增強你的 JavaScript 陣列操作能力。
以上是JavaScript 中最受歡迎的陣列方法，您不想錯過！的詳細內容。更多資訊請關注PHP中文網其他相關文章！
