JavaScript 中最流行的数组方法，您不想错过！-js教程-PHP中文网

JavaScript 中最流行的数组方法，您不想错过！

碧海醫心

发布： 2025-01-20 08:08:13

原创

740人浏览过

javascript 中最流行的数组方法，您不想错过！

本文将详细讲解JavaScript中一些最常用的数组方法。

方法列表：

map()
filter()
reduce()
forEach()
find()
findIndex()
some()
every()
includes()
indexOf()
slice()
splice()
sort()
join()

1. map()

map() 方法创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。原始数组保持不变。

立即学习“Java免费学习笔记（深入）”；

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']

登录后复制

2. filter()

filter() 方法创建一个新数组, 其中包含通过提供的函数测试的所有元素。原始数组保持不变。

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 }]

登录后复制

3. reduce()

reduce() 方法对数组中的每个元素执行一个 reducer 函数，将其结果汇总为单个返回值。

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

登录后复制

4. forEach()

forEach() 方法对数组的每个元素执行一次提供的函数。它不返回值。

[1, 2, 3].forEach(n => console.log(n));
['a', 'b'].forEach((item, index) => console.log(`${index}: ${item}`));

登录后复制

5. find()

find() 方法返回数组中满足提供的测试函数的第一个元素的值。如果没有找到这样的元素，则返回 undefined。

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

登录后复制

6. findIndex()

findIndex() 方法返回数组中满足提供的测试函数的第一个元素的索引。如果没有找到这样的元素，则返回 -1。

const fruits = ['apple', 'banana', 'cherry'];
const bananaIndex = fruits.findIndex(f => f === 'banana'); // 1
const userIndex = users2.findIndex(u => u.id === 2);      // 1

登录后复制

7. some()

some() 方法测试数组中的至少一个元素是否通过了提供的函数测试。

const hasEven = [1, 2, 3].some(n => n % 2 === 0);         // true
const hasExpensive = products.some(p => p.price > 15);     // true

登录后复制

8. every()

every() 方法测试数组中的所有元素是否都通过了提供的函数测试。

const allPositive = [1, 2, 3].every(n => n > 0);          // true
const allCheap = products.every(p => p.price < 15);       // false

登录后复制

9. includes()

includes() 方法确定数组是否包含一个特定值。

const numbers2 = [1, 2, 3];
const hasTwo = numbers2.includes(2);                       // true
const hasZero = numbers2.includes(0);                      // false

登录后复制

10. indexOf()

indexOf() 方法返回在数组中可以找到一个特定元素的第一个索引；如果找不到，则返回 -1。

const colors = ['red', 'blue', 'green'];
const blueIndex = colors.indexOf('blue');                  // 1
const yellowIndex = colors.indexOf('yellow');              // -1

登录后复制

11. slice()

slice() 方法返回一个新的数组对象，该对象包含从开始到结束（不包括结束）的选定元素。原始数组保持不变。

const arr = [1, 2, 3, 4, 5];
const middle = arr.slice(1, 4);                           // [2, 3, 4]
const last = arr.slice(-2);                               // [4, 5]

登录后复制

12. splice()

splice() 方法通过从数组中添加/删除元素来更改内容。此方法会修改原始数组。

const months = ['jan', 'march', 'april'];
months.splice(1, 0, 'feb');                               // ['jan', 'feb', 'march', 'april']
months.splice(2, 1);                                      // ['jan', 'feb', 'april']

登录后复制

13. sort()

sort() 方法对数组的元素进行排序，并返回数组。此方法会修改原始数组。

const unsorted = [3, 1, 4, 1, 5];
unsorted.sort((a, b) => a - b);                          // [1, 1, 3, 4, 5]
const names2 = ['zack', 'alice', 'bob'];
names2.sort();                                           // ['alice', 'bob', 'zack']

登录后复制

14. join()

join() 方法将数组元素连接成一个字符串。

const elements = ['Fire', 'Air', 'Water'];
const result = elements.join();                          // "Fire,Air,Water"
const result2 = elements.join(' - ');                    // "Fire - Air - Water"

登录后复制

希望以上解释能够帮助您更好地理解和使用这些JavaScript数组方法。

以上就是JavaScript 中最流行的数组方法，您不想错过！的详细内容，更多请关注php中文网其它相关文章！