本文将详细讲解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); // 6const 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'); // 1const userIndex = users2.findIndex(u => u.id === 2); // 1
登录后复制
7. some()
some() 方法测试数组中的至少一个元素是否通过了提供的函数测试。
const hasEven = [1, 2, 3].some(n => n % 2 === 0); // trueconst hasExpensive = products.some(p => p.price > 15); // true
登录后复制
8. every()
every() 方法测试数组中的所有元素是否都通过了提供的函数测试。
const allPositive = [1, 2, 3].every(n => n > 0); // trueconst allCheap = products.every(p => p.price < 15); // false
登录后复制
9. includes()
includes() 方法确定数组是否包含一个特定值。
const numbers2 = [1, 2, 3];const hasTwo = numbers2.includes(2); // trueconst hasZero = numbers2.includes(0); // false
登录后复制
10. indexOf()
indexOf() 方法返回在数组中可以找到一个特定元素的第一个索引;如果找不到,则返回 -1。
const colors = ['red', 'blue', 'green'];const blueIndex = colors.indexOf('blue'); // 1const 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 中最流行的数组方法,您不想错过!的详细内容,更多请关注【创想鸟】其它相关文章!
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。
发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2642340.html